spring-festival-greetings/pages/mine/help.vue

<template>
  <view class="help-page">
    <NavBar title="帮助中心" />

    <!-- 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> -->

    <view 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>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import NavBar from "@/components/NavBar/NavBar.vue";
import { trackRecord } from "@/utils/common.js";

onMounted(() => {
  trackRecord({
    eventName: "help_page_visit",
    eventType: `visit`,
  });
});

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: "每位用户每天有1次免费抽取机会，分享给好友可获得额外机会。",
      },
    ],
  },
  {
    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;
}

.search-box {
  padding: 20rpx 30rpx;
  background: #fff;
  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 {
  width: 100%;
  box-sizing: border-box;
}

.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>