shop-uniapp-240426/components/product/productFlashSales.vue

<template>
	<view class="productFlashSales">
		<u-scroll-list class="productList">
			<view class="produce-item"
			v-for="(item,index) in list"
			:key="index"
			@click="goProduct(item)"
			>
				<view class="">
					<image
					mode="aspectFill"
					:src="item.image ? item.image.split(',')[0] : ''"
					alt="" class="img"/>
				</view>
				<view class="title">
					{{ item.title }}
				</view>
				<view>
					<text class="price">{{ item.price }}</text>
					<text class="oldPrice" v-if="item.oldPrice">{{ item.oldPrice }}</text>
				</view>
			</view>
		</u-scroll-list>
		
	</view>
</template>

<script>
	export default {
		name:"productFlashSales",
		props : {
			list : {
				default : [],
			}
		},
		data() {
			return {
				
			};
		},
		methods : {
			goProduct(e){
				uni.navigateTo({
					url: '/pages/productDetail/productDetail?id=' + e.id
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.productFlashSales{
	display: flex;
    flex-wrap: wrap;
	::v-deep .u-scroll-list__indicator {
	    display: none !important;
	}
	.productList{
		width: 100%;
		.produce-item{
			flex-shrink: 0;
			width: 33%;
			box-sizing: border-box;
			background-color: #fff;
			padding: 10px;
			.img{
				width: 100%;
				height: 220rpx;
			}
			.title{
				font-size: 23rpx;
				line-height: 2em;
				text-overflow: ellipsis;
				display: -webkit-box; 
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1; 
				overflow: hidden;
			}
			.price{
				font-size: 29rpx;
				padding-right: 8px;
				color: #E01717;
			}
			.oldPrice{
				font-size: 20rpx;
				text-decoration: line-through;
				color: #B8B8B8;
			}
		}
	}
}
</style>