leave-unused/components/goods-list/goods-list.vue

<template>
	<view class="goods-list flex">
		<view class="item background-white radius20 mar-s20" @tap.top="goDetail(item.id)" v-for="(item,index) in goodsList" :key="index">
			<view class="cover radius20">
				<image class="img" :src="item.cover" mode="widthFix"></image>
				<view v-if="isOperate" class="hide-btn font24 color-ff radius20 flex" :class="item.status==1?'background-8c':'background-blue'" @tap.stop="changeStateEv(item.id,index)">{{item.status==1?'已下架':'已上架'}}</view>
			</view>
			<text class="name font28 clips1">{{item.name}}</text>
			<view class="price flex">
				<text class="text color-8c font24" v-if="parseFloat(item.original_price)>0" style="text-decoration: line-through;margin-right: 6rpx;">￥{{item.original_price}}</text>
				<text class="text color-red font28">￥{{item.price}}</text>
			</view>
		</view>
	</view>
</template>
<script>
    export default {
        name:'goods-list',
		props:{
			// 商品列表
			goodsList:{
				type:Array,
				default:[]
			},
			// 是否显示操作按钮
			isOperate:{
				type:Boolean,
				default:false
			},
		},
        data() {
            return {
				
            };
        },
		mounted() {
			
		},
        methods:{
			// 跳转详情
            goDetail(id){
				if(this.isOperate){
					uni.navigateTo({
						url:`/pages/goods/detail?id=${id}&type=release`,
					})
				}else{
					uni.navigateTo({
						url:`/pages/goods/detail?id=${id}`,
					})
				}
            },
			
			// 更改显示状态
			changeStateEv(id,index){
				this.$emit('changeStateEv',id,index);
			},
        }
    }
</script>

<style scoped>
	.goods-list{
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 20rpx;
	}
	.goods-list .item{
		width: calc(50% - 10rpx);
		padding-bottom: 15rpx;
		text-align: center;
		line-height: 1.3;
		overflow: hidden;
	}
	.goods-list .cover{
		width: 100%;
		height: 320rpx;
		overflow: hidden;
		margin-bottom: 10rpx;
		position: relative;
	}
	.goods-list .cover .img{
		width: 100%;
		min-height: 100%;
	}
	.goods-list .hide-btn{
		justify-content: center;
		align-items: center;
		width: 110rpx;
		height: 46rpx;
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		z-index: 9;
	}
	.goods-list .price{
		justify-content: center;
		align-items: center;
		margin-top: 5rpx;
	}
</style>