vip详情

src/app.config.ts

@@ -29,6 +29,7 @@ export default defineAppConfig({
         'editProfile/index',      // 编辑资料
         'accountBalance/index',   // 账户余额
         'vipBenefits/index',      // VIP权益
+        'benefitDetail/index',    // 权益详情
       ]
     },
     {

src/pagesUser/benefitDetail/index.config.ts

@@ -0,0 +1,5 @@
+export default {
+  navigationBarTitleText: '权益详情',
+  navigationBarBackgroundColor: '#FFFFFF',
+  navigationBarTextStyle: 'black',
+}

src/pagesUser/benefitDetail/index.scss

@@ -0,0 +1,72 @@
+.benefit-detail-page {
+  min-height: 100vh;
+  background-color: #FFFFFF;
+
+  // 权益列表
+  .benefit-list {
+    padding: 30px;
+
+    .benefit-item {
+      background-color: #FFFFFF;
+      margin-bottom: 25px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      // 标题行
+      .benefit-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 30px 0;
+        border-bottom: 1px solid #F2F3F5;
+
+        .benefit-title {
+          // font-weight: bold;
+          font-size: 30px;
+          color: #333333;
+        }
+
+        .arrow-icon {
+          transition: transform 0.3s ease;
+          flex-shrink: 0;
+
+          &.expanded {
+            transform: rotate(180deg);
+          }
+        }
+      }
+
+      // 详情内容
+      .benefit-details {
+        padding: 30px 0;
+
+        .detail-item {
+          display: flex;
+          align-items: flex-start;
+          margin-bottom: 20px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+
+          .detail-dot {
+            font-size: 25px;
+            color: #000000;
+            margin-right: 10px;
+            flex-shrink: 0;
+            line-height: 1.8;
+          }
+
+          .detail-text {
+            flex: 1;
+            font-size: 25px;
+            color: #000000;
+            line-height: 1.8;
+          }
+        }
+      }
+    }
+  }
+}

src/pagesUser/benefitDetail/index.tsx

@@ -0,0 +1,107 @@
+/**
+ * 权益详情页面
+ */
+import { View, Text } from '@tarojs/components'
+import Taro, { useLoad, useRouter } from '@tarojs/taro'
+import { useState } from 'react'
+import { ArrowDown } from '@taroify/icons'
+import './index.scss'
+
+interface BenefitItem {
+  id: string
+  title: string
+  details: string[]
+}
+
+const BenefitDetail = () => {
+  const router = useRouter()
+  const { expand = '' } = router.params as { expand?: string } // 接收需要展开的项
+
+  // 权益数据
+  const benefits: BenefitItem[] = [
+    {
+      id: 'first',
+      title: '首单立减',
+      details: [
+        '开通VIP后，首笔台球订单（需原价开台，团购券等方式开台不可适用），订单结束时自动抵扣（不与VIP折扣及其他优惠同享），抵扣后不再支持。',
+        'VIP门店可用，非VIP门店不可使用，具体以前端展示的可用门店为准。',
+        '仅限台球服务可用，棋牌等其他类型服务不适用。'
+      ]
+    },
+    {
+      id: 'vip',
+      title: 'VIP专属优惠',
+      details: [
+        '享受全年VIP专属优惠，本优惠不与其他任何优惠同享（比如：门店充值、优惠券等），具体优惠折扣根据VIP门店开台页显示为准，在VIP有效期内优惠不限次数。',
+        'VIP门店可用，非VIP门店不可使用，具体以前端展示的可用门店为准。',
+        '仅限台球服务可用，棋牌等其他类型服务不适用。'
+      ]
+    },
+    {
+      id: 'birthday',
+      title: '生日福利',
+      details: [
+        '生日当天（以VIP填写的生日信息为准，无生日信息则不能享受生日赠时长福利），享受1次赠1小时时长优惠。',
+        'VIP门店可用，非VIP门店不可使用，具体以前端展示的可用门店为准。',
+        '仅限台球服务可用，棋牌等其他类型服务不适用。'
+      ]
+    }
+  ]
+
+  // 展开状态管理
+  const [expandedItems, setExpandedItems] = useState<string[]>(() => {
+    // 初始化时如果有 expand 参数，则展开对应项
+    return expand ? [expand] : []
+  })
+
+  useLoad(() => {
+    console.log('权益详情页面加载，展开项:', expand)
+  })
+
+  // 切换展开/收起
+  const handleToggle = (id: string) => {
+    setExpandedItems(prev => {
+      if (prev.includes(id)) {
+        // 如果已展开，则收起
+        return prev.filter(item => item !== id)
+      } else {
+        // 如果未展开，则展开
+        return [...prev, id]
+      }
+    })
+  }
+
+  return (
+    <View className="benefit-detail-page">
+      <View className="benefit-list">
+        {benefits.map((benefit) => (
+          <View key={benefit.id} className="benefit-item">
+            {/* 标题行 */}
+            <View className="benefit-header" onClick={() => handleToggle(benefit.id)}>
+              <Text className="benefit-title">{benefit.title}</Text>
+              <ArrowDown 
+                className={`arrow-icon ${expandedItems.includes(benefit.id) ? 'expanded' : ''}`}
+                size="20px"
+                color="#999999"
+              />
+            </View>
+
+            {/* 详情内容（展开时显示） */}
+            {expandedItems.includes(benefit.id) && (
+              <View className="benefit-details">
+                {benefit.details.map((detail, index) => (
+                  <View key={index} className="detail-item">
+                    <Text className="detail-dot">•</Text>
+                    <Text className="detail-text">{detail}</Text>
+                  </View>
+                ))}
+              </View>
+            )}
+          </View>
+        ))}
+      </View>
+    </View>
+  )
+}
+
+export default BenefitDetail

src/pagesUser/vipBenefits/index.tsx

@@ -17,39 +17,31 @@ const VipBenefits = () => {
     console.log('VIP权益页面加载')
   })
 
-  // 权益详情
+  // 权益详情（不展开任何项）
   const handleBenefitDetail = () => {
-    Taro.showToast({
-      title: '功能开发中',
-      icon: 'none',
-      duration: 2000
+    Taro.navigateTo({
+      url: '/pagesUser/benefitDetail/index'
     })
   }
 
-  // 首单立减
+  // 首单立减（展开首单立减项）
   const handleFirstDiscount = () => {
-    Taro.showToast({
-      title: '功能开发中',
-      icon: 'none',
-      duration: 2000
+    Taro.navigateTo({
+      url: '/pagesUser/benefitDetail/index?expand=first'
     })
   }
 
-  // VIP专属优惠
+  // VIP专属优惠（展开VIP专属优惠项）
   const handleVipDiscount = () => {
-    Taro.showToast({
-      title: '功能开发中',
-      icon: 'none',
-      duration: 2000
+    Taro.navigateTo({
+      url: '/pagesUser/benefitDetail/index?expand=vip'
     })
   }
 
-  // 生日福利
+  // 生日福利（展开生日福利项）
   const handleBirthdayBenefit = () => {
-    Taro.showToast({
-      title: '功能开发中',
-      icon: 'none',
-      duration: 2000
+    Taro.navigateTo({
+      url: '/pagesUser/benefitDetail/index?expand=birthday'
     })
   }