协议、帮助

src/pagesUser/agreement/index.config.ts

@@ -1,5 +1,5 @@
 export default {
-  navigationBarTitleText: '用户协议',
+  navigationBarTitleText: '协议',
   navigationBarBackgroundColor: '#FFFFFF',
   navigationBarTextStyle: 'black',
 }

src/pagesUser/agreement/index.scss

@@ -1,5 +1,32 @@
 .agreement-page {
   min-height: 100vh;
   background-color: #F2F3F5;
-  padding: 30px;
+
+  // 协议列表
+  .agreement-list {
+    .agreement-item {
+      background: #FFFFFF;
+      margin-bottom: 1PX;
+      padding: 30px 30px;
+      border-bottom: 1PX solid #F2F3F5;
+
+      .agreement-title {
+        font-size: 30px;
+        color: #333333;
+        line-height: 1.6;
+      }
+
+      // 覆盖 Taroify Cell 样式
+      :global {
+        .taroify-cell__value {
+          flex: 1;
+        }
+
+        .taroify-cell__right-icon {
+          color: #999999;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
 }

src/pagesUser/agreement/index.tsx

@@ -2,17 +2,52 @@
  * 协议页
  */
 import { View, Text } from '@tarojs/components'
-import { useLoad } from '@tarojs/taro'
+import Taro, { useLoad } from '@tarojs/taro'
+import { Cell } from '@taroify/core'
 import './index.scss'
 
+// 协议列表
+const agreementList = [
+  { id: 1, title: '用户协议', type: 'user' },
+  { id: 2, title: '隐私政策', type: 'privacy' },
+  { id: 3, title: '台球充值服务协议', type: 'recharge' },
+  { id: 4, title: 'VIP用户协议', type: 'vip' },
+  { id: 5, title: '其他/视频授权协议', type: 'video' },
+  { id: 6, title: '协议列表标题协议列表标题协议列表标题协议标题协议标题', type: 'test' },
+]
+
 const Agreement = () => {
   useLoad(() => {
     console.log('协议页面加载')
   })
 
+  // 点击协议项
+  const handleAgreementClick = (agreement: { id: number; title: string; type: string }) => {
+    console.log('点击协议', agreement)
+    // TODO: 跳转到协议详情页
+    Taro.showToast({
+      title: '功能开发中',
+      icon: 'none',
+      duration: 2000
+    })
+  }
+
   return (
     <View className="agreement-page">
-      <Text>用户协议</Text>
+      {/* 协议列表 */}
+      <View className="agreement-list">
+        {agreementList.map((agreement) => (
+          <Cell
+            key={agreement.id}
+            className="agreement-item"
+            clickable
+            isLink
+            onClick={() => handleAgreementClick(agreement)}
+          >
+            <Text className="agreement-title">{agreement.title}</Text>
+          </Cell>
+        ))}
+      </View>
     </View>
   )
 }

src/pagesUser/helpCenter/index.scss

@@ -1,5 +1,55 @@
 .help-center-page {
   min-height: 100vh;
   background-color: #F2F3F5;
-  padding: 30px;
+  display: flex;
+  flex-direction: column;
+
+  // 问题列表
+  .question-list {
+    flex: 1;
+
+    .question-item {
+      background: #FFFFFF;
+      margin-bottom: 1PX;
+      padding: 30px 30px;
+      border-bottom: 1PX solid #F2F3F5;
+
+      .question-title {
+        font-size: 30px;
+        color: #333333;
+        line-height: 1.6;
+      }
+
+      // 覆盖 Taroify Cell 样式
+      :global {
+        .taroify-cell__value {
+          flex: 1;
+        }
+
+        .taroify-cell__right-icon {
+          color: #999999;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+
+  // 客服电话
+  .service-phone {
+    padding: 40px 30px;
+    text-align: center;
+    background: #FFFFFF;
+    margin-top: auto;
+
+    .phone-label {
+      font-size: 28px;
+      color: #666666;
+    }
+
+    .phone-number {
+      font-size: 28px;
+      color: #1989FA;
+      text-decoration: underline;
+    }
+  }
 }

src/pagesUser/helpCenter/index.tsx

@@ -2,17 +2,66 @@
  * 帮助中心页
  */
 import { View, Text } from '@tarojs/components'
-import { useLoad } from '@tarojs/taro'
+import Taro, { useLoad } from '@tarojs/taro'
+import { Cell } from '@taroify/core'
+import { Arrow } from '@taroify/icons'
 import './index.scss'
 
+// 帮助问题列表
+const helpQuestions = [
+  { id: 1, title: '押金可退吗？' },
+  { id: 2, title: '卡券可以退款吗？' },
+  { id: 3, title: '购买的年卡/VIP会员可以退款吗？' },
+  { id: 4, title: '问题列表标题问题列表标题问题列表标题问题标题问题标题' },
+]
+
 const HelpCenter = () => {
   useLoad(() => {
     console.log('帮助中心页面加载')
   })
 
+  // 点击问题
+  const handleQuestionClick = (question: { id: number; title: string }) => {
+    console.log('点击问题', question)
+    // TODO: 跳转到问题详情页
+    Taro.showToast({
+      title: '功能开发中',
+      icon: 'none',
+      duration: 2000
+    })
+  }
+
+  // 拨打客服电话
+  const handleCallService = () => {
+    Taro.makePhoneCall({
+      phoneNumber: '100-666-XXXX'
+    })
+  }
+
   return (
     <View className="help-center-page">
-      <Text>帮助中心</Text>
+      {/* 问题列表 */}
+      <View className="question-list">
+        {helpQuestions.map((question) => (
+          <Cell
+            key={question.id}
+            className="question-item"
+            clickable
+            isLink
+            onClick={() => handleQuestionClick(question)}
+          >
+            <Text className="question-title">{question.title}</Text>
+          </Cell>
+        ))}
+      </View>
+
+      {/* 客服电话 */}
+      <View className="service-phone">
+        <Text className="phone-label">客服电话：</Text>
+        <Text className="phone-number" onClick={handleCallService}>
+          100-666-XXXX
+        </Text>
+      </View>
     </View>
   )
 }