Initial commit

miniprogram/pages/help-center/index.js

@@ -0,0 +1,345 @@
+import Toast from 'tdesign-miniprogram/toast/index';
+
+Page({
+  data: {
+    searchValue: '',
+    activeNames: [],
+    version: '1.0.0',
+    servicePhone: '400-123-4567',
+    
+    // 快捷入口数据
+    quickAccess: [
+      {
+        id: 1,
+        title: '订单问题',
+        icon: 'shop',
+        color: '#007aff',
+        type: 'order'
+      },
+      {
+        id: 2,
+        title: '支付问题',
+        icon: 'wallet',
+        color: '#34c759',
+        type: 'payment'
+      },
+      {
+        id: 3,
+        title: '物流查询',
+        icon: 'location',
+        color: '#ff9500',
+        type: 'logistics'
+      },
+      {
+        id: 4,
+        title: '退换货',
+        icon: 'refresh',
+        color: '#ff3b30',
+        type: 'return'
+      }
+    ],
+    
+    // 常见问题数据
+    faqList: [
+      {
+        id: 'faq1',
+        question: '如何下单购买商品？',
+        answer: '1. 浏览商品页面，选择心仪的商品\n2. 点击"立即购买"或"加入购物车"\n3. 确认商品信息和收货地址\n4. 选择支付方式完成支付\n5. 等待商家发货'
+      },
+      {
+        id: 'faq2',
+        question: '支付失败怎么办？',
+        answer: '支付失败可能的原因：\n1. 网络连接不稳定，请检查网络后重试\n2. 银行卡余额不足或被冻结\n3. 支付密码错误\n4. 银行系统维护\n\n建议：更换支付方式或联系银行客服'
+      },
+      {
+        id: 'faq3',
+        question: '如何查看物流信息？',
+        answer: '查看物流信息的方法：\n1. 进入"我的订单"页面\n2. 找到对应订单，点击"查看物流"\n3. 可以看到详细的物流跟踪信息\n4. 也可以直接联系快递公司查询'
+      },
+      {
+        id: 'faq4',
+        question: '如何申请退换货？',
+        answer: '申请退换货流程：\n1. 进入"我的订单"找到需要退换的商品\n2. 点击"申请售后"\n3. 选择退货或换货原因\n4. 上传相关图片说明\n5. 提交申请等待审核\n6. 审核通过后按要求寄回商品'
+      },
+      {
+        id: 'faq5',
+        question: '优惠券如何使用？',
+        answer: '优惠券使用方法：\n1. 在结算页面选择可用的优惠券\n2. 系统会自动计算优惠金额\n3. 确认订单信息后完成支付\n\n注意：优惠券有使用条件和有效期，请及时使用'
+      },
+      {
+        id: 'faq6',
+        question: '忘记登录密码怎么办？',
+        answer: '找回密码的方法：\n1. 在登录页面点击"忘记密码"\n2. 输入注册时的手机号\n3. 获取验证码\n4. 设置新密码\n5. 使用新密码登录\n\n如仍无法解决，请联系客服'
+      }
+    ],
+    
+    // 使用指南数据
+    guideList: [
+      {
+        id: 1,
+        title: '新手购物指南',
+        description: '从注册到下单的完整流程',
+        icon: 'user-add',
+        url: '/pages/help-center/guide/shopping'
+      },
+      {
+        id: 2,
+        title: '支付安全指南',
+        description: '保护您的支付安全',
+        icon: 'secured',
+        url: '/pages/help-center/guide/payment'
+      },
+      {
+        id: 3,
+        title: '售后服务说明',
+        description: '了解我们的售后政策',
+        icon: 'service',
+        url: '/pages/help-center/guide/service'
+      },
+
+    ]
+  },
+
+  onLoad() {
+    this.getVersionInfo();
+  },
+
+  // 获取版本信息
+  getVersionInfo() {
+    const accountInfo = wx.getAccountInfoSync();
+    this.setData({
+      version: accountInfo.miniProgram.version || '1.0.0'
+    });
+  },
+
+  // 搜索相关方法
+  onSearchChange(e) {
+    this.setData({
+      searchValue: e.detail.value
+    });
+  },
+
+  onSearchSubmit(e) {
+    // 安全地获取搜索关键词，添加空值检查
+    const searchValue = e.detail?.value || '';
+    const keyword = typeof searchValue === 'string' ? searchValue.trim() : '';
+    
+    if (!keyword) {
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: '请输入搜索关键词',
+        theme: 'warning'
+      });
+      return;
+    }
+    
+    this.searchContent(keyword);
+  },
+
+  onSearchClear() {
+    this.setData({
+      searchValue: ''
+    });
+  },
+
+  // 搜索内容
+  searchContent(keyword) {
+    // 在FAQ中搜索
+    const matchedFAQ = this.data.faqList.filter(item => 
+      item.question.includes(keyword) || item.answer.includes(keyword)
+    );
+    
+    if (matchedFAQ.length > 0) {
+      // 展开匹配的FAQ
+      const activeNames = matchedFAQ.map(item => item.id);
+      this.setData({ activeNames });
+      
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: `找到 ${matchedFAQ.length} 个相关问题`,
+        theme: 'success'
+      });
+    } else {
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: '未找到相关内容，请联系客服',
+        theme: 'warning'
+      });
+    }
+  },
+
+  // 快捷入口点击
+  onQuickAccessTap(e) {
+    const { type } = e.currentTarget.dataset;
+    
+    switch (type) {
+      case 'order':
+        wx.navigateTo({ url: '/pages/order/order-list/index' });
+        break;
+      case 'payment':
+        this.showPaymentHelp();
+        break;
+      case 'logistics':
+        this.showLogisticsHelp();
+        break;
+      case 'return':
+        wx.navigateTo({ url: '/pages/order/after-service-list/index' });
+        break;
+      default:
+        Toast({
+          context: this,
+          selector: '#t-toast',
+          message: '功能开发中',
+          theme: 'warning'
+        });
+    }
+  },
+
+  // 显示支付帮助
+  showPaymentHelp() {
+    wx.showModal({
+      title: '支付问题',
+      content: '如遇支付问题，请检查网络连接和账户余额，或尝试更换支付方式。如仍有问题，请联系客服。',
+      showCancel: false,
+      confirmText: '我知道了'
+    });
+  },
+
+  // 显示物流帮助
+  showLogisticsHelp() {
+    wx.showModal({
+      title: '物流查询',
+      content: '您可以在"我的订单"中查看物流信息，或直接联系快递公司客服查询。',
+      showCancel: false,
+      confirmText: '我知道了'
+    });
+  },
+
+  // 折叠面板变化
+  onCollapseChange(e) {
+    this.setData({
+      activeNames: e.detail.value
+    });
+  },
+
+  // 使用指南点击
+  onGuideTap(e) {
+    const { url } = e.currentTarget.dataset;
+    
+    if (url) {
+      // 这里可以跳转到具体的指南页面
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: '指南页面开发中',
+        theme: 'warning'
+      });
+    }
+  },
+
+  // 联系客服
+  onContactService() {
+    wx.showModal({
+      title: '联系客服',
+      content: '工作时间：9:00-18:00\n我们将为您提供专业的服务',
+      confirmText: '在线咨询',
+      cancelText: '取消',
+      success: (res) => {
+        if (res.confirm) {
+          // 这里可以集成在线客服系统
+          Toast({
+            context: this,
+            selector: '#t-toast',
+            message: '正在连接客服...',
+            theme: 'loading'
+          });
+        }
+      }
+    });
+  },
+
+  // 拨打客服电话
+  onCallService() {
+    wx.showModal({
+      title: '客服热线',
+      content: `${this.data.servicePhone}\n工作时间：9:00-18:00`,
+      confirmText: '拨打电话',
+      cancelText: '取消',
+      success: (res) => {
+        if (res.confirm) {
+          wx.makePhoneCall({
+            phoneNumber: this.data.servicePhone,
+            fail: () => {
+              Toast({
+                context: this,
+                selector: '#t-toast',
+                message: '拨打失败，请手动拨打',
+                theme: 'error'
+              });
+            }
+          });
+        }
+      }
+    });
+  },
+
+  // 意见反馈
+  onFeedback() {
+    wx.showModal({
+      title: '意见反馈',
+      content: '感谢您的宝贵意见，我们会认真对待每一条反馈',
+      confirmText: '去反馈',
+      cancelText: '取消',
+      success: (res) => {
+        if (res.confirm) {
+          // 这里可以跳转到反馈页面或打开反馈表单
+          Toast({
+            context: this,
+            selector: '#t-toast',
+            message: '反馈功能开发中',
+            theme: 'warning'
+          });
+        }
+      }
+    });
+  },
+
+  // 底部链接点击
+  onPrivacyTap() {
+    wx.showModal({
+      title: '隐私政策',
+      content: '我们重视您的隐私保护，详细政策请查看完整版本',
+      showCancel: false,
+      confirmText: '我知道了'
+    });
+  },
+
+  onTermsTap() {
+    wx.showModal({
+      title: '服务条款',
+      content: '使用本应用即表示您同意我们的服务条款',
+      showCancel: false,
+      confirmText: '我知道了'
+    });
+  },
+
+  onAboutTap() {
+    wx.showModal({
+      title: '关于我们',
+      content: '致力于为用户提供优质的购物体验',
+      showCancel: false,
+      confirmText: '我知道了'
+    });
+  },
+
+  // 页面分享
+  onShareAppMessage() {
+    return {
+      title: '帮助中心 - 解决您的疑问',
+      path: '/pages/help-center/index'
+    };
+  }
+});

