添加帮助中心页面
This commit is contained in:
@@ -10,7 +10,8 @@
|
|||||||
"pages/shop/shop",
|
"pages/shop/shop",
|
||||||
"pages/notifications/notifications",
|
"pages/notifications/notifications",
|
||||||
"pages/setting/setting",
|
"pages/setting/setting",
|
||||||
"pages/opinion/opinion"
|
"pages/opinion/opinion",
|
||||||
|
"pages/helpcenter/helpcenter"
|
||||||
],
|
],
|
||||||
"window": {
|
"window": {
|
||||||
"navigationBarTextStyle": "black",
|
"navigationBarTextStyle": "black",
|
||||||
|
|||||||
6
miniprogram/pages/helpcenter/helpcenter.json
Normal file
6
miniprogram/pages/helpcenter/helpcenter.json
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"component": true,
|
||||||
|
"usingComponents": {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
189
miniprogram/pages/helpcenter/helpcenter.ts
Normal file
189
miniprogram/pages/helpcenter/helpcenter.ts
Normal file
@@ -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
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
89
miniprogram/pages/helpcenter/helpcenter.wxml
Normal file
89
miniprogram/pages/helpcenter/helpcenter.wxml
Normal file
@@ -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>
|
||||||
|
|
||||||
224
miniprogram/pages/helpcenter/helpcenter.wxss
Normal file
224
miniprogram/pages/helpcenter/helpcenter.wxss
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
@@ -172,6 +172,11 @@ Component({
|
|||||||
wx.navigateTo({
|
wx.navigateTo({
|
||||||
url: `/pages/opinion/opinion?id=${this.data.userinfo.uid}`,
|
url: `/pages/opinion/opinion?id=${this.data.userinfo.uid}`,
|
||||||
});
|
});
|
||||||
|
},
|
||||||
|
gotoHelp(){
|
||||||
|
wx.navigateTo({
|
||||||
|
url: `/pages/helpcenter/helpcenter?id=${this.data.userinfo.uid}`,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user