101 lines
2.3 KiB
Vue
101 lines
2.3 KiB
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>
|