miniprogram/pages/help-center/index.json

@@ -0,0 +1,14 @@
+{
+  "navigationBarTitleText": "帮助中心",
+  "usingComponents": {
+    "t-search": "tdesign-miniprogram/search/search",
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-cell-group": "tdesign-miniprogram/cell-group/cell-group",
+    "t-collapse": "tdesign-miniprogram/collapse/collapse",
+    "t-collapse-panel": "tdesign-miniprogram/collapse-panel/collapse-panel",
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "t-button": "tdesign-miniprogram/button/button",
+    "t-toast": "tdesign-miniprogram/toast/toast",
+    "t-divider": "tdesign-miniprogram/divider/divider"
+  }
+}

miniprogram/pages/help-center/index.wxml

@@ -0,0 +1,107 @@
+<view class="help-center-container">
+  <!-- 搜索栏 -->
+  <view class="search-section">
+    <t-search
+      value="{{searchValue}}"
+      placeholder="搜索帮助内容"
+      bind:change="onSearchChange"
+      bind:submit="onSearchSubmit"
+      bind:clear="onSearchClear"
+    />
+  </view>
+
+  <!-- 快捷入口 -->
+  <view class="quick-access-section">
+    <view class="section-title">快捷服务</view>
+    <view class="quick-grid">
+      <view 
+        class="quick-item" 
+        wx:for="{{quickAccess}}" 
+        wx:key="id"
+        data-type="{{item.type}}"
+        bind:tap="onQuickAccessTap"
+      >
+        <t-icon name="{{item.icon}}" size="48rpx" color="{{item.color}}" />
+        <text class="quick-text">{{item.title}}</text>
+      </view>
+    </view>
+  </view>
+
+  <!-- 常见问题 -->
+  <view class="faq-section">
+    <view class="section-title">常见问题</view>
+    <t-collapse value="{{activeNames}}" bind:change="onCollapseChange">
+      <t-collapse-panel 
+        wx:for="{{faqList}}" 
+        wx:key="id"
+        header="{{item.question}}"
+        value="{{item.id}}"
+        header-right-content=""
+      >
+        <view class="faq-answer">{{item.answer}}</view>
+      </t-collapse-panel>
+    </t-collapse>
+  </view>
+
+  <!-- 使用指南 -->
+  <view class="guide-section">
+    <view class="section-title">使用指南</view>
+    <t-cell-group>
+      <t-cell
+        wx:for="{{guideList}}"
+        wx:key="id"
+        title="{{item.title}}"
+        note="{{item.description}}"
+        arrow
+        data-url="{{item.url}}"
+        bind:click="onGuideTap"
+      >
+        <t-icon name="{{item.icon}}" size="40rpx" slot="left-icon" />
+      </t-cell>
+    </t-cell-group>
+  </view>
+
+  <!-- 联系我们 -->
+  <view class="contact-section">
+    <view class="section-title">联系我们</view>
+    <t-cell-group>
+      <t-cell
+        title="在线客服"
+        note="工作时间：9:00-18:00"
+        arrow
+        bind:click="onContactService"
+      >
+        <t-icon name="service" size="40rpx" slot="left-icon" />
+      </t-cell>
+      <t-cell
+        title="客服热线"
+        note="{{servicePhone}}"
+        arrow
+        bind:click="onCallService"
+      >
+        <t-icon name="call" size="40rpx" slot="left-icon" />
+      </t-cell>
+      <t-cell
+        title="意见反馈"
+        note="帮助我们改进产品"
+        arrow
+        bind:click="onFeedback"
+      >
+        <t-icon name="chat" size="40rpx" slot="left-icon" />
+      </t-cell>
+    </t-cell-group>
+  </view>
+
+  <!-- 底部信息 -->
+  <view class="footer-section">
+    <t-divider content="更多帮助" />
+    <view class="footer-links">
+      <text class="footer-link" bind:tap="onPrivacyTap">隐私政策</text>
+      <text class="footer-link" bind:tap="onTermsTap">服务条款</text>
+      <text class="footer-link" bind:tap="onAboutTap">关于我们</text>
+    </view>
+    <view class="version-info">版本号：{{version}}</view>
+  </view>
+</view>
+
+<t-toast id="t-toast" />

