zzc/spring-festival-greetings
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: help page

Browse Source
This commit is contained in:
zzc
2026-01-28 23:54:15 +08:00
parent 2938ab2a9d
commit 24d9bb1b01
3 changed files with 494 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
pages.json
View File

@@ -41,6 +41,14 @@
"enablePullDownRefresh": true
}
},
{
"path": "pages/mine/help",
"style": {
"navigationBarTitleText": "帮助中心",
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
},
{
"path": "pages/mine/mine",
"style": {

480
pages/mine/help.vue Normal file
View File

@@ -0,0 +1,480 @@
<template>
<view class="help-page" :style="{ paddingTop: navBarHeight + 'px' }">
<!-- Custom Navbar -->
<view
class="nav-bar"
:style="{
height: navBarHeight + 'px',
paddingTop: statusBarHeight + 'px',
}"
>
<view class="nav-left" @click="goBack">
<uni-icons type="left" size="24" color="#000" />
</view>
<text class="nav-title">帮助中心</text>
</view>
<!-- Search Bar -->
<view class="search-box">
<view class="search-input-box">
<uni-icons type="search" size="18" color="#999" />
<text class="placeholder">搜索你遇到的问题</text>
</view>
</view>
<scroll-view scroll-y class="content-scroll">
<!-- Quick Start -->
<view class="section">
<view class="section-header">
<view class="red-bar"></view>
<text class="section-title">快速上手</text>
</view>
<view class="steps-card">
<view class="step-item">
<view class="icon-circle">
<uni-icons type="email-filled" size="30" color="#ff3b30" />
</view>
<text class="step-text">制作贺卡</text>
</view>
<view class="arrow">
<uni-icons type="arrowright" size="16" color="#ffccc7" />
</view>
<view class="step-item">
<view class="icon-circle">
<uni-icons type="person-filled" size="30" color="#ff3b30" />
</view>
<text class="step-text">佩戴挂饰</text>
</view>
<view class="arrow">
<uni-icons type="arrowright" size="16" color="#ffccc7" />
</view>
<view class="step-item">
<view class="icon-circle">
<uni-icons type="gift-filled" size="30" color="#ff3b30" />
</view>
<text class="step-text">送出祝福</text>
</view>
</view>
</view>
<!-- FAQ -->
<view class="section">
<view class="section-header">
<view class="red-bar"></view>
<text class="section-title">常见问题</text>
</view>
<view class="faq-list">
<view
v-for="(category, index) in faqList"
:key="index"
class="faq-category"
>
<view class="category-header" @click="toggleCategory(index)">
<view class="cat-left">
<uni-icons
:type="category.icon"
size="20"
color="#ff3b30"
class="cat-icon"
/>
<text class="cat-title">{{ category.title }}</text>
</view>
<uni-icons
:type="category.expanded ? 'bottom' : 'right'"
size="16"
color="#ccc"
/>
</view>
<view v-if="category.expanded" class="category-content">
<view
v-for="(item, idx) in category.items"
:key="idx"
class="faq-item"
>
<view class="question" @click="toggleQuestion(index, idx)">
<text>{{ item.q }}</text>
<uni-icons type="right" size="14" color="#ccc" />
</view>
<view class="answer">
<text>{{ item.a }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- Contact Support -->
<view class="contact-section">
<view class="contact-card">
<view class="contact-title">没找到答案？</view>
<view class="contact-btns">
<button class="c-btn" open-type="contact">
<uni-icons type="chatbubbles-filled" size="20" color="#fff" />
<text>在线客服</text>
</button>
<button class="c-btn">
<uni-icons type="world-filled" size="20" color="#fff" />
<text>官方公众号</text>
</button>
</view>
<view class="bg-decor">
<uni-icons
type="help-filled"
size="120"
color="rgba(255,255,255,0.1)"
/>
</view>
</view>
</view>
<!-- Footer -->
<view class="footer">
<view class="footer-blessing">
<uni-icons type="vip-filled" size="14" color="#ff3b30" />
<text>祝您2026新春大吉，万事如意</text>
</view>
<view class="footer-copy">2026 丙午马年 · 官方出品</view>
</view>
</scroll-view>
</view>
</template>
<script setup>
import { ref } from "vue";
import { getBavBarHeight, getStatusBarHeight } from "@/utils/system";
const navBarHeight = getBavBarHeight();
const statusBarHeight = getStatusBarHeight();
const goBack = () => {
uni.navigateBack();
};
const faqList = ref([
{
title: "贺卡制作",
icon: "compose",
expanded: true,
items: [
{
q: "如何分享给微信好友？",
a: "制作完成后，点击右下角“送出祝福”按钮，选择“发送给朋友”即可。您也可以保存为图片后在聊天对话框发送。",
},
{
q: "生成速度太慢怎么办？",
a: "生成速度受网络环境和服务器负载影响，请您耐心等待或尝试切换网络。",
},
],
},
{
title: "头像定制",
icon: "person",
expanded: false,
items: [
{
q: "如何更换头像边框？",
a: "在头像定制页面，左右滑动选择您喜欢的边框样式，点击保存即可。",
},
],
},
{
title: "运势抽取",
icon: "calendar",
expanded: false,
items: [
{
q: "每天可以抽取几次？",
a: "每位用户每天有3次免费抽取机会，分享给好友可获得额外机会。",
},
],
},
{
title: "壁纸保存",
icon: "image",
expanded: false,
items: [
{
q: "下载壁纸不清晰怎么办？",
a: "请确保您下载的是原图。如果网络不稳定，可能会自动加载低清预览图，请等待加载完成后再保存。",
},
],
},
]);
const toggleCategory = (index) => {
faqList.value[index].expanded = !faqList.value[index].expanded;
};
const toggleQuestion = (catIndex, itemIndex) => {
// Simple expansion for question details not implemented in design but structure is there
// The design shows the answer directly under the question for the first item
};
</script>
<style lang="scss" scoped>
.help-page {
min-height: 100vh;
background-color: #fcfcfc;
padding-bottom: 40rpx;
box-sizing: border-box;
}
.nav-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
}
.nav-left {
position: absolute;
left: 20rpx;
bottom: 0;
height: 44px;
display: flex;
align-items: center;
padding: 0 10rpx;
}
.nav-title {
font-size: 32rpx;
font-weight: bold;
color: #000;
position: absolute;
bottom: 0;
height: 44px;
line-height: 44px;
}
.search-box {
padding: 20rpx 30rpx;
background: #fff;
position: sticky;
top: 0;
z-index: 10;
}
.search-input-box {
background: #f5f5f5;
height: 72rpx;
border-radius: 36rpx;
display: flex;
align-items: center;
padding: 0 24rpx;
.placeholder {
font-size: 28rpx;
color: #999;
margin-left: 12rpx;
}
}
.content-scroll {
padding: 0 30rpx;
}
.section {
padding: 30rpx;
margin-top: 10rpx;
}
.section-header {
display: flex;
align-items: center;
margin-bottom: 30rpx;
.red-bar {
width: 6rpx;
height: 28rpx;
background: #ff3b30;
border-radius: 4rpx;
margin-right: 12rpx;
}
.section-title {
font-size: 32rpx;
font-weight: bold;
color: #ff3b30;
}
}
.steps-card {
background: #fff;
border-radius: 24rpx;
padding: 40rpx 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.02);
.step-item {
display: flex;
flex-direction: column;
align-items: center;
.icon-circle {
width: 100rpx;
height: 100rpx;
background: #fff6f6;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16rpx;
}
.step-text {
font-size: 24rpx;
color: #333;
font-weight: 600;
}
}
.arrow {
margin-bottom: 40rpx;
}
}
.faq-list {
display: flex;
flex-direction: column;
gap: 20rpx;
}
.faq-category {
background: #fff;
border-radius: 20rpx;
overflow: hidden;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.02);
.category-header {
padding: 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
.cat-left {
display: flex;
align-items: center;
gap: 16rpx;
.cat-title {
font-size: 30rpx;
font-weight: 600;
color: #333;
}
}
}
.category-content {
background: #fcfcfc;
padding: 0 30rpx 30rpx;
.faq-item {
margin-top: 24rpx;
.question {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 28rpx;
color: #333;
margin-bottom: 12rpx;
}
.answer {
font-size: 26rpx;
color: #888;
line-height: 1.6;
background: #f8f8f8;
padding: 20rpx;
border-radius: 12rpx;
}
}
}
}
.contact-section {
padding: 0 30rpx;
margin-top: 20rpx;
}
.contact-card {
background: linear-gradient(135deg, #e52e2e 0%, #c61a1a 100%);
border-radius: 30rpx;
padding: 40rpx;
position: relative;
overflow: hidden;
color: #fff;
.contact-title {
font-size: 36rpx;
font-weight: bold;
margin-bottom: 40rpx;
}
.contact-btns {
display: flex;
gap: 30rpx;
position: relative;
z-index: 2;
.c-btn {
flex: 1;
height: 80rpx;
background: rgba(255, 255, 255, 0.2);
border-radius: 40rpx;
display: flex;
align-items: center;
justify-content: center;
gap: 12rpx;
color: #fff;
font-size: 28rpx;
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 0;
margin: 0;
&::after {
border: none;
}
}
}
.bg-decor {
position: absolute;
right: -20rpx;
bottom: -40rpx;
opacity: 0.5;
z-index: 1;
}
}
.footer {
margin-top: 60rpx;
text-align: center;
padding-bottom: 60rpx;
.footer-blessing {
display: flex;
align-items: center;
justify-content: center;
gap: 10rpx;
font-size: 24rpx;
color: #ff8888;
margin-bottom: 12rpx;
}
.footer-copy {
font-size: 20rpx;
color: #ccc;
}
}
</style>

6
pages/mine/mine.vue
View File

@@ -196,6 +196,12 @@ const navTo = (page) => {
});
return;
}
if (page === "help") {
uni.navigateTo({
url: "/pages/mine/help",
});
return;
}
uni.showToast({ title: "功能开发中", icon: "none" });
};
</script>