From cee7904575fd86101fb0d638eaa270e4cdf0dde0 Mon Sep 17 00:00:00 2001
From: xiewd2914 <291460458@qq.com>
Date: Wed, 19 Mar 2025 22:09:29 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9E=E4=BC=9A=E5=91=98?=
 =?UTF-8?q?=E7=AD=89=E7=BA=A7=E8=BD=AE=E6=92=AD=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/my/vip/index.vue | 243 ++++++++++++++++++++++++++++++++++-------
 1 file changed, 205 insertions(+), 38 deletions(-)

diff --git a/pages/my/vip/index.vue b/pages/my/vip/index.vue
index 76ed4ef..a46044c 100644
--- a/pages/my/vip/index.vue
+++ b/pages/my/vip/index.vue
@@ -15,44 +15,68 @@
 				
 			</view>
 		</view>
-		<view class="main-back" :class="'top-bg-'+vipLevel">
-			<view class="flex-al">
-				<view class="left-form">
-					<view class="vip-form-name">单笔入金</view>
-					<view class="vip-form-val">$400000</view>
-				</view>
-				<view class="left-form">
-					<view class="vip-form-name">或累积交易</view>
-					<view class="vip-form-val">2000手</view>
-				</view>
-			</view>
-			<view class="flex-ju mt-56">
-				<view class="flex-dirc-jus">
-					<view class="vip-form-name">距离下一等级还需</view>
-					<view class="vip-form-name">保级</view>
-				</view>
-				<view>
-					<view class="vip-form-name">净收入$80000</view>
-					<view class="vip-form-name mt-16">4000.00手</view>
-					<view class="vip-form-name mt-16">90天400手</view>
+		
+		<swiper class="swiper-box-list sc_body" :current="vipId" @change="swiperChange" next-margin="40rpx" previous-margin="40rpx">
+			<swiper-item class="swiper-topic-list" v-for="(item,index) in vipLevelList" :key="index">
+				<view class="main-back top-bg-0">
+					<view class="vip-level">{{item.vipLevel}}</view>
+					<view class="flex-al vip-top">
+						<view class="left-form">
+							<view class="vip-form-name">单笔入金</view>
+							<view class="vip-form-val">${{item.money}}</view>
+						</view>
+						<view class="left-form">
+							<view class="vip-form-name">或累积交易</view>
+							<view class="vip-form-val">{{item.hands}}手</view>
+						</view>
+					</view>
+					<view class="mt-56">
+						<view class="progress-items">
+							<view class="progress-box">
+								<progress :percent="item.progress1" activeColor="#2E8B57" stroke-width="3" />
+							</view>
+							<view class="progress-text-box">
+								<view class="progress-name">距下一级</view>
+								<view class="progress-val">还需净入金 <text class="val-num">${{item.inMoney}}</text></view>
+							</view>
+						</view>
+						<view class="progress-items">
+							<view class="progress-box">
+								<progress :percent="item.progress2" activeColor="#6E8B3D" stroke-width="3" />
+							</view>
+							<view class="progress-text-box">
+								<view class="progress-name">距下一级</view>
+								<view class="progress-val">还需 <text class="val-num">{{item.inHands}}手</text></view>
+							</view>
+						</view>
+						<view class="progress-items">
+							<view class="progress-box">
+								<progress :percent="item.progress3" activeColor="#2E8B57" stroke-width="3" />
+							</view>
+							<view class="progress-text-box">
+								<view class="progress-name">保级</view>
+								<view class="progress-val"><text class="val-num">{{item.inTimes}}</text></view>
+							</view>
+						</view>
+					</view>
 				</view>
-			</view>
-		</view>
+			</swiper-item>
+		</swiper>
 		<view class="privilege-back">
 			<view class="privilege-top">
-				<view class="privilege-title">VIP0以下特权</view>
+				<view class="privilege-title">VIP{{swiperVipLevel}}以下特权</view>
 				<view class="title-line"></view>
 				<view class="grid-3 pt-40">
