From 24d9bb1b0154cfe8a4fd09aa25a1a9b835e984e0 Mon Sep 17 00:00:00 2001
From: zzc <1761997216@qq.com>
Date: Wed, 28 Jan 2026 23:54:15 +0800
Subject: [PATCH] fix: help page

---
 pages.json          |   8 +
 pages/mine/help.vue | 480 ++++++++++++++++++++++++++++++++++++++++++++
 pages/mine/mine.vue |   6 +
 3 files changed, 494 insertions(+)
 create mode 100644 pages/mine/help.vue

diff --git a/pages.json b/pages.json
index 45428f8..ab74f0e 100644
--- a/pages.json
+++ b/pages.json
@@ -41,6 +41,14 @@
         "enablePullDownRefresh": true
       }
     },
+    {
+      "path": "pages/mine/help",
+      "style": {
+        "navigationBarTitleText": "帮助中心",
+        "navigationStyle": "custom",
+        "enablePullDownRefresh": false
+      }
+    },
     {
       "path": "pages/mine/mine",
       "style": {
diff --git a/pages/mine/help.vue b/pages/mine/help.vue
new file mode 100644
index 0000000..5ece3f9
--- /dev/null
+++ b/pages/mine/help.vue
@@ -0,0 +1,480 @@
+<template>
+  <view class="help-page" :style="{ paddingTop: navBarHeight + 'px' }">
+    <!-- Custom Navbar -->
+    <view
+      class="nav-bar"
+      :style="{
+        height: navBarHeight + 'px',
+        paddingTop: statusBarHeight + 'px',
+      }"
+    >
+      <view class="nav-left" @click="goBack">
+        <uni-icons type="left" size="24" color="#000" />
+      </view>
+      <text class="nav-title">帮助中心</text>
+    </view>
+
+    <!-- Search Bar -->
+    <view class="search-box">
+      <view class="search-input-box">
+        <uni-icons type="search" size="18" color="#999" />
+        <text class="placeholder">搜索你遇到的问题</text>
+      </view>
+    </view>
+
+    <scroll-view scroll-y class="content-scroll">
+      <!-- Quick Start -->
+      <view class="section">
+        <view class="section-header">
+          <view class="red-bar"></view>
+          <text class="section-title">快速上手</text>
+        </view>
+        <view class="steps-card">
+          <view class="step-item">
+            <view class="icon-circle">
+              <uni-icons type="email-filled" size="30" color="#ff3b30" />
+            </view>
+            <text class="step-text">制作贺卡</text>
+          </view>
+          <view class="arrow">
+            <uni-icons type="arrowright" size="16" color="#ffccc7" />
+          </view>
+          <view class="step-item">
+            <view class="icon-circle">
+              <uni-icons type="person-filled" size="30" color="#ff3b30" />
+            </view>
+            <text class="step-text">佩戴挂饰</text>
+          </view>
+          <view class="arrow">
+            <uni-icons type="arrowright" size="16" color="#ffccc7" />
+          </view>
+          <view class="step-item">
+            <view class="icon-circle">
+              <uni-icons type="gift-filled" size="30" color="#ff3b30" />
+            </view>
+            <text class="step-text">送出祝福</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- FAQ -->
+      <view class="section">
+        <view class="section-header">
+          <view class="red-bar"></view>
+          <text class="section-title">常见问题</text>
+        </view>
+
+        <view class="faq-list">
+          <view
+            v-for="(category, index) in faqList"
+            :key="index"
+            class="faq-category"
+          >
+            <view class="category-header" @click="toggleCategory(index)">
+              <view class="cat-left">
+                <uni-icons
+                  :type="category.icon"
+                  size="20"
+                  color="#ff3b30"
+                  class="cat-icon"
+                />
+                <text class="cat-title">{{ category.title }}</text>
+              </view>
+              <uni-icons
+                :type="category.expanded ? 'bottom' : 'right'"
+                size="16"
+                color="#ccc"
+              />
+            </view>
+
+            <view v-if="category.expanded" class="category-content">
+              <view
+                v-for="(item, idx) in category.items"
+                :key="idx"
+                class="faq-item"
+              >
+                <view class="question" @click="toggleQuestion(index, idx)">
+                  <text>{{ item.q }}</text>
+                  <uni-icons type="right" size="14" color="#ccc" />
+                </view>
+                <view class="answer">
+                  <text>{{ item.a }}</text>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- Contact Support -->
+      <view class="contact-section">
+        <view class="contact-card">
+          <view class="contact-title">没找到答案？</view>
+          <view class="contact-btns">
+            <button class="c-btn" open-type="contact">
+              <uni-icons type="chatbubbles-filled" size="20" color="#fff" />
+              <text>在线客服</text>
+            </button>
+            <button class="c-btn">
+              <uni-icons type="world-filled" size="20" color="#fff" />
+              <text>官方公众号</text>
+            </button>
+          </view>
+          <view class="bg-decor">
+            <uni-icons
+              type="help-filled"
+              size="120"
+              color="rgba(255,255,255,0.1)"
+            />
+          </view>
+        </view>
+      </view>
+
+      <!-- Footer -->
+      <view class="footer">
+        <view class="footer-blessing">
+          <uni-icons type="vip-filled" size="14" color="#ff3b30" />
+          <text>祝您2026新春大吉，万事如意</text>
+        </view>
+        <view class="footer-copy">2026 丙午马年 · 官方出品</view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { getBavBarHeight, getStatusBarHeight } from "@/utils/system";
+
+const navBarHeight = getBavBarHeight();
+const statusBarHeight = getStatusBarHeight();
+
+const goBack = () => {
+  uni.navigateBack();
+};
+
+const faqList = ref([
+  {
+    title: "贺卡制作",
+    icon: "compose",
+    expanded: true,
+    items: [
+      {
+        q: "如何分享给微信好友？",
+        a: "制作完成后，点击右下角“送出祝福”按钮，选择“发送给朋友”即可。您也可以保存为图片后在聊天对话框发送。",
+      },
+      {
+        q: "生成速度太慢怎么办？",
+        a: "生成速度受网络环境和服务器负载影响，请您耐心等待或尝试切换网络。",
+      },
+    ],
+  },
+  {
+    title: "头像定制",
+    icon: "person",
+    expanded: false,
+    items: [
+      {
+        q: "如何更换头像边框？",
+        a: "在头像定制页面，左右滑动选择您喜欢的边框样式，点击保存即可。",
+      },
+    ],
+  },
+  {
+    title: "运势抽取",
+    icon: "calendar",
+    expanded: false,
+    items: [
+      {
+        q: "每天可以抽取几次？",
+        a: "每位用户每天有3次免费抽取机会，分享给好友可获得额外机会。",
+      },
+    ],
+  },
+  {
+    title: "壁纸保存",
+    icon: "image",
+    expanded: false,
+    items: [
+      {
+        q: "下载壁纸不清晰怎么办？",
+        a: "请确保您下载的是原图。如果网络不稳定，可能会自动加载低清预览图，请等待加载完成后再保存。",
+      },
+    ],
+  },
+]);
+
+const toggleCategory = (index) => {
+  faqList.value[index].expanded = !faqList.value[index].expanded;
+};
+
+const toggleQuestion = (catIndex, itemIndex) => {
+  // Simple expansion for question details not implemented in design but structure is there
+  // The design shows the answer directly under the question for the first item
+};
+</script>
+
+<style lang="scss" scoped>
+.help-page {
+  min-height: 100vh;
+  background-color: #fcfcfc;
+  padding-bottom: 40rpx;
+  box-sizing: border-box;
+}
+
+.nav-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+}
+
+.nav-left {
+  position: absolute;
+  left: 20rpx;
+  bottom: 0;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  padding: 0 10rpx;
+}
+
+.nav-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #000;
+  position: absolute;
+  bottom: 0;
+  height: 44px;
+  line-height: 44px;
+}
+
+.search-box {
+  padding: 20rpx 30rpx;
+  background: #fff;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.search-input-box {
+  background: #f5f5f5;
+  height: 72rpx;
+  border-radius: 36rpx;
+  display: flex;
+  align-items: center;
+  padding: 0 24rpx;
+
+  .placeholder {
+    font-size: 28rpx;
+    color: #999;
+    margin-left: 12rpx;
+  }
+}
+
+.content-scroll {
+  padding: 0 30rpx;
+}
+
+.section {
+  padding: 30rpx;
+  margin-top: 10rpx;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 30rpx;
+
+  .red-bar {
+    width: 6rpx;
+    height: 28rpx;
+    background: #ff3b30;
+    border-radius: 4rpx;
+    margin-right: 12rpx;
+  }
+
+  .section-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #ff3b30;
+  }
+}
+
+.steps-card {
+  background: #fff;
+  border-radius: 24rpx;
+  padding: 40rpx 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.02);
+
+  .step-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .icon-circle {
+      width: 100rpx;
+      height: 100rpx;
+      background: #fff6f6;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 16rpx;
+    }
+
+    .step-text {
+      font-size: 24rpx;
+      color: #333;
+      font-weight: 600;
+    }
+  }
+
+  .arrow {
+    margin-bottom: 40rpx;
+  }
+}
+
+.faq-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+}
+
+.faq-category {
+  background: #fff;
+  border-radius: 20rpx;
+  overflow: hidden;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.02);
+
+  .category-header {
+    padding: 30rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .cat-left {
+      display: flex;
+      align-items: center;
+      gap: 16rpx;
+
+      .cat-title {
+        font-size: 30rpx;
+        font-weight: 600;
+        color: #333;
+      }
+    }
+  }
+
+  .category-content {
+    background: #fcfcfc;
+    padding: 0 30rpx 30rpx;
+
+    .faq-item {
+      margin-top: 24rpx;
+
+      .question {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 28rpx;
+        color: #333;
+        margin-bottom: 12rpx;
+      }
+
+      .answer {
+        font-size: 26rpx;
+        color: #888;
+        line-height: 1.6;
+        background: #f8f8f8;
+        padding: 20rpx;
+        border-radius: 12rpx;
+      }
+    }
+  }
+}
+
+.contact-section {
+  padding: 0 30rpx;
+  margin-top: 20rpx;
+}
+
+.contact-card {
+  background: linear-gradient(135deg, #e52e2e 0%, #c61a1a 100%);
+  border-radius: 30rpx;
+  padding: 40rpx;
+  position: relative;
+  overflow: hidden;
+  color: #fff;
+
+  .contact-title {
+    font-size: 36rpx;
+    font-weight: bold;
+    margin-bottom: 40rpx;
+  }
+
+  .contact-btns {
+    display: flex;
+    gap: 30rpx;
+    position: relative;
+    z-index: 2;
+
+    .c-btn {
+      flex: 1;
+      height: 80rpx;
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 40rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 12rpx;
+      color: #fff;
+      font-size: 28rpx;
+      border: 1px solid rgba(255, 255, 255, 0.3);
+      padding: 0;
+      margin: 0;
+
+      &::after {
+        border: none;
+      }
+    }
+  }
+
+  .bg-decor {
+    position: absolute;
+    right: -20rpx;
+    bottom: -40rpx;
+    opacity: 0.5;
+    z-index: 1;
+  }
+}
+
+.footer {
+  margin-top: 60rpx;
+  text-align: center;
+  padding-bottom: 60rpx;
+
+  .footer-blessing {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10rpx;
+    font-size: 24rpx;
+    color: #ff8888;
+    margin-bottom: 12rpx;
+  }
+
+  .footer-copy {
+    font-size: 20rpx;
+    color: #ccc;
+  }
+}
+</style>
diff --git a/pages/mine/mine.vue b/pages/mine/mine.vue
index 2996fac..dfb73ee 100644
--- a/pages/mine/mine.vue
+++ b/pages/mine/mine.vue
@@ -196,6 +196,12 @@ const navTo = (page) => {
     });
     return;
   }
+  if (page === "help") {
+    uni.navigateTo({
+      url: "/pages/mine/help",
+    });
+    return;
+  }
   uni.showToast({ title: "功能开发中", icon: "none" });
 };
 </script>