From 26245f1099ca1cc41786e596aae5388a1f5bfb86 Mon Sep 17 00:00:00 2001
From: Vinjor <vinjorm@gmail.com>
Date: Wed, 2 Apr 2025 15:17:19 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=9A=E5=91=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 App.vue                           |   2 +-
 config.js                         |  47 ++++----
 pages/mine/member/member-card.vue | 174 +++++++++++++++++++++++++++---
 3 files changed, 185 insertions(+), 38 deletions(-)

diff --git a/App.vue b/App.vue
index 3a5b10d..fb062d6 100644
--- a/App.vue
+++ b/App.vue
@@ -32,5 +32,5 @@
 </script>
 
 <style lang="scss">
-	@import '@/static/scss/index.scss'
+	@import '@/static/scss/index.scss';
 </style>
\ No newline at end of file
diff --git a/config.js b/config.js
index 491a990..b9e4484 100644
--- a/config.js
+++ b/config.js
@@ -1,24 +1,27 @@
 // 应用全局配置
 module.exports = {
-  baseUrl: 'http://192.168.1.17:8080',
-  // baseUrl: 'http://localhost:8080',
-  // 应用信息
-  appInfo: {
-    // 应用名称
-    name: "多点通告",
-    // 应用版本
-    version: "1.1.0",
-    // 应用logo
-    logo: "/static/logo.png",
-    // 政策协议
-    agreements: [{
-        title: "隐私协议",
-        code: "privacy_agreement"
-      },
-      {
-        title: "用户服务协议",
-        code: "privacy_agreement"
-      }
-    ]
-  }
-}
+	baseUrl: 'http://192.168.1.17:8080',
+	// baseUrl: 'http://localhost:8080',
+	// 应用信息
+	appInfo: {
+		// 应用名称
+		name: "多点通告",
+		// 应用版本
+		version: "1.1.0",
+		// 应用logo
+		logo: "/static/logo.png",
+		// 政策协议
+		agreements: [{
+				title: "隐私协议",
+				code: "privacy_agreement"
+			},
+			{
+				title: "用户服务协议",
+				code: "privacy_agreement"
+			}, {
+				title: "会员协议",
+				code: "member_agreement"
+			},
+		]
+	}
+}
\ No newline at end of file
diff --git a/pages/mine/member/member-card.vue b/pages/mine/member/member-card.vue
index c15d805..3f24744 100644
--- a/pages/mine/member/member-card.vue
+++ b/pages/mine/member/member-card.vue
@@ -6,7 +6,7 @@
 			<view class="vip-box">
 				<view class="dl-menu-box">
 					<view v-for="(item,index) in memberCardList" @click="itemClick(index)" class="dl-menu"
-						:class="item.id==chooseCardId?'dl-menu click':'dl-menu'">
+						:class="index==chooseCardIndex?'dl-menu click':'dl-menu'">
 						<!-- 这里的图标要换成动态配置的 -->
 						<image src="@/static/mine/huang.png" mode="aspectFit"></image>
 						{{item.cardName}}
@@ -15,12 +15,24 @@
 				<!-- 会员卡详情 -->
 				<view class="card-detail-box">
 					<view class="price-box">
-						<view class="price-item">
-							<view>年付会员</view>
-							<view><text>¥</text>228</view>
-							<view>折合0.82</view>
+						<view
+							:class="['price-item',choosePriceIndex==index?'choose':'',1==index?'margin-left-right':'']"
+							v-for="(item,index) in memberCardList[chooseCardIndex].priceList"
+							@click="changePriceIndex(index)">
+							<image v-if="item.isHot" class="hot-img" src="@/static/mine/hot.png" mode="aspectFit">
+							</image>
+							<view class="text1">{{item.title}}</view>
+							<view class="text2"><text>¥</text>{{item.price}}</view>
+							<view class="text3">折合{{item.dayPrice}}元/天</view>
 						</view>
 					</view>
+					<!-- 购买 -->
+					<view class="buy-button">立即开通</view>
+					<!-- 协议 -->
+					<view class="xieyi-box">
+						开通即代表您已阅读并同意<text
+							@click="handleUserAgrement(globalConfig.appInfo.agreements[2])">《{{globalConfig.appInfo.agreements[2].title}}》</text>
+					</view>
 				</view>
 			</view>
 			<!-- 权益展示区 -->
@@ -62,31 +74,60 @@
 
 <script>
 	import navigationBarVue from '@/components/navigation/navigationBar.vue';
