fanghuayuexuan/pages/home/components/home-goods-item-test.vue

<template>
	<view class="px-12 mt-14">
		<view v-for="(product, index) in productList" :key="index" class="bg-white pb-10 rounded-8 overflow-hidden mb-14">
			<image class="w-all h-195" :src="product.firstImage || 'https://cdn.his.cdwjyyh.com/images/img.png'"></image>
			<view class="goods-count px-12 flex items-center justify-between text-white w-all h-32 rounded-6 mt--15 zi-2 relative">
				<view class="fw-500 fs-18">热卖爆品</view>
				<view class="fw-400 fs-13">已售{{ product.sales || '0' }}件</view>
			</view>
			<view class="fw-500 fs-13 text-333333 mt-11 px-12">
				{{ product.title || '产品名称' }}
			</view>
			<view class="flex items-center justify-between mt-8 px-12">
				<view class="flex items-end gap-8">
					<view class="text-FA341E">
						<text class="fs-12 fw-600">¥</text>
						<text class="fs-24 fw-600">{{ splitPrice(product.price).integer || '0' }}</text>
						<text class="fs-15 fw-600">{{ splitPrice(product.price).decimal || '0' }}</text>
					</view>
				</view>
				<view class="flex items-center w-110 h-34 rounded-34 overflow-hidden">
					<view class="w-44 h-all flex items-center justify-center bg-38D97D">
						<image class="w-20 h-20" src="https://cdn.his.cdwjyyh.com/images/shopping_car_icon.png"></image>
					</view>
					<view class="flex-1 h-all flex items-center justify-center bg-02B176 fw-500 text-white fs-14">
						去购买
					</view>
				</view>
			</view>
		</view>
		<view v-if="productList.length === 0" class="bg-white pb-10 rounded-8 overflow-hidden mb-14 p-12">
			<view class="fw-500 fs-13 text-333333">暂无商品数据</view>
		</view>
	</view>
</template>
<script>
export default {
	props: {
		productList: {
			type: Array,
			default: () => []
		}
	},
	mounted() {
		console.log("测试组件 - 商品列表", this.productList);
		console.log("测试组件 - 商品列表长度", this.productList.length);
	},
	watch: {
		productList: {
			immediate: true,
			handler(newVal) {
				console.log("测试组件 - 商品列表变化", newVal);
				console.log("测试组件 - 商品列表长度变化", newVal.length);
			}
		}
	},
	methods: {
		// 分割价格
		splitPrice(price) {
			const priceStr = parseFloat(price).toFixed(2).toString();
			return {
				integer: priceStr.split('.')[0],
				decimal: priceStr.split('.')[1]
			};
		}
	}
};
</script>
<style scoped lang="scss">
.goods-count {
	background: linear-gradient(to right, #FA341E, #F4A007);
}
</style>