From e3e0177c16d52de3704156c68ea690b5cd20a0c7 Mon Sep 17 00:00:00 2001
From: H1d3rOne <H1d3rOne@users.noreply.github.com>
Date: Sun, 8 Mar 2026 03:54:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=94=A8=E6=88=B7=E5=90=8D=E5=8F=B3?=
 =?UTF-8?q?=E4=B8=8A=E8=A7=92=E6=98=BE=E7=A4=BA=E4=BC=9A=E5=91=98=E7=AD=89?=
 =?UTF-8?q?=E7=BA=A7=E6=A0=87=E7=AD=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 普通用户：灰色标签
- 月度会员：金色渐变标签
- 年度会员：橙色渐变标签
- 永久会员：粉色渐变标签
- 开通会员后保存会员等级到本地存储
---
 xuan-deduct-uniapp/src/pages/mine/mine.vue | 77 +++++++++++++++++++---
 xuan-deduct-uniapp/src/pages/mine/vip.vue  | 21 +++++-
 2 files changed, 87 insertions(+), 11 deletions(-)

diff --git a/xuan-deduct-uniapp/src/pages/mine/mine.vue b/xuan-deduct-uniapp/src/pages/mine/mine.vue
index d8ded45..c51ba58 100644
--- a/xuan-deduct-uniapp/src/pages/mine/mine.vue
+++ b/xuan-deduct-uniapp/src/pages/mine/mine.vue
@@ -4,11 +4,18 @@
       <view class="avatar">
         <text class="avatar-text">👤</text>
       </view>
-      <text class="username">玄机用户</text>
-      <text class="user-coins">金币：{{ coins }}</text>
+      <view class="user-info">
+        <view class="user-name-row">
+          <text class="username">玄机用户</text>
+          <view class="vip-tag" :class="vipClass">
+            <text class="vip-tag-text">{{ vipText }}</text>
+          </view>
+        </view>
+        <text class="user-coins">金币：{{ coins }}</text>
+      </view>
     </view>
     
-    <view class="vip-card" v-if="!isVip">
+    <view class="vip-card" v-if="vipLevel === 0">
       <view class="vip-icon">
         <text class="vip-icon-text">👑</text>
       </view>
@@ -51,7 +58,7 @@ export default {
   data() {
     return {
       coins: 10,
-      isVip: false,
+      vipLevel: 0,
       menus: [
         { name: '开通会员', icon: '👑', path: '/pages/mine/vip' },
         { name: '金币任务', icon: '🪙', path: '/pages/mine/coins' },
@@ -62,8 +69,18 @@ export default {
       ]
     }
   },
+  computed: {
+    vipText() {
+      const texts = ['普通用户', '月度会员', '年度会员', '永久会员']
+      return texts[this.vipLevel] || '普通用户'
+    },
+    vipClass() {
+      const classes = ['normal', 'monthly', 'yearly', 'permanent']
+      return classes[this.vipLevel] || 'normal'
+    }
+  },
   onShow() {
-    this.loadCoins()
+    this.loadUserData()
   },
   onShareAppMessage() {
     return {
@@ -73,11 +90,15 @@ export default {
     }
   },
   methods: {
-    loadCoins() {
+    loadUserData() {
       const coins = uni.getStorageSync('userCoins')
       if (coins) {
         this.coins = parseInt(coins)
       }
+      const vipLevel = uni.getStorageSync('vipLevel')
+      if (vipLevel) {
+        this.vipLevel = parseInt(vipLevel)
+      }
     },
     openVip() {
       uni.navigateTo({ url: '/pages/mine/vip' })
@@ -135,12 +156,52 @@ page {
   font-size: 60rpx;
 }
 
+.user-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.user-name-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 8rpx;
+}
+
 .username {
   font-size: 36rpx;
   font-weight: 700;
   color: #ffffff;
-  display: block;
-  margin-bottom: 8rpx;
+}
+
+.vip-tag {
+  margin-left: 16rpx;
+  padding: 6rpx 16rpx;
+  border-radius: 20rpx;
+  font-size: 22rpx;
+}
+
+.vip-tag.normal {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.vip-tag.monthly {
+  background: linear-gradient(135deg, #FCD34D 0%, #F59E0B 100%);
+}
+
+.vip-tag.yearly {
+  background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
+}
+
+.vip-tag.permanent {
+  background: linear-gradient(135deg, #EC4899 0%, #DB2777 100%);
+}
+
+.vip-tag-text {
+  font-size: 22rpx;
+  font-weight: 500;
+  color: #ffffff;
 }
 
 .user-coins {
diff --git a/xuan-deduct-uniapp/src/pages/mine/vip.vue b/xuan-deduct-uniapp/src/pages/mine/vip.vue
index ec4fc71..f3d571a 100644
--- a/xuan-deduct-uniapp/src/pages/mine/vip.vue
+++ b/xuan-deduct-uniapp/src/pages/mine/vip.vue
@@ -80,9 +80,24 @@ export default {
   },
   methods: {
     subscribe() {
-      uni.showToast({
-        title: '功能开发中',
-        icon: 'none'
+      const planNames = ['', '月度会员', '年度会员', '永久会员']
+      const planName = planNames[this.selectedPlan]
+      
+      uni.showModal({
+        title: '确认开通',
+        content: `确定要开通${planName}吗？`,
+        success: (res) => {
+          if (res.confirm) {
+            uni.setStorageSync('vipLevel', this.selectedPlan)
+            uni.showToast({
+              title: '开通成功',
+              icon: 'success'
+            })
+            setTimeout(() => {
+              uni.navigateBack()
+            }, 1500)
+          }
+        }
       })
     },
     openAgreement() {