hengmei-two/components/shop-list.vue

173 lines
7.2 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view class="pad20 shop_list_box">
<view style="width: 48.6%;float: left;">
<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" style="width: 100%;border-top-left-radius: 15rpx;border-top-right-radius: 15rpx;height: 325rpx;"></image>
<view class="pad-zy20 pad-s10 pad-x30">
<view class="fon28 bold col3 clips2">{{item1.title}}</view>
<view class="disac fon20 mar-sx20" v-if="!item1.isIntegral">
<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>
</view>
<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 src="/static/public/huiy.png" style="width: 40rpx;height: 33rpx;" mode=""></image>
<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}}
</view>
</view>
<view v-if="item1.isTuan || item1.isPing || item1.isXian" class="fon24" style="text-decoration: line-through;color: #C7C7C7;">¥{{item1.yuanPrice}}</view>
</view>
<view v-if="item1.isPing" class="disjbac mar-s20">
<view class="fon24 col80">已拼团{{item1.activity_group_num}}组</view>
<view class="disac">
<image 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>
</view>
</view>
<view v-if="item1.isXian || item1.isPing || item1.isTuan" class="fon24 col80 mar-s20">结束时间:{{item1.activity_end_at}}</view>
</view>
</view>
</view>
<view style="width: 48.6%;float: right;">
<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" style="width: 100%;border-top-left-radius: 15rpx;border-top-right-radius: 15rpx;height: 325rpx;"></image>
<view class="pad-zy20 pad-s10 pad-x30">
<view class="fon28 bold col3 clips2">{{item1.title}}</view>
<view class="disac fon20 mar-sx20" v-if="!item1.isIntegral">
<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>
</view>
<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 src="/static/public/huiy.png" style="width: 40rpx;height: 33rpx;" mode=""></image>
<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}}
</view>
</view>
<view v-if="item1.isTuan || item1.isPing || item1.isXian" class="fon24" style="text-decoration: line-through;color: #C7C7C7;">¥{{item1.yuanPrice}}</view>
</view>
<view v-if="item1.isPing" class="disjbac mar-s20">
<view class="fon24 col80">已拼团{{item1.activity_group_num}}组</view>
<view class="disac">
<image 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>
</view>
</view>
<view v-if="item1.isXian || item1.isPing || item1.isTuan" class="fon24 col80 mar-s20">{{item1.activity_end_at}}</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name:"shop-list",
props:{
dataList:{
type:Array,
default:function(){
return [
{
imgSrc:'/static/public/wen-one.png',//商品图片
title:'【99皮皮节】【种植发际 线】1000单位FUE技术...',//标题
zhePrice:'3888',//折扣价
yuanPrice:'4205',//原价
integral:'2888',//积分
isTuan:false,//是否团购
isPing:false,//是否拼团
isXian:false,//是否限时促销
isIntegral:false,//是否是积分
grade:0,//等级
}
]
}
},
iswhere:{
type:Number,
default:0
}
},
data() {
return {
publicColor:uni.getStorageSync('publicColor'),
newList:[],
timeList:[],//时间列表
timer:''
};
},
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){
this.timer = setInterval(()=>{//定时器
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)
}
}
},
methods:{
destroyev(){
uni.clearInterval(this.timer);
console.log(12);
this.$emit('destroyEv')
},
goPage(id,index){//进入商品详情事件
uni.navigateTo({
url:`/pagesB/shopDetail/shopDetail?id=${id}&isIntegral=${this.dataList[index].isIntegral}`
})
},
}
}
</script>
<style>
</style>