+
 	export default {
 		components: {
 			navigationBarVue
 		},
 		data() {
 			return {
-				//当前选中的会员卡ID
+				globalConfig: getApp().globalData.config,
+				ifAgree: 0,
+				//当前选中的会员卡下标
 				chooseCardIndex: 0,
+				//当前选中的会员卡付款下标
+				choosePriceIndex: 0,
 				// 会员卡数组
 				memberCardList: [{
 					id: "1",
 					cardName: "箐英会员",
 					image: "",
-					monthPrice: 28,
-					quarterPrice: 78,
-					yearPrice: 228,
-					dayPrice: 0.82
+					priceList: [{
+						title: "年付会员",
+						price: 228,
+						dayPrice: 0.82,
+						isHot: true
+					}, {
+						title: "季付会员",
+						price: 78,
+						dayPrice: 0.82,
+						isHot: false
+					}, {
+						title: "月付会员",
+						price: 28,
+						dayPrice: 0.82,
+						isHot: false
+					}]
 				}, {
 					id: "2",
 					cardName: "钻石会员",
 					image: "",
-					monthPrice: 28,
-					quarterPrice: 78,
-					yearPrice: 228,
-					dayPrice: 0.82
+					priceList: [{
+						title: "年付会员",
+						price: 1228,
+						dayPrice: 0.82,
+						isHot: true
+					}, {
+						title: "季付会员",
+						price: 178,
+						dayPrice: 0.82,
+						isHot: false
+					}, {
+						title: "月付会员",
+						price: 128,
+						dayPrice: 0.82,
+						isHot: false
+					}]
 				}],
 				//权益对比的数组
 				cardList: [{
@@ -127,6 +168,21 @@
 			 */
 			itemClick(index) {
 				this.chooseCardIndex = index
+				this.choosePriceIndex = 0
+			},
+			/**
+			 * 切换选中的会员卡付款类型
+			 * @param {Object} index
+			 */
+			changePriceIndex(index) {
+				this.choosePriceIndex = index
+			},
+			/**
+			 * 阅读会员协议
+			 */
+			// 查看相关协议
+			handleUserAgrement(site) {
+				this.$tab.navigateTo(`/pages/common/richview/index?title=${site.title}&code=${site.code}`)
 			},
 		}
 	}
@@ -195,7 +251,7 @@
 				.card-detail-box {
 					width: 100%;
 					margin-top: 20rpx;
-					padding: 30rpx 20rpx 30rpx 20rpx;
+					padding: 40rpx 20rpx 30rpx 20rpx;
 					border-radius: 20rpx;
 					border: 1rpx solid #96948C;
 					background-color: #1A1A1A;
@@ -203,7 +259,95 @@
 					flex-direction: column;
 					align-items: center;
 					justify-content: center;
+
+					.price-box {
+						width: 100%;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+
+						.price-item {
+							display: flex;
+							flex-direction: column;
+							align-items: center;
+							justify-content: center;
+							width: 33%;
+							padding: 30rpx 20rpx;
+							color: #FAE4C8;
+							background-color: #302D29;
+							border-radius: 25rpx;
+							padding: 30rpx 20rpx;
+							position: relative;
+
+							.hot-img {
+								width: 80rpx;
+								height: 80rpx;
+								position: absolute;
+								top: -20px;
+								left: 0;
+							}
+
+							.text1 {
+								font-weight: bold;
+								font-size: 26rpx;
+							}
+
+							.text2 {
+								margin: 15rpx;
+								font-weight: bold;
+								font-size: 40rpx;
+
+								text {
+									font-size: 20rpx;
+									margin-right: 10rpx;
+								}
+							}
+
+							.text3 {
+								font-size: 20rpx;
+							}
+
+
+						}
+
+						.margin-left-right {
+							margin: 0 25rpx;
+						}
+
+						.choose {
+							color: #603B25 !important;
+							background-image: linear-gradient(to bottom, #F8DFC0, #EFCBA0);
+						}
+					}
+
+					.buy-button {
+						width: 100%;
+						padding: 20rpx 0;
+						color: #010000;
+						background-image: linear-gradient(to right, #F8DFC0, #EFCBA0);
+						margin-top: 40rpx;
+						text-align: center;
+						font-weight: bold;
+						font-size: 32rpx;
+						border-radius: 50rpx;
+					}
+
+					.xieyi-box {
+						width: 100%;
+						font-size: 20rpx;
+						color: #707070;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						margin-top: 20rpx;
+
+						text {
+							color: #FFFFFF;
+						}
+					}
 				}
+
+
 			}
 
 			.rights-box {