From 5117b4f2574f9f4af0784023967b1709c8effeeb Mon Sep 17 00:00:00 2001
From: lin <1005713861@163.com>
Date: Sat, 09 May 2026 14:58:15 +0800
Subject: [PATCH] feat：星享购 细节调整
---
pages/quanshou/index.vue | 315 +++++++++++++++++++++++++++++++++-------------------
1 files changed, 200 insertions(+), 115 deletions(-)
diff --git a/pages/quanshou/index.vue b/pages/quanshou/index.vue
index f1d2c75..a595e44 100644
--- a/pages/quanshou/index.vue
+++ b/pages/quanshou/index.vue
@@ -1,46 +1,41 @@
<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黑金
+ 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 +43,7 @@
}
},
total: 0,
+ isAgree: 0,
};
},
computed: {
@@ -58,12 +54,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,
- data:{
- customerId: uni.getStorageSync('qxgLogin').customerId,
- appId: uni.getStorageSync('qxgLogin').appId
- },
+ url: _this.$webHost+'/api/v2/customer/getRyxBenefitsRecordList?phone='+uni.getStorageSync('phone')+'&appId='+uni.getStorageSync('ygxLogin').appId,
success: function (res) {
if(res.data.code==200){
_this.lst = res.data.data;
@@ -76,6 +69,7 @@
_this.total += parseFloat(item.amount);
}
})
+ console.log('_this.lst',_this.lst)
_this.total = Intl.NumberFormat('zh-CN', {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
@@ -88,6 +82,12 @@
})
},
methods: {
+ goHome(){
+ uni.switchTab({
+ url: '/pages/index/index'
+ });
+ // uni.navigateBack()
+ },
numbs(period) {
const obj ={
1:'一',
@@ -99,24 +99,22 @@
toHuiyuan(){
const _this = this;
uni.request({
- url: _this.$webHost+'/api/v2/memberEquity/getUrlByShop/'+_this.$util.getUserInfo().phone,
- data:{
- customerId: uni.getStorageSync('qxgLogin').customerId,
- appId: uni.getStorageSync('qxgLogin').appId
- },
+ url: _this.$webHost+'/api/v2/memberEquity/getUrlByShop/'+uni.getStorageSync('phone'),
success: function (res) {
if(res.data.code==200){
uni.request( {
- url: _this.$webHost+'/api/v2/memberEquity/clickUrlByShop/'+_this.$util.getUserInfo().phone,
+ url: _this.$webHost+'/api/v2/memberEquity/clickUrlByShop/'+uni.getStorageSync('phone'),
})
uni.navigateTo( {
- url: '/pages/web/index?webUel=' + encodeURIComponent(res.data.data.url)
+ 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'
+ // })
}
}
})
@@ -126,11 +124,7 @@
getTips(){
const _this = this;
uni.request({
- url: _this.$webHost+'/api/v2/shop/findExpressNo?phone='+_this.$util.getUserInfo().phone,
- data:{
- customerId: uni.getStorageSync('qxgLogin').customerId,
- appId: uni.getStorageSync('qxgLogin').appId
- },
+ url: _this.$webHost+'/api/v2/shop/findExpressNo?phone='+uni.getStorageSync('phone'),
success: function (res) {
if(res.data.code==200){
_this.tips = res.data.data;
@@ -150,68 +144,175 @@
</script>
<template>
- <view style="background: white;">
+ <view style="background: url('/static/img/qsBg.png') no-repeat top center; background-size: 100%;background-color: #210E0E;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: 0 30rpx;">
+ <!-- 返回 -->
+ <view class="head" style="position: relative;height: 90rpx;">
+ <view style="display: flex;justify-content: flex-start;position: absolute;left: 0;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 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/qyBg2.png') no-repeat top center; background-size: 100%;width: 100%;height: 300rpx;padding: 40rpx;margin-top: 230rpx;">
+ <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="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="isAgree ? true : false" iconColor="#794007" iconSize="30" size="38" :name="1" shape="circle">{{isAgree?'已开通':'未开通'}}-->
+<!-- </checkbox>-->
+<!-- </checkbox-group>-->
+ <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 style="color: #210E0E;font-size: 24rpx;"></view> -->
+ </view>
+ </view>
+ </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="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="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="background-image: linear-gradient(to bottom, #FFB8B8, #FFFBFC);width: 100%;height: 200rpx;border-radius: 48rpx;">
+ <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: 34rpx;margin-bottom: 80rpx;padding: 0 28rpx;">
+ <view style="font-size: 32rpx;font-weight: 600;color: #333333;text-align: center;margin-top: 134rpx;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 @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: #EE2626;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-image: linear-gradient(to bottom, #FFB8B8, #FFFBFC);width: 100%;height: 200rpx;border-radius: 48rpx;">
+ <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: 134rpx;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: #EE2626;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%;
@@ -220,7 +321,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;
@@ -269,11 +375,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;
@@ -281,12 +387,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 {
@@ -305,41 +411,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;
@@ -359,7 +447,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;
@@ -372,16 +460,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