<template>
|
<view>
|
<view class="navbar acea-row row-around">
|
<view class="item acea-row row-center-wrapper" :class="{ on: navOn === 'usable' }" @click="onNav('usable')">
|
未使用</view>
|
<view class="item acea-row row-center-wrapper" :class="{ on: navOn === 'unusable' }"
|
@click="onNav('unusable')">已使用/过期</view>
|
</view>
|
<view class='coupon-list' v-if="couponsList.length">
|
<view class='item acea-row row-center-wrapper' v-for='(item,index) in couponsList' :key="index"
|
:class="{zone:!(item.validStr==='unusable'||item.validStr==='overdue'||item.validStr==='notStart')&&Number(item.moneyType)==4 &&[4,-1].includes(item.userLvType)}">
|
<view class='money'
|
:class="item.validStr==='unusable'||item.validStr==='overdue'||item.validStr==='notStart'?'moneyGray':(Number(item.moneyType)==4 &&[4,-1].includes(item.userLvType)?'zoneMoney':'')">
|
<!-- <view class="give" v-if="item.type=='import'">送</view> -->
|
<view v-if="item.displayDiscount">
|
<text class="price">{{item.displayDiscount.split(',')[0]}}</text>
|
<text class="zhe">{{item.displayDiscount.split(',').length>1?item.displayDiscount.split(',')[1]:''}}</text>
|
</view>
|
<view v-else-if="Number(item.moneyType)==2">
|
<text class="price">{{item.money?Number(item.money*10):''}}</text>
|
<text class="zhe">折</text>
|
</view>
|
<view v-else-if="Number(item.moneyType)==4">
|
<view class="vipName">
|
<text v-if="Number(item.userLvType)==4">臻享专区</text>
|
<text v-else-if="Number(item.userLvType)==-1">臻享会员</text>
|
<text
|
v-else-if="Number(item.userLvType)<4">{{['普通会员','畅享会员','悦享会员','臻享会员'][item.userLvType]}}</text>
|
<text v-else>userLvType下标超出:{{item.userLvType}}</text>
|
</view>
|
<view class="type">
|
<text v-if="Number(item.userLvType)==4">惠购权</text>
|
<text v-else-if="Number(item.userLvType)==-1">体验券</text>
|
<text v-else>权益券</text>
|
</view>
|
</view>
|
<view v-else>
|
<block v-if="item.materialFlag">
|
<view class="pic-num">指定商品</view>
|
<text class='price num num2'>1件</text>
|
</block>
|
<text class='price num' v-else>{{item.money?Number(item.money):''}}</text>
|
</view>
|
<view class="pic-num" v-if="item.displayDiscount">{{item.displayDiscount.split(',').length>2?item.displayDiscount.split(',')[2]:''}}</view>
|
<view class="pic-num" v-else-if="item.moneyType==4"></view>
|
<block v-else>
|
<view class="pic-num" v-if="item.materialFlag">0元兑换</view>
|
<view class="pic-num" v-else>满{{ item.minPrice?Number(item.minPrice):'' }}元可用</view>
|
</block>
|
<span class='corner tp rt'></span>
|
<span class='corner bm rt'></span>
|
</view>
|
<view class='text'
|
:class="item.validStr==='unusable'||item.validStr==='overdue'||item.validStr==='notStart'?'textGray':(Number(item.moneyType)==4 &&[4,-1].includes(item.userLvType)?'zoneText':'')">
|
<view class='condition line2'>
|
<span class="line-title quanyi"
|
:class="item.validStr==='unusable'||item.validStr==='overdue'||item.validStr==='notStart' ? 'gray' : 'bg-color-check'"
|
v-if="item.moneyType === 4 && [4,-1].includes(item.userLvType)">权益</span>
|
<span class="line-title"
|
:class="item.validStr==='unusable'||item.validStr==='overdue'||item.validStr==='notStart' ? 'gray' : 'bg-color-check'"
|
v-else-if="item.moneyType === 4">权益</span>
|
<span class="line-title"
|
:class="item.validStr==='unusable'||item.validStr==='overdue'||item.validStr==='notStart' ? 'gray' : 'bg-color-check'"
|
v-else-if="item.useType === 1">通用</span>
|
<span class="line-title"
|
:class="item.validStr==='unusable'||item.validStr==='overdue'||item.validStr==='notStart' ? 'gray' : 'bg-color-check'"
|
v-else-if="item.useType === 2">商品</span>
|
<span class="line-title"
|
:class="item.validStr==='unusable'||item.validStr==='overdue'||item.validStr==='notStart' ? 'gray' : 'bg-color-check'"
|
v-else-if="item.useType === 3">品类</span>
|
<span v-if="item.moneyType === 4 &&Number(item.userLvType)==4" class="name">仅限臻享专区使用</span>
|
<span v-else-if="item.moneyType === 4" class="name">仅限分类商品使用</span>
|
<span v-else class="name">{{item.name}}</span>
|
</view>
|
<view class='data acea-row row-between-wrapper'>
|
<view v-if="Number(item.moneyType)==4&&Number(item.userLvType)==-1">
|
自动优先使用本券结算
|
</view>
|
<view v-else-if="Number(item.moneyType)==4&&item.name=='长期固定券'">长期</view>
|
<view v-else>
|
<block v-if="item.materialFlag">
|
<view>请在{{item.useEndTimeStr}}前</view>
|
<view>完成兑换</view>
|
</block>
|
<block v-else>
|
<view>{{item.useStartTimeStr}}至</view>
|
<view>{{item.useEndTimeStr}}</view>
|
</block>
|
</view>
|
<!-- #ifdef MP -->
|
<button v-if="item.couponPackShareStatus === 'WAIT_SHARE'" class="bnt bg-blue share_coupon_btn"
|
open-type="share" hover-class="none" @click="handleShareCoupon(item)">去分享</button>
|
<view v-else-if="item.couponPackShareStatus" class="bnt gray">{{ couponPackShareStatusText(item) }}</view>
|
<!-- #endif -->
|
<!-- #ifndef MP -->
|
<view v-if="item.couponPackShareStatus === 'WAIT_SHARE'" class="bnt bg-blue"
|
@click="handleShareCoupon(item)">去分享</view>
|
<view v-else-if="item.couponPackShareStatus" class="bnt gray">{{ couponPackShareStatusText(item) }}</view>
|
<!-- #endif -->
|
<view v-else class='bnt' @click="goToCate(item)"
|
:class="item.validStr==='unusable'||item.validStr==='overdue'||item.validStr==='notStart'?'gray':(Number(item.moneyType)==4&&[4,-1].includes(item.userLvType)?'bg-zone':'bg-blue')">
|
{{ item | validStrFilter}}
|
</view>
|
</view>
|
<span class='corner tp lt'></span>
|
<span class='corner bm lt'></span>
|
</view>
|
</view>
|
</view>
|
<view class='loadingicon acea-row row-center-wrapper' v-if="couponsList.length">
|
<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
|
</view>
|
<view class='noCommodity' v-if="!couponsList.length">
|
<view class='pictrue'>
|
<image src='https://ossacmall.bluedeer.com.cn/app/static/images/noCoupon.png'></image>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {
|
HTTP_REQUEST_URL,
|
THIRD_APPID
|
} from '@/config/app';
|
import {
|
getUserCoupons
|
} from '@/api/api.js';
|
import {
|
couponPackSharelink
|
} from '@/api/store.js';
|
import {
|
toLogin
|
} from '@/libs/login.js';
|
import {
|
mapGetters
|
} from "vuex";
|
import home from '@/components/home';
|
let app = getApp();
|
export default {
|
components: {
|
home
|
},
|
filters: {
|
validStrFilter(item) {
|
const statusMap = {
|
'usable': '去使用',
|
'unusable': '已使用',
|
'overdue': '已过期',
|
'notStart': '未开始'
|
}
|
return item.materialFlag?statusMap[item.validStr].replace('去使用','去兑换'):statusMap[item.validStr]
|
}
|
},
|
computed: mapGetters(['isLogin', 'uid']),
|
data() {
|
return {
|
couponsList: [],
|
loading: false,
|
loadend: false,
|
loadTitle: '加载更多', //提示语
|
page: 1,
|
limit: 10,
|
navOn: 'usable',
|
isAuto: false, //没有授权的不会自动授权
|
isShowAuth: false, //是否隐藏授权
|
isPageShow: false,
|
loginBackFn: null,
|
tabLinkArr: [
|
'pages/index/index',
|
'pages/goods_cate/goods_cate',
|
'pages/user/index'
|
],
|
isCouponShare: false,
|
activityId: '',
|
friendStatus: '',
|
shareCouponId: '',
|
shareCouponName: '',
|
};
|
},
|
onHide() {
|
let that = this;
|
that.isPageShow = false;
|
uni.$off('BELONG_READY', that.belongInfoReadyFn);
|
uni.$off('loginFlSuccess', that.registerFn);
|
},
|
onShow() {
|
let that = this;
|
that.isPageShow = true;
|
let pages = getCurrentPages(),
|
currPage = pages[pages.length - 1];
|
console.log('------------------page onShow start-----------------');
|
console.log('route', currPage.route);
|
console.log('options', currPage.options);
|
console.log('------------------page onShow end-----------------');
|
|
if (that.$store.getters.isBelong) {
|
that.belongInfoReadyFn({
|
isRegister: false
|
})
|
} else {
|
uni.$once('BELONG_READY', that.belongInfoReadyFn);
|
}
|
},
|
// #ifdef MP
|
onShareAppMessage: function(options) {
|
let that = this;
|
that.$store.commit('UPDATE_isSystemHide', {
|
isSystemHide: (new Date()).getTime()
|
});
|
if (that.isCouponShare) {
|
that.isCouponShare = false;
|
return that.buildCouponShareConfig(options);
|
}
|
return {};
|
},
|
// #endif
|
methods: {
|
belongInfoReadyFn(data) {
|
let that = this;
|
that.checkLoginFn()
|
},
|
checkLoginFn() {
|
let that = this;
|
let pages = getCurrentPages(),
|
currPage = pages[pages.length - 1];
|
that.addTrack('yy_pageView', {
|
pageTitle_var: '我的优惠券',
|
pagePath_var: currPage.$page.fullPath,
|
pageType_var: '我的优惠券'
|
});
|
if (that.$store.getters.isLogin) {
|
that.onLoadFn();
|
} else {
|
toLogin(that);
|
}
|
that.loginBackFn = function() {
|
that.onLoadFn();
|
}
|
uni.$once('loginFlSuccess', that.registerFn);
|
},
|
registerFn() {
|
let that = this;
|
if (that.isPageShow) {
|
if (that.loginBackFn) {
|
that.loginBackFn();
|
}
|
that.loginBackFn = null;
|
}
|
},
|
onLoadFn() {
|
let that = this;
|
that.getUseCoupons();
|
},
|
goToThird(url, appId) {
|
//第三方小程序
|
// /pages/home/index?source=INSMART&sourceScene=test&agentNo=90028476&agentChannel=BK&agentCompany=123&agentBranch=123
|
let miniProgramInfo = uni.getAccountInfoSync().miniProgram;
|
|
if (url.indexOf('?') < 0) {
|
url += '?';
|
} else {
|
url += '&';
|
}
|
if (app.globalData.source) {
|
url += 'source=' + app.globalData.source;
|
} else {
|
url += 'source=MALL';
|
}
|
url += '&sourceScene=home';
|
url += '&agentNo=' + ((this.$store.getters.belong && this.$store.getters.belong.agentNo) ? this.$store
|
.getters.belong.agentNo : '');
|
url += '&agentChannel=' + ((this.$store.getters.belong && this.$store.getters.belong.channel) ? this.$store
|
.getters.belong.channel : ''); //归属代理人渠道
|
url += '&agentCompany=' + ((this.$store.getters.belong && this.$store.getters.belong.companyCode) ? this
|
.$store.getters.belong.companyCode : ''); //agentCompany
|
|
url += '&agentBranch=' + ((this.$store.getters.belong && this.$store.getters.belong.branchCode) ? this
|
.$store.getters.belong.branchCode : ''); //归属代理人支公司
|
url += '&custAgentOrgNo=' + ((this.$store.getters.belong && this.$store.getters.belong.subCode) ? this
|
.$store.getters.belong.subCode : ''); //归属代理人机构编码
|
|
url += 'unionId=' + this.$store.getters.unionId;
|
url += '&mobile=' + ((this.$store.getters.belong && this.$store.getters.belong.mobile) ? this.$store
|
.getters.belong.mobile : this.$store.getters.userInfo.mobile);
|
console.log(url);
|
uni.navigateToMiniProgram({
|
appId: appId ? appId : THIRD_APPID,
|
path: url,
|
envVersion: miniProgramInfo.envVersion == 'release' ? 'release' : 'trial',
|
})
|
},
|
isTabLink(link) {
|
let isTab = false;
|
this.tabLinkArr.forEach((item) => {
|
if (link.indexOf(item) >= 0) {
|
isTab = true;
|
}
|
})
|
return isTab;
|
},
|
handleShareCoupon(item) {
|
let that = this;
|
that.setShareCouponContext(item);
|
if (!that.canShareFriendCoupon()) {
|
return;
|
}
|
if (!that.isLogin) {
|
toLogin(that);
|
return;
|
}
|
// #ifdef MP
|
that.isCouponShare = true;
|
// #endif
|
// #ifndef MP
|
uni.showToast({
|
title: '请在微信小程序中分享给好友',
|
icon: 'none'
|
});
|
// #endif
|
},
|
setShareCouponContext(item) {
|
this.friendStatus = item.couponPackShareStatus || '';
|
this.activityId = item.activityId || '';
|
this.shareCouponId = item.couponId || '';
|
this.shareCouponName = item.name || '';
|
},
|
couponPackShareStatusText(item) {
|
const map = {
|
RECEIVED: '已被领取',
|
USED: '已使用',
|
EXPIRED: '已过期'
|
};
|
return map[item.couponPackShareStatus] || '';
|
},
|
canShareFriendCoupon() {
|
return !['RECEIVED', 'USED', 'EXPIRED'].includes(this.friendStatus);
|
},
|
buildCouponShareConfig(options) {
|
let that = this;
|
let pages = getCurrentPages(),
|
currPage = pages[pages.length - 1];
|
return couponPackSharelink({
|
activityId: that.activityId
|
}).then(res => {
|
const data = res.data || {};
|
let shareUrl = data.path
|
that.addTrack('yy_contentPageShare', {
|
'sharePosition_var': '好友券分享按钮',
|
'shareType_var': '微信好友',
|
'pageTitle_var': '我的优惠券',
|
'pageType_var': '我的优惠券',
|
'pagePath_var': currPage.$page.fullPath,
|
'productID_var': '-',
|
'productName_var': '-',
|
'contentId_var': that.shareCouponId,
|
'contentName_var': that.shareCouponName || '-',
|
'contentType_var': '优惠券',
|
'contentLabel_var': '-',
|
});
|
return {
|
title: '好友专享优惠券',
|
path: shareUrl,
|
imageUrl: data.shareCoverImage || '',
|
};
|
}).catch(err => {
|
uni.showToast({
|
title: err.message || '分享失败，请稍后重试',
|
icon: 'none'
|
});
|
return {};
|
});
|
},
|
goToCate: function(item) {
|
let that = this
|
if (item.validStr == 'usable') {
|
if (item.appId && item.toPath) {
|
that.goToThird(item.toPath, item.appId);
|
} else if (item.toPath) {
|
if (this.isTabLink(item.toPath)) {
|
uni.switchTab({
|
url: item.toPath
|
});
|
} else {
|
uni.navigateTo({
|
url: item.toPath
|
});
|
}
|
} else {
|
uni.switchTab({
|
url: '/pages/goods_cate/goods_cate'
|
});
|
}
|
}
|
},
|
// 授权关闭
|
authColse: function(e) {
|
this.isShowAuth = e
|
},
|
onNav: function(type) {
|
this.navOn = type;
|
this.couponsList = [];
|
this.page = 1;
|
this.loadend = false;
|
this.getUseCoupons();
|
},
|
/**
|
* 获取领取优惠券列表
|
*/
|
getUseCoupons: function() {
|
let that = this;
|
if (this.loadend) return false;
|
if (this.loading) return false;
|
getUserCoupons({
|
page: that.page,
|
limit: that.navOn == 'unusable' ? 10 : that.limit,
|
type: that.navOn
|
}).then(res => {
|
let list = res.data ? res.data.list : [],
|
loadend = list.length < that.limit;
|
let couponsList = that.$util.SplitArray(list, that.couponsList);
|
if(that.navOn == 'usable'){
|
var index1=couponsList.indexOf({
|
moneyType: 4,
|
userLvType: that.$store.getters.userInfo.level,
|
isUse: true,
|
name: '长期固定券',
|
validStr: "usable"
|
});
|
if(index1>=0){
|
couponsList.splice(index1,1);
|
}
|
couponsList.push({
|
moneyType: 4,
|
userLvType: that.$store.getters.userInfo.level,
|
isUse: true,
|
name: '长期固定券',
|
validStr: "usable"
|
})
|
}
|
that.$set(that, 'couponsList', couponsList);
|
that.loadend = loadend;
|
that.loadTitle = loadend ? '我也是有底线的' : '加载更多';
|
that.page = that.page + 1;
|
that.loading = false;
|
}).catch(err => {
|
that.loading = false;
|
that.loadTitle = '加载更多';
|
});
|
}
|
},
|
/**
|
* 页面上拉触底事件的处理函数
|
*/
|
onReachBottom: function() {
|
this.getUseCoupons();
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.navbar {
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 106rpx;
|
background: #F5F5F5;
|
z-index: 9;
|
display: flex;
|
justify-content: flex-start;
|
gap: 60rpx;
|
padding: 0 30rpx;
|
|
.item {
|
font-size: 30rpx;
|
color: #999999;
|
&.on {
|
// border-bottom-color: #E93323;
|
color: #000;
|
font-weight: bold;
|
position: relative;
|
|
&::after {
|
content: '';
|
position: absolute;
|
width: 60rpx;
|
height: 44rpx;
|
bottom: 12rpx;
|
clip-path: circle(50% at 50% 100%);
|
border: 6rpx solid #FFE20E;
|
border-radius: 50%;
|
}
|
}
|
}
|
}
|
|
.money {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
background: #FFE20E !important;
|
border-radius: 14rpx;
|
color: #000000 !important;
|
border-right: 4rpx dashed #F5F5F5;
|
position: relative;
|
width: 260rpx !important;
|
|
&.zoneMoney {
|
background: none !important;
|
|
.vipName {
|
color: #002561;
|
}
|
|
.type {
|
color: #002561;
|
}
|
}
|
|
.give {
|
font-weight: bold;
|
font-size: 19rpx;
|
color: #FFFFFF;
|
text-align: center;
|
font-style: normal;
|
text-transform: none;
|
background-color: #016DCC;
|
border-radius: 14rpx 14rpx 14rpx 0;
|
width: 49rpx;
|
height: 28rpx;
|
line-height: 28rpx;
|
position: absolute;
|
left: 0;
|
top: 0;
|
z-index: 2;
|
}
|
|
.price {
|
font-size: 76rpx !important;
|
}
|
|
.zhe {
|
font-size: 30rpx;
|
}
|
|
.vipName {
|
font-size: 38rpx !important;
|
font-weight: 600;
|
}
|
|
.type {
|
font-size: 27rpx !important;
|
font-weight: 600;
|
}
|
|
&.moneyGray {
|
background: #DDDDDD !important;
|
color: #6f6f6f !important;
|
}
|
|
.num {
|
position: relative;
|
|
&::before {
|
content: '¥';
|
position: absolute;
|
left: -22rpx;
|
top: 8rpx;
|
font-size: 26rpx;
|
// height: 30rpx;
|
// width: 30rpx;
|
}
|
&.num2{
|
line-height: 1;
|
}
|
&.num2::before{
|
content: '';
|
}
|
}
|
}
|
|
.pic-num {
|
// color: #ffffff;
|
font-size: 24rpx;
|
}
|
|
.coupon-list {
|
margin-top: 128rpx;
|
|
.corner {
|
position: absolute;
|
width: 30rpx;
|
height: 30rpx;
|
background: #F5F5F5;
|
border-radius: 30rpx;
|
|
&.rt {
|
right: -15rpx;
|
}
|
|
&.tp {
|
top: -15rpx;
|
}
|
|
&.bm {
|
bottom: -15rpx;
|
}
|
|
&.lt {
|
left: -15rpx;
|
}
|
}
|
|
.item {
|
margin-bottom: 20rpx;
|
|
&.zone {
|
background: linear-gradient(to left, #F6C488, #FADDBB, #FEEED6, #FFF4D6);
|
border-radius: 14rpx;
|
// background: linear-gradient(to left, red, blue);
|
}
|
}
|
}
|
|
.coupon-list .item .text {
|
height: 100%;
|
background: #FFE20E;
|
border-radius: 14rpx;
|
position: relative;
|
width: 426rpx !important;
|
|
&.zoneText {
|
background: none !important;
|
color: #002561;
|
|
.data,
|
.name {
|
color: #002561 !important;
|
}
|
}
|
|
&.textGray {
|
background: #DDDDDD !important;
|
|
.gray {
|
background: #F5F5F5 !important;
|
color: #979797 !important;
|
}
|
|
.data,
|
.condition {
|
color: #6f6f6f !important;
|
}
|
}
|
|
.data {
|
padding-bottom: 16rpx;
|
color: #000000;
|
font-size: 22rpx;
|
}
|
|
.bnt {
|
// width: 158rpx;
|
height: 60rpx;
|
border-radius: 8rpx;
|
line-height: 60rpx;
|
text-align: center;
|
|
&.bg-blue {
|
background: #016DCC;
|
}
|
|
&.bg-zone {
|
background: #002561;
|
color: #FFF2A7 !important;
|
}
|
|
&.gray {
|
background: #DDDDDD;
|
color: #6f6f6f !important;
|
}
|
}
|
|
.share_coupon_btn {
|
padding: 0;
|
margin: 0;
|
border: none;
|
color: #fff;
|
font-size: 22rpx;
|
line-height: 60rpx;
|
|
&::after {
|
border: none;
|
}
|
}
|
}
|
|
.coupon-list .item .text .condition {
|
/* display: flex;
|
align-items: center; */
|
}
|
|
.condition .name {
|
font-weight: bold;
|
}
|
|
.condition .line-title {
|
width: 90rpx;
|
height: 40rpx !important;
|
line-height: 40rpx !important;
|
padding: 4rpx 12rpx;
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
background: rgba(4, 199, 99, 1);
|
// border: 1px solid rgba(232, 51, 35, 1);
|
opacity: 1;
|
border-radius: 20rpx;
|
font-size: 24rpx !important;
|
color: #FFFFFF;
|
margin-right: 12rpx;
|
|
&.quanyi {
|
background: #016DCC !important;
|
color: #FFF2A7 !important;
|
}
|
}
|
|
.noCommodity {
|
margin-top: 300rpx;
|
}
|
</style>
|
