<script>
|
import xianlianghaojjuab from "@/pages/quanshou/components/xianlianghaojjuab.vue";
|
import tehuichongzhi from "@/pages/quanshou/components/tehuichongzhi.vue";
|
import lanyaerji from "@/pages/quanshou/components/lanyaerji.vue";
|
import list from "@/pages/quanshou/components/list.vue";
|
import heijing from "@/pages/quanshou/components/heijing.vue";
|
|
export default {
|
name: "index",
|
components: {
|
xianlianghaojjuab,
|
tehuichongzhi,
|
lanyaerji,
|
list,
|
heijing
|
},
|
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/user/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/index?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: #fff;height: 100%;">
|
<!-- 顶部 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 style="padding-bottom: 200rpx;">
|
<!-- 返回 -->
|
<view style="height: 20rpx;"></view>
|
<view class="head" style="position: relative;height: 90rpx;padding:0 30rpx;">
|
<view style="display: flex;justify-content: flex-start;position: absolute;left: 0;top: 15rpx;padding-left: 30rpx;z-index: 9;color: #FFFFFF;">
|
<view @tap="goHome" id="home" class="home acea-row row-center-wrapper iconfont icon-fanhui2 h5_back arrow-left" style="margin-top: 80rpx;">
|
<uv-icon name="arrow-left" color="#ffffff" size="28"></uv-icon>
|
<!-- <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>
|
<!-- 尊享会员年卡 -->
|
<view style="background: url('/static/img/qsBg3.png') no-repeat top center; background-size: 100%;width: 690rpx;height: 388rpx;margin: 0 auto;margin-bottom: 40rpx;margin-top: 35rpx;">
|
<view style="padding: 40rpx;padding-top: 220rpx;">
|
<!-- <view style="font-size: 44rpx;font-weight: bold;background: -webkit-linear-gradient(#FFEEE7, #F4936F);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">尊享会员年卡</view>-->
|
<!-- <view style="font-size: 28rpx;font-weight: 400;background: -webkit-linear-gradient(#FFEEE7, #F4936F);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">会员预计最高节省1359.27元</view>-->
|
<view style="display: flex;margin-top: 30rpx;align-items: self-end;">
|
<view v-if="lst.length" style="font-size: 24rpx;width: 70%;">
|
<p style="font-size: 36rpx;color: #253567;font-weight: bold;">¥{{lst[0].amount.toFixed(2)}} <span style="font-size: 28rpx;margin-left: 20rpx;">{{lst[0].isBuy?'已扣款' : '待扣款'}}</span></p>
|
<!-- <p style="font-size: 48rpx;color: #253567;font-weight: bold;">¥99.00<span style="font-size: 28rpx;margin-left: 20rpx;">已扣款</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 v-if="lst.length" style="width: 164rpx;height: 58rpx;text-align: center;line-height: 58rpx;margin-top: 40rpx;display: flex;justify-content: center;align-items: center;">
|
<p style="color: #253567;font-size: 28rpx;">{{lst[0].buyDate}}</p>
|
<!-- <p style="color: #253567;font-size: 28rpx;">2026-02-03</p>-->
|
</view>
|
</view>
|
</view>
|
</view>
|
<!-- 专享会员生活权益 -->
|
<view style="padding: 0 30rpx; background-color: #FFFFFF;padding-top: 3rpx;border-top-left-radius: 50rpx;border-top-right-radius: 50rpx;">
|
<view class="content-title" style="text-align: 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: #333333;margin: 0 20rpx;">
|
<span class="content-title-item">虚拟权益</span>
|
</view>
|
<view style="color: #666666;font-size: 24rpx;">专享权益以实际兑换页面为准</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: 500rpx;">
|
|
</view>
|
<view class="life" style="background: url('/static/img/qsLife2.png') no-repeat top center; background-size: 100%;width: 100%;height: 700rpx;margin-top: 40rpx;">
|
|
</view>
|
<!-- <view style="width: 690rpx;margin-top: 40rpx;text-align: center;">-->
|
<!-- <button @click="toHuiyuan" style="height: 100rpx;padding: 25rpx 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;margin-top: 50rpx;margin-bottom: 40rpx;">
|
<!-- <image style="width: 111rpx;height: 8rpx;" src="/static/img/qsLeft.png"></image>-->
|
<view style="font-size: 36rpx;color: #333333;margin: 0 20rpx;">
|
<span class="content-title-item">实物权益</span>
|
</view>
|
<view style="color: #666666;font-size: 24rpx;">专享权益以商城实际发出商品为准</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: 982rpx;">
|
|
</view>
|
<!-- <view style="width: 690rpx;margin-top: 40rpx;text-align: center;">-->
|
<!-- <button @click="getTips" style="height: 100rpx;padding: 25rpx 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 style="width: 690rpx;display: flex;gap: 20rpx;position: fixed;bottom: 40rpx;left: 30rpx;z-index: 5;">
|
<button @click="toHuiyuan" style="width:50%;height: 100rpx;line-height: 100rpx;color: #ffffff;border-radius: 50rpx;font-size: 34rpx;background-color: #CD8319">领取虚拟权益</button>
|
<button @click="getTips" style="width:50%;height: 100rpx;line-height: 100rpx;color: #ffffff;border-radius: 50rpx;font-size: 34rpx;background-color: #4766FE">查询实物权益</button>
|
</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="position: relative;border-radius: 48rpx;padding: 28rpx 0;width: 538rpx;background: #FFFFFF;padding-top: 0;background: url('/static/img/qsTipsBg.png') no-repeat left center; background-size: 100%;height: 612rpx;">
|
<view style="width: 100%;height: 200rpx;border-radius: 48rpx;">
|
<view style="text-align: center;padding-top: 30rpx;" >
|
<image src="/static/img/yifa.png" style="width: 560rpx;height: 252rpx;"></image>
|
</view>
|
</view>
|
<view style="font-size: 32rpx;font-weight: 600;color: #333333;text-align: center;margin-top: 84rpx;margin-bottom: 40rpx;padding: 0 28rpx;">
|
<view>{{ tips }}</view>
|
</view>
|
<view @click="$refs.comment.close()" style="position: absolute;width: 400rpx;bottom: 80rpx;left: 41rpx;font-weight: 500;font-size: 32rpx;color: #ffffff;text-align: center;padding: 24rpx 28rpx;border-top: 2rpx solid #EEEEEE;background-color: #4766FE;border-radius: 56rpx">好的</view>
|
</view>
|
</uni-popup>
|
|
<uni-popup type="center" ref="life" >
|
<view style="position: relative;border-radius: 48rpx;padding: 28rpx 0;width: 538rpx;background: #FFFFFF;padding-top: 0;background: url('/static/img/qsTipsBg.png') no-repeat left center; background-size: 100%;height: 612rpx;">
|
<view style="width: 100%;height: 200rpx;border-radius: 48rpx;">
|
<view style="text-align: center;padding-top: 30rpx;">
|
<image src="/static/img/qsLifeIcon.png" style="width: 560rpx;height: 252rpx;"></image>
|
</view>
|
</view>
|
<view style="font-size: 32rpx;font-weight: 600;color: #333333;text-align: center;margin-top: 84rpx;margin-bottom: 40rpx;padding: 0 28rpx;">
|
<view>{{ tips }}</view>
|
</view>
|
<view @click="$refs.life.close()" style="position: absolute;width: 400rpx;bottom: 80rpx;left: 41rpx;font-weight: 500;font-size: 32rpx;color: #ffffff;text-align: center;padding: 24rpx 28rpx;border-top: 2rpx solid #EEEEEE;background-color: #4766FE;border-radius: 56rpx;">好的</view>
|
</view>
|
</uni-popup>
|
</view>
|
</template>
|
|
<style scoped lang="scss">
|
.content-title-item {
|
position: relative;
|
z-index: 2;
|
}
|
.content-title-item::after {
|
content: '';
|
position: absolute;
|
left: -5rpx;
|
z-index: -1;
|
bottom: 6rpx; /* 根据需要调整距离 */
|
width: calc(100% + 10rpx); /* 与标题宽度相同 */
|
height: 10rpx; /* 边框厚度 */
|
border-radius: 10rpx;
|
background: linear-gradient(90deg, #9DB7FF, #6584DB)
|
}
|
/* 顶部 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;
|
}
|
.note {
|
font-size: 24rpx;
|
color: #999;
|
margin-top: 20rpx;
|
}
|
</style>
|
