<script>
|
|
export default {
|
name: "index",
|
components: {
|
},
|
data() {
|
return {
|
tips:'',
|
active: 0,
|
VIP: 2, // 1黄金 2铂金 3黑金
|
lst:[],
|
vipConfig: {
|
1: {
|
bg: "/static/img/quanshou/TBBG1.png",
|
box: "/static/img/quanshou/VIPBOX1.png",
|
title: "/static/img/quanshou/VIPTXT1.png",
|
level: "/static/img/quanshou/VIPLVL1.png",
|
textClass: "vip1-text",
|
progressBg: "#BBA767",
|
growText: " 88800/100000",
|
benefitText: "297.00"
|
},
|
2: {
|
bg: "/static/img/quanshou/TBBG2.png",
|
box: "/static/img/quanshou/VIPBOX2.png",
|
title: "/static/img/quanshou/VIPTXT2.png",
|
level: "/static/img/quanshou/VIPLVL2.png",
|
textClass: "vip2-text",
|
progressBg: "#8094A6",
|
growText: " 88800/100000",
|
benefitText: "594.00"
|
},
|
3: {
|
bg: "/static/img/quanshou/TBBG3.png",
|
box: "/static/img/quanshou/VIPBOX3.png",
|
title: "/static/img/quanshou/VIPTXT3.png",
|
level: "/static/img/quanshou/VIPLVL3.png",
|
textClass: "vip3-text",
|
progressBg: "#7B776E",
|
growText: " 88800/100000",
|
benefitText: "891.00"
|
}
|
},
|
total: 0,
|
isAgree: 0,
|
};
|
},
|
computed: {
|
currentVip() {
|
return this.vipConfig[this.VIP] || this.vipConfig[1];
|
}
|
},
|
onLoad(pro) {
|
|
const _this = this;
|
this.isAgree = uni.getStorageSync('boughtEquity')
|
uni.request({
|
url: _this.$webHost+'/api/v2/customer/getRyxBenefitsRecordList?phone='+_this.$util.getUserInfo().phone+'&appId='+uni.getStorageSync('ygxLogin').appId,
|
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);
|
}
|
})
|
console.log('_this.lst',_this.lst)
|
_this.total = Intl.NumberFormat('zh-CN', {
|
minimumFractionDigits: 2,
|
maximumFractionDigits: 2,
|
}).format(_this.total);
|
} else {
|
|
|
}
|
}
|
})
|
},
|
methods: {
|
goHome(){
|
uni.switchTab({
|
url: '/pages/index/index'
|
});
|
// uni.navigateBack()
|
},
|
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,
|
data:{
|
customerId: uni.getStorageSync('ygxLogin').customerId,
|
appId: uni.getStorageSync('ygxLogin').appId
|
},
|
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/toUrl?webUel=' + encodeURIComponent(res.data.data.url)
|
})
|
} else {
|
_this.tips = res.data.data || res.data.msg;
|
_this.$refs.life.open()
|
// 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: url('/static/img/qsBg.png') no-repeat top center; background-size: 100%;background-color: #ffffff;height: 100%;padding-top: 80rpx;">
|
<!-- 顶部 VIP 卡片 -->
|
<!-- <view-->
|
<!-- class="vip-bg"-->
|
<!-- :style="{ backgroundImage: `url(${currentVip.bg})` }"-->
|
<!-- >-->
|
<!-- <view-->
|
<!-- class="vip-box"-->
|
<!-- :style="{ backgroundImage: `url(${currentVip.box})` }"-->
|
<!-- >-->
|
<!-- <view>-->
|
<!-- <image :src="currentVip.title" style="width: 160rpx;height: 45rpx;" />-->
|
<!-- </view>-->
|
|
<!-- <view class="gradient-text big-text" :class="currentVip.textClass">-->
|
<!-- 成长值 {{ currentVip.growText }}-->
|
<!-- </view>-->
|
|
<!-- <view-->
|
<!-- class="progress-bar"-->
|
<!-- :style="{ background: currentVip.progressBg }"-->
|
<!-- >-->
|
<!-- <view class="progress-inner" v-if="VIP==1" style="width: 29.7%"/>-->
|
<!-- <view class="progress-inner" v-if="VIP==2" style="width: 59.4%"/>-->
|
<!-- <view class="progress-inner" v-if="VIP==3" style="width: 89.1%"/>-->
|
<!-- </view>-->
|
|
<!-- <view class="gradient-text small-text" :class="currentVip.textClass">-->
|
<!-- 已购会员{{ total }}-->
|
<!-- </view>-->
|
|
<!-- <image-->
|
<!-- :src="currentVip.level"-->
|
<!-- style="width: 210rpx;height: 210rpx;position: absolute;top: -70rpx;right: 0;"-->
|
<!-- />-->
|
<!-- </view>-->
|
<!-- </view>-->
|
<!-- 新版 -->
|
<view>
|
<!-- 返回 -->
|
<view class="head" style="position: relative;height: 90rpx;">
|
<view style="display: flex;justify-content: flex-start;position: absolute;left: 30rpx;top: 30rpx;z-index: 9;color: #FFFFFF;">
|
<view @tap="goHome" id="home" class="home acea-row row-center-wrapper iconfont icon-fanhui2 h5_back" style="background: url('/static/img/back.png') no-repeat top center; background-size: 100%;width: 40rpx;height: 40rpx;">
|
<!-- <view @tap="goHome" id="home" class="home acea-row row-center-wrapper iconfont icon-fanhui2 h5_back icon-shouye4" :style="{ height: '80rpx',lineHeight: '80rpx'}" >-->
|
</view>
|
</view>
|
<view style="text-align: center;color: #ffffff;height: 90rpx;line-height: 90rpx;">会员中心</view>
|
</view>
|
<!-- 尊享会员年卡 -->
|
<view style="background: url('/static/img/qyBg2.png') no-repeat top center; background-size: 100%;width: 100%;height: 390rpx;padding: 80rpx;margin-top: 30rpx;">
|
<view style="font-size: 48rpx;font-weight: bold;background: -webkit-linear-gradient(#2A261A, #141316);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">黑卡VIP卡</view>
|
<view v-if="lst.length" style="font-size: 28rpx;font-weight: 400;color: #2A261A;">扣款日期：{{lst[0].buyDate}}</view>
|
<view v-if="lst.length" style="display: flex;margin-top: 50rpx;align-items: self-end;">
|
<view v-if="lst.length" style="font-size: 28rpx;width: 70%;">
|
<p style="background: -webkit-linear-gradient(#2A261A, #141316);-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-size: 48rpx;font-weight: 500;">¥{{lst[0].amount.toFixed(2)}} <span style="font-size: 24rpx;">{{lst[0].isBuy?'已扣款' : ''}}</span></p>
|
</view>
|
<!-- <view v-if="lst.length" style="font-size: 24rpx;width: 70%;">
|
<p style="background: -webkit-linear-gradient(#FFEEE7, #F4936F);-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-size: 36rpx;">¥{{lst[0].amount.toFixed(2)}} <span style="font-size: 24rpx;">{{lst[0].isBuy?'已扣款' : ''}}</span></p>
|
<p style="background: -webkit-linear-gradient(#FFEEE7, #F4936F);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">{{lst[0].buyDate}}</p>
|
</view> -->
|
<!-- <view style="width: 164rpx;height: 58rpx;text-align: center;line-height: 58rpx;background-color: #FFEEE7;border-radius: 18rpx;margin-top: 40rpx;display: flex;justify-content: center;align-items: center;">
|
|
<checkbox-group activeColor="#fff" @change='isAgree=!isAgree' style="">
|
<checkbox disabled checked="true" iconColor="#794007" iconSize="30" size="38" :name="1" shape="circle">{{isAgree?'已开通':'已开通'}}
|
</checkbox>
|
</checkbox-group>
|
</view> -->
|
</view>
|
</view>
|
<view style="background-color: #F4F4F4;padding: 0 30rpx;border-radius: 50rpx 50rpx 0 0;margin-top: 40rpx;">
|
<view class="tab-wrap" style="padding-top: 60rpx;">
|
<text @click="active=0" :class="active==0?'active':''">实物权益</text>
|
<text @click="active=1" :class="active==1?'active':''">虚拟权益</text>
|
</view>
|
<view v-if="active === 0" class="sw-container">
|
<image style="width: 100%;height: 220rpx;" mode="aspectFit" src="/static/img/quanshou/sw1.png"></image>
|
<image style="width: 100%;height: 220rpx;" mode="aspectFit" src="/static/img/quanshou/sw2.png"></image>
|
<image style="width: 100%;height: 220rpx;" mode="aspectFit" src="/static/img/quanshou/sw3.png"></image>
|
<image style="width: 100%;height: 220rpx;" mode="aspectFit" src="/static/img/quanshou/sw4.png"></image>
|
<image style="width: 100%;height: 220rpx;" mode="aspectFit" src="/static/img/quanshou/sw5.png"></image>
|
<image style="width: 100%;height: 220rpx;" mode="aspectFit" src="/static/img/quanshou/sw6.png"></image>
|
<image style="width: 100%;height: 220rpx;" mode="aspectFit" src="/static/img/quanshou/sw7.png"></image>
|
<image style="width: 100%;height: 220rpx;" mode="aspectFit" src="/static/img/quanshou/sw8.png"></image>
|
<button class="exchange-btn" v-if="active==0" @click="getTips">我要查询</button>
|
<view class="note" style="padding-bottom: 50rpx;text-align: center;">页面展示为实物样例，实际以用户收到的商品为准</view>
|
</view>
|
<view v-if="active === 1">
|
<image style="width: 100%;height: 538rpx;" mode="aspectFit" src="/static/img/quanshou/xn1.png"></image>
|
<image style="width: 100%;height: 538rpx;" mode="aspectFit" src="/static/img/quanshou/xn2.png"></image>
|
<image style="width: 100%;height: 342rpx;" mode="aspectFit" src="/static/img/quanshou/xn3.png"></image>
|
<image style="width: 100%;height: 712rpx;margin-top: 20rpx;" mode="aspectFit" src="/static/img/quanshou/xn4.png"></image>
|
<button class="exchange-btn" @click="toHuiyuan">我要领取</button>
|
<view class="note" style="padding-bottom: 50rpx;text-align: center;">* 虚拟权益以实际兑换为准</view>
|
</view>
|
</view>
|
|
<!-- 专享会员生活权益 -->
|
<!-- <view style="padding: 0 30rpx;">
|
<view class="content-title" style="text-align: center;display: flex;align-items: center;justify-content: center;margin-top: 50rpx;margin-bottom: 40rpx;">
|
<image style="width: 111rpx;height: 8rpx;" src="/static/img/qsLeft.png"></image>
|
<view style="font-size: 36rpx;color: #FFEEE7;margin: 0 20rpx;">专享会员生活权益</view>
|
<image style="width: 111rpx;height: 8rpx;" src="/static/img/qsRight.png"></image>
|
</view>
|
<view class="life" style="background: url('/static/img/qsLife.png') no-repeat top center; background-size: 100%;width: 100%;height: 1506rpx;">
|
|
</view>
|
<view style="width: 690rpx;margin-top: 40rpx;text-align: center;">
|
<button @click="toHuiyuan" style="height: 100rpx;padding: 10rpx 0;color: #370606;border-radius: 50rpx;font-size: 34rpx;background-image: linear-gradient(to right, #FFEAE2, #FF6F55);">兑换生活权益</button>
|
<view style="color: #FFFFFF;font-size: 24rpx;padding-top: 20rpx;padding-bottom: 10rpx;">以上权益仅为预览展示，实际以兑换页面为准</view>
|
</view>
|
<view class="content-title" style="text-align: center;display: flex;align-items: center;justify-content: center;margin-top: 50rpx;margin-bottom: 40rpx;">
|
<image style="width: 111rpx;height: 8rpx;" src="/static/img/qsLeft.png"></image>
|
<view style="font-size: 36rpx;color: #FFEEE7;margin: 0 20rpx;">专享会员实物权益</view>
|
<image style="width: 111rpx;height: 8rpx;" src="/static/img/qsRight.png"></image>
|
</view>
|
<view class="physical" style="background: url('/static/img/qsPhysical.png') no-repeat top center; background-size: 100%;width: 100%;height: 1580rpx;">
|
|
</view>
|
<view style="width: 690rpx;margin-top: 40rpx;text-align: center;">
|
<button @click="getTips" style="height: 100rpx;padding: 10rpx 0;color: #370606;border-radius: 50rpx;font-size: 34rpx;background-image: linear-gradient(to right, #FFEAE2, #FF6F55);">查询实物权益</button>
|
<view style="color: #FFFFFF;font-size: 24rpx;padding-top: 20rpx;padding-bottom: 40rpx;">以上权益仅为预览展示，实际以商城发出为准</view>
|
</view>
|
</view> -->
|
</view>
|
|
<!-- 会员购买 + 权益部分 -->
|
<!-- <view class="content-wrap">-->
|
<!-- <view class="card-wrap">-->
|
<!-- <view class="card-item" v-for="i in lst">-->
|
<!-- <view class="card-title">{{numbs(i.period)}}期会员</view>-->
|
<!-- <view class="card-price">-->
|
<!-- <text>¥</text>-->
|
<!-- <text class="card-num">{{ i.amount }}</text>-->
|
<!-- <text>/{{i.dateType}}</text>-->
|
<!-- </view>-->
|
<!-- <view class="card-date">{{ i.buyDate }}</view>-->
|
<!-- <view class="has-buy">{{ i.isBuy?'已扣款' : '待扣款' }}</view>-->
|
<!-- </view>-->
|
<!-- </view>-->
|
|
<!-- <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;" v-if="active==0">页面展示为实物样例，实际以用户收到的商品为准</view>-->
|
|
<!-- <lanyaerji v-if="active==0" />-->
|
|
<!-- <template v-else>-->
|
<!-- <xianlianghaojjuab v-show="VIP==1" />-->
|
<!-- <tehuichongzhi v-show="VIP==1" style="margin-top: 50rpx;" />-->
|
<!-- <list v-show="VIP==2" style="margin-top: 10rpx;" />-->
|
<!-- <heijing v-show="VIP==3" style="margin-top: 10rpx;" />-->
|
<!-- </template>-->
|
|
<!-- <view style="margin-top: 30rpx;text-align: center">-->
|
<!-- <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="border-radius: 48rpx;padding: 28rpx 0;width: 538rpx;background: #FFFFFF;padding-top: 0;">
|
<view style="border-radius: 48rpx 48rpx 0 0;background: url('/static/img/shiwuBg.png') no-repeat top center; background-size: 100%;width: 100%;height: 300rpx;">
|
<!-- <view style="text-align: center;padding-top: 30rpx;" >
|
<image src="/static/img/yifa.png" style="width: 370rpx;height: 274rpx;"></image>
|
</view> -->
|
</view>
|
<view style="font-size: 32rpx;font-weight: 600;color: #333333;text-align: center;margin-top: 60rpx;margin-bottom: 80rpx;padding: 0 28rpx;">
|
<view>{{ tips }}</view>
|
</view>
|
<view @click="$refs.comment.close()" style="font-weight: 500;font-size: 32rpx;color: #ffffff;text-align: center;padding: 24rpx 28rpx;border-top: 2rpx solid #EEEEEE;background-color: #4766FE;margin-left: 30rpx;margin-right: 30rpx;border-radius: 56rpx">好的</view>
|
</view>
|
</uni-popup>
|
|
<uni-popup type="center" ref="life" >
|
<view style="border-radius: 48rpx;padding: 28rpx 0;width: 538rpx;background: #FFFFFF;padding-top: 0;">
|
<view style="background: url('/static/img/xuniBg.png') no-repeat top center; background-size: 100%;width: 100%;height: 300rpx;border-radius: 48rpx 48rpx 0 0;">
|
<!-- <view style="text-align: center;padding-top: 30rpx;">
|
<image src="/static/img/qsLifeIcon.png" style="width: 370rpx;height: 238rpx;"></image>
|
</view> -->
|
</view>
|
<view style="font-size: 32rpx;font-weight: 600;color: #333333;text-align: center;margin-top: 60rpx;margin-bottom: 80rpx;padding: 0 28rpx;">
|
<view>{{ tips }}</view>
|
</view>
|
<view @click="$refs.life.close()" style="font-weight: 500;font-size: 32rpx;color: #ffffff;text-align: center;padding: 24rpx 28rpx;border-top: 2rpx solid #EEEEEE;background-color: #4766FE;margin-left: 30rpx;margin-right: 30rpx;border-radius: 56rpx">好的</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;
|
background-size: 100% 100%;
|
height: 280rpx;
|
margin: 0 30rpx;
|
padding: 35rpx;
|
position: relative;
|
}
|
.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;
|
background: #F4F4F4;
|
border-radius: 24rpx 24rpx 0 0;
|
position: relative;
|
top: -100rpx;
|
}
|
.card-wrap {
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 40rpx;
|
}
|
.card-item {
|
background: #fff;
|
border-radius: 24rpx;
|
padding-top: 60rpx;
|
text-align: center;
|
padding-bottom: 48rpx;
|
width: calc(50% - 15rpx);
|
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: 20rpx;
|
color: #666;
|
margin-top: 18rpx;
|
}
|
.has-buy {
|
background: #FF922C;
|
border-radius: 0 24rpx 0 24rpx;
|
height: 42rpx;
|
width: 92rpx;
|
font-size: 24rpx;
|
color: #fff;
|
position: absolute;
|
top: 0;
|
right: 0;
|
line-height: 42rpx;
|
}
|
|
/* 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(271deg, #FFE4A1 0%, #FFC57A 51%, #FFE1B9 100%);
|
border-radius: 32rpx;
|
position: absolute;
|
bottom: -20rpx;
|
left: calc(50% - 25rpx);
|
}
|
}
|
|
/* 按钮 */
|
.exchange-btn {
|
font-weight: 600;
|
font-size: 36rpx;
|
color: #FFD39A;
|
padding: 26rpx;
|
background: linear-gradient(271deg, #2A1601 0%, #3B2106 51%);
|
border-radius: 200rpx;
|
margin-top: 60rpx;
|
}
|
.note {
|
font-size: 24rpx;
|
color: #999;
|
margin-top: 20rpx;
|
}
|
|
.sw-container {
|
image {
|
margin-top: 20rpx;
|
}
|
}
|
</style>
|