-					<view v-for="item in vipData[vipLevel]" class="flex-dirc-alc mb-40">
+					<view v-for="(item,index) in vipData[swiperVipLevel]" class="flex-dirc-alc mb-40" :key="index">
 						<image class="privilege-img" :src="item.img"></image>
 						<view class="privilege-text">{{item.text}}</view>
-						<view v-for="item1 in item.tip" class="privilege-tip">{{item1}}</view>
+						<view v-for="(item1,index1) in item.tip" :key="index1" class="privilege-tip">{{item1}}</view>
 					</view>
 				</view>
 			</view>
 			<view class="privilege-bottom">
-				<view class="get-btn" @click="miGoPage('/pages/my/vip/levelRed')">领取</view>
-				<view class="get-tip">升级礼金晋升自动发放</view>
+				<view class="get-btn" @click="miGoPage('/pages/my/vip/levelRed')">没到领取时间（无法领取）</view>
+				<view class="get-tip">升级礼金晋升自动发放，每月红包/额外回赠每月1号至15号可领取</view>
 			</view>
 		</view>
 	</view>
@@ -62,7 +86,110 @@
 	export default {
 		data() {
 			return {
+				vipId:0,
 				vipLevel: 0,
+				swiperVipLevel:0,
+				vipLevelList:[
+					{
+						vipLevel:0,
+						progress1:80,
+						progress2:40,
+						progress3:20,
+						money:20000,
+						hands:1000,
+						inMoney:40000,
+						inHands:'2000.00',
+						inTimes:'0天400手'
+					},
+					{
+						vipLevel:1,
+						progress1:0,
+						progress2:0,
+						progress3:0,
+						money:40000,
+						hands:2000,
+						inMoney:80000,
+						inHands:'4000.00',
+						inTimes:'90天600手'
+					},
+					{
+						vipLevel:2,
+						progress1:0,
+						progress2:0,
+						progress3:0,
+						money:80000,
+						hands:4000,
+						inMoney:160000,
+						inHands:'6000.00',
+						inTimes:'90天800手'
+					},
+					{
+						vipLevel:3,
+						progress1:0,
+						progress2:0,
+						progress3:0,
+						money:160000,
+						hands:6000,
+						inMoney:320000,
+						inHands:'8000.00',
+						inTimes:'90天1000手'
+					},
+					{
+						vipLevel:4,
+						progress1:0,
+						progress2:0,
+						progress3:0,
+						money:320000,
+						hands:8000,
+						inMoney:640000,
+						inHands:'16000.00',
+						inTimes:'90天1200手'
+					},
+					{
+						vipLevel:5,
+						progress1:0,
+						progress2:0,
+						progress3:0,
+						money:640000,
+						hands:16000,
+						inMoney:1280000,
+						inHands:'18000.00',
+						inTimes:'90天1400手'
+					},
+					{
+						vipLevel:6,
+						progress1:0,
+						progress2:0,
+						progress3:0,
+						money:1280000,
+						hands:18000,
+						inMoney:2560000,
+						inHands:'20000.00',
+						inTimes:'90天1600手'
+					},
+					{
+						vipLevel:7,
+						progress1:0,
+						progress2:0,
+						progress3:0,
+						money:2560000,
+						hands:20000,
+						inMoney:5120000,
+						inHands:'22000.00',
+						inTimes:'90天1800手'
+					},
+					{
+						vipLevel:8,
+						progress1:0,
+						progress2:0,
+						progress3:0,
+						money:5120000,
+						hands:22000,
+						inMoney:100000000,
+						inHands:'20000.00',
+						inTimes:'90天2000手'
+					}
+				],
 				vipData: [
 					[
 						{
@@ -392,7 +519,12 @@
 			};
 		},
 		onLoad() {
-			this.vipLevel = this.accountInfo.user.vipLevel
+			this.vipLevel = this.accountInfo.user.vipLevel;
+		},
+		methods:{
+			swiperChange(e) {
+				this.swiperVipLevel = e.detail.current;
+			}
 		}
 	}
 </script>
@@ -406,11 +538,35 @@
 	* {
 		box-sizing: border-box;
 	}
-	
+	.progress-box {
+		width: 100%;
+		padding: 0 32rpx;
+		display: flex;
+		height: 28rpx;
+
+	}
+	.progress-items {
+		margin-top: 10rpx;
+	}
+	.progress-text-box {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0 32rpx;
+		font-size: 20rpx;
+		color: #708090;
+		.val-num {
+			padding-left: 4rpx;
+			color: #1E1E1E;
+		}
+	}
+	.uni-progress, uni-checkbox-group {
+		width: 100%;
+	}
 	.get-tip{
 		text-align: center;
 		margin-top: 20rpx;
-		font-size: 24rpx;
+		font-size: 20rpx;
 		color: #A7A7A7;
 		line-height: 32rpx;
 	}
@@ -488,13 +644,13 @@
 		flex-direction: column;
 		justify-content: space-between;
 		background-color: #fff;
-		margin-top: -272rpx;
+		margin-top: -312rpx;
 		border-radius: 20rpx;
 		padding: 308rpx 40rpx 60rpx;
 	}
 
 	.mt-56 {
-		margin-top: 56rpx;
+		margin-top: 38rpx;
 	}
 
 	.flex-ju {
@@ -529,7 +685,7 @@
 	}
 
 	.vip-form-val {
-		margin-top: 24rpx;
+		margin-top: 16rpx;
 		font-weight: 800;
 		font-size: 28rpx;
 		line-height: 32rpx;
@@ -539,18 +695,29 @@
 		font-size: 24rpx;
 		line-height: 32rpx;
 	}
-
+	.swiper-box-list {
+		height: 476rpx;
+	}
 	.main-back {
 		margin: auto;
-		margin-top: -24rpx;
-		width: 710rpx;
-		height: 476rpx;
+		width: 100%;
+		height: 100%;
 		// background-image: url('~@/static/icon/vip/vip0-bg.png');
 		background-size: contain;
 		background-repeat: no-repeat;
-		padding: 156rpx 44rpx 48rpx;
+		// padding: 156rpx 44rpx 48rpx;
 		position: relative;
 		z-index: 1;
+		.vip-level {
+			padding-top: 84rpx;
+			padding-left: 154rpx;
+			font-size: 46rpx;
+			color: rgb(145, 155, 187);
+			font-weight: bold;
+		}
+		.vip-top {
+			padding: 20rpx 0 0 40rpx;
+		}
 	}
 	
 	@each $i,$colors in (0, '#2B2A2F'), (1, '#A27129'), (2, '#C56835'), (3, '#4971D0'), (4, '#DE7C18'), (5, '#196395'), (6, '#EEF4FF'), (7, '#6556BA'), (8, '#B2DEFF') {
-- 
Gitee


From d8bc0516b9482d33db53727edd6bce9c2f6dd9a5 Mon Sep 17 00:00:00 2001
From: xiewd2914 <291460458@qq.com>
Date: Wed, 19 Mar 2025 22:13:39 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9E=E8=A7=84=E5=88=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/my/vip/rule.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/pages/my/vip/rule.vue b/pages/my/vip/rule.vue
index e2d40be..21429f9 100644
--- a/pages/my/vip/rule.vue
+++ b/pages/my/vip/rule.vue
@@ -2,7 +2,7 @@
 	<view class="page rule-page">
 		<HeaderBar title="VIP等级规则" backgroundColor="#fff">
 		</HeaderBar>
-		<!-- <view class="rule-title mt-20">VIP升级/保级</view>
+		<view class="rule-title mt-20">VIP升级/保级</view>
 		<view class="level-table">
 			<view class="table-top">
 				<view class="top-text left-table">等级</view>
@@ -116,8 +116,8 @@
 			9.额外回赠：可在本月1号14:00至15号23:59去VIP页<br/>
 			面领取，可领取当前等级对应的额外回赠，超时不领取视放弃权益。<br/>
 			如果客户因违反蓝鲸开户协议，包括但不限，KYC未能通过，帐户被禁用，都会即时终止VIP权益，蓝鲸保留对活动的修改，停止及最终解释权。
-		</view> -->
-		<view class="" v-html="vipInfo"></view>
+		</view>
+		<!-- <view class="" v-html="vipInfo"></view> -->
 	</view>
 </template>
 
-- 
Gitee