vip 权益

src/app.config.ts

@@ -28,6 +28,7 @@ export default defineAppConfig({
         'agreement/index',        // 协议
         'editProfile/index',      // 编辑资料
         'accountBalance/index',   // 账户余额
+        'vipBenefits/index',      // VIP权益
       ]
     },
     {

src/pages/user/index.tsx

@@ -63,6 +63,13 @@ const UserIndex = observer(() => {
     })
   }
 
+  // 点击VIP
+  const handleVipClick = () => {
+    Taro.navigateTo({
+      url: '/pagesUser/vipBenefits/index'
+    })
+  }
+
   return (
     <View className="user-page">
       {/* 上部分：背景图和用户信息 */}
@@ -94,7 +101,7 @@ const UserIndex = observer(() => {
                       onClick={handleEdit}
                     />
                   </View>
-                  <View className="vip-badge">VIP</View>
+                  <View className="vip-badge" onClick={handleVipClick}>VIP</View>
                 </View>
                 
                 {/* 成长值 */}

src/pagesUser/vipBenefits/index.config.ts

@@ -0,0 +1,5 @@
+export default {
+  navigationBarTitleText: 'VIP权益',
+  navigationBarBackgroundColor: '#000000',
+  navigationBarTextStyle: 'white',
+}

src/pagesUser/vipBenefits/index.scss

@@ -0,0 +1,181 @@
+.vip-benefits-page {
+  min-height: 100vh;
+  background-color: #FFFFFF;
+  padding-bottom: calc(120px + env(safe-area-inset-bottom)); // 为底部按钮留空间
+
+  // 上部分：VIP卡片区域
+  .vip-card-area {
+    height: 280px;
+    padding: 40px 30px 0;
+    background-color: #000000;
+
+    .vip-card {
+      border-radius: 13px;
+      background-image: url('../images/vipBg.png');
+      background-size: cover;
+      background-position: center;
+      padding: 30px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      // 年卡标签
+      .card-type {
+        font-size: 29px;
+        color: #F5D0B5;
+      }
+
+      // 店铺名称（渐变文字）
+      .store-name {
+        font-weight: 500;
+        font-size: 42px;
+        color: #FFFFFF;
+        background: linear-gradient(-90deg, #F5BB94 0%, #FFE0CA 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        margin: 16px 0 22px;
+      }
+
+      // 地址
+      .store-address {
+        font-size: 25px;
+        color: #999999;
+        line-height: 1.5;
+      }
+    }
+  }
+
+  // 下部分：权益列表区域
+  .benefits-area {
+    padding: 30px;
+
+    // 标题行
+    .benefits-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 30px;
+
+      .benefits-title {
+        font-weight: bold;
+        font-size: 33px;
+        color: #333333;
+      }
+
+      .detail-btn {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+
+        .detail-text {
+          font-size: 25px;
+          color: #999999;
+        }
+
+        .detail-arrow {
+          flex-shrink: 0;
+        }
+      }
+    }
+
+    // 权益列表项
+    .benefit-item {
+      background-color: #F2F3F5;
+      border-radius: 13px;
+      padding: 30px;
+      display: flex;
+      align-items: center;
+      gap: 30px;
+      margin-bottom: 25px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      // 图标
+      .benefit-icon {
+        width: 83px;
+        height: 83px;
+        flex-shrink: 0;
+      }
+
+      // 内容区域
+      .benefit-content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 13px;
+        min-width: 0;
+
+        .benefit-title {
+          font-weight: bold;
+          font-size: 33px;
+          color: #000000;
+        }
+
+        .benefit-desc {
+          font-size: 25px;
+          color: #8B8B8B;
+          line-height: 1.5;
+          word-break: break-all;
+        }
+      }
+
+      // 箭头
+      .benefit-arrow {
+        width: 13px;
+        height: 20px;
+        flex-shrink: 0;
+      }
+    }
+  }
+
+  // 底部固定区域
+  .footer-bar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 30px;
+    padding-bottom: calc(20px + env(safe-area-inset-bottom));
+    background-color: #FFFFFF;
+    box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1);
+
+    .price-info {
+      display: flex;
+      align-items: baseline;
+
+      .price-amount {
+        font-size: 45px;
+        color: #000000;
+        font-weight: 500;
+      }
+
+      .price-unit {
+        font-size: 28px;
+        color: #000000;
+        margin-left: 4px;
+      }
+    }
+
+    .open-vip-btn {
+      width: 200px;
+      height: 88px;
+      background: linear-gradient(-90deg, #F0BE86 0%, #FADEB9 100%);
+      border-radius: 44px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .open-vip-text {
+        font-size: 33px;
+        color: #844614;
+        font-weight: 500;
+      }
+    }
+  }
+}

src/pagesUser/vipBenefits/index.tsx

@@ -0,0 +1,128 @@
+/**
+ * VIP权益页面
+ */
+import { View, Text, Image } from '@tarojs/components'
+import Taro, { useLoad } from '@tarojs/taro'
+import { Arrow } from '@taroify/icons'
+import './index.scss'
+
+// 使用本地图片资源
+const vipBgImg = require('../images/vipBg.png')
+const lijianImg = require('../images/lijian.png')
+const youhuiImg = require('../images/youhui.png')
+const shengriImg = require('../images/shengri.png')
+
+const VipBenefits = () => {
+  useLoad(() => {
+    console.log('VIP权益页面加载')
+  })
+
+  // 权益详情
+  const handleBenefitDetail = () => {
+    Taro.showToast({
+      title: '功能开发中',
+      icon: 'none',
+      duration: 2000
+    })
+  }
+
+  // 首单立减
+  const handleFirstDiscount = () => {
+    Taro.showToast({
+      title: '功能开发中',
+      icon: 'none',
+      duration: 2000
+    })
+  }
+
+  // VIP专属优惠
+  const handleVipDiscount = () => {
+    Taro.showToast({
+      title: '功能开发中',
+      icon: 'none',
+      duration: 2000
+    })
+  }
+
+  // 生日福利
+  const handleBirthdayBenefit = () => {
+    Taro.showToast({
+      title: '功能开发中',
+      icon: 'none',
+      duration: 2000
+    })
+  }
+
+  return (
+    <View className="vip-benefits-page">
+      {/* 上部分：VIP卡片区域 */}
+      <View className="vip-card-area">
+        <View className="vip-card">
+          {/* 年卡标签 */}
+          <Text className="card-type">年卡</Text>
+          
+          {/* 店铺名称 */}
+          <Text className="store-name">北京球场风云店</Text>
+          
+          {/* 地址 */}
+          <Text className="store-address">距离0.05km | XX省XX市XX区XX县XXXXXXXXX街道XXX大厦106</Text>
+        </View>
+      </View>
+
+      {/* 下部分：权益列表区域 */}
+      <View className="benefits-area">
+        {/* 标题行 */}
+        <View className="benefits-header">
+          <Text className="benefits-title">开通即享VIP权益</Text>
+          <View className="detail-btn" onClick={handleBenefitDetail}>
+            <Text className="detail-text">权益详情</Text>
+            <Arrow className="detail-arrow" size="16px" color="#999999" />
+          </View>
+        </View>
+
+        {/* 首单立减 */}
+        <View className="benefit-item" onClick={handleFirstDiscount}>
+          <Image className="benefit-icon" src={lijianImg} mode="aspectFit" />
+          <View className="benefit-content">
+            <Text className="benefit-title">首单立减</Text>
+            <Text className="benefit-desc">首次台球订单立减，订单结束时自动抵扣。</Text>
+          </View>
+          <Arrow className="benefit-arrow" size="20px" color="#999999" />
+        </View>
+
+        {/* VIP专属优惠 */}
+        <View className="benefit-item" onClick={handleVipDiscount}>
+          <Image className="benefit-icon" src={youhuiImg} mode="aspectFit" />
+          <View className="benefit-content">
+            <Text className="benefit-title">VIP专属优惠</Text>
+            <Text className="benefit-desc">全年享折扣，不限时长，不限次数。{'\n'}(不与其他优惠同享)</Text>
+          </View>
+          <Arrow className="benefit-arrow" size="20px" color="#999999" />
+        </View>
+
+        {/* 生日福利 */}
+        <View className="benefit-item" onClick={handleBirthdayBenefit}>
+          <Image className="benefit-icon" src={shengriImg} mode="aspectFit" />
+          <View className="benefit-content">
+            <Text className="benefit-title">生日福利</Text>
+            <Text className="benefit-desc">生日当天到店打台球，享受赠球时长福利。</Text>
+          </View>
+          <Arrow className="benefit-arrow" size="20px" color="#999999" />
+        </View>
+      </View>
+
+      {/* 底部价格和按钮 */}
+      <View className="footer-bar">
+        <View className="price-info">
+          <Text className="price-amount">19.90</Text>
+          <Text className="price-unit">元/年</Text>
+        </View>
+        <View className="open-vip-btn">
+          <Text className="open-vip-text">开通VIP</Text>
+        </View>
+      </View>
+    </View>
+  )
+}
+
+export default VipBenefits