81 lines
4.6 KiB
Plaintext
81 lines
4.6 KiB
Plaintext
|
<template>
|
||
|
|
<view class="page" :style="pageStyle()">
|
||
|
|
<AppHeader title="帮助与反馈" />
|
||
|
|
<view class="help-body" :style="contentStyle(96, false)">
|
||
|
|
<scroll-view scroll-y class="help-scroll">
|
||
|
|
<view class="help-content">
|
||
|
|
<text class="help-title">常见问题</text><text class="help-description">关于账户和融资使用，您可能想了解这些</text>
|
||
|
|
<view v-if="loading" class="help-state"><text class="state-text">正在加载…</text></view>
|
||
|
|
<view v-else-if="errorMessage.length > 0" class="help-state"><text class="state-text">{{ errorMessage }}</text><button class="retry-button" @click="load">重新加载</button></view>
|
||
|
|
<view v-else-if="questions.length == 0" class="help-state"><text class="state-text">常见问题正在整理中</text></view>
|
||
|
|
<template v-else>
|
||
|
|
<view class="faq-group" v-for="group in groups" :key="group.category">
|
||
|
|
<text class="group-title">{{ group.category }}</text>
|
||
|
|
<view class="faq-list"><view v-for="(item, index) in group.items" :key="item.id" :class="index == group.items.length - 1 ? 'faq-item last-item' : 'faq-item'">
|
||
|
|
<view class="question-row" @click="toggle(item.id)"><text class="question-text">{{ item.question }}</text><AppIcon name="chevron-right" :size="28" :class="expanded == item.id ? 'question-arrow expanded-arrow' : 'question-arrow'" /></view>
|
||
|
|
<view v-if="expanded == item.id" class="answer-panel"><text class="answer-text">{{ item.answer }}</text></view>
|
||
|
|
</view></view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
<view class="contact-bar" :style="bottomStyle(20)"><button class="primary-button contact-button" @click="contact">联系客服</button></view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script setup lang="uts">
|
||
|
|
import AppHeader from '@/components/AppHeader.uvue'
|
||
|
|
import AppIcon from '@/components/AppIcon.uvue'
|
||
|
|
import { usePageLayout } from '@/services/layout.uts'
|
||
|
|
import { helpCategories, HelpQuestion, fetchHelpQuestions, contactCustomerService } from '@/packages/content/services/help.uts'
|
||
|
|
const { pageStyle, contentStyle, bottomStyle } = usePageLayout()
|
||
|
|
type HelpGroup = { category: string, items: HelpQuestion[] }
|
||
|
|
const questions = ref<HelpQuestion[]>([])
|
||
|
|
const expanded = ref('')
|
||
|
|
const loading = ref(false)
|
||
|
|
const errorMessage = ref('')
|
||
|
|
let alive = true
|
||
|
|
const groups = computed((): HelpGroup[] => {
|
||
|
|
const results: HelpGroup[] = []
|
||
|
|
helpCategories.forEach((category: string) => {
|
||
|
|
const items = questions.value.filter((item: HelpQuestion): boolean => item.category == category)
|
||
|
|
if (items.length > 0) { const group: HelpGroup = { category, items }; results.push(group) }
|
||
|
|
})
|
||
|
|
return results
|
||
|
|
})
|
||
|
|
const toggle = (id: string) => { expanded.value = expanded.value == id ? '' : id }
|
||
|
|
const contact = () => { contactCustomerService() }
|
||
|
|
const load = async () => {
|
||
|
|
if (loading.value) return
|
||
|
|
loading.value = true; errorMessage.value = ''
|
||
|
|
try { const items = await fetchHelpQuestions(); if (alive) questions.value = items }
|
||
|
|
catch (_error) { if (alive) errorMessage.value = '暂时无法加载帮助内容，请稍后重试' }
|
||
|
|
finally { if (alive) loading.value = false }
|
||
|
|
}
|
||
|
|
onLoad(() => { load() })
|
||
|
|
onUnload(() => { alive = false })
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
.help-body { overflow: hidden; }
|
||
|
|
.help-scroll { flex: 1; min-height: 0; }
|
||
|
|
.help-content { padding: 32rpx 30rpx 40rpx; }
|
||
|
|
.help-title { color: #23344e; font-size: 38rpx; line-height: 54rpx; font-weight: 700; }
|
||
|
|
.help-description { color: #738198; font-size: 25rpx; line-height: 40rpx; margin-top: 12rpx; }
|
||
|
|
.faq-group { margin-top: 30rpx; }
|
||
|
|
.group-title { color: #66758a; font-size: 25rpx; line-height: 38rpx; font-weight: 600; margin-bottom: 16rpx; }
|
||
|
|
.faq-list { padding: 0 24rpx; border-radius: 18rpx; background-color: #ffffff; }
|
||
|
|
.faq-item { border-bottom: 1rpx solid #edf1f6; }
|
||
|
|
.last-item { border-bottom-width: 0; }
|
||
|
|
.question-row { min-height: 102rpx; padding: 26rpx 0; flex-direction: row; align-items: center; }
|
||
|
|
.question-text { flex: 1; min-width: 0; color: #29394f; font-size: 28rpx; line-height: 42rpx; font-weight: 600; }
|
||
|
|
.question-arrow { margin-left: 18rpx; flex-shrink: 0; }
|
||
|
|
.expanded-arrow { transform: rotate(90deg); }
|
||
|
|
.answer-panel { padding: 0 0 26rpx; }
|
||
|
|
.answer-text { color: #66758a; font-size: 25rpx; line-height: 44rpx; }
|
||
|
|
.help-state { padding: 90rpx 20rpx; align-items: center; }
|
||
|
|
.state-text { font-size: 26rpx; line-height: 42rpx; color: #738198; text-align: center; }
|
||
|
|
.retry-button { color: #0868f7; background-color: #e8f2ff; font-size: 26rpx; margin-top: 26rpx; padding: 0 30rpx; height: 76rpx; line-height: 76rpx; border-radius: 12rpx; }
|
||
|
|
.contact-bar { flex-shrink: 0; padding: 20rpx 30rpx; border-top: 1rpx solid #e8eef6; background-color: #ffffff; }
|
||
|
|
.contact-button { margin: 0; }
|
||
|
|
</style>
|