This commit is contained in:
sjk
2025-11-17 14:11:46 +08:00
commit ad4a600af9
1659 changed files with 171560 additions and 0 deletions

View File

@@ -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'
};
}
});

View File

@@ -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"
}
}

View File

@@ -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" />

View File

@@ -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;
}
}