218 lines
5.5 KiB
Vue
218 lines
5.5 KiB
Vue
<template>
|
||
<view class="app-page" :class="themeClass">
|
||
<view class="surface-card page-hero">
|
||
<text class="hero-kicker">GUIDE</text>
|
||
<text class="hero-title">使用帮助</text>
|
||
<text class="hero-desc">通过上手步骤、常见问题和快捷入口，快速熟悉整个记账流程。</text>
|
||
<view class="hero-tags">
|
||
<text class="hero-tag">4 个步骤</text>
|
||
<text class="hero-tag soft">FAQ 指南</text>
|
||
</view>
|
||
</view>
|
||
<ad-custom unit-id="adunit-64707ea333329399"></ad-custom>
|
||
<section-card title="快速上手" subtitle="初次使用建议先完成下面 4 个动作">
|
||
<view class="step-list">
|
||
<view v-for="item in quickSteps" :key="item.title" class="step-item surface-strong">
|
||
<text class="step-index">{{ item.index }}</text>
|
||
<view class="step-body">
|
||
<text class="step-title">{{ item.title }}</text>
|
||
<text class="step-desc">{{ item.desc }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</section-card>
|
||
|
||
<section-card title="常见问题" subtitle="">
|
||
<view class="faq-list">
|
||
<view v-for="item in faqList" :key="item.q" class="faq-item surface-strong">
|
||
<text class="faq-question">{{ item.q }}</text>
|
||
<text class="faq-answer">{{ item.a }}</text>
|
||
</view>
|
||
</view>
|
||
</section-card>
|
||
|
||
<section-card title="功能入口" subtitle="需要操作时可直接跳转到对应模块">
|
||
<view class="entry-grid">
|
||
<view class="entry-item surface-strong" @click="go('/pages/home/index')">
|
||
<text class="entry-title">首页记账</text>
|
||
</view>
|
||
<view class="entry-item surface-strong" @click="go('/pages/budget/index')">
|
||
<text class="entry-title">预算设置</text>
|
||
</view>
|
||
<view class="entry-item surface-strong" @click="go('/pages/stats/index')">
|
||
<text class="entry-title">查看报表</text>
|
||
</view>
|
||
<view class="entry-item surface-strong" @click="go('/pages/mine/backup/index')">
|
||
<text class="entry-title">备份恢复</text>
|
||
</view>
|
||
</view>
|
||
</section-card>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed } from 'vue'
|
||
import SectionCard from '../../../components/SectionCard.vue'
|
||
import { useAppStore } from '../../../utils/store'
|
||
import { onShow } from '@dcloudio/uni-app'
|
||
|
||
|
||
const store = useAppStore()
|
||
const themeClass = computed(() => (store.state.settings.theme === 'dark' ? 'theme-dark' : ''))
|
||
|
||
const quickSteps = [
|
||
{ index: '01', title: '先设置月预算', desc: '进入预算页设置总预算与分类预算，首页会同步显示剩余额度。' },
|
||
{ index: '02', title: '用首页快捷记账', desc: '首页支持支出/收入快速录入，也能通过常用分类一键记账。' },
|
||
{ index: '03', title: '到账单页做筛选', desc: '账单页支持按月份、账户、金额区间和关键词精确筛选。' },
|
||
{ index: '04', title: '每月查看报表', desc: '报表页可导出 CSV，并查看支出结构、近 7 日趋势和月度对比。' }
|
||
]
|
||
|
||
const faqList = [
|
||
{ q: '账单数据保存在哪里？', a: '默认仅保存在当前设备的本地存储中，不会自动上传云端。' },
|
||
{ q: '换手机后如何迁移？', a: '先进入“备份与恢复”导出 JSON 备份，再在新设备粘贴恢复。' },
|
||
{ q: '为什么预算进度显示超出 100%？', a: '这代表本月支出已经超过预算，条形进度会封顶，但文字会继续显示真实比例。' },
|
||
{ q: '昵称可以怎么修改？', a: '进入“我的-账户资料”后可直接修改本地昵称，留空时默认显示为“用户”。' }
|
||
]
|
||
|
||
function go(url) {
|
||
uni.navigateTo({ url })
|
||
}
|
||
|
||
onShow(()=>{
|
||
showIt()
|
||
})
|
||
|
||
function showIt(){
|
||
let interstitialAd = null;
|
||
if (wx.createInterstitialAd) {
|
||
interstitialAd = wx.createInterstitialAd({
|
||
adUnitId: 'adunit-0abc32053b19a4e9'
|
||
})
|
||
interstitialAd.onLoad(() => {})
|
||
interstitialAd.onError((err) => {
|
||
console.error('插屏广告加载失败', err)
|
||
})
|
||
interstitialAd.onClose(() => {})
|
||
}
|
||
|
||
setTimeout(()=>{
|
||
if (interstitialAd) {
|
||
interstitialAd.show().catch((err) => {
|
||
console.error('插屏广告显示失败', err)
|
||
})
|
||
}
|
||
}, 2280)
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page-hero {
|
||
padding: 30rpx;
|
||
background: linear-gradient(145deg, rgba(16, 42, 67, 0.96) 0%, rgba(127, 86, 217, 0.9) 100%);
|
||
color: #ffffff;
|
||
}
|
||
|
||
.hero-kicker,
|
||
.hero-desc,
|
||
.hero-tag.soft {
|
||
color: rgba(255, 255, 255, 0.76);
|
||
}
|
||
|
||
.hero-kicker {
|
||
font-size: 20rpx;
|
||
letter-spacing: 4rpx;
|
||
}
|
||
|
||
.hero-title {
|
||
display: block;
|
||
margin-top: 12rpx;
|
||
font-size: 44rpx;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.hero-desc {
|
||
display: block;
|
||
margin-top: 14rpx;
|
||
font-size: 24rpx;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.hero-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 14rpx;
|
||
margin-top: 22rpx;
|
||
}
|
||
|
||
.hero-tag {
|
||
padding: 12rpx 18rpx;
|
||
border-radius: 999rpx;
|
||
background: rgba(255, 255, 255, 0.16);
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
.step-list,
|
||
.faq-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.step-item,
|
||
.faq-item {
|
||
padding: 24rpx;
|
||
border-radius: 28rpx;
|
||
}
|
||
|
||
.step-item {
|
||
display: flex;
|
||
gap: 18rpx;
|
||
}
|
||
|
||
.step-index {
|
||
width: 74rpx;
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
color: var(--brand);
|
||
}
|
||
|
||
.step-body {
|
||
flex: 1;
|
||
}
|
||
|
||
.step-title,
|
||
.faq-question,
|
||
.entry-title {
|
||
display: block;
|
||
font-size: 29rpx;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.step-desc,
|
||
.faq-answer {
|
||
display: block;
|
||
margin-top: 10rpx;
|
||
font-size: 24rpx;
|
||
line-height: 1.75;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.entry-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.entry-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 28rpx 20rpx;
|
||
border-radius: 28rpx;
|
||
text-align: center;
|
||
}
|
||
</style>
|
||
|