546 lines
13 KiB
Vue
546 lines
13 KiB
Vue
<template>
|
||
<un-pages
|
||
:show-nav-bar="true"
|
||
nav-bar-title="帮助中心"
|
||
:show-back="true"
|
||
:show-tab-bar="false"
|
||
>
|
||
<view class="help-container">
|
||
<!-- 搜索框 -->
|
||
<view class="search-section">
|
||
<view class="search-box">
|
||
<uni-icons type="search" size="18" color="#999"></uni-icons>
|
||
<input
|
||
class="search-input"
|
||
type="text"
|
||
placeholder="搜索问题关键词"
|
||
v-model="searchKeyword"
|
||
@input="handleSearch"
|
||
placeholder-style="color: #999; font-size: 28rpx;"
|
||
/>
|
||
<view v-if="searchKeyword" class="clear-btn" @tap="clearSearch">
|
||
<uni-icons type="clear" size="16" color="#999"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 分类标签 -->
|
||
<view class="category-section" v-if="!searchKeyword">
|
||
<scroll-view scroll-x class="category-scroll" show-scrollbar="false">
|
||
<view class="category-list">
|
||
<view
|
||
class="category-item"
|
||
:class="{ active: activeCategory === item.value }"
|
||
v-for="item in categoryList"
|
||
:key="item.value"
|
||
@tap="selectCategory(item.value)"
|
||
>
|
||
<text class="category-text">{{ item.label }}</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- 问题列表 -->
|
||
<view class="faq-section">
|
||
<view class="faq-list" v-if="filteredQuestions.length > 0">
|
||
<view
|
||
class="faq-item"
|
||
v-for="(item, index) in filteredQuestions"
|
||
:key="index"
|
||
animation="fadeInUp"
|
||
:style="{ 'animation-delay': index * 0.1 + 's' }"
|
||
>
|
||
<view class="faq-question" @tap="toggleAnswer(index)">
|
||
<text class="question-text">{{ item.question }}</text>
|
||
<uni-icons
|
||
:type="item.expanded ? 'up' : 'down'"
|
||
size="16"
|
||
:color="item.expanded ? '#667eea' : '#ccc'"
|
||
class="arrow-icon"
|
||
></uni-icons>
|
||
</view>
|
||
<view class="faq-answer" :class="{ expanded: item.expanded }">
|
||
<text class="answer-text">{{ item.answer }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="empty-state" v-else>
|
||
<text class="empty-icon">🔍</text>
|
||
<text class="empty-text">暂无相关问题</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部反馈入口 -->
|
||
<view class="feedback-section">
|
||
<view class="feedback-card" @tap="goToFeedback">
|
||
<view class="feedback-left">
|
||
<view class="feedback-icon-wrapper">
|
||
<uni-icons type="chat" size="24" color="#fff"></uni-icons>
|
||
</view>
|
||
<view class="feedback-info">
|
||
<text class="feedback-title">问题反馈</text>
|
||
<text class="feedback-desc">遇到问题？告诉我们</text>
|
||
</view>
|
||
</view>
|
||
<uni-icons type="right" size="18" color="#ccc"></uni-icons>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 联系方式 -->
|
||
<view class="contact-section">
|
||
<view class="contact-item">
|
||
<uni-icons type="email" size="20" color="#667eea"></uni-icons>
|
||
<text class="contact-label">客服邮箱</text>
|
||
<text class="contact-value">support@familyaccount.com</text>
|
||
</view>
|
||
<view class="contact-item">
|
||
<uni-icons type="phone" size="20" color="#667eea"></uni-icons>
|
||
<text class="contact-label">客服电话</text>
|
||
<text class="contact-value">400-XXX-XXXX</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</un-pages>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
searchKeyword: '',
|
||
activeCategory: 'all',
|
||
categoryList: [
|
||
{ label: '全部', value: 'all' },
|
||
{ label: '账户相关', value: 'account' },
|
||
{ label: '功能使用', value: 'function' },
|
||
{ label: '家庭共享', value: 'family' },
|
||
{ label: '数据统计', value: 'statistics' },
|
||
{ label: '问题反馈', value: 'feedback' }
|
||
],
|
||
questions: [
|
||
{
|
||
question: '如何注册账号？',
|
||
answer: '点击首页的"注册"按钮，输入用户名、密码和确认密码，即可快速完成注册。注册后可使用手机号或邮箱登录。',
|
||
category: 'account',
|
||
expanded: false
|
||
},
|
||
{
|
||
question: '忘记密码怎么办？',
|
||
answer: '在登录页面点击"忘记密码"按钮，通过注册时的手机号或邮箱验证后，可设置新密码。',
|
||
category: 'account',
|
||
expanded: false
|
||
},
|
||
{
|
||
question: '如何添加一笔账单？',
|
||
answer: '点击首页底部的"+"按钮，选择收入或支出，填写金额、分类、日期和备注，点击保存即可完成记账。',
|
||
category: 'function',
|
||
expanded: false
|
||
},
|
||
{
|
||
question: '如何修改或删除账单？',
|
||
answer: '在账单列表中点击需要操作的账单，进入详情页面后可以进行编辑或删除操作。已删除的账单无法恢复。',
|
||
category: 'function',
|
||
expanded: false
|
||
},
|
||
{
|
||
question: '如何创建家庭？',
|
||
answer: '进入"家庭"页面，点击"创建家庭"，设置家庭名称后即可创建。创建者自动成为家主，可以邀请家庭成员。',
|
||
category: 'family',
|
||
expanded: false
|
||
},
|
||
{
|
||
question: '如何加入家庭？',
|
||
answer: '向家主索要家庭邀请码，在"家庭"页面点击"加入家庭"，输入邀请码即可加入。一个人只能加入一个家庭。',
|
||
category: 'family',
|
||
expanded: false
|
||
},
|
||
{
|
||
question: '家主如何管理家庭成员？',
|
||
answer: '家主可以在家庭页面查看所有成员，点击成员后的管理按钮可以移除成员。被移除的成员将无法查看该家庭的账单数据。',
|
||
category: 'family',
|
||
expanded: false
|
||
},
|
||
{
|
||
question: '如何查看收支统计？',
|
||
answer: '进入"统计"页面，可以选择查看"个人"或"家庭"的收支数据，支持按日、周、月、年进行统计，并可查看分类统计和趋势图表。',
|
||
category: 'statistics',
|
||
expanded: false
|
||
},
|
||
{
|
||
question: '如何切换查看个人和家庭数据？',
|
||
answer: '在账单列表和统计页面，顶部有"个人"和"家庭"切换按钮，点击即可在个人数据和家庭数据之间切换。',
|
||
category: 'function',
|
||
expanded: false
|
||
},
|
||
{
|
||
question: '如何导出数据？',
|
||
answer: '在统计页面点击"导出"按钮，可以选择导出Excel或CSV格式的报表，支持导出指定时间范围内的账单数据。',
|
||
category: 'function',
|
||
expanded: false
|
||
},
|
||
{
|
||
question: '如何修改个人资料？',
|
||
answer: '进入"我的"页面，点击个人设置，在资料编辑页面可以修改头像、昵称、邮箱等信息。用户名注册后不可修改。',
|
||
category: 'account',
|
||
expanded: false
|
||
},
|
||
{
|
||
question: '数据会被安全保存吗？',
|
||
answer: '是的，您的所有数据都经过加密存储，并定期备份。我们严格遵守隐私政策，不会泄露您的个人财务信息。',
|
||
category: 'account',
|
||
expanded: false
|
||
},
|
||
{
|
||
question: '如何提交问题反馈？',
|
||
answer: '在帮助中心底部点击"问题反馈"卡片，详细描述您遇到的问题，我们会尽快回复并处理您的反馈。',
|
||
category: 'feedback',
|
||
expanded: false
|
||
},
|
||
{
|
||
question: '如何联系我们？',
|
||
answer: '您可以通过客服邮箱 support@familyaccount.com 或客服电话 400-XXX-XXXX 联系我们，我们的工作时间为周一至周五 9:00-18:00。',
|
||
category: 'feedback',
|
||
expanded: false
|
||
}
|
||
]
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
filteredQuestions() {
|
||
let result = this.questions
|
||
|
||
// 按分类筛选
|
||
if (this.activeCategory !== 'all') {
|
||
result = result.filter(item => item.category === this.activeCategory)
|
||
}
|
||
|
||
// 按关键词搜索
|
||
if (this.searchKeyword) {
|
||
const keyword = this.searchKeyword.toLowerCase()
|
||
result = result.filter(item =>
|
||
item.question.toLowerCase().includes(keyword) ||
|
||
item.answer.toLowerCase().includes(keyword)
|
||
)
|
||
}
|
||
|
||
return result
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
// 选择分类
|
||
selectCategory(value) {
|
||
this.activeCategory = value
|
||
},
|
||
|
||
// 搜索处理
|
||
handleSearch() {
|
||
// 搜索时自动显示所有分类的结果
|
||
},
|
||
|
||
// 清空搜索
|
||
clearSearch() {
|
||
this.searchKeyword = ''
|
||
},
|
||
|
||
// 展开/收起答案
|
||
toggleAnswer(index) {
|
||
this.filteredQuestions[index].expanded = !this.filteredQuestions[index].expanded
|
||
},
|
||
|
||
// 跳转到反馈页面
|
||
goToFeedback() {
|
||
uni.navigateTo({
|
||
url: '/pages/ucenter/feedback/index'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.help-container {
|
||
min-height: 100vh;
|
||
background: #F8F8F8;
|
||
padding-bottom: 40rpx;
|
||
}
|
||
|
||
.search-section {
|
||
padding: 30rpx;
|
||
background: #fff;
|
||
animation: fadeInDown 0.6s ease-out;
|
||
|
||
.search-box {
|
||
display: flex;
|
||
align-items: center;
|
||
background: #F5F5F5;
|
||
border-radius: 48rpx;
|
||
padding: 20rpx 30rpx;
|
||
|
||
.search-input {
|
||
flex: 1;
|
||
margin-left: 16rpx;
|
||
margin-right: 16rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.clear-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.category-section {
|
||
padding: 20rpx 30rpx 0;
|
||
animation: fadeInDown 0.6s ease-out 0.1s both;
|
||
|
||
.category-scroll {
|
||
white-space: nowrap;
|
||
|
||
.category-list {
|
||
display: inline-flex;
|
||
padding-bottom: 20rpx;
|
||
|
||
.category-item {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 16rpx 32rpx;
|
||
margin-right: 16rpx;
|
||
background: #fff;
|
||
border-radius: 48rpx;
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
transition: all 0.3s ease;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
|
||
|
||
&.active {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: #fff;
|
||
box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.35);
|
||
}
|
||
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.category-text {
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.faq-section {
|
||
margin: 20rpx 30rpx;
|
||
animation: fadeInUp 0.6s ease-out 0.2s both;
|
||
|
||
.faq-list {
|
||
.faq-item {
|
||
background: #fff;
|
||
border-radius: 24rpx;
|
||
margin-bottom: 20rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
|
||
&:active {
|
||
transform: scale(0.99);
|
||
}
|
||
|
||
.faq-question {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 32rpx 30rpx;
|
||
transition: background 0.3s ease;
|
||
|
||
&:active {
|
||
background: #f8f8f8;
|
||
}
|
||
|
||
.question-text {
|
||
flex: 1;
|
||
font-size: 30rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
line-height: 1.5;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.arrow-icon {
|
||
flex-shrink: 0;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
}
|
||
|
||
.faq-answer {
|
||
max-height: 0;
|
||
overflow: hidden;
|
||
transition: max-height 0.4s ease, padding 0.4s ease;
|
||
background: #FAFAFA;
|
||
|
||
.answer-text {
|
||
display: block;
|
||
padding: 0 30rpx;
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
line-height: 1.8;
|
||
opacity: 0;
|
||
transform: translateY(-10rpx);
|
||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||
}
|
||
|
||
&.expanded {
|
||
max-height: 500rpx;
|
||
padding: 20rpx 0 32rpx;
|
||
|
||
.answer-text {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.empty-state {
|
||
background: #fff;
|
||
border-radius: 24rpx;
|
||
padding: 120rpx 40rpx;
|
||
text-align: center;
|
||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
|
||
|
||
.empty-icon {
|
||
display: block;
|
||
font-size: 120rpx;
|
||
margin-bottom: 30rpx;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.empty-text {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
|
||
.feedback-section {
|
||
margin: 30rpx;
|
||
animation: fadeInUp 0.6s ease-out 0.3s both;
|
||
|
||
.feedback-card {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
border-radius: 24rpx;
|
||
padding: 30rpx;
|
||
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.35);
|
||
transition: transform 0.3s ease;
|
||
|
||
&:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.feedback-left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.feedback-icon-wrapper {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
background: rgba(255, 255, 255, 0.25);
|
||
border-radius: 18rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 24rpx;
|
||
border: 2rpx solid rgba(255, 255, 255, 0.3);
|
||
backdrop-filter: blur(10rpx);
|
||
}
|
||
|
||
.feedback-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.feedback-title {
|
||
font-size: 30rpx;
|
||
color: #fff;
|
||
font-weight: bold;
|
||
margin-bottom: 6rpx;
|
||
}
|
||
|
||
.feedback-desc {
|
||
font-size: 24rpx;
|
||
color: rgba(255, 255, 255, 0.85);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.contact-section {
|
||
margin: 30rpx;
|
||
background: #fff;
|
||
border-radius: 24rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
|
||
animation: fadeInUp 0.6s ease-out 0.4s both;
|
||
|
||
.contact-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 28rpx 30rpx;
|
||
border-bottom: 1rpx solid #f5f5f5;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.contact-label {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
margin-left: 16rpx;
|
||
margin-right: 20rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.contact-value {
|
||
flex: 1;
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
|
||
@keyframes fadeInDown {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(-30rpx);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@keyframes fadeInUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(30rpx);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
</style>
|