429 lines
9.8 KiB
Vue
429 lines
9.8 KiB
Vue
<template>
|
||
<view class="help-page" >
|
||
<NavBar title="帮助中心" />
|
||
|
||
<!-- 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> -->
|
||
|
||
<view 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>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from "vue";
|
||
import NavBar from "@/components/NavBar/NavBar.vue";
|
||
|
||
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: "每位用户每天有1次免费抽取机会，分享给好友可获得额外机会。",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
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;
|
||
}
|
||
|
||
.search-box {
|
||
padding: 20rpx 30rpx;
|
||
background: #fff;
|
||
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 {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.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>
|