fix: help page
This commit is contained in:
zzc
480
pages/mine/help.vue
Normal file
480
pages/mine/help.vue
Normal 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>
|
||||
Reference in New Issue
Block a user