baiyuApp/pages_mall/components/GoodsCard.vue

<template>
	<view class="goods-card" @click="showProduct(item)">
		<view class="img-wrap">
			<image class="img" :src="item.image" mode="aspectFill"></image>
			<view class="tag-row" v-if="tagList && tagList.length > 0">
				<text class="tag-chip" v-for="(t, i) in tagList" :key="i">{{ t }}</text>
			</view>
		</view>
		<view class="info">
			<view class="title line2">{{ item.productName }}</view>
			<view class="x-bc">
				<view class="price-row">
					<text class="unit"v-if="showPrice">¥</text>
					<text class="price" v-if="showPrice">{{item.price != null ? item.price : item.payPrice || 0 }}</text>
					<text class="ot-price" v-if="item.otPrice != null">原价¥{{item.otPrice }}</text>
				</view>
				<view class="meta-row" v-if="item.sales != null || item.positiveRating != null">
					<text class="sales" v-if="item.sales != null">已售{{ item.sales }}</text>
					<text v-if="item.positiveRating">I</text>
					<text class="good-rate" v-if="item.positiveRating != null">好评{{ item.positiveRating }}%</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'GoodsCard',
	props: {
		item: { type: Object, required: true },
		showPrice: { type: Boolean, default: true },
		defaultImg: {
			type: String,
			default: 'https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/no-img.png'
		}
	},
	computed: {
		tagList() {
			const item = this.item
			if (!item) return []
			if (Array.isArray(item.tagList)) return item.tagList
			if (Array.isArray(item.tagNames)) return item.tagNames
			if (Array.isArray(item.tags)) return item.tags.map(t => typeof t === 'string' ? t : (t.tagName || t.name))
			if (item.tag) return [item.tag]
			return []
		}
	},
	methods:{
		showProduct(item) {
			uni.navigateTo({ url: '/pages/shopping/productDetails?productId=' + item.productId })
		}
	}
};
</script>

<style lang="scss" scoped>
.goods-card {
	width: 100%;
	background: #fff;
	border-radius: 16rpx;
	overflow: hidden;
	box-sizing: border-box;
	display: flex;
	flex-direction:column;
	align-items: stretch;
}
.img-wrap {
	width: 100%;
	height: 394rpx;
	flex-shrink: 0;
	background: #f5f5f5;
	position: relative;
}
.img {
	width: 100%;
	height: 100%;
}
.info {
	flex: 1;
	padding: 20rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: 0;
}
.tag-row {
	position: absolute;
	bottom:0;
	display: flex;
	flex-wrap: wrap;
	gap: 12rpx;
	padding: 0 12rpx;
	margin-bottom: 12rpx;
}
.tag-chip {
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 30rpx;
	color: #AA4726;
	line-height: 42rpx;
	background: #FFF4F1;
	padding: 4rpx 12rpx;
	border-radius: 6rpx;
}
.title {
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 36rpx;
	color: rgba(0,0,0,0.85);
	line-height: 50rpx;
}
.line2 {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.price-row {
	display: flex;
	align-items: baseline;
	gap: 12rpx;
	margin-top: 8rpx;
}
.unit{
	font-weight: 600;
	font-size: 28rpx;
	color: #FF233C;
}
.price {
	font-size: 44rpx;
	font-weight: 600;
	color: #FF233C;
}
.ot-price {
	font-size: 28rpx;
	color: #999;
	text-decoration: line-through;
}
.meta-row {
	display: flex;
	align-items: center;
	gap: 8rpx;
	margin-top: 8rpx;
	font-size: 28rpx;
	color: #999;
}
// .sales,
// .good-rate {
// 	font-size: 28rpx;
// 	color: #999;
// }
.sales{
	// border-right: 1rpx solid #e5e5e5; /* 右侧竖线 */
	// padding-right: 14rpx; /* 竖线与文字的间距 */
}
</style>