<template>
|
<view class="popCoupon" :class="isShow?'show':''">
|
<view class="bg_container" @click.stop="hide"></view>
|
<view class="box" v-if="couponType==5">
|
<view class="title">温馨提示</view>
|
<view class="zone-content">
|
不好意思哦～优惠券每人限享一次，您已参与过同类活动，本次无法领券啦
|
</view>
|
<view class="btn_box">
|
<view class="btn" @click="hide()">我知道了</view>
|
</view>
|
<view class="popCoupon_close2" @click="hide()"></view>
|
</view>
|
<view class="container" @click.stop="hide" v-else>
|
<!-- <view class="popCoupon_close" @click="hide()"></view> -->
|
<view v-if="couponType==1">
|
<view class="close" @click="hide"></view>
|
<!-- 已领完弹窗 -->
|
<view class="btn-zone" @click="hide">
|
确定
|
</view>
|
<view class="text-stock" v-if="!nextTime">
|
<text>很抱歉，优惠券已领完</text>
|
<!-- <text>前往专区挑选好物</text> -->
|
</view>
|
<view class="text-stock" v-else>
|
<text>很抱歉，本轮优惠券已发放完毕</text>
|
<text>{{nextTime}}再来领取</text>
|
</view>
|
<image class="bg_stock" src="https://ossacmall.bluedeer.com.cn/app/static/images/out-of-stock.png"
|
mode="widthFix"></image>
|
</view>
|
<view v-else-if="couponType==2">
|
<view class="btn-close" @click="hide" v-if="defaultSelfImage"></view>
|
<!-- 券包到账（带分享） -->
|
<view class="btn-use" @click="hide" v-if="defaultSelfImage"></view>
|
<!-- #ifdef MP -->
|
<!-- <button v-if="canShareFriendCoupon()" class="btn-share share_coupon_btn" open-type="share"
|
hover-class="none" @click="share"></button>
|
<view v-else class="btn-share btn-share-disabled"></view> -->
|
<!-- #endif -->
|
<!-- #ifndef MP -->
|
<!-- <view class="btn-share" :class="{'btn-share-disabled': !canShareFriendCoupon()}" @click="share"></view> -->
|
<!-- #endif -->
|
<image class="bg_credited" :src="popupImage" mode="widthFix"></image>
|
<!-- <image class="bg_credited" src="https://ossacmall.bluedeer.com.cn/app/static/images/credited-new.png"
|
mode="widthFix"></image> -->
|
</view>
|
<view v-else-if="couponType==3">
|
<view class="btn-close2" @click="hide" v-if="defaultFriendImage"></view>
|
<!-- 券包到账（不带分享） -->
|
<view class="btn-use2" @click="hide" v-if="defaultFriendImage"></view>
|
<!-- <image class="bg_friend_credited"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/friend-credited-new.png" mode="widthFix">
|
</image> -->
|
<image class="bg_friend_credited" :src="friendCouponPopupImage" mode="widthFix">
|
</image>
|
</view>
|
<view v-else-if="couponType==4">
|
<view class="close" @click="hide"></view>
|
<!-- 订单好友分享弹窗 -->
|
<!-- #ifdef MP -->
|
<button v-if="canShareFriendCoupon()" class="btn-exclusive share_coupon_btn" open-type="share"
|
hover-class="none" @click="share"></button>
|
<view v-else class="btn-exclusive btn-share-disabled"></view>
|
<!-- #endif -->
|
<!-- #ifndef MP -->
|
<view class="btn-exclusive" :class="{'btn-share-disabled': !canShareFriendCoupon()}" @click="share">
|
</view>
|
<!-- #endif -->
|
<image class="bg_friend_exclusive"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/friend-exclusive.png" mode="widthFix">
|
</image>
|
</view>
|
|
</view>
|
</view>
|
|
</template>
|
|
<script>
|
export default {
|
name: "personalAndShareCoupon",
|
data() {
|
return {
|
isShow: false,
|
couponType: 0, //1:已领完,2:券包到账（带分享）,3:券包到账（不带分享）,4:订单好友分享弹窗
|
friendStatus: '',
|
stockEmpty: false,
|
zoneId: '',
|
nextTime: '',
|
defaultSelfImage: false,
|
defaultFriendImage: false,
|
popupImage: 'https://ossacmall.bluedeer.com.cn/app/static/images/credited-new.png',
|
friendCouponPopupImage: 'https://ossacmall.bluedeer.com.cn/app/static/images/friend-credited-new.png'
|
};
|
},
|
methods: {
|
canShareFriendCoupon() {
|
return this.friendStatus && !['RECEIVED', 'USED', 'EXPIRED'].includes(this.friendStatus);
|
},
|
show(info, shareToken, urlOption) {
|
let that = this;
|
if (!info || !info.couponPackStatus) {
|
that.hide()
|
return;
|
}
|
that.zoneId = info.id
|
const orderPage = info.orderPage
|
const {
|
popupShow,
|
issued,
|
friendCoupon, //好友券
|
selfCoupon, //自用券
|
// remainingFriendCoupon, //剩余好友券库存
|
// remainingSelfCoupon, //剩余自用券库存
|
friendCouponStatus, //好友券分享状态
|
shareUnavailable, //分享券是否不可领取；例如已被领取、已使用或已失效"
|
stockEmpty, //是否没有库存
|
tipsDate,
|
popupImage,
|
friendCouponPopupImage,
|
excludedByCouponUsage, //当前用户此前是否已领取过券包
|
} = info.couponPackStatus
|
that.friendStatus = friendCouponStatus || ''
|
if (friendCouponPopupImage) {
|
that.friendCouponPopupImage = friendCouponPopupImage
|
} else {
|
that.defaultFriendImage = true
|
}
|
if (popupImage) {
|
that.popupImage = popupImage
|
} else {
|
that.defaultSelfImage = true
|
}
|
// that.couponType = 3
|
// this.isShow = true
|
// return
|
if (orderPage) {
|
// 订单支付成功后,
|
if (that.canShareFriendCoupon() && friendCoupon) {
|
// 好友券还在
|
that.couponType = 4
|
that.showfn()
|
}
|
return
|
}
|
if (excludedByCouponUsage) {
|
const today = new Date()
|
const date = today.getFullYear() + '' + today.getMonth() + '' + today.getDate()
|
const key = date + '_EXPIRING'
|
const expiringData = {
|
popDate: key
|
}
|
if (!that.$store.getters.excludedByCouponUsage || that.$store.getters
|
.excludedByCouponUsage !== JSON.stringify(expiringData)) {
|
that.$store.commit("UPDATE_excludedByCouponUsage", JSON.stringify(expiringData));
|
that.couponType = 5
|
that.isShow = true
|
}
|
return
|
}
|
if (shareUnavailable || stockEmpty) {
|
// shareUnavailable好友券已兑完,stockEmpty全部兑完
|
that.stockEmpty = stockEmpty
|
that.couponType = 1
|
if (stockEmpty) {
|
// that.nextTime='7月15日 9:30'
|
that.setNextTime(tipsDate)
|
} else {
|
that.nextTime = ''
|
}
|
uni.clearStorageSync(info.id + 'hidePersonalAndShareCoupon')
|
this.isShow = true
|
return
|
}
|
const status = uni.getStorageSync(info.id + 'hidePersonalAndShareCoupon')
|
if (status == 'true') {
|
that.isShow = false
|
this.hide()
|
return;
|
}
|
|
if (selfCoupon && friendCoupon) {
|
// 海报进来弹窗，或者点击自己分享的链接进来，券包到账（带分享）
|
that.couponType = 2
|
// that.couponType = 1
|
// that.setNextTime("2026-07-15,2026-07-22")
|
that.getCoupon({
|
couponId: selfCoupon.id + ',' + friendCoupon.id,
|
couponName: selfCoupon.name + ',' + friendCoupon.name
|
})
|
that.showfn()
|
return
|
} else if (shareUnavailable == false && selfCoupon) {
|
// 券包到账（不带分享）
|
that.couponType = 3
|
that.getCoupon({
|
couponId: selfCoupon.id,
|
couponName: selfCoupon.name
|
})
|
that.showfn()
|
return
|
}
|
that.hide()
|
},
|
getCoupon(opt) {
|
let that = this
|
that.addTrack('yy_getCoupon', {
|
'couponName_var': opt.couponName,
|
'couponId_var': opt.couponId,
|
});
|
},
|
setNextTime(tipsDate) {
|
if (!tipsDate) {
|
this.nextTime = ''
|
this.showfn()
|
return
|
}
|
this.nextTime = ''
|
const now = new Date();
|
const limitDate = tipsDate.split(',')
|
for (let index = 0; index < limitDate.length; index++) {
|
let element = limitDate[index];
|
// 构建当年7月15日9点
|
const target = new Date(element.split('-').join('/'));
|
if (now < target && !this.nextTime) {
|
this.nextTime = (target.getMonth() + 1) + '月' + target.getDate() + '日 ' + target.getHours() + ":" +
|
target.getMinutes()
|
}
|
}
|
this.isShow = true
|
},
|
showfn() {
|
this.isShow = true
|
uni.setStorageSync(this.zoneId + 'hidePersonalAndShareCoupon', 'true')
|
},
|
hide() {
|
this.isShow = false;
|
this.$emit('close')
|
},
|
stopPropagation(e) {
|
e.stopPropagation()
|
},
|
share() {
|
if (!this.canShareFriendCoupon()) {
|
return;
|
}
|
this.$emit('share')
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.popCoupon {
|
position: fixed;
|
left: 0;
|
top: 0;
|
width: 100%;
|
height: 100%;
|
z-index: 11111;
|
background-color: rgba(0, 0, 0, .7);
|
display: none;
|
|
.bg_container {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
z-index: 0;
|
}
|
|
&.show {
|
display: block;
|
}
|
|
.container {
|
position: absolute;
|
left: 52%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
z-index: 1;
|
|
.text-stock {
|
display: flex;
|
flex-direction: column;
|
align-content: center;
|
position: absolute;
|
bottom: 44%;
|
width: 100%;
|
text-align: center;
|
font-size: 38rpx;
|
color: #401712;
|
font-weight: bold;
|
gap: 10rpx;
|
letter-spacing: 4rpx;
|
margin-left: -2%;
|
}
|
|
.bg_stock {
|
width: 651rpx;
|
height: 721rpx;
|
}
|
|
.bg_credited {
|
width: 651rpx;
|
height: 794rpx;
|
}
|
|
.bg_friend_credited {
|
width: 651rpx;
|
height: 627rpx;
|
}
|
|
.bg_friend_exclusive {
|
width: 651rpx;
|
height: 758rpx;
|
}
|
|
.close {
|
position: absolute;
|
bottom: 0;
|
width: 90rpx;
|
height: 90rpx;
|
left: 41%;
|
}
|
|
.btn-close {
|
position: absolute;
|
width: 90rpx;
|
height: 90rpx;
|
right: 10%;
|
top: 4%;
|
}
|
|
.btn-close2 {
|
position: absolute;
|
width: 90rpx;
|
height: 90rpx;
|
right: 10%;
|
top: 4%;
|
}
|
|
.btn-zone {
|
position: absolute;
|
width: 368rpx;
|
height: 70rpx;
|
left: 20%;
|
bottom: 27%;
|
background: url('https://ossacmall.bluedeer.com.cn/app/static/images/out-of-stock-btn.png') center 100%/100% no-repeat;
|
text-align: center;
|
line-height: 70rpx;
|
color: #992b1b;
|
font-weight: bold;
|
font-size: 36rpx;
|
letter-spacing: 10rpx;
|
}
|
|
.btn-use {
|
position: absolute;
|
width: 56%;
|
height: 14%;
|
right: 22%;
|
bottom: 11%;
|
}
|
|
.btn-share {
|
position: absolute;
|
width: 30%;
|
height: 19%;
|
right: 10%;
|
bottom: 23%;
|
}
|
|
.btn-share-disabled {
|
pointer-events: none;
|
}
|
|
.share_coupon_btn {
|
padding: 0;
|
margin: 0;
|
border: none;
|
background: transparent;
|
line-height: normal;
|
|
&::after {
|
border: none;
|
}
|
}
|
|
.btn-use2 {
|
position: absolute;
|
width: 56%;
|
height: 14%;
|
right: 22%;
|
bottom: 12%;
|
}
|
|
.btn-exclusive {
|
position: absolute;
|
width: 58%;
|
height: 13%;
|
right: 10%;
|
bottom: 15%;
|
}
|
|
}
|
|
.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: 90rpx;
|
margin-bottom: 50rpx;
|
padding: 0 10px;
|
line-height: 1.8rem;
|
}
|
|
.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_close2 {
|
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;
|
}
|
}
|
|
|
.popCoupon_close {
|
position: relative;
|
left: 50%;
|
margin-top: 40rpx;
|
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>
|
