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

<template>
	<view class="product-list-container">
		<view class="list">
			<view class="item"
			v-for="(item, index) in productList"
			@click="$utils.navigateTo('/pages_order/product/productDetail?id=' + item.id + '&pay=' + pay)"
			: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"
					v-if="isProductPrice(item)">
						现价<text>￥{{ item.price }}</text>元
					</view>
					<view class="del"
					v-if="isProductPrice(item)">
						原价￥{{ 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 
					&& isProductPoint(item)">
						<view class="t">
							积分兑换
						</view>
						<view class="p">
							{{ item.points }}
						</view>
					</view>
					
					<view class="num">
						{{ item.shopId }}
					</view>
					
					<!-- 编辑和删除按钮 -->
					<view class="edit-actions" v-if="edit">
						<uv-icon
						name="edit-pen-fill"
						size="40rpx"
						@click.stop="toEdit(item)"
						color="#5baaff"
						/>
						
						<uv-icon
						name="trash-fill"
						size="40rpx"
						@click.stop="del(item)"
						color="#5baaff"
						/>
					</view>
					
					<!-- <view class="num">
						已售卖{{ item.soldNum || 0 }}+件
					</view> -->
				</view>
				<view class="btn">
					<uv-icon name="shopping-cart"
					color="#fff"></uv-icon>
				</view>
			</view>
		</view>
		
		<!-- 添加商品按钮 -->
		<view class="createDetail"
		v-if="edit">
			<view 
			@click="$utils.navigateTo('/pages_order/product/addProduct?shopId=' + shopId)">
				<uv-icon 
				size="40rpx" 
				color="#fff" 
				name="plus"></uv-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import productMixins from '@/mixins/product.js'
	export default {
		mixins : [productMixins],
		name:"productList",
		props : {
			productList: {
				type: Array,
				default: function() {
					return []
				}
			},
			pay: {
				type: String,
				default: ''
			},
			edit: {
				type: Boolean,
				default: false
			},
			shopId: {
				type: [String, Number],
				default: ''
			}
		},
		data() {
			return {
				
			};
		},
		methods : {
			// 修改商品
			toEdit: function(item){
				this.$utils.navigateTo('/pages_order/product/addProduct?id=' + item.id)
			},
			
			// 下架商品
			del: function(item){
				var self = this;
				uni.showModal({
					title: '您确认要下架吗？',
					content: '您正在下架 ' + item.name,
					success : function(res) {
						if(res.confirm){
							self.$api('orderUpdate', {
								id : item.id,
								isOpen : 'N',
							}, function(res) {
								if(res.code == 200){
									self.$emit('getData')
								}
							})
						}
					}
				})
			},
		},
	}
</script>

<style scoped lang="scss">
.product-list-container {
	position: relative;
}

.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;
			}
			
			.edit-actions{
				display: flex;
				margin-top: 10rpx;
				justify-content: flex-start;
				
				/deep/ .uv-icon {
					margin-right: 20rpx;
				}
			}
		}
		.btn{
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			padding: 10rpx;
			border-radius: 50%;
			background-color: $uni-color;
		}
	}
}

.createDetail {
	position: fixed;
	top: 60vh;
	right: 50rpx;
	z-index: 999;
	button{
		all : unset;
	}
	button::after{
		all : unset;
	}
	& > view{
		width: 100rpx;
		height: 100rpx;
		background-color: $uni-color;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 0 10rpx 10rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 30rpx;
	}
}
</style>