From 079aa94eb35c059d465fbe5629912c2b8a313db5 Mon Sep 17 00:00:00 2001
From: lin <1005713861@163.com>
Date: Mon, 27 Apr 2026 10:18:32 +0800
Subject: [PATCH] feat: 澜品优选我的页面权收功能
---
pages/quanshou/index.vue | 326 ++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 229 insertions(+), 97 deletions(-)
diff --git a/pages/quanshou/index.vue b/pages/quanshou/index.vue
index fb2a2db..d2b0e55 100644
--- a/pages/quanshou/index.vue
+++ b/pages/quanshou/index.vue
@@ -1,46 +1,51 @@
<script>
-
-import tehuichongzhi from "@/pages/quanshou/components/tehuichongzhi.vue"; //虚拟
-import lanyaerji from "@/pages/quanshou/components/lanyaerji.vue"; // 实物
+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: 1, // 1黄金 2铂金 3黑金
+ VIP: 2, // 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",
+ 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/imgs/quanshou/TBBG2.png",
- box: "/static/imgs/quanshou/NEWBOX2.png",
- title: "/static/imgs/quanshou/VIPTXT2.png",
- level: "/static/imgs/quanshou/VIP2.png",
+ 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/imgs/quanshou/TBBG3.png",
- box: "/static/imgs/quanshou/VIPBOX3.png",
- title: "/static/imgs/quanshou/VIPTXT3.png",
- level: "/static/imgs/quanshou/VIPLVL3.png",
+ 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",
@@ -48,6 +53,7 @@
}
},
total: 0,
+ isAgree: 0,
};
},
computed: {
@@ -58,8 +64,9 @@
onLoad(pro) {
const _this = this;
+ this.isAgree = uni.getStorageSync('boughtEquity')
uni.request({
- url: _this.$webHost+'/api/v2/customer/getRyxBenefitsRecordList?phone='+_this.$util.getUserInfo().phone,
+ url: _this.$webHost+'/api/v2/customer/getRyxBenefitsRecordList?phone='+uni.getStorageSync('phone')+'&appId='+'47be9559-6b1b-42dd-84ed-25d028065013',
success: function (res) {
if(res.data.code==200){
_this.lst = res.data.data;
@@ -72,6 +79,7 @@
_this.total += parseFloat(item.amount);
}
})
+ console.log('_this.lst',_this.lst)
_this.total = Intl.NumberFormat('zh-CN', {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
@@ -84,6 +92,12 @@
})
},
methods: {
+ goHome(){
+ // uni.switchTab({
+ // url: '/pages/user/index'
+ // });
+ uni.navigateBack()
+ },
numbs(period) {
const obj ={
1:'一',
@@ -105,10 +119,12 @@
url: '/pages/users/web_page/index?webUel=' + encodeURIComponent(res.data.data.url)
})
} else {
- uni.showToast( {
- title: res.data.data || res.data.msg,
- icon: 'none'
- })
+ _this.tips = res.data.data || res.data.msg;
+ _this.$refs.life.open()
+ // uni.showToast( {
+ // title: res.data.data || res.data.msg,
+ // icon: 'none'
+ // })
}
}
})
@@ -138,68 +154,200 @@
</script>
<template>
- <view style="background: white;">
+ <view style="background: url('/static/img/qsBg.png') no-repeat top center; background-size: 100%;background-color: #fff;height: 100%;">
<!-- 顶部 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-->
+<!-- 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 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="22"></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 class="card-date" style="height: 40rpx"> </view>
- <!-- <view class="card-date">{{ i.buyDate }}</view>-->
- <view class="has-buy">{{ i.isBuy?'已扣款' : '待扣款' }}</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)}} 99<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="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="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>-->
- <view class="note" style="margin-bottom: 20rpx;text-align: center" v-if="active==0">页面展示为实物样例，实际以用户收到的商品为准</view>
+<!-- <lanyaerji v-if="active==0" />-->
- <lanyaerji v-if="active==0" style="margin:0 30rpx;"/>
+<!-- <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>-->
- <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>
+<!-- <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="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 style="border-radius: 48rpx;padding: 28rpx 0;width: 538rpx;background: #FFFFFF;padding-top: 0;">
+ <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: 34rpx;margin-bottom: 80rpx;padding: 0 28rpx;">
+ <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="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 @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="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="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">
-
+.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%;
@@ -208,7 +356,12 @@
padding-bottom: 150rpx;
}
.vip-box {
- background-repeat: no-repeat;padding:20rpx 30rpx 60rpx 30rpx;
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ height: 280rpx;
+ margin: 0 30rpx;
+ padding: 35rpx;
+ position: relative;
}
.gradient-text {
-webkit-background-clip: text;
@@ -257,11 +410,11 @@
/* 内容区 */
.content-wrap {
- padding: 30rpx 0;
- background: #fff;
- border-radius: 50rpx 50rpx 0 0;
+ padding: 30rpx;
+ background: #F4F4F4;
+ border-radius: 24rpx 24rpx 0 0;
position: relative;
- top: -60rpx;
+ top: -100rpx;
}
.card-wrap {
display: flex;
@@ -269,12 +422,12 @@
margin-bottom: 40rpx;
}
.card-item {
- background: #f5f5f5;
+ background: #fff;
border-radius: 24rpx;
padding-top: 60rpx;
text-align: center;
- //width: calc(50% - 14rpx);
- width: 100%;
+ padding-bottom: 48rpx;
+ width: calc(50% - 15rpx);
position: relative;
}
.card-title {
@@ -293,41 +446,23 @@
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;
+ font-size: 20rpx;
+ color: #666;
+ margin-top: 18rpx;
}
.has-buy {
background: #FF922C;
- border-radius: 8rpx;
+ border-radius: 0 24rpx 0 24rpx;
height: 42rpx;
width: 92rpx;
font-size: 24rpx;
color: #fff;
position: absolute;
- top: -21rpx;
- left: 28rpx;
+ top: 0;
+ right: 0;
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;
@@ -347,7 +482,7 @@
display: block;
width: 50rpx;
height: 8rpx;
- background: linear-gradient( 91deg, #FDFAFF 0%, #F9C969 100%);
+ background: linear-gradient(271deg, #FFE4A1 0%, #FFC57A 51%, #FFE1B9 100%);
border-radius: 32rpx;
position: absolute;
bottom: -20rpx;
@@ -360,16 +495,13 @@
font-weight: 600;
font-size: 36rpx;
color: #FFD39A;
- padding: 10rpx;
- background: linear-gradient( 91deg, #A97132 0%, #542C09 100%);
+ padding: 26rpx;
+ background: linear-gradient(271deg, #2A1601 0%, #3B2106 51%);
border-radius: 200rpx;
}
.note {
font-size: 24rpx;
color: #999;
margin-top: 20rpx;
-}
-.vip2-num{
- color: #8E1768 !important;
}
</style>
--
Gitblit v1.9.3