<script>
|
|
import tehuichongzhi from "@/pages/quanshou/components/tehuichongzhi.vue"; //虚拟
|
import lanyaerji from "@/pages/quanshou/components/lanyaerji.vue"; // 实物
|
|
export default {
|
name: "index",
|
components: {
|
tehuichongzhi,
|
lanyaerji,
|
},
|
data() {
|
return {
|
tips:'',
|
active: 0,
|
VIP: 1, // 1黄金 2铂金 3黑金
|
lst:[],
|
vipConfig: {
|
1: {
|
bg: "/static/imgs/quanshou/TBBG1.png",
|
box: "/static/imgs/quanshou/NEWBOX1.png",
|
title: "/static/imgs/quanshou/VIPTXT1.png",
|
level: "/static/imgs/quanshou/VIP1.png",
|
textClass: "vip1-text",
|
progressBg: "#BBA767",
|
growText: " 88800/100000",
|
benefitText: "297.00"
|
},
|
2: {
|
bg: "/static/imgs/quanshou/TBBG2.png",
|
box: "/static/imgs/quanshou/NEWBOX2.png",
|
title: "/static/imgs/quanshou/VIPTXT2.png",
|
level: "/static/imgs/quanshou/VIP2.png",
|
textClass: "vip2-text",
|
progressBg: "#8094A6",
|
growText: " 88800/100000",
|
benefitText: "594.00"
|
},
|
3: {
|
bg: "/static/imgs/quanshou/TBBG3.png",
|
box: "/static/imgs/quanshou/VIPBOX3.png",
|
title: "/static/imgs/quanshou/VIPTXT3.png",
|
level: "/static/imgs/quanshou/VIPLVL3.png",
|
textClass: "vip3-text",
|
progressBg: "#7B776E",
|
growText: " 88800/100000",
|
benefitText: "891.00"
|
}
|
},
|
total: 0,
|
};
|
},
|
computed: {
|
currentVip() {
|
return this.vipConfig[this.VIP] || this.vipConfig[1];
|
}
|
},
|
onLoad(pro) {
|
|
const _this = this;
|
uni.request({
|
url: _this.$webHost+'/api/v2/customer/getRyxBenefitsRecordList?phone='+_this.$util.getUserInfo().phone,
|
success: function (res) {
|
if(res.data.code==200){
|
_this.lst = res.data.data;
|
_this.lst.forEach(item=>{
|
if(item && item.isBuy === 1 && [1,2,3].includes(item.period)) {_this.VIP = item.period;}
|
})
|
_this.lst.forEach(item=>{
|
if(item.isBuy === 1 ) {
|
// 保留两位小数
|
_this.total += parseFloat(item.amount);
|
}
|
})
|
_this.total = Intl.NumberFormat('zh-CN', {
|
minimumFractionDigits: 2,
|
maximumFractionDigits: 2,
|
}).format(_this.total);
|
} else {
|
|
|
}
|
}
|
})
|
},
|
methods: {
|
numbs(period) {
|
const obj ={
|
1:'一',
|
2:'二',
|
3:'三'
|
}
|
return obj[period]
|
},
|
toHuiyuan(){
|
const _this = this;
|
uni.request({
|
url: _this.$webHost+'/api/v2/memberEquity/getUrlByShop/'+_this.$util.getUserInfo().phone,
|
success: function (res) {
|
if(res.data.code==200){
|
uni.request( {
|
url: _this.$webHost+'/api/v2/memberEquity/clickUrlByShop/'+_this.$util.getUserInfo().phone,
|
})
|
uni.navigateTo( {
|
url: '/pages/web/index?webUel=' + encodeURIComponent(res.data.data.url)
|
})
|
} else {
|
uni.showToast( {
|
title: res.data.data || res.data.msg,
|
icon: 'none'
|
})
|
}
|
}
|
})
|
|
|
},
|
getTips(){
|
const _this = this;
|
uni.request({
|
url: _this.$webHost+'/api/v2/shop/findExpressNo?phone='+_this.$util.getUserInfo().phone,
|
success: function (res) {
|
if(res.data.code==200){
|
_this.tips = res.data.data;
|
_this.$refs.comment.open()
|
|
} else {
|
uni.showToast( {
|
title: res.data.data || res.data.msg,
|
icon: 'none'
|
})
|
}
|
}
|
})
|
},
|
}
|
};
|
</script>
|
|
<template>
|
<view style="background: white;">
|
<!-- 顶部 VIP 卡片 -->
|
<view class="vip-box" :style="{ backgroundImage: `url(${currentVip.box})` }" >
|
<view style="position: relative">
|
<image :src="currentVip.level" style="height: 200rpx;width: 100%;"></image>
|
<view style="position: absolute;top: 120rpx;left: 48rpx;color: #754200;font-size: 28rpx;" :class="VIP==1?'vip1-num':'vip2-num'">已购会员{{ total }}</view>
|
</view>
|
<view class="card-wrap" style="margin-top: 38rpx;">
|
<view class="card-item" v-for="i in lst" :class="i.isBuy?'card-item-buy':''">
|
<!-- <view class="card-title">{{numbs(i.period)}}期会员</view>-->
|
<view class="card-title">{{i.buyDate}}</view>
|
<view class="card-price">
|
<text>¥</text>
|
<text class="card-num" >{{ i.amount }}</text>
|
</view>
|
<view class="card-date" style="height: 40rpx"> </view>
|
<!-- <view class="card-date">{{ i.buyDate }}</view>-->
|
<view class="has-buy">{{ i.isBuy?'已扣款' : '待扣款' }}</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 会员购买 + 权益部分 -->
|
<view class="content-wrap">
|
|
|
<view class="tab-wrap">
|
<text @click="active=0" :class="active==0?'active':''">实物权益</text>
|
<text @click="active=1" :class="active==1?'active':''">虚拟权益</text>
|
</view>
|
|
<view class="note" style="margin-bottom: 20rpx;text-align: center" v-if="active==0">页面展示为实物样例，实际以用户收到的商品为准</view>
|
|
<lanyaerji v-if="active==0" style="margin:0 30rpx;"/>
|
|
<tehuichongzhi v-else :VIP="VIP" style="margin-top: 50rpx;" />
|
|
<view style="text-align: center;margin: 30rpx;">
|
<button class="exchange-btn" v-if="active==0" @click="getTips">我要查物流</button>
|
<button class="exchange-btn" v-else @click="toHuiyuan">我要兑换</button>
|
<view class="note" v-if="active==0">* 页面为实物样例，实际用户收到的商品为准</view>
|
<view class="note" v-else>* 页面为虚拟权益预览，实际用户以当日兑换内容为准</view>
|
</view>
|
</view>
|
|
|
<uni-popup type="center" ref="comment" >
|
<view style="background-image: url('/static/imgs/BOXSDF.png');border-radius: 48rpx;padding: 28rpx ;width: 650rpx;background-repeat: no-repeat;background-size: 100% 100%">
|
<view style="text-align: center;padding-top: 30rpx;" >
|
<image src="/static/imgs/yifa.png" style="width:372rpx;height: 240rpx;"></image>
|
</view>
|
<view style="font-size: 32rpx;font-weight: 600;color: #333333;text-align: center;margin-top: 34rpx;margin-bottom: 80rpx;padding: 0 28rpx;">
|
<view>{{ tips }}</view>
|
</view>
|
<view @click="$refs.comment.close()" style="font-weight: 500;font-size: 32rpx;color: #fff;text-align: center;padding: 24rpx 28rpx;border-top: 2rpx solid #EEEEEE;background: #FF1472;border-radius: 40rpx ;">好的</view>
|
</view>
|
</uni-popup>
|
</view>
|
</template>
|
|
<style scoped lang="scss">
|
|
/* 顶部 VIP 样式 */
|
.vip-bg {
|
background-size: 100%;
|
background-repeat: no-repeat;
|
padding-top: 60rpx;
|
padding-bottom: 150rpx;
|
}
|
.vip-box {
|
background-repeat: no-repeat;padding:20rpx 30rpx 60rpx 30rpx;
|
}
|
.gradient-text {
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
font-weight: 600;
|
}
|
.big-text {
|
margin-top: 20rpx;
|
font-size: 28rpx;
|
}
|
.small-text {
|
margin-top: 20rpx;
|
font-size: 24rpx;
|
}
|
.vip1-text {
|
background: linear-gradient(90deg, #754200, #ff9900);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
.vip2-text {
|
background: linear-gradient(90deg, #425268, #8094A6);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
.vip3-text {
|
background: linear-gradient(90deg, #ECD4C6, #C79372);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
.progress-bar {
|
height: 16rpx;
|
border-radius: 20rpx;
|
width: 100%;
|
margin-top: 24rpx;
|
position: relative;
|
}
|
.progress-inner {
|
position: absolute;
|
background: #fff;
|
border-radius: 6rpx;
|
left: 0;
|
top: 0;
|
width: 50%;
|
height: 16rpx;
|
}
|
|
/* 内容区 */
|
.content-wrap {
|
padding: 30rpx 0;
|
background: #fff;
|
border-radius: 50rpx 50rpx 0 0;
|
position: relative;
|
top: -60rpx;
|
}
|
.card-wrap {
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 40rpx;
|
}
|
.card-item {
|
background: #f5f5f5;
|
border-radius: 24rpx;
|
padding-top: 60rpx;
|
text-align: center;
|
//width: calc(50% - 14rpx);
|
width: 100%;
|
position: relative;
|
}
|
.card-title {
|
font-size: 32rpx;
|
font-weight: 600;
|
margin-bottom: 34rpx;
|
}
|
.card-price {
|
color: #333;
|
font-size: 28rpx;
|
font-weight: 600;
|
}
|
.card-num {
|
font-size: 48rpx;
|
font-weight: bold;
|
margin: 0 8rpx;
|
}
|
.card-date {
|
font-size: 24rpx;
|
margin-top: 28rpx;
|
border-radius: 0rpx 0rpx 24rpx 24rpx;
|
background: #fff;
|
//background: #EAEAEA;
|
color: #666666;
|
padding: 16rpx 0;
|
}
|
.has-buy {
|
background: #FF922C;
|
border-radius: 8rpx;
|
height: 42rpx;
|
width: 92rpx;
|
font-size: 24rpx;
|
color: #fff;
|
position: absolute;
|
top: -21rpx;
|
left: 28rpx;
|
line-height: 42rpx;
|
display: none;
|
}
|
.card-item-buy {
|
background: #fff;
|
}
|
.card-item-buy{
|
.card-date{
|
//background: #FF922C;
|
background: #fff;
|
color: white;
|
}
|
.has-buy{
|
display: block;
|
}
|
|
}
|
/* tab */
|
.tab-wrap {
|
display: flex;
|
justify-content: space-evenly;
|
margin-bottom: 50rpx;
|
}
|
.tab-wrap text {
|
font-weight: 600;
|
font-size: 36rpx;
|
color: #666;
|
}
|
.active {
|
color: #333 !important;
|
position: relative;
|
&::after {
|
content: "";
|
display: block;
|
width: 50rpx;
|
height: 8rpx;
|
background: linear-gradient( 91deg, #FDFAFF 0%, #F9C969 100%);
|
border-radius: 32rpx;
|
position: absolute;
|
bottom: -20rpx;
|
left: calc(50% - 25rpx);
|
}
|
}
|
|
/* 按钮 */
|
.exchange-btn {
|
font-weight: 600;
|
font-size: 36rpx;
|
color: #FFD39A;
|
padding: 10rpx;
|
background: linear-gradient( 91deg, #A97132 0%, #542C09 100%);
|
border-radius: 200rpx;
|
}
|
.note {
|
font-size: 24rpx;
|
color: #999;
|
margin-top: 20rpx;
|
}
|
.vip2-num{
|
color: #8E1768 !important;
|
}
|
</style>
|
