Hooke / manulife-weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
670731ec 1 parent b3d9e402

docs(user): 完善帮助中心常见问题内容

Inline Side-by-side
Showing 1 changed file with 218 additions and 28 deletions
......@@ -127,7 +127,6 @@
<script setup>
import { ref, computed } from 'vue'
import NavHeader from '@/components/navigation/NavHeader.vue'
import TabBar from '@/components/navigation/TabBar.vue'
import IconFont from '@/components/icons/IconFont.vue'
import SearchBar from '@/components/forms/SearchBar.vue'
......@@ -164,74 +163,265 @@ const contactMethods = [
}
]
// Mock Rich Text Content
const mockRichText = `
// 不同类型的问题内容模板
const createPlanbookContent = `
<div class="rich-text-content">
<h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin-bottom: 12px;">操作步骤：</h3>
<h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin-bottom: 12px;">创建计划书步骤：</h3>
<div style="margin-bottom: 8px; color: #374151;">
<span style="color: #EF4444; font-weight: 500;">步骤 1：</span>
<span>登录系统后，点击左侧菜单的"计划书管理"</span>
<span style="color: #2563EB; font-weight: 500;">步骤 1：</span>
<span>进入"计划书"页面，点击右上角"+"按钮</span>
</div>
<div style="margin-bottom: 8px; color: #374151;">
<span style="color: #EF4444; font-weight: 500;">步骤 2：</span>
<span>点击右上角"新建计划书"按钮</span>
<span style="color: #2563EB; font-weight: 500;">步骤 2：</span>
<span>选择计划类型（A类/B类）</span>
</div>
<div style="margin-bottom: 8px; color: #374151;">
<span style="color: #EF4444; font-weight: 500;">步骤 3：</span>
<span>填写客户信息、保障方案等详细内容</span>
<span style="color: #2563EB; font-weight: 500;">步骤 3：</span>
<span>填写客户信息：姓名、年龄、联系方式等</span>
</div>
<div style="margin-bottom: 8px; color: #374151;">
<span style="color: #2563EB; font-weight: 500;">步骤 4：</span>
<span>填写保障方案：保额、保费、保障期限等</span>
</div>
<div style="margin-bottom: 12px; color: #374151;">
<span style="color: #2563EB; font-weight: 500;">步骤 5：</span>
<span>点击"提交"按钮，系统将生成计划书</span>
</div>
<div style="background-color: #EFF6FF; border-left: 4px solid #2563EB; padding: 12px; margin: 16px 0; border-radius: 4px;">
<span style="font-size: 12px; color: #1E40AF;">💡 提示：提交后的计划书状态为"生成中"，通常在1-2分钟内完成生成。</span>
</div>
<h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin: 16px 0 12px;">常见问题：</h3>
<div style="margin-bottom: 12px;">
<div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：如何修改已提交的计划书？</div>
<div style="color: #4B5563;">A：目前计划书提交后暂不支持修改，如需调整请联系客服处理。</div>
</div>
<div style="margin-bottom: 12px;">
<div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：生成需要多长时间？</div>
<div style="color: #4B5563;">A：通常在1-2分钟内完成。如超过5分钟仍在"生成中"状态，请联系客服。</div>
</div>
</div>
`
const loginAuthContent = `
<div class="rich-text-content">
<h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin-bottom: 12px;">登录与认证说明：</h3>
<div style="margin-bottom: 12px; color: #374151;">
<span style="font-weight: 500;">本小程序采用微信授权登录：</span>首次进入时，系统会自动获取您的微信授权，无需额外注册账号。
</div>
<h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin: 16px 0 12px;">常见问题：</h3>
<div style="margin-bottom: 12px;">
<div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：为什么提示"需要重新登录"？</div>
<div style="color: #4B5563;">A：这是因为您的登录会话已过期。系统会自动尝试重新登录，如仍失败，请关闭小程序后重新打开。</div>
</div>
<div style="margin-bottom: 12px;">
<div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：微信授权失败怎么办？</div>
<div style="color: #4B5563;">A：请检查：1) 微信是否已登录；2) 网络连接是否正常；3) 小程序是否有权限访问微信信息。如仍无法解决，请联系客服。</div>
</div>
<div style="margin-bottom: 12px;">
<div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：如何退出登录？</div>
<div style="color: #4B5563;">A：进入"我的"页面，点击右上角设置图标，选择"退出登录"即可。</div>
</div>
</div>
`
const productSearchContent = `
<div class="rich-text-content">
<h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin-bottom: 12px;">产品搜索方法：</h3>
<div style="margin-bottom: 12px; color: #374151;">
<span style="font-weight: 500;">1) 首页搜索：</span>在首页顶部搜索框输入产品名称或关键词
</div>
<div style="margin-bottom: 12px; color: #374151;">
<span style="font-weight: 500;">2) 搜索页：</span>点击"搜索"图标进入专门的搜索页面，支持按产品/资料分类筛选
</div>
<div style="margin-bottom: 12px; color: #374151;">
<span style="font-weight: 500;">3) 分类浏览：</span>进入"产品中心"或"分类列表"按类别查找
</div>
<h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin: 16px 0 12px;">常见问题：</h3>
<div style="margin-bottom: 12px;">
<div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：搜索不到想要的产品？</div>
<div style="color: #4B5563;">A：请尝试：1) 使用产品简称搜索；2) 检查是否选择了错误的分类（产品/资料）；3) 联系客服确认产品是否已上架。</div>
</div>
<div style="margin-bottom: 12px;">
<div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：如何查看产品详情？</div>
<div style="color: #4B5563;">A：点击产品卡片进入详情页，可查看产品介绍、保障范围、保费计算等信息。</div>
</div>
</div>
`
const favoriteContent = `
<div class="rich-text-content">
<h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin-bottom: 12px;">收藏功能说明：</h3>
<div style="margin-bottom: 12px; color: #374151;">
<span style="font-weight: 500;">收藏方法：</span>在产品或资料卡片上点击"收藏"图标（爱心形状）即可收藏。
</div>
<div style="margin-bottom: 12px; color: #374151;">
<span style="color: #EF4444; font-weight: 500;">步骤 4：</span>
<span>点击"生成"按钮，系统将自动生成专业的计划书文档</span>
<span style="font-weight: 500;">查看收藏：</span>进入"我的"页面，点击"我的收藏"查看所有收藏的内容。
</div>
<div style="margin-bottom: 12px; color: #374151;">
<span style="font-weight: 500;">取消收藏：</span>在收藏列表或卡片上再次点击收藏图标即可取消。
</div>
<h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin: 16px 0 12px;">常见问题：</h3>
<div style="margin-bottom: 12px;">
<div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：收藏的内容在哪里查看？</div>
<div style="color: #4B5563;">A：进入"我的"页面，点击"我的收藏"即可看到所有收藏的产品和资料。</div>
</div>
<div style="margin-bottom: 12px;">
<div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：收藏后为什么会消失？</div>
<div style="color: #4B5563;">A：可能原因：1) 该产品或资料已下架；2) 您已取消收藏；3) 网络延迟导致显示异常。请下拉刷新重试。</div>
</div>
</div>
`
const documentPreviewContent = `
<div class="rich-text-content">
<h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin-bottom: 12px;">文档预览说明：</h3>
<div style="margin-bottom: 12px; color: #374151;">
<span style="font-weight: 500;">支持的文档格式：</span>PDF、Word、Excel、PowerPoint、图片、文本等
</div>
<div style="margin-bottom: 12px; color: #374151;">
<span style="font-weight: 500;">预览方式：</span>点击资料卡片即可在线预览，无需下载
</div>
<h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin: 16px 0 12px;">常见问题：</h3>
<div style="margin-bottom: 12px;">
<div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：文档无法打开/显示空白？</div>
<div style="color: #4B5563;">A：请尝试：1) 检查网络连接；2) 退出重新进入；3) 确认文档格式是否支持；4) 联系客服反馈。</div>
</div>
<div style="margin-bottom: 12px;">
<div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：Office文档建议使用什么方式查看？</div>
<div style="color: #4B5563;">A：Word、Excel、PowerPoint文档建议使用电脑端查看以获得最佳体验。移动端预览可能存在格式差异。</div>
</div>
<div style="background-color: #FEFCE8; border-left: 4px solid #FACC15; padding: 12px; margin: 16px 0; border-radius: 4px;">
<span style="font-size: 12px; color: #854D0E;">💡 小提示：生成后的计划书可以随时在"我的计划书"中查看和管理。</span>
<div style="margin-bottom: 12px;">
<div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：图片如何查看大图？</div>
<div style="color: #4B5563;">A：点击资料卡片上的图片封面，即可进入全屏预览模式，支持缩放和保存。</div>
</div>
</div>
`
const personalInfoContent = `
<div class="rich-text-content">
<h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin-bottom: 12px;">个人信息管理：</h3>
<h3 style="font-size: 14px; font-weight: bold; color: #374151; margin: 12px 0 8px;">修改头像：</h3>
<div style="margin-bottom: 12px; color: #4B5563;">
进入"我的"页面，点击头像→选择"更换头像"→从相册选择或拍照→确认上传
</div>
<h3 style="font-size: 14px; font-weight: bold; color: #374151; margin: 12px 0 8px;">修改昵称/手机号：</h3>
<div style="margin-bottom: 12px; color: #4B5563;">
进入"我的"页面→点击个人信息→点击对应字段→修改后保存
</div>
<h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin: 16px 0 12px;">常见问题：</h3>
<div style="margin-bottom: 12px;">
<div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：如何修改已生成的计划书？</div>
<div style="color: #4B5563;">A：在"我的计划书"列表中，找到对应的计划书，点击"编辑"按钮即可修改内容。</div>
<div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：头像上传失败怎么办？</div>
<div style="color: #4B5563;">A：请检查：1) 图片大小是否超过5MB；2) 网络是否正常；3) 是否授予了相册/相机权限。建议使用JPG/PNG格式，大小不超过2MB。</div>
</div>
<div style="margin-bottom: 12px;">
<div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：可以导出为PDF吗？</div>
<div style="color: #4B5563;">A：可以的。在计划书详情页，点击"下载PDF"按钮即可导出高清PDF文件。</div>
<div style="font-weight: 500; color: #374151; margin-bottom: 4px;">Q：手机号可以修改吗？</div>
<div style="color: #4B5563;">A：可以。进入个人信息页面，点击手机号→通过短信验证后即可更换新手机号。</div>
</div>
</div>
`
const performanceContent = `
<div class="rich-text-content">
<h3 style="font-size: 16px; font-weight: bold; color: #1F2937; margin-bottom: 12px;">性能优化建议：</h3>
<h3 style="font-size: 14px; font-weight: bold; color: #374151; margin: 12px 0 8px;">页面加载慢？</h3>
<div style="margin-bottom: 12px; color: #4B5563;">
1) 切换到更好的网络环境（WiFi或4G/5G）<br/>
2) 关闭后台其他小程序释放内存<br/>
3) 下拉刷新页面重新加载<br/>
4) 删除小程序后重新添加
</div>
<h3 style="font-size: 14px; font-weight: bold; color: #374151; margin: 12px 0 8px;">图片无法显示？</h3>
<div style="margin-bottom: 12px; color: #4B5563;">
1) 检查网络连接是否正常<br/>
2) 下拉刷新页面<br/>
3) 确认图片URL是否有效（如已失效请联系客服）
</div>
<h3 style="font-size: 14px; font-weight: bold; color: #374151; margin: 12px 0 8px;">如何清除缓存？</h3>
<div style="margin-bottom: 12px; color: #4B5563;">
微信→发现→小程序→长按本小程序→删除→重新进入即可清除缓存
</div>
<div style="background-color: #FEF2F2; border-left: 4px solid #DC2626; padding: 12px; margin: 16px 0; border-radius: 4px;">
<span style="font-size: 12px; color: #991B1B;">⚠️ 注意：清除缓存会删除本地存储的收藏记录等信息，请谨慎操作。</span>
</div>
</div>
`
const questions = ref([
{
title: '如何创建新的计划书？',
title: '如何创建计划书？',
id: 1,
content: mockRichText
content: createPlanbookContent
},
{
title: 'AI答疑如何使用？',
title: '为什么提示需要重新登录？',
id: 2,
content: mockRichText
content: loginAuthContent
},
{
title: '如何修改个人信息？',
title: '如何搜索产品和资料？',
id: 3,
content: mockRichText
content: productSearchContent
},
{
title: '数据如何同步到云端？',
title: '收藏的内容在哪里查看？',
id: 4,
content: mockRichText
content: favoriteContent
},
{
title: '忘记密码怎么办？',
title: '文档无法打开怎么办？',
id: 5,
content: mockRichText
content: documentPreviewContent
},
{
title: '如何修改个人信息和头像？',
id: 6,
content: personalInfoContent
},
{
title: '页面加载慢怎么办？',
id: 7,
content: performanceContent
}
])
......