miniprogram/pages/help-center/index.wxss

@@ -0,0 +1,188 @@
+.help-center-container {
+  background-color: #f5f5f5;
+  min-height: 100vh;
+  padding-bottom: 40rpx;
+}
+
+/* 搜索栏样式 */
+.search-section {
+  background-color: #fff;
+  padding: 20rpx 32rpx;
+  margin-bottom: 20rpx;
+}
+
+/* 通用标题样式 */
+.section-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #333;
+  padding: 32rpx 32rpx 24rpx;
+  background-color: #fff;
+}
+
+/* 快捷入口样式 */
+.quick-access-section {
+  background-color: #fff;
+  margin-bottom: 20rpx;
+}
+
+.quick-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 32rpx;
+  padding: 0 32rpx 32rpx;
+}
+
+.quick-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 24rpx 16rpx;
+  border-radius: 16rpx;
+  background-color: #f8f9fa;
+  transition: all 0.3s ease;
+}
+
+.quick-item:active {
+  background-color: #e9ecef;
+  transform: scale(0.95);
+}
+
+.quick-text {
+  font-size: 24rpx;
+  color: #666;
+  margin-top: 12rpx;
+  text-align: center;
+}
+
+/* 常见问题样式 */
+.faq-section {
+  background-color: #fff;
+  margin-bottom: 20rpx;
+}
+
+.faq-answer {
+  padding: 24rpx 32rpx;
+  font-size: 28rpx;
+  line-height: 1.6;
+  color: #666;
+  background-color: #f8f9fa;
+  border-radius: 8rpx;
+  margin: 0 32rpx 24rpx;
+}
+
+/* 使用指南样式 */
+.guide-section {
+  background-color: #fff;
+  margin-bottom: 20rpx;
+}
+
+/* 联系我们样式 */
+.contact-section {
+  background-color: #fff;
+  margin-bottom: 20rpx;
+}
+
+/* 底部样式 */
+.footer-section {
+  background-color: #fff;
+  padding: 32rpx;
+  text-align: center;
+}
+
+.footer-links {
+  display: flex;
+  justify-content: center;
+  gap: 40rpx;
+  margin: 24rpx 0;
+}
+
+.footer-link {
+  font-size: 26rpx;
+  color: #007aff;
+  text-decoration: underline;
+}
+
+.footer-link:active {
+  opacity: 0.7;
+}
+
+.version-info {
+  font-size: 24rpx;
+  color: #999;
+  margin-top: 24rpx;
+}
+
+/* 折叠面板自定义样式 */
+.t-collapse-panel__header {
+  padding: 24rpx 32rpx !important;
+  font-size: 30rpx !important;
+  font-weight: 500 !important;
+}
+
+.t-collapse-panel__content {
+  padding: 0 !important;
+}
+
+/* 单元格自定义样式 */
+.t-cell {
+  padding: 24rpx 32rpx !important;
+}
+
+.t-cell__title {
+  font-size: 30rpx !important;
+  font-weight: 500 !important;
+}
+
+.t-cell__note {
+  font-size: 26rpx !important;
+  color: #999 !important;
+}
+
+/* 响应式设计 */
+@media (max-width: 375px) {
+  .quick-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  
+  .quick-text {
+    font-size: 22rpx;
+  }
+}
+
+/* 深色模式适配 */
+@media (prefers-color-scheme: dark) {
+  .help-center-container {
+    background-color: #1a1a1a;
+  }
+  
+  .section-title,
+  .quick-access-section,
+  .faq-section,
+  .guide-section,
+  .contact-section,
+  .footer-section {
+    background-color: #2a2a2a;
+  }
+  
+  .section-title {
+    color: #fff;
+  }
+  
+  .quick-item {
+    background-color: #3a3a3a;
+  }
+  
+  .quick-item:active {
+    background-color: #4a4a4a;
+  }
+  
+  .quick-text {
+    color: #ccc;
+  }
+  
+  .faq-answer {
+    background-color: #3a3a3a;
+    color: #ccc;
+  }
+}