From ca84b75bd11229908bbd99ca48af30377130ffb2 Mon Sep 17 00:00:00 2001 From: mayiming <1627832236@qq.com> Date: Sun, 28 Sep 2025 00:46:32 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=B8=AE=E5=8A=A9=E4=B8=AD?= =?UTF-8?q?=E5=BF=83=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- miniprogram/app.json | 3 +- miniprogram/pages/helpcenter/helpcenter.json | 6 + miniprogram/pages/helpcenter/helpcenter.ts | 189 ++++++++++++++++ miniprogram/pages/helpcenter/helpcenter.wxml | 89 ++++++++ miniprogram/pages/helpcenter/helpcenter.wxss | 224 +++++++++++++++++++ miniprogram/pages/user/user.ts | 5 + 6 files changed, 515 insertions(+), 1 deletion(-) create mode 100644 miniprogram/pages/helpcenter/helpcenter.json create mode 100644 miniprogram/pages/helpcenter/helpcenter.ts create mode 100644 miniprogram/pages/helpcenter/helpcenter.wxml create mode 100644 miniprogram/pages/helpcenter/helpcenter.wxss diff --git a/miniprogram/app.json b/miniprogram/app.json index 3ad0967..8a98d1b 100644 --- a/miniprogram/app.json +++ b/miniprogram/app.json @@ -10,7 +10,8 @@ "pages/shop/shop", "pages/notifications/notifications", "pages/setting/setting", - "pages/opinion/opinion" + "pages/opinion/opinion", + "pages/helpcenter/helpcenter" ], "window": { "navigationBarTextStyle": "black", diff --git a/miniprogram/pages/helpcenter/helpcenter.json b/miniprogram/pages/helpcenter/helpcenter.json new file mode 100644 index 0000000..3bd5dd3 --- /dev/null +++ b/miniprogram/pages/helpcenter/helpcenter.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + + } +} \ No newline at end of file diff --git a/miniprogram/pages/helpcenter/helpcenter.ts b/miniprogram/pages/helpcenter/helpcenter.ts new file mode 100644 index 0000000..338fc18 --- /dev/null +++ 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 + }); + } + } + }); + } +}); + \ No newline at end of file diff --git a/miniprogram/pages/helpcenter/helpcenter.wxml b/miniprogram/pages/helpcenter/helpcenter.wxml new file mode 100644 index 0000000..33daea0 --- /dev/null +++ b/miniprogram/pages/helpcenter/helpcenter.wxml @@ -0,0 +1,89 @@ + + + + 帮助中心 + + + + + + + + + + + + + + + 全部 + + + + 账号 + + + + 订单 + + + + 支付 + + + + 其他 + + + + + + 常见问题 + + + + + + + 未找到相关问题 + 请尝试其他关键词 + + + + + + + {{item.question}} + + + + + + + {{item.answer}} + + + + + + + + 需要更多帮助？ + + + + \ No newline at end of file diff --git a/miniprogram/pages/helpcenter/helpcenter.wxss b/miniprogram/pages/helpcenter/helpcenter.wxss new file mode 100644 index 0000000..8051543 --- /dev/null +++ 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; +} + \ No newline at end of file diff --git a/miniprogram/pages/user/user.ts b/miniprogram/pages/user/user.ts index 51d7419..018e7fe 100644 --- a/miniprogram/pages/user/user.ts +++ b/miniprogram/pages/user/user.ts @@ -172,6 +172,11 @@ Component({ wx.navigateTo({ url: `/pages/opinion/opinion?id=${this.data.userinfo.uid}`, }); + }, + gotoHelp(){ + wx.navigateTo({ + url: `/pages/helpcenter/helpcenter?id=${this.data.userinfo.uid}`, + }); }