189 lines
5.2 KiB
TypeScript
189 lines
5.2 KiB
TypeScript
// 定义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
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|