Hooke / manulife-weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
7c221e59 1 parent 1faf3f8a

feat(help-center): 新增帮助中心页面并更新导航链接 

- 新增帮助中心页面 (`src/pages/help-center/index.vue`)，包含搜索框、联系客服卡片和重点问题列表
- 添加页面配置文件 (`src/pages/help-center/index.config.js`)
- 在应用配置 (`src/app.config.js`) 中注册新页面路由
- 更新我的页面 (`src/pages/mine/index.vue`) 菜单项，将帮助中心链接指向实际页面
- 添加设计稿文件和相关代码文件至文档目录
- 更新更新日志 (`docs/CHANGELOG.md`) 记录新增功能
Inline Side-by-side
Showing 8 changed files with 706 additions and 1 deletions
......@@ -4,6 +4,14 @@ All notable changes to this project will be documented in this file.
## [Unreleased]
### Added
- 新增 "帮助中心" 页面 (`src/pages/help-center`)：
- 还原设计稿 (`docs/design/manulife-V1/帮助中心`) 布局与交互
- 使用 Tailwind CSS 实现页面样式，包括自定义搜索框、联系客服卡片及常见问题列表
- 集成 `NavHeader` 和 `TabBar` 组件，保持全站导航一致性
- 注册新页面路由至 `src/app.config.js`
- 更新 "我的" 页面 (`src/pages/mine`) 菜单链接，指向帮助中心
### Changed
- 优化 "资料列表" 页面 (`src/pages/material-list`)：
- 替换页面内所有静态图片资源为 NutUI 图标组件 (`IconFont`)，提升加载性能与视觉一致性
......
.page {
background-color: rgba(249, 250, 251, 1);
position: relative;
width: 393px;
height: 844px;
overflow: hidden;
padding-left: 0;
padding-right: 0;
padding-top: 0;
padding-bottom: 3px;
}
.box_1 {
background-color: rgba(30, 58, 138, 1);
width: 393px;
padding: 12px 20px 12px 20px;
}
.text_1 {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
}
.image_1 {
width: 64px;
height: 16px;
margin: 2px 0 2px 0;
}
.box_2 {
padding-bottom: 13px;
}
.group_1 {
width: 393px;
background: url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPng8b2d54a24b64b70feddcc9b0ace1ad4824ac8f04fdb3df9070626abcd200601b)
100% no-repeat;
background-size: 100% 100%;
padding: 16px 157px 16px 20px;
}
.label_1 {
width: 24px;
height: 24px;
margin: 2px 0 2px 0;
}
.text_2 {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 20px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 28px;
}
.group_2 {
width: 353px;
background: url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPng4061f030adc6ea0e97eb9bb9f8e128a070e66c04c95623aeae39ab0e854b4be4) -2px -1px
no-repeat;
background-size: 357px 60px;
align-self: center;
margin-top: 20px;
padding: 16px 177px 16px 16px;
}
.image-text_1 {
width: 160px;
}
.thumbnail_1 {
width: 20px;
height: 20px;
margin: 2px 0 2px 0;
}
.text-group_1 {
overflow-wrap: break-word;
color: rgba(156, 163, 175, 1);
font-size: 16px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 24px;
}
.group_3 {
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 1);
border-radius: 12px;
background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/31103214b74948f7bc538566a9008355_mergeImage.png);
width: 353px;
align-self: center;
margin-top: 16px;
padding: 18px 16px 16px 16px;
}
.image-text_2 {
width: 116px;
}
.label_2 {
width: 40px;
height: 40px;
}
.text-group_2 {
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 16px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 24px;
margin-top: 8px;
}
.thumbnail_2 {
width: 20px;
height: 20px;
margin: 10px 0 10px 0;
}
.text_3 {
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 16px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 24px;
margin: 16px 305px 0 24px;
}
.box_3 {
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 1);
background-color: rgba(255, 255, 255, 1);
border-radius: 12px;
width: 353px;
align-self: center;
margin-top: -1px;
padding: 16px 16px 16px 16px;
}
.group_4 {
width: 321px;
}
.image-text_3 {
width: 158px;
}
.thumbnail_3 {
width: 6px;
height: 6px;
margin: 7px 0 7px 0;
}
.text-group_3 {
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
}
.thumbnail_4 {
width: 16px;
height: 16px;
margin: 2px 0 2px 0;
}
.image_2 {
width: 321px;
height: 1px;
margin-top: 16px;
}
.group_5 {
width: 321px;
margin-top: 16px;
}
.image-text_4 {
width: 129px;
}
.thumbnail_5 {
width: 6px;
height: 6px;
margin: 7px 0 7px 0;
}
.text-group_4 {
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
}
.thumbnail_6 {
width: 16px;
height: 16px;
margin: 2px 0 2px 0;
}
.image_3 {
width: 321px;
height: 1px;
margin-top: 16px;
}
.group_6 {
width: 321px;
margin-top: 16px;
}
.image-text_5 {
width: 144px;
}
.thumbnail_7 {
width: 6px;
height: 6px;
margin: 7px 0 7px 0;
}
.text-group_5 {
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
}
.thumbnail_8 {
width: 16px;
height: 16px;
margin: 2px 0 2px 0;
}
.image_4 {
width: 321px;
height: 1px;
margin-top: 16px;
}
.group_7 {
width: 321px;
margin-top: 16px;
}
.image-text_6 {
width: 158px;
}
.thumbnail_9 {
width: 6px;
height: 6px;
margin: 7px 0 7px 0;
}
.text-group_6 {
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
}
.thumbnail_10 {
width: 16px;
height: 16px;
margin: 2px 0 2px 0;
}
.image_5 {
width: 321px;
height: 1px;
margin-top: 16px;
}
.group_8 {
width: 321px;
margin-top: 16px;
}
.image-text_7 {
width: 130px;
}
.thumbnail_11 {
width: 6px;
height: 6px;
margin: 7px 0 7px 0;
}
.text-group_7 {
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
}
.thumbnail_12 {
width: 16px;
height: 16px;
margin: 2px 0 2px 0;
}
.box_4 {
background-color: rgba(255, 255, 255, 1);
margin-top: 157px;
padding-bottom: 9px;
}
.image_6 {
width: 393px;
height: 1px;
}
.box_5 {
width: 269px;
align-self: center;
margin-top: 10px;
}
.image-text_8 {
}
.label_3 {
width: 24px;
height: 24px;
}
.text-group_8 {
overflow-wrap: break-word;
color: rgba(156, 163, 175, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 16px;
margin-top: 4px;
}
.image-text_9 {
}
.label_4 {
width: 24px;
height: 24px;
align-self: center;
}
.text-group_9 {
overflow-wrap: break-word;
color: rgba(156, 163, 175, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 16px;
margin-top: 4px;
}
.image-text_10 {
}
.label_5 {
width: 24px;
height: 24px;
}
.text-group_10 {
overflow-wrap: break-word;
color: rgba(0, 122, 255, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 16px;
margin-top: 4px;
}
.image_7 {
width: 393px;
height: 34px;
}
......
<template>
<div class="page flex-col">
<div class="box_1 flex-row justify-between">
<span class="text_1">9:41</span>
<img
class="image_1"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng413f9d678a24a9b746fdc981fa579b56b2cbd98eddd024ab1279ef48ae59291e"
/>
</div>
<div class="box_2 flex-col">
<div class="group_1 flex-row justify-between">
<img
class="label_1"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng8d9b1510cae8946e1251bb518347ad321d8ce71de7b15fe74d7322e00d291ac6"
/>
<span class="text_2">帮助中心</span>
</div>
<div class="group_2 flex-row">
<div class="image-text_1 flex-row justify-between">
<img
class="thumbnail_1"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbb008ef38dbea4061d893137cdb5d5e77bb053a7ec4082623fdb29b05872cd56"
/>
<span class="text-group_1">搜索问题或关键词</span>
</div>
</div>
<div class="group_3 flex-row justify-between">
<div class="image-text_2 flex-row justify-between">
<img
class="label_2"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng0bb42ee0fac4d686bb6281afd8462142feb6a7fa9de1286674e2c2010583a3d1"
/>
<span class="text-group_2">联系客服</span>
</div>
<img
class="thumbnail_2"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng707b53faf6c0e12714b30ddc8728b543d6b41f89ccf653bc8e9af843b5d6034b"
/>
</div>
<span class="text_3">重点问题</span>
</div>
<div class="box_3 flex-col">
<div class="group_4 flex-row justify-between">
<div class="image-text_3 flex-row justify-between">
<img
class="thumbnail_3"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng50a5f2c348150e89992cbf4740ca444f98d33de69e3f83abdadd5f70c70fa230"
/>
<span class="text-group_3">如何创建新的计划书？</span>
</div>
<img
class="thumbnail_4"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngb167b27c04628e64ec71e9d576dd8c1bcfe2666b25997aa38bf54c096f6d8152"
/>
</div>
<img
class="image_2"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng57c4639b8bfeac9627fb7aedb8a38f4441026309724d794e28b0e35d1b620544"
/>
<div class="group_5 flex-row justify-between">
<div class="image-text_4 flex-row justify-between">
<img
class="thumbnail_5"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng50a5f2c348150e89992cbf4740ca444f98d33de69e3f83abdadd5f70c70fa230"
/>
<span class="text-group_4">AI答疑如何使用？</span>
</div>
<img
class="thumbnail_6"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngb167b27c04628e64ec71e9d576dd8c1bcfe2666b25997aa38bf54c096f6d8152"
/>
</div>
<img
class="image_3"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng57c4639b8bfeac9627fb7aedb8a38f4441026309724d794e28b0e35d1b620544"
/>
<div class="group_6 flex-row justify-between">
<div class="image-text_5 flex-row justify-between">
<img
class="thumbnail_7"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng50a5f2c348150e89992cbf4740ca444f98d33de69e3f83abdadd5f70c70fa230"
/>
<span class="text-group_5">如何修改个人信息？</span>
</div>
<img
class="thumbnail_8"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngb167b27c04628e64ec71e9d576dd8c1bcfe2666b25997aa38bf54c096f6d8152"
/>
</div>
<img
class="image_4"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng57c4639b8bfeac9627fb7aedb8a38f4441026309724d794e28b0e35d1b620544"
/>
<div class="group_7 flex-row justify-between">
<div class="image-text_6 flex-row justify-between">
<img
class="thumbnail_9"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng50a5f2c348150e89992cbf4740ca444f98d33de69e3f83abdadd5f70c70fa230"
/>
<span class="text-group_6">数据如何同步到云端？</span>
</div>
<img
class="thumbnail_10"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngb167b27c04628e64ec71e9d576dd8c1bcfe2666b25997aa38bf54c096f6d8152"
/>
</div>
<img
class="image_5"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng57c4639b8bfeac9627fb7aedb8a38f4441026309724d794e28b0e35d1b620544"
/>
<div class="group_8 flex-row justify-between">
<div class="image-text_7 flex-row justify-between">
<img
class="thumbnail_11"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng50a5f2c348150e89992cbf4740ca444f98d33de69e3f83abdadd5f70c70fa230"
/>
<span class="text-group_7">忘记密码怎么办？</span>
</div>
<img
class="thumbnail_12"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngb167b27c04628e64ec71e9d576dd8c1bcfe2666b25997aa38bf54c096f6d8152"
/>
</div>
</div>
<div class="box_4 flex-col">
<img
class="image_6"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbf3e746af52a38753bd540d5f486761a166161ff3c8f2985aa5e994a36349ea4"
/>
<div class="box_5 flex-row justify-between">
<div class="image-text_8 flex-col">
<img
class="label_3"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng71c6e00bb581cef9f5efdb2e7b365981b8076e8bc6ea8d112cbdc366d37ac3bb"
/>
<span class="text-group_8">首页</span>
</div>
<div class="image-text_9 flex-col">
<img
class="label_4"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd589998343ea94a72ad8b84ad664f5e104af127cd653af352d451250d5426e7d"
/>
<span class="text-group_9">AI答疑</span>
</div>
<div class="image-text_10 flex-col">
<img
class="label_5"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPnga075aec18829793ac5bb3d4bada734dbd936e8d34c79c30583aa49fa2d58751b"
/>
<span class="text-group_10">我的</span>
</div>
</div>
</div>
<img
class="image_7"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng830c4568c4d0141e1fa97f7fad1e075e2178ab08e5613734b08eaf46dcdd4207"
/>
</div>
</template>
<script>
export default {
data() {
return {
constants: {},
};
},
methods: {},
};
</script>
<style src="./common.css" />
<style src="./index.css" />
......
......@@ -24,6 +24,7 @@ const pages = [
'pages/avatar/index',
'pages/feedback/index',
'pages/login/index',
'pages/help-center/index',
]
if (process.env.NODE_ENV === 'development') {
......
export default {
navigationBarTitleText: '帮助中心',
enablePullDownRefresh: false,
navigationStyle: 'custom'
}
<template>
<view class="relative w-full min-h-screen bg-[#F9FAFB] pb-[200rpx]">
<NavHeader title="帮助中心" />
<!-- Content Section -->
<view class="px-[32rpx] mt-[32rpx]">
<!-- Search Bar -->
<view class="flex items-center w-full h-[88rpx] bg-white rounded-full px-[32rpx] mb-[32rpx] shadow-sm">
<IconFont name="Search" class="text-gray-400 mr-[16rpx]" size="18" />
<input
type="text"
placeholder="搜索问题或关键词"
placeholder-class="text-gray-400 text-[28rpx]"
class="flex-1 text-[28rpx] text-gray-800 h-full"
/>
</view>
<!-- Contact Service -->
<view class="flex items-center justify-between w-full bg-white rounded-[24rpx] p-[32rpx] mb-[40rpx] shadow-sm relative overflow-hidden">
<!-- Background decoration if needed, or just white card -->
<view class="flex items-center z-10">
<image src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng0bb42ee0fac4d686bb6281afd8462142feb6a7fa9de1286674e2c2010583a3d1" class="w-[80rpx] h-[80rpx] mr-[24rpx]" />
<text class="text-[32rpx] text-gray-900 font-medium">联系客服</text>
</view>
<view class="z-10">
<IconFont name="RectRight" class="text-gray-400" size="16" />
</view>
</view>
<!-- Important Questions -->
<view>
<text class="block text-[32rpx] text-gray-900 font-bold mb-[24rpx]">重点问题</text>
<view class="bg-white rounded-[24rpx] shadow-sm overflow-hidden">
<view
v-for="(item, index) in questions"
:key="index"
class="flex items-center justify-between p-[32rpx] border-b border-gray-100 last:border-b-0 active:bg-gray-50 transition-colors"
@tap="handleQuestionClick(item)"
>
<view class="flex items-center">
<view class="w-[12rpx] h-[12rpx] rounded-full bg-blue-600 mr-[24rpx]"></view>
<text class="text-[28rpx] text-gray-800">{{ item.title }}</text>
</view>
<IconFont name="RectRight" class="text-gray-400" size="16" />
</view>
</view>
</view>
</view>
<TabBar current="me" />
</view>
</template>
<script setup>
import { ref } from 'vue'
import NavHeader from '@/components/NavHeader.vue'
import TabBar from '@/components/TabBar.vue'
import IconFont from '@/components/IconFont.vue'
import { useGo } from '@/hooks/useGo'
const go = useGo()
const questions = ref([
{ title: '如何创建新的计划书？', id: 1 },
{ title: 'AI答疑如何使用？', id: 2 },
{ title: '如何修改个人信息？', id: 3 },
{ title: '数据如何同步到云端？', id: 4 },
{ title: '忘记密码怎么办？', id: 5 }
])
const handleQuestionClick = (item) => {
// Navigate to detail or show answer
console.log('Clicked question:', item.title)
// Example navigation (adjust path as needed)
// go('/pages/help-detail/index', { id: item.id })
}
</script>
......@@ -79,7 +79,7 @@ const go = useGo()
const menuItems = [
{ title: '我的计划书', icon: 'Order', path: '/pages/plan/index' },
{ title: '我的收藏', icon: 'Star', path: '/pages/favorites/index' },
{ title: '帮助中心', icon: 'Service', action: 'toast' },
{ title: '帮助中心', icon: 'Service', path: '/pages/help-center/index' },
{ title: '意见反馈', icon: 'Edit', path: '/pages/feedback/index' }
]
......