hujun
4a69357606
1. add default avatar and multiple notification icons 2. update finance archive note and add form styles 3. add new pages: edit-profile, security, password, change-phone, search, help 4. refactor navigation action layout to support multiple actions 5. add search button to home page 6. add security code component and account service APIs 7. add help and search content services 8. update message notice to use svg icons 9. update asset section in finance assessment 10. update manifest appid and pack options
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>
|