universal-wechat-uniapp-241007/components/user/productList.vue

<template>
	<view class="list">
		<view class="item"
		v-for="(item, index) in productList"
		@click="$utils.navigateTo('/pages_order/product/productDetail?id=' + item.id)"
		:key="index">
			<image 
			class="image"
			:src="item.image ? item.image.split(',')[0] : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg'" mode="aspectFill"></image>
			<view class="info">
				<view class="title text-ellipsis">
					{{ item.name }}
				</view>
				<!-- <view class="price">
					<text>￥{{ item.originalPrice }}</text>元/起
				</view>
				<view class="favorable" v-if="item.goodsSku">
					<view class="t">
						限时优惠
					</view>
					<view class="p">
						￥{{ item.goodsSku.price }}
					</view>
				</view> -->
				
				<view class="price">
					现价<text>￥{{ item.price }}</text>元
				</view>
				<view class="del">
					原价￥{{ item.oldPrice }}
				</view>
				<!-- <view class="favorable" v-if="item.oldPrice">
					<view class="t">
						原价
					</view>
					<view class="p">
						￥{{ item.oldPrice }}
					</view>
				</view> -->
				<view class="favorable" v-if="item.points">
					<view class="t">
						积分兑换
					</view>
					<view class="p">
						{{ item.points }}
					</view>
				</view>
				
				<view class="num">
					{{ item.shopId }}
				</view>
				
				<!-- <view class="num">
					已售卖{{ item.soldNum || 0 }}+件
				</view> -->
			</view>
			<view class="btn">
				<uv-icon name="shopping-cart"
				color="#fff"></uv-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"productList",
		props : ['productList'],
		data() {
			return {
				
			};
		},
		methods : {
			
		},
	}
</script>

<style scoped lang="scss">
.list{
	display: flex;
	flex-wrap: wrap;
	.item{
		position: relative;
		width: 300rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;
		&:nth-child(odd){
			margin-right: 20rpx;
		}
		.image{
			width: 300rpx;
			height: 250rpx;
			border-radius: 20rpx;
		}
		.info{
			font-size: 26rpx;
			.title{
				font-size: 28rpx;
			}
			.price{
				color: $uni-price-color;
				margin-top: 6rpx;
				text{
					font-size: 30rpx;
					font-weight: 900;
				}
			}
			.del{
				font-size: 22rpx;
				color: #888;
				font-weight: 500;
				text-decoration : line-through;
			}
			.favorable{
				display: flex;
				// background-image: url(/static/image/product/favorable.png);
				background-size: 100% 100%;
				width: fit-content;
				font-size: 20rpx;
				margin-top: 6rpx;
				border-radius: 10rpx;
				overflow: hidden;
				background-color: #ff000011;
				.t{
					padding: 5rpx 10rpx;
				}
				.p{
					padding: 5rpx 10rpx;
					color: #fff;
					background-color: #F03F25;
					height: 100%;
				}
			}
			.num{
				margin-top: 6rpx;
				font-size: 22rpx;
				color: #888;
			}
		}
		.btn{
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			padding: 10rpx;
			border-radius: 50%;
			background-color: $uni-color;
		}
	}
}
</style>