完善版本
This commit is contained in:
@@ -0,0 +1,545 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user