99 lines
2.1 KiB
Vue
99 lines
2.1 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 :src="item.cover" mode="widthFix"></image>
|
|
<view v-if="isOperate" class="hide-btn font24 color-ff radius20 flex" :class="item.state==0?'background-8c':'background-blue'" @tap.stop="changeStateEv(item.id,index)">{{item.state==0?'已隐藏':'已展示'}}</view>
|
|
</view>
|
|
<text class="name font28 clips1">{{item.name}}</text>
|
|
<view class="price flex">
|
|
<text class="color-8c font24">￥{{item.original_price}}</text>
|
|
<text class="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){
|
|
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: 350rpx;
|
|
overflow: hidden;
|
|
margin-bottom: 10rpx;
|
|
position: relative;
|
|
}
|
|
.goods-list .cover image{
|
|
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;
|
|
}
|
|
.goods-list .price>text:first-child{
|
|
margin-right: 6rpx;
|
|
text-decoration: line-through;
|
|
}
|
|
</style>
|