You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
159 lines
6.7 KiB
159 lines
6.7 KiB
<template>
|
|
<view style="width:100%">
|
|
<view class="dp-product-item">
|
|
<view class="item" v-for="(item,index) in data" :style="showstyle==2 ? 'width:49%;margin-right:'+(index%2==0?'2%':0) : (showstyle==3 ? 'width:32%;margin-right:'+(index%3!=2?'2%':0) :'width:100%')" :key="item.id" @click="shopDetail(item)" :data-url="'/pages/shop/product?id='+item[idfield]">
|
|
|
|
<view class="product-pic">
|
|
<image class="image" :src="item.pic" mode="widthFix"/>
|
|
<image class="saleimg" :src="saleimg" v-if="saleimg!=''" mode="widthFix"/>
|
|
<view class="sold-out position-a" v-if="navType == 'shop' && item.status == 0">
|
|
商品已下架
|
|
</view>
|
|
</view>
|
|
<view class="product-info">
|
|
<view class="p1" v-if="showname == 1">{{item.name}}</view>
|
|
<view class="p3" v-if="showsales=='1'">已售{{item.sales}}件</view>
|
|
<!-- <view class="p3" style="color: #fff;" v-else>1</view> -->
|
|
<view class="p2">
|
|
<view class="p2-1" v-if="showprice != '0'">
|
|
<text class="t1" :style="{color:types == 'cart'?'#ED5925':t('color1')}"><text style="font-size:24rpx;font-weight: bold;">￥</text>{{item.sell_price}}</text>
|
|
<text class="t2" v-if="showprice == '1' && item.market_price*1 > item.sell_price*1">
|
|
<!-- /箱 -->
|
|
<!-- ￥{{item.market_price}} -->
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<view class="p4" v-if="showcart==1 && types=='serach' " @click.stop="buydialogChange" :data-proid="item[idfield]"><text class="iconfont icon_gouwuche"></text></view>
|
|
<view class="p4" style="bottom: 25rpx;" v-if="showcart==1 && types != 'serach'" @click.stop="buydialogChange" :data-proid="item[idfield]" :data-status="item.status"><text class="iconfont icon_gouwuche"></text></view>
|
|
<view class="p4" v-if="showcart==2" @click.stop="buydialogChange" :data-proid="item[idfield]" ><image :src="cartimg" class="img"></image></view>
|
|
<view class="p5" v-if="types == 'search'">
|
|
<view class="left">
|
|
<view class="l_left">
|
|
<image :src="item.business.logo" mode=""></image>
|
|
</view>
|
|
<view class="l_right">
|
|
{{item.business.name}}
|
|
</view>
|
|
</view>
|
|
<view class="right">
|
|
<text class="iconfont icon-arrow-right"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="bg-desc" v-if="item.hongbaoEdu > 0" :style="{background:'linear-gradient(90deg,'+t('color2')+' 0%,rgba('+t('color2rgb')+',0.8) 100%)'}">可获额度 +{{item.hongbaoEdu}}</view>
|
|
</view>
|
|
</view>
|
|
<buydialog v-if="buydialogShow" :proid="proid" @addcart="addcart" @buydialogChange="buydialogChanges" :menuindex="menuindex"></buydialog>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
var app = getApp();
|
|
export default {
|
|
data(){
|
|
return {
|
|
buydialogShow:false,
|
|
proid:0,
|
|
|
|
event_rul: app.globalData.event_url,
|
|
}
|
|
},
|
|
props: {
|
|
types:{default:''},
|
|
showstyle:{default:2},
|
|
menuindex:{default:-1},
|
|
saleimg:{default:''},
|
|
showname:{default:1},
|
|
namecolor:{default:'#333'},
|
|
showprice:{default:'1'},
|
|
showsales:{default:'1'},
|
|
showcart:{default:'1'},
|
|
cartimg:{default:app.globalData.event_url +'/static/img/static/imgsrc/cart.svg'},
|
|
data:{},
|
|
idfield:{default:'id'},
|
|
navType:{default: ''}
|
|
},
|
|
methods: {
|
|
buydialogChange: function (e) {
|
|
if(this.navType == 'shop' && e.currentTarget.dataset.status == 0) {
|
|
return
|
|
}
|
|
this.proid = e.currentTarget.dataset.proid
|
|
this.buydialogChanges()
|
|
// if(!this.buydialogShow){
|
|
// this.proid = e.currentTarget.dataset.proid
|
|
// }
|
|
// this.buydialogShow = !this.buydialogShow;
|
|
console.log(this.buydialogShow);
|
|
},
|
|
buydialogChanges() {
|
|
this.buydialogShow = !this.buydialogShow;
|
|
this.$emit('touchmove');
|
|
},
|
|
addcart:function(){
|
|
this.$emit('addcart');
|
|
},
|
|
shopDetail(item) {
|
|
console.log(item)
|
|
if(this.navType == 'shop' && item.status == 0) {
|
|
this.$emit('shopdel',{show: true ,id:item.id, deltype: 'shop'})
|
|
}else {
|
|
app.goto('/pages/shop/product?id='+item.id)
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.dp-product-item{height: auto; position: relative; padding: 0px; display:flex;flex-wrap:wrap}
|
|
.dp-product-item .item{box-shadow: 0 0 10rpx 0rpx #e5e5e5;display: inline-block;position: relative;margin-bottom: 20rpx;background: #fff;border-radius:10rpx;overflow:hidden}
|
|
.dp-product-item .product-pic {width: 100%;height:0;overflow:hidden;background: #ffffff;padding-bottom: 100%;position: relative;}
|
|
.dp-product-item .product-pic .image{position:absolute;top:0;left:0;width: 100%;height:auto}
|
|
.dp-product-item .product-pic .sold-out{bottom:0;left:50%;width: 190rpx;height:68rpx;line-height: 68rpx;text-align: center; background-color: #999999;color: #fff; border-radius: 4rpx; transform: translateX(-50%);}
|
|
.dp-product-item .product-pic .saleimg{ position: absolute;width: 60px;height: auto; top: -3px; left:-3px;}
|
|
.dp-product-item .product-info {padding:20rpx 20rpx;position: relative;}
|
|
.dp-product-item .product-info .p1 {color:#333;font-weight:bold;font-size:26rpx;line-height:36rpx;margin-bottom:10rpx;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;height:72rpx}
|
|
.dp-product-item .product-info .p2{display:flex;align-items:center;overflow:hidden;padding:2px 0}
|
|
.dp-product-item .product-info .p2-1{flex-grow:1;flex-shrink:1;height:40rpx;margin-top: 10rpx; line-height:40rpx;overflow:hidden;white-space: nowrap}
|
|
.dp-product-item .product-info .p2-1 .t1{font-size:36rpx; font-weight: bold;}
|
|
.dp-product-item .product-info .p2-1 .t2 {font-size:24rpx;color: #aaa;/* text-decoration: line-through; *//*letter-spacing:-1px*/}
|
|
.dp-product-item .product-info .p2-2{font-size:20rpx;height:40rpx;line-height:40rpx;text-align:right;padding-left:20rpx;color:#999}
|
|
.dp-product-item .product-info .p3{color:#999999;font-size:20rpx;margin-top:10rpx}
|
|
.dp-product-item .product-info .p4{width:52rpx;height:52rpx;border-radius:50%;position:absolute;display:flex;bottom:84rpx;right:26rpx;display:flex;align-items: center;justify-content: center;background: linear-gradient(to bottom,#01a664 0%,#086e45 100%);}
|
|
.dp-product-item .product-info .p4 .icon_gouwuche{font-size:36rpx;height:48rpx;line-height:48rpx;color: #FFFFFF;}
|
|
.dp-product-item .product-info .p4 .img{width:100%;height:100%};
|
|
.p5 {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 24rpx;
|
|
margin-top: 20rpx;
|
|
.left{
|
|
display: flex;
|
|
align-items: center;
|
|
image{
|
|
width: 40rpx;
|
|
border-radius: 40rpx;
|
|
height: 40rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
color: #7a7a7a;
|
|
.l_right{
|
|
width: 196rpx;
|
|
overflow:hidden; //溢出隐藏
|
|
|
|
text-overflow:ellipsis;//超出显示省略号
|
|
|
|
white-space:nowrap;//强制文本在一行内显示
|
|
|
|
}
|
|
}
|
|
.right{
|
|
.iconfont{
|
|
// font-size: 50rpx;
|
|
color: #7a7a7a;
|
|
}
|
|
}
|
|
}
|
|
.bg-desc {color: #fff; padding: 10rpx 20rpx;}
|
|
</style>
|