goufangtong3/components/gf-goods/gf-goods.vue

<template>
	<view class="gf-goods">
		<view :class="type == 1 ? 'row-item u-flex' : 'col-item'" @click="toinfo">
			<view class="item-img">
				<image :src="data.logo" class="logo" mode="aspectFill"></image>
				<view class="logo-look u-flex">
					<u-icon name="eye-fill" size="28" color="#fff"></u-icon>
					<text class="text">{{getview(data.page_view || 0)}}</text>
				</view>
			</view>

			<view class="item-box">
				<view class="item-name u-line-1">
					{{data.name}}
				</view>
				<view class="item-tips u-flex">
					<text class="u-line-1" style="white-space: nowrap;" v-if="data.house_type">{{data.house_type.join('·')}}·</text>
					<text style="white-space: nowrap;">{{data.house_min_area || 0}}-{{data.house_max_area || 0}}㎡</text>
				</view>
				<view class="item-tips">
					{{data.area}}
				</view>
				<view class="price-box u-flex">
					<text>参考均价</text>
					<text v-if="Number(data.avg_price)">{{data.avg_price}}元/㎡</text>
					<text v-else>{{data.avg_price}}</text>
				</view>
				<view class="u-flex label-box u-flex-wrap">
					<text v-for="(item,index) in data.trait" :key="index" v-if="index < 2" :style="{color:color[index % 5],border:`2rpx solid ${color[index % 4]}`}">{{item}}</text>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		props: {
			// b布局1独占一行2一行两个
			type: {
				type: [Number, String],
				default: 2
			},
			data: {
				type: Object,
				default () {
					return {
						area: "鹿城区",
						avg_price: "27412",
						house_max_area: 212.06,
						house_min_area: 116.8,
						house_type: ["三房两厅两卫", "四房两厅三卫", "四房两厅两卫", "四房两厅四卫"],
						id: 1,
						logo: "https://shujuhuifu.oss-cn-beijing.aliyuncs.com/af20f05b337db210/1c354234c4e49d6c.jpg",
						name: "国鸿中心",
						trait: ["超级综合体", "一线江景", "约350米摩天超高层", "内外双公园"]
					}
				}
			}
		},
		data() {
			return {

			}
		},
		onLoad() {

		},
		computed: {
			color() {
				return this.$color
			}
		},
		methods: {
			getview(count) {
				if (count > 10000) {
					return Number((count / 10000).toFixed(2)) + 'w'
				}
				if (count > 1000) {
					return Number((count / 1000).toFixed(2)) + 'k'
				}
				return count
			},
			toinfo() {
				uni.navigateTo({
					url: "/pages/index/houses-info?id=" + this.data.id
				})
			}
		}
	}
</script>

<style lang="scss">
	.gf-goods {
		.row-item {
			margin-bottom: 32rpx;

			.item-img {
				width: 280rpx;
				height: 240rpx;
				margin-right: 20rpx;
				border-radius: 20rpx;
				position: relative;
				overflow: hidden;

				.logo-look {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 280rpx;
					height: 52rpx;
					background: rgba(0, 0, 0, 0.3);
					padding: 0 20rpx;

					.text {
						font-size: 20rpx;
						font-family: SourceHanSansSC-Heavy, SourceHanSansSC;
						font-weight: 800;
						color: rgba(256, 256, 256, 0.7);
						margin-left: 12rpx;
					}
				}

				.logo {
					width: 280rpx;
					height: 240rpx;
				}
			}

			.item-box {
				flex: 1;
				min-width: 1rpx;

				.label-box {
					text {
						margin-right: 10rpx;
						padding: 0 12rpx;
						line-height: 40rpx;
						height: 40rpx;
						background: #F5F5F5;
						border-radius: 8rpx;
						font-size: 18rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						white-space: nowrap;
					}
				}

				.price-box {
					margin-bottom: 8rpx;

					text:first-child {
						font-size: 20rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						margin-right: 8rpx;
					}

					text:last-child {
						font-size: 32rpx;
						font-family: DINAlternate-Bold, DINAlternate;
						font-weight: bold;
						color: #FF3B30;
					}
				}

				.item-name {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #131415;
					margin: 10rpx 0;
				}

				.item-tips {
					font-size: 18rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					margin-bottom: 12rpx;
				}
			}
		}

		.col-item {
			width: 320rpx;
			background: #F8FBFF;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			padding-bottom: 24rpx;

			.item-box {
				padding: 0 20rpx;

				.label-box {
					text {
						margin-right: 10rpx;
						padding: 0 12rpx;
						line-height: 40rpx;
						height: 40rpx;
						background: #F5F5F5;
						border-radius: 8rpx;
						font-size: 18rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}

				.price-box {
					margin-bottom: 8rpx;

					text:first-child {
						font-size: 20rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						margin-right: 8rpx;
					}

					text:last-child {
						font-size: 32rpx;
						font-family: DINAlternate-Bold, DINAlternate;
						font-weight: bold;
						color: #FF3B30;
					}
				}

				.item-name {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #131415;
					margin: 10rpx 0;
				}

				.item-tips {
					font-size: 18rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					margin-bottom: 12rpx;
				}
			}

			.item-img {
				width: 320rpx;
				height: 240rpx;
				border-radius: 20rpx;
				overflow: hidden;
				position: relative;

				.logo-look {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 320rpx;
					height: 52rpx;
					background: rgba(0, 0, 0, 0.3);
					padding: 0 20rpx;

					.text {
						font-size: 20rpx;
						font-family: SourceHanSansSC-Heavy, SourceHanSansSC;
						font-weight: 800;
						color: rgba(256, 256, 256, 0.7);
						margin-left: 12rpx;
					}
				}

				.logo {
					width: 320rpx;
					height: 240rpx;
				}
			}
		}
	}
</style>