<template>
|
<view class="popActivity" :class="isShow?'show':''">
|
<view class="popActivity_box" v-if="type!='expiring'">
|
<swiper v-if="activity.homePopupList&&activity.homePopupList.length>1" indicator-dots="true"
|
indicator-type="expand" :autoplay="true" :circular="true" interval="5000" :duration="duration"
|
indicator-color="transparent" indicator-active-color="transparent" style="height:inherit;">
|
<block v-for="(imgUrlItem, imgUrlIndex) in activity.homePopupList" :key="imgUrlIndex">
|
<swiper-item>
|
<image class="popActivity_img" :src="imgUrlItem.image" @click="goToZone(imgUrlItem.linkUrl)">
|
</image>
|
<view class="popActivity_btn" @click="goToZone(imgUrlItem.linkUrl)"></view>
|
</swiper-item>
|
</block>
|
</swiper>
|
<block v-else-if="activity.homePopupList&&activity.homePopupList.length==1">
|
<image class="popActivity_img" :src="activity.homePopupList[0].image"
|
@click="goToZone(activity.homePopupList[0].linkUrl)">
|
</image>
|
<view class="popActivity_btn" @click="goToZone(activity.homePopupList[0].linkUrl)"></view>
|
</block>
|
|
<view class="popActivity_close" @click="hide()"> </view>
|
</view>
|
<view class="box" v-else>
|
<view class="title">温馨提示</view>
|
<view class="zone-content">
|
您有{{count}}张优惠券快过期了，快去看看吧
|
</view>
|
<view class="btn_box">
|
<navigator url='/pages/users/user_coupon/index' hover-class='none'>
|
<view class="btn" @click="gotoCoupon()">去查看</view>
|
</navigator>
|
</view>
|
<view class="popCoupon_close" @click="hide()"></view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {
|
getExpiringCoupon
|
} from '../../api/store.js'
|
export default {
|
name: "popActivity",
|
props: {
|
activity: {
|
type: Object,
|
default: () => {}
|
},
|
},
|
data() {
|
return {
|
isShow: false,
|
count: 0,
|
type: 'expiring'
|
};
|
},
|
methods: {
|
goToZone: function(linkUrl) {
|
this.isShow = false;
|
uni.navigateTo({
|
url: linkUrl
|
})
|
},
|
showActivity(date) {
|
let that = this;
|
const newActivity = Object.assign(that.activity, {
|
popDate: date
|
})
|
console.log(222222,newActivity,JSON.stringify(newActivity),that.$store.getters.showPopActivity)
|
if ((JSON.stringify(that.activity) !== '{}' && (!that.$store.getters.showPopActivity || that.$store.getters
|
.showPopActivity !== JSON.stringify(newActivity)) && that.activity.homePopupList && that
|
.activity.homePopupList.length > 0)) {
|
console.log('show popActivity')
|
that.type = 'activity'
|
that.$store.commit("UPDATE_showPopActivity", JSON.stringify(newActivity));
|
that.isShow = true;
|
} else {
|
this.hide()
|
}
|
},
|
show() {
|
let that = this;
|
console.log(222222, that.activity);
|
// that.type = 'expiring'
|
// that.isShow = true;
|
// return
|
const today = new Date()
|
const date = today.getFullYear() + '' + today.getMonth() + '' + today.getDate()
|
const key = date + '_EXPIRING'
|
const expiringData = {
|
popDate: key
|
}
|
if (!that.$store.getters.homeExpiring || that.$store.getters
|
.homeExpiring !== JSON.stringify(expiringData)) {
|
// 查询是否存在过期优惠券
|
getExpiringCoupon().then(res => {
|
that.count = res.data.length
|
if (that.count > 0) {
|
// 弹窗提醒过期优惠券
|
that.type = 'expiring'
|
that.$store.commit("UPDATE_homeExpiring", JSON.stringify(expiringData));
|
that.isShow = true;
|
} else {
|
that.showActivity(date)
|
}
|
})
|
} else {
|
that.showActivity(date)
|
}
|
// that.isShow = true;
|
|
},
|
hide() {
|
this.isShow = false;
|
this.$emit('hide')
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.popActivity {
|
position: fixed;
|
left: 0;
|
top: 0;
|
width: 100%;
|
height: 100%;
|
z-index: 11111;
|
background-color: rgba(0, 0, 0, .7);
|
display: none;
|
|
&.show {
|
display: block;
|
}
|
}
|
|
.box {
|
width: 600rpx;
|
padding: 90rpx 0 70rpx 0;
|
background: url("https://ossacmall.bluedeer.com.cn/app/static/images/confirm_bg.png") center 0rpx / 100% auto no-repeat;
|
background-color: #f5f5f5;
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
border-radius: 14rpx;
|
|
.title {
|
lineh-height: 40rpx;
|
font-size: 30rpx;
|
font-weight: bold;
|
color: #000000;
|
text-align: center;
|
}
|
|
.zone-content {
|
font-size: 30rpx;
|
// font-weight: bold;
|
color: #000000;
|
text-align: center;
|
margin-top: 80rpx;
|
margin-bottom: 50rpx;
|
}
|
|
.btn_box {
|
display: flex;
|
display: flex;
|
justify-content: space-around;
|
margin: 0 auto;
|
text-align: center;
|
}
|
|
.btn {
|
width: 160rpx;
|
font-size: 27rpx;
|
line-height: 60rpx;
|
background: #016DCC;
|
color: #ffffff;
|
border-radius: 11rpx;
|
}
|
|
.popCoupon_close {
|
position: absolute;
|
right: 10rpx;
|
top: 10rpx;
|
width: 90rpx;
|
height: 90rpx;
|
background: url("https://ossacmall.bluedeer.com.cn/app/static/images/pop_close.png") center center/30rpx auto no-repeat;
|
}
|
}
|
|
.popActivity_box {
|
width: 550rpx;
|
height: 830rpx;
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
|
.popActivity_img {
|
width: 550rpx;
|
height: 700rpx;
|
}
|
|
.popActivity_btn {
|
width: 320rpx;
|
height: 80rpx;
|
position: absolute;
|
left: 50%;
|
margin-left: -160rpx;
|
bottom: 130rpx;
|
}
|
|
.popActivity_close {
|
position: absolute;
|
left: 50%;
|
margin-left: -45rpx;
|
bottom: 0;
|
width: 90rpx;
|
height: 90rpx;
|
background: url("https://ossacmall.bluedeer.com.cn/app/static/images/pop_close2.png") center center/78rpx auto no-repeat;
|
|
}
|
}
|
</style>
|
