hengmei-two/components/shop-list.vue

172 lines
7.1 KiB
Vue
Raw Normal View History

2021-10-11 10:21:06 +00:00
<template>
<view class="pad20 shop_list_box">
<view style="width: 48.6%;float: left;">
2021-11-02 10:23:53 +00:00
<view v-if="index1%2==0" v-for="(item1,index1) in newList" :key="index1" class="bacf radius15 mar-x20 animated fadeIn" @tap="goPage(item1.id,index1)">
<image :src="item1.imgSrc" mode="aspectFill" lazy-load style="width: 100%;border-top-left-radius: 15rpx;border-top-right-radius: 15rpx;height: 325rpx;"></image>
2021-10-11 10:21:06 +00:00
<view class="pad-zy20 pad-s10 pad-x30">
2021-10-22 03:07:32 +00:00
<view class="fon28 bold col3 clips2">{{item1.title}}</view>
<view class="disac fon20 mar-sx20" v-if="!item1.isIntegral">
2021-11-02 10:23:53 +00:00
<view class="radius10 colf mar-y10" style="padding: 6rpx 10rpx;" :style="{background:publicColor}">{{item1.disease_name}}</view>
2021-10-22 03:07:32 +00:00
<view class="radius10 colf" v-if="item1.isTuan" style="padding: 6rpx 10rpx;background: #F85050;"></view>
<view class="radius10 colf" v-if="item1.isPing" style="padding: 6rpx 10rpx;background: #F85050;"></view>
<view class="radius10 colf" v-if="item1.isXian" style="padding: 6rpx 10rpx;background: #F85050;"></view>
2021-10-11 10:21:06 +00:00
</view>
<view class="disac">
2021-10-22 03:07:32 +00:00
<view class="fon28 bold" style="color: #F85050;margin-right: 8rpx;">
<view v-if="item1.isIntegral" class="mar-s20">
<view>积分:{{item1.integral}}</view>
<view class="disac mar-s20" v-if="item1.grade!=0">
<image lazy-load src="/static/public/huiy.png" style="width: 40rpx;height: 33rpx;" mode=""></image>
2021-10-22 03:07:32 +00:00
<view class="fon24 col3 mar-z10">{{item1.level_text}}</view>
</view>
</view>
<view v-else>
<span v-if="item1.isPing"></span>
<span v-if="item1.isXian"></span>
{{item1.zhePrice}}
2021-10-11 10:21:06 +00:00
</view>
</view>
2021-10-22 03:07:32 +00:00
<view v-if="item1.isTuan || item1.isPing || item1.isXian" class="fon24" style="text-decoration: line-through;color: #C7C7C7;">{{item1.yuanPrice}}</view>
2021-10-11 10:21:06 +00:00
</view>
2021-10-22 03:07:32 +00:00
<view v-if="item1.isPing" class="disjbac mar-s20">
<view class="fon24 col80">已拼团{{item1.activity_group_num}}</view>
<view class="disac">
<image lazy-load v-for="(itemm,indexm) in item1.activity_group_cover" :key="indexm" :src="itemm" mode="" style="width: 40rpx;height: 40rpx;border-radius: 100%;margin-left: -20rpx;"></image>
2021-10-11 10:21:06 +00:00
</view>
</view>
2021-11-02 10:23:53 +00:00
<view v-if="item1.isXian || item1.isPing || item1.isTuan" class="fon24 col80 mar-s20">{{item1.activity_end_at}}</view>
2021-10-11 10:21:06 +00:00
</view>
</view>
</view>
<view style="width: 48.6%;float: right;">
2021-11-02 10:23:53 +00:00
<view v-if="index1%2!=0" v-for="(item1,index1) in newList" :key="index1" class="bacf radius15 mar-x20 animated fadeIn" @tap="goPage(item1.id,index1)">
<image :src="item1.imgSrc" lazy-load mode="aspectFill" style="width: 100%;border-top-left-radius: 15rpx;border-top-right-radius: 15rpx;height: 325rpx;"></image>
2021-10-11 10:21:06 +00:00
<view class="pad-zy20 pad-s10 pad-x30">
2021-10-22 03:07:32 +00:00
<view class="fon28 bold col3 clips2">{{item1.title}}</view>
<view class="disac fon20 mar-sx20" v-if="!item1.isIntegral">
2021-11-02 10:23:53 +00:00
<view class="radius10 colf mar-y10" style="padding: 6rpx 10rpx;" :style="{background:publicColor}">{{item1.disease_name}}</view>
<view class="radius10 colf" v-if="item1.isTuan" style="padding: 6rpx 10rpx;background: #F85050;"></view>
<view class="radius10 colf" v-if="item1.isPing" style="padding: 6rpx 10rpx;background: #F85050;"></view>
<view class="radius10 colf" v-if="item1.isXian" style="padding: 6rpx 10rpx;background: #F85050;"></view>
2021-10-11 10:21:06 +00:00
</view>
2021-10-22 03:07:32 +00:00
<view class="disac">
<view class="fon28 bold" style="color: #F85050;margin-right: 8rpx;">
<view v-if="item1.isIntegral" class="mar-s20">
<view>积分:{{item1.integral}}</view>
<view class="disac mar-s20" v-if="item1.grade!=0">
<image lazy-load src="/static/public/huiy.png" style="width: 40rpx;height: 33rpx;" mode=""></image>
2021-10-22 03:07:32 +00:00
<view class="fon24 col3 mar-z10">{{item1.level_text}}</view>
</view>
</view>
<view v-else>
<span v-if="item1.isPing"></span>
<span v-if="item1.isXian"></span>
{{item1.zhePrice}}
2021-10-11 10:21:06 +00:00
</view>
</view>
2021-10-22 03:07:32 +00:00
<view v-if="item1.isTuan || item1.isPing || item1.isXian" class="fon24" style="text-decoration: line-through;color: #C7C7C7;">{{item1.yuanPrice}}</view>
2021-10-11 10:21:06 +00:00
</view>
2021-10-22 03:07:32 +00:00
<view v-if="item1.isPing" class="disjbac mar-s20">
<view class="fon24 col80">已拼团{{item1.activity_group_num}}</view>
<view class="disac">
<image lazy-load v-for="(itemm,indexm) in item1.activity_group_cover" :key="indexm" :src="itemm" mode="" style="width: 40rpx;height: 40rpx;border-radius: 100%;margin-left: -20rpx;"></image>
2021-10-22 03:07:32 +00:00
</view>
2021-10-11 10:21:06 +00:00
</view>
2021-11-02 10:23:53 +00:00
<view v-if="item1.isXian || item1.isPing || item1.isTuan" class="fon24 col80 mar-s20">{{item1.activity_end_at}}</view>
2021-10-11 10:21:06 +00:00
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name:"shop-list",
2021-10-22 03:07:32 +00:00
props:{
dataList:{
type:Array,
default:function(){
2021-12-20 08:02:27 +00:00
return []
2021-10-22 03:07:32 +00:00
}
2021-11-02 10:23:53 +00:00
},
iswhere:{
type:Number,
default:0
2021-10-22 03:07:32 +00:00
}
},
2021-10-11 10:21:06 +00:00
data() {
return {
2021-11-02 10:23:53 +00:00
newList:[],
timeList:[],//时间列表
2021-11-04 07:41:53 +00:00
timer:''
2021-10-11 10:21:06 +00:00
};
},
computed: {
// 主题颜色
publicColor() {
return this.$store.state.publicColor
}
},
2021-11-02 10:23:53 +00:00
mounted() {
if(this.dataList.length!=0){
this.dataList.forEach((item,index)=>{
if(item.activity_end_at!='') {
let obj = {
id:item.id,
reponseTime:item.reponseTime,
time:item.activity_end_at,
nIndex:index
}
this.timeList.push(obj);
}
})
this.$toolAll.tools.showToast('加载中...','none',1000);
if(this.timeList!=0){
2021-11-04 07:41:53 +00:00
this.timer = setInterval(()=>{//定时器
2021-11-02 10:23:53 +00:00
if(this.timeList.length!=0){
this.timeList.forEach((item,index)=>{
if(item.id==this.dataList[item.nIndex].id){
let endTime = new Date(this.timeList[index].time).getTime();//把结束时间转时间戳
this.timeList[index].reponseTime = new Date(this.timeList[index].reponseTime).getTime() + 1000;//请求接口的时间递增,即:开始时间
if(this.timeList[index].reponseTime - endTime >=0) {//如果开始时间的时间戳 - 结束时间的时间戳 >= 0 活动结束
this.dataList[item.nIndex].activity_end_at = "活动已结束";
} else {
// 继续进行倒计时
this.dataList[item.nIndex].activity_end_at = this.$toolAll.tools.dayTime(this.timeList[index].time,this.timeList[index].reponseTime);
}
}
})
}
},1000)
setTimeout(()=>{
this.newList = this.dataList;
},1000)
}
}
},
2021-10-11 10:21:06 +00:00
methods:{
2021-11-04 07:41:53 +00:00
destroyev(){
uni.clearInterval(this.timer);
this.$emit('destroyEv')
},
2021-10-22 03:07:32 +00:00
goPage(id,index){//进入商品详情事件
2021-12-20 08:02:27 +00:00
let is_activity = 0;
let shopId = 0;
if(this.dataList[index].isTuan==true || this.dataList[index].isPing==true || this.dataList[index].isXian==true) {
is_activity = 1;
shopId = this.dataList[index].activity_id;
} else {
shopId = id;
}
2021-10-11 10:21:06 +00:00
uni.navigateTo({
2021-12-20 08:02:27 +00:00
url:`/pagesB/shopDetail/shopDetail?id=${shopId}&isIntegral=${this.dataList[index].isIntegral}&is_activity=${is_activity}`
2021-10-11 10:21:06 +00:00
})
2021-11-02 10:23:53 +00:00
},
2021-10-11 10:21:06 +00:00
}
}
</script>
<style>
</style>