添加帮助中心页面

2025-09-28 00:46:32 +08:00
parent 69b9587ab2
commit ca84b75bd1
6 changed files with 515 additions and 1 deletions
--- a/miniprogram/pages/helpcenter/helpcenter.json
+++ b/miniprogram/pages/helpcenter/helpcenter.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+   
+  }
+}
--- a/miniprogram/pages/helpcenter/helpcenter.ts
+++ b/miniprogram/pages/helpcenter/helpcenter.ts
@@ -0,0 +1,189 @@
+// 定义FAQ数据类型
+interface FAQ {
+  id: number;
+  question: string;
+  answer: string;
+  category: 'account' | 'order' | 'payment' | 'other';
+  expanded: boolean;
+}
+
+Page({
+  data: {
+    // 搜索关键词
+    searchKeyword: '',
+    
+    // 当前选中的分类
+    currentCategory: 'all',
+    
+    // FAQ列表数据
+    faqs: [] as FAQ[],
+    
+    // 过滤后的FAQ列表
+    filteredFAQs: [] as FAQ[]
+  },
+  
+  onLoad() {
+    // 初始化FAQ数据
+    this.initFAQs();
+  },
+  
+  // 初始化FAQ数据
+  initFAQs() {
+    const faqs: FAQ[] = [
+      {
+        id: 1,
+        question: '如何注册账号？',
+        answer: '您可以通过手机号验证码进行注册，点击首页"我的"页面，选择"注册"，输入手机号并获取验证码，设置密码后即可完成注册。',
+        category: 'account',
+        expanded: false
+      },
+      {
+        id: 2,
+        question: '忘记密码怎么办？',
+        answer: '在登录页面点击"忘记密码"，输入注册手机号，获取验证码后即可重置密码。',
+        category: 'account',
+        expanded: false
+      },
+      {
+        id: 3,
+        question: '如何修改个人信息？',
+        answer: '进入"我的"页面，点击头像或个人信息区域，即可修改昵称、头像等个人信息。',
+        category: 'account',
+        expanded: false
+      },
+      {
+        id: 4,
+        question: '如何查看我的订单？',
+        answer: '在"我的"页面中，点击"我的订单"即可查看所有订单状态，包括待付款、待发货、待收货和已完成。',
+        category: 'order',
+        expanded: false
+      },
+      {
+        id: 5,
+        question: '订单可以取消吗？',
+        answer: '未付款的订单可以直接取消；已付款但未发货的订单，您可以申请取消，商家审核通过后会为您退款；已发货的订单需要与商家协商后才能取消。',
+        category: 'order',
+        expanded: false
+      },
+      {
+        id: 6,
+        question: '支持哪些支付方式？',
+        answer: '目前我们支持微信支付、支付宝、银行卡等多种支付方式，您可以在结算页面选择合适的支付方式。',
+        category: 'payment',
+        expanded: false
+      },
+      {
+        id: 7,
+        question: '支付后多久可以发货？',
+        answer: '一般情况下，付款成功后48小时内会安排发货，特殊商品或活动期间可能会有延迟，具体以商品详情页说明为准。',
+        category: 'payment',
+        expanded: false
+      },
+      {
+        id: 8,
+        question: '如何联系客服？',
+        answer: '您可以通过帮助中心的"联系客服"按钮，或者在"我的"页面找到"客服中心"，工作时间为9:00-21:00。',
+        category: 'other',
+        expanded: false
+      },
+      {
+        id: 9,
+        question: '如何提交意见反馈？',
+        answer: '在"我的"页面找到"意见反馈"入口，选择反馈类型并填写内容，我们会尽快处理您的反馈。',
+        category: 'other',
+        expanded: false
+      }
+    ];
+    
+    this.setData({
+      faqs,
+      filteredFAQs: faqs
+    });
+  },
+  
+  // 切换分类
+  switchCategory(e: { currentTarget: { dataset: { category: string } } }) {
+    const category = e.currentTarget.dataset.category;
+    this.setData({
+      currentCategory: category
+    }, () => {
+      this.filterFAQs();
+    });
+  },
+  
+  // 搜索输入变化
+  onSearchInput(e: { detail: { value: string } }) {
+    const keyword = e.detail.value.trim();
+    this.setData({
+      searchKeyword: keyword
+    }, () => {
+      this.filterFAQs();
+    });
+  },
+  
+  // 过滤FAQ列表
+  filterFAQs() {
+    const { faqs, currentCategory, searchKeyword } = this.data;
+    
+    let filtered = faqs;
+    
+    // 按分类过滤
+    if (currentCategory !== 'all') {
+      filtered = filtered.filter(faq => faq.category === currentCategory);
+    }
+    
+    // 按搜索关键词过滤
+    if (searchKeyword) {
+      const keyword = searchKeyword.toLowerCase();
+      filtered = filtered.filter(faq => 
+        faq.question.toLowerCase().includes(keyword) || 
+        faq.answer.toLowerCase().includes(keyword)
+      );
+    }
+    
+    this.setData({
+      filteredFAQs: filtered
+    });
+  },
+  
+  // 展开/收起FAQ
+  toggleFaq(e: { currentTarget: { dataset: { id: number } } }) {
+    const id = e.currentTarget.dataset.id;
+    const { faqs } = this.data;
+    
+    // 更新FAQ的展开状态
+    const updatedFAQs = faqs.map(faq => {
+      if (faq.id === id) {
+        return { ...faq, expanded: !faq.expanded };
+      }
+      return faq;
+    });
+    
+    this.setData({
+      faqs: updatedFAQs,
+      filteredFAQs: updatedFAQs
+    });
+  },
+  
+  // 联系客服
+  contactCustomerService() {
+    wx.showModal({
+      title: '联系客服',
+      content: '客服工作时间：9:00-21:00\n我们将尽快为您解答问题',
+      confirmText: '立即咨询',
+      cancelText: '稍后再说',
+      confirmColor: '#51bdb6',
+      success: (res) => {
+        if (res.confirm) {
+          // 实际项目中可以跳转到客服聊天页面
+          wx.showToast({
+            title: '正在连接客服...',
+            icon: 'none',
+            duration: 1500
+          });
+        }
+      }
+    });
+  }
+});
+    
--- a/miniprogram/pages/helpcenter/helpcenter.wxml
+++ b/miniprogram/pages/helpcenter/helpcenter.wxml
@@ -0,0 +1,89 @@
+<view class="help-container">
+  <!-- 顶部导航栏 -->
+  <view class="nav-bar">
+    <view class="nav-title">帮助中心</view>
+  </view>
+
+  <!-- 搜索框 -->
+  <view class="search-box">
+    <view class="search-icon">
+      <icon type="search" size="28" color="#999"></icon>
+    </view>
+    <input 
+      class="search-input" 
+      placeholder="搜索问题或关键词" 
+      value="{{searchKeyword}}"
+      bindinput="onSearchInput"
+    ></input>
+  </view>
+
+  <!-- 分类导航 -->
+  <view class="categories">
+    <view class="category-item {{currentCategory === 'all' ? 'active' : ''}}" bindtap="switchCategory" data-category="all">
+      <view class="category-icon all-icon"></view>
+      <view class="category-name">全部</view>
+    </view>
+    <view class="category-item {{currentCategory === 'account' ? 'active' : ''}}" bindtap="switchCategory" data-category="account">
+      <view class="category-icon account-icon"></view>
+      <view class="category-name">账号</view>
+    </view>
+    <view class="category-item {{currentCategory === 'order' ? 'active' : ''}}" bindtap="switchCategory" data-category="order">
+      <view class="category-icon order-icon"></view>
+      <view class="category-name">订单</view>
+    </view>
+    <view class="category-item {{currentCategory === 'payment' ? 'active' : ''}}" bindtap="switchCategory" data-category="payment">
+      <view class="category-icon payment-icon"></view>
+      <view class="category-name">支付</view>
+    </view>
+    <view class="category-item {{currentCategory === 'other' ? 'active' : ''}}" bindtap="switchCategory" data-category="other">
+      <view class="category-icon other-icon"></view>
+      <view class="category-name">其他</view>
+    </view>
+  </view>
+
+  <!-- 常见问题列表 -->
+  <view class="faq-list">
+    <view class="section-title">常见问题</view>
+    
+    <!-- 搜索结果为空时显示 -->
+    <view wx:if="{{filteredFAQs.length === 0 && searchKeyword}}" class="empty-result">
+      <view class="empty-icon">
+        <icon type="search" size="60" color="#ccc"></icon>
+      </view>
+      <view class="empty-text">未找到相关问题</view>
+      <view class="empty-hint">请尝试其他关键词</view>
+    </view>
+    
+    <!-- 问题列表 -->
+    <view wx:else>
+      <view 
+        class="faq-item" 
+        wx:for="{{filteredFAQs}}" 
+        wx:key="id"
+        bindtap="toggleFaq"
+        data-id="{{item.id}}"
+      >
+        <view class="faq-question">
+          <view class="question-text">{{item.question}}</view>
+          <view class="faq-arrow {{item.expanded ? 'expanded' : ''}}">
+            <icon type="chevron-down" size="24" color="#999"></icon>
+          </view>
+        </view>
+        
+        <view class="faq-answer {{item.expanded ? 'expanded' : ''}}">
+          {{item.answer}}
+        </view>
+      </view>
+    </view>
+  </view>
+
+  <!-- 联系客服 -->
+  <view class="contact-section">
+    <view class="contact-title">需要更多帮助？</view>
+    <button class="contact-btn" bindtap="contactCustomerService">
+      <icon type="phone" size="24" color="#fff" class="contact-icon"></icon>
+      联系客服
+    </button>
+  </view>
+</view>
+    
--- a/miniprogram/pages/helpcenter/helpcenter.wxss
+++ b/miniprogram/pages/helpcenter/helpcenter.wxss
@@ -0,0 +1,224 @@
+/* 基础样式 */
+page {
+  background-color: #f8f8f8;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+.help-container {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 导航栏样式 */
+.nav-bar {
+  height: 120rpx;
+  background-color: #51bdb6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.nav-title {
+  font-size: 36rpx;
+  color: #fff;
+  font-weight: 500;
+}
+
+/* 搜索框样式 */
+.search-box {
+  display: flex;
+  align-items: center;
+  background-color: #fff;
+  border-radius: 60rpx;
+  padding: 0 30rpx;
+  margin: 20rpx 30rpx;
+  height: 80rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+}
+
+.search-icon {
+  margin-right: 15rpx;
+}
+
+.search-input {
+  flex: 1;
+  height: 100%;
+  font-size: 28rpx;
+  color: #333;
+}
+
+.search-input::placeholder {
+  color: #ccc;
+}
+
+/* 分类导航样式 */
+.categories {
+  display: flex;
+  justify-content: space-around;
+  background-color: #fff;
+  padding: 25rpx 0;
+  margin-bottom: 20rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
+}
+
+.category-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 120rpx;
+}
+
+.category-icon {
+  width: 60rpx;
+  height: 60rpx;
+  border-radius: 50%;
+  background-color: #f0f7f7;
+  margin-bottom: 10rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.category-item.active .category-icon {
+  background-color: #51bdb6;
+}
+
+.category-name {
+  font-size: 24rpx;
+  color: #666;
+}
+
+.category-item.active .category-name {
+  color: #51bdb6;
+  font-weight: 500;
+}
+
+/* 常见问题列表样式 */
+.faq-list {
+  flex: 1;
+  padding: 0 30rpx;
+}
+
+.section-title {
+  font-size: 30rpx;
+  color: #333;
+  margin-bottom: 20rpx;
+  font-weight: 500;
+}
+
+.faq-item {
+  background-color: #fff;
+  border-radius: 16rpx;
+  margin-bottom: 15rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
+}
+
+.faq-question {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 30rpx;
+  cursor: pointer;
+}
+
+.question-text {
+  font-size: 28rpx;
+  color: #333;
+  line-height: 1.5;
+  flex: 1;
+  padding-right: 20rpx;
+}
+
+.faq-arrow {
+  transition: transform 0.3s ease;
+}
+
+.faq-arrow.expanded {
+  transform: rotate(180deg);
+}
+
+.faq-answer {
+  font-size: 26rpx;
+  color: #666;
+  line-height: 1.6;
+  padding: 0 30rpx 30rpx;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease, padding 0.3s ease;
+  border-top: 1rpx solid #f0f0f0;
+}
+
+.faq-answer.expanded {
+  max-height: 500rpx;
+  padding: 0 30rpx 30rpx;
+  padding-top: 20rpx;
+}
+
+/* 空结果样式 */
+.empty-result {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 100rpx 0;
+}
+
+.empty-icon {
+  margin-bottom: 20rpx;
+  opacity: 0.5;
+}
+
+.empty-text {
+  font-size: 28rpx;
+  color: #999;
+  margin-bottom: 10rpx;
+}
+
+.empty-hint {
+  font-size: 24rpx;
+  color: #ccc;
+}
+
+/* 联系客服样式 */
+.contact-section {
+  padding: 30rpx;
+  margin-top: 20rpx;
+}
+
+.contact-title {
+  font-size: 26rpx;
+  color: #666;
+  text-align: center;
+  margin-bottom: 20rpx;
+}
+
+.contact-btn {
+  width: 100%;
+  height: 90rpx;
+  line-height: 90rpx;
+  background-color: #51bdb6;
+  color: #fff;
+  font-size: 32rpx;
+  border-radius: 45rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+}
+
+.contact-btn::after {
+  border: none;
+}
+
+.contact-icon {
+  margin-right: 10rpx;
+}
+
+.contact-btn:active {
+  background-color: #45a39f;
+}
+