Hooke / manulife-weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
fec72bee 1 parent be90316e

feat: 新增家办相关页面并重构通用导航组件 

- 新增 `pages/family-office/index` 页面，实现家庭成员、健康档案、资产管理、生活服务四大功能板块
- 创建通用导航头组件 `NavHeader`，统一页面顶部样式并优化滚动体验
- 封装图标组件 `IconFont`，简化 NutUI 图标使用并消除 Vue 3 响应式警告
- 重构入职相关、签单相关、首页页面，使用新组件替代硬编码头部结构
- 将静态数据源从 `ref` 升级为 `shallowRef` 以提升性能
- 更新路由配置和组件类型声明
Expand all
Inline Side-by-side
Showing 15 changed files with 532 additions and 111 deletions
...@@ -7,7 +7,9 @@ export {} ...@@ -7,7 +7,9 @@ export {}
7 7
8 declare module 'vue' { 8 declare module 'vue' {
9 export interface GlobalComponents { 9 export interface GlobalComponents {
10 + IconFont: typeof import('./src/components/IconFont.vue')['default']
10 IndexNav: typeof import('./src/components/indexNav.vue')['default'] 11 IndexNav: typeof import('./src/components/indexNav.vue')['default']
12 + NavHeader: typeof import('./src/components/NavHeader.vue')['default']
11 NutButton: typeof import('@nutui/nutui-taro')['Button'] 13 NutButton: typeof import('@nutui/nutui-taro')['Button']
12 Picker: typeof import('./src/components/time-picker-data/picker.vue')['default'] 14 Picker: typeof import('./src/components/time-picker-data/picker.vue')['default']
13 PosterBuilder: typeof import('./src/components/PosterBuilder/index.vue')['default'] 15 PosterBuilder: typeof import('./src/components/PosterBuilder/index.vue')['default']
......
...@@ -4,7 +4,17 @@ All notable changes to this project will be documented in this file. ...@@ -4,7 +4,17 @@ All notable changes to this project will be documented in this file.
4 4
5 ## [Unreleased] 5 ## [Unreleased]
6 6
7 +### Fixed
8 +- 修复 Vue 3 响应式组件警告：将包含 NutUI 图标组件的静态数据源从 `ref` 升级为 `shallowRef`，并结合 `markRaw` 使用。彻底消除了 "Component that was made a reactive object" 警告，避免了 Vue 对组件对象进行不必要的深度代理，显著提升了页面初始化和渲染性能。涉及首页、TabBar、入职相关、签单相关及家办相关所有页面。
9 +- 优化 `NavHeader` 组件交互体验，将页面头部固定在顶部 (`fixed`)，并内置等高占位元素防止内容遮挡，提升滚动时的用户体验。
10 +- 重构图标使用方式：创建 `src/components/IconFont.vue` 组件封装 NutUI 图标库，支持通过字符串 `name` 属性配置图标，彻底移除 `markRaw` 逻辑，简化代码结构并符合用户偏好，同时保留了 SVG 图标的高清与高性能特性。
11 +
7 ### Added 12 ### Added
13 +- 创建通用导航头组件 `src/components/NavHeader.vue`，统一页面头部样式
14 +- 重构 "入职相关"、"签单相关"、"家办相关" 页面，使用 `NavHeader` 组件替代硬编码的头部结构
15 +- 新增 "家办相关" 页面 (`src/pages/family-office`)，复用 "入职相关" 页面布局与样式
16 +- 规划并实现家庭成员、健康档案、资产管理、生活服务四大功能板块
17 +- 注册新页面路由至 `src/app.config.js`
8 - 初始化项目 Git 仓库 18 - 初始化项目 Git 仓库
9 - 创建 .gitignore 配置文件 19 - 创建 .gitignore 配置文件
10 - 创建并切换到 develop 分支 20 - 创建并切换到 develop 分支
......
This diff is collapsed. Click to expand it.
1 +<template>
2 + <div class="page flex-col">
3 + <div class="group_1 flex-row justify-between">
4 + <span class="text_1">9:41</span>
5 + <img
6 + class="image_1"
7 + referrerpolicy="no-referrer"
8 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng41ebf05313566695702fdc28688b6ed52dbbba555ddd1f6c423593ff63b3f65e"
9 + />
10 + </div>
11 + <div class="group_2 flex-row justify-between">
12 + <img
13 + class="thumbnail_1"
14 + referrerpolicy="no-referrer"
15 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng66b8991933f35bccdd7664c63b4a7cba9b2c3554be75da299d9c33e4b9efda22"
16 + />
17 + <span class="text_2">产品中心</span>
18 + </div>
19 + <div class="group_3 flex-col">
20 + <div class="group_4 flex-col">
21 + <div class="group_5 flex-row justify-between">
22 + <div class="text-wrapper_1 flex-col">
23 + <span class="text_3">全部产品</span>
24 + </div>
25 + <div class="text-wrapper_2 flex-col">
26 + <span class="text_4">人寿保险</span>
27 + </div>
28 + <div class="text-wrapper_3 flex-col">
29 + <span class="text_5">医疗保险</span>
30 + </div>
31 + <div class="text-wrapper_4 flex-col">
32 + <span class="text_6">意外保险</span>
33 + </div>
34 + </div>
35 + </div>
36 + <span class="text_7">全部产品</span>
37 + <div class="grid_1 flex-row">
38 + <div class="box_1 flex-col">
39 + <div class="image-text_1 flex-col">
40 + <div class="box_2 flex-col">
41 + <div class="text-wrapper_5 flex-col">
42 + <span class="text_8">热卖</span>
43 + </div>
44 + </div>
45 + <span class="text-group_1">终身寿险尊享版</span>
46 + </div>
47 + <div class="text-wrapper_6 flex-col">
48 + <span class="text_9">5年超值</span>
49 + </div>
50 + </div>
51 + <div class="box_3 flex-col">
52 + <span class="text_10">百万医疗保险计划</span>
53 + <div class="block_1 flex-row justify-between">
54 + <img
55 + class="thumbnail_2"
56 + referrerpolicy="no-referrer"
57 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPnga1fc927b8312af6aec1a5da5cbcba571a10640194d44885876793d4472bcffe2"
58 + />
59 + <div class="group_6 flex-col">
60 + <div class="text-wrapper_7 flex-col">
61 + <span class="text_11">收益率3.5%</span>
62 + </div>
63 + </div>
64 + </div>
65 + </div>
66 + <div class="box_4 flex-col">
67 + <span class="text_12">意外伤害保障计划</span>
68 + <div class="box_5 flex-row justify-between">
69 + <img
70 + class="thumbnail_3"
71 + referrerpolicy="no-referrer"
72 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng4c86d1d1b122075e3c3268fd63f98594b586778c6dc6b611dc372913490d2807"
73 + />
74 + <div class="box_6 flex-col">
75 + <div class="text-wrapper_8 flex-col">
76 + <span class="text_13">保证收益万能</span>
77 + </div>
78 + </div>
79 + </div>
80 + </div>
81 + <div class="box_7 flex-col">
82 + <div class="image-text_2 flex-col">
83 + <div class="box_8 flex-col">
84 + <div class="text-wrapper_9 flex-col">
85 + <span class="text_14">热卖</span>
86 + </div>
87 + </div>
88 + <span class="text-group_2">分红型年金保险</span>
89 + </div>
90 + <div class="box_9 flex-row justify-between">
91 + <img
92 + class="thumbnail_4"
93 + referrerpolicy="no-referrer"
94 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPnga1fc927b8312af6aec1a5da5cbcba571a10640194d44885876793d4472bcffe2"
95 + />
96 + <div class="block_2 flex-col">
97 + <div class="text-wrapper_10 flex-col">
98 + <span class="text_15">保证收益万能</span>
99 + </div>
100 + </div>
101 + </div>
102 + </div>
103 + <div class="box_10 flex-col">
104 + <span class="text_16">重大疾病保险</span>
105 + <div class="group_7 flex-row justify-between">
106 + <img
107 + class="thumbnail_5"
108 + referrerpolicy="no-referrer"
109 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng4c86d1d1b122075e3c3268fd63f98594b586778c6dc6b611dc372913490d2807"
110 + />
111 + <div class="group_8 flex-col">
112 + <div class="text-wrapper_11 flex-col">
113 + <span class="text_17">收益率4.2%</span>
114 + </div>
115 + </div>
116 + </div>
117 + </div>
118 + <div class="box_11 flex-col">
119 + <div class="image-text_3 flex-col">
120 + <div class="box_12 flex-col">
121 + <div class="text-wrapper_12 flex-col">
122 + <span class="text_18">热卖</span>
123 + </div>
124 + </div>
125 + <span class="text-group_3">少儿教育金保险</span>
126 + </div>
127 + <div class="group_9 flex-row justify-between">
128 + <img
129 + class="thumbnail_6"
130 + referrerpolicy="no-referrer"
131 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPnga1fc927b8312af6aec1a5da5cbcba571a10640194d44885876793d4472bcffe2"
132 + />
133 + <div class="group_10 flex-col">
134 + <div class="text-wrapper_13 flex-col">
135 + <span class="text_19">教育专属</span>
136 + </div>
137 + </div>
138 + </div>
139 + </div>
140 + </div>
141 + <div class="group_11 flex-col">
142 + <img
143 + class="image_2"
144 + referrerpolicy="no-referrer"
145 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbf3e746af52a38753bd540d5f486761a166161ff3c8f2985aa5e994a36349ea4"
146 + />
147 + <div class="list_1 flex-row">
148 + <div
149 + class="image-text_4 flex-col"
150 + v-for="(item, index) in loopData0"
151 + :key="index"
152 + >
153 + <img
154 + class="label_1"
155 + referrerpolicy="no-referrer"
156 + :src="item.lanhuimage0"
157 + />
158 + <span
159 + class="text-group_4"
160 + :style="{ color: item.lanhufontColor0 }"
161 + v-html="item.lanhutext0"
162 + ></span>
163 + </div>
164 + </div>
165 + <img
166 + class="image_3"
167 + referrerpolicy="no-referrer"
168 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd87bce34194e46404c7ac21a64bed8e9f8454451baaf336c5201241680a20c9d"
169 + />
170 + </div>
171 + </div>
172 + </div>
173 +</template>
174 +<script>
175 +export default {
176 + data() {
177 + return {
178 + loopData0: [
179 + {
180 + lanhuimage0:
181 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPnga613c67a645a5984586afecdb62939c0f7a50579c221b1918780e7886dfe9c43',
182 + lanhutext0: '首页',
183 + lanhufontColor0: 'rgba(37,99,235,1.000000)',
184 + },
185 + {
186 + lanhuimage0:
187 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng355fd7cd6d5c986d30655db577fe8e511f878d37c9506e77dc53be60228d6453',
188 + lanhutext0: 'AI答疑',
189 + lanhufontColor0: 'rgba(156,163,175,1.000000)',
190 + },
191 + {
192 + lanhuimage0:
193 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng13ceb19b113cdc23fbf47e15ccf14d27aec044ad2c13f88539fc8459993ade6f',
194 + lanhutext0: '我的',
195 + lanhufontColor0: 'rgba(156,163,175,1.000000)',
196 + },
197 + ],
198 + constants: {},
199 + };
200 + },
201 + methods: {},
202 +};
203 +</script>
204 +<style src="./common.css" />
205 +<style src="./index.css" />
...@@ -9,6 +9,7 @@ const pages = [ ...@@ -9,6 +9,7 @@ const pages = [
9 'pages/index/index', 9 'pages/index/index',
10 'pages/auth/index', 10 'pages/auth/index',
11 'pages/onboarding/index', 11 'pages/onboarding/index',
12 + 'pages/family-office/index',
12 'pages/signing/index', 13 'pages/signing/index',
13 ] 14 ]
14 15
......
1 +<template>
2 + <component :is="iconComponent" v-if="iconComponent" :size="size" :class="customClass" :color="color" />
3 +</template>
4 +
5 +<script setup>
6 +import { computed } from 'vue';
7 +import {
8 + Cart,
9 + Category,
10 + Check,
11 + Checklist,
12 + Clock,
13 + Edit,
14 + Find,
15 + Home,
16 + My,
17 + Order,
18 + PlayCircleFill,
19 + RectRight,
20 + Search,
21 + Service,
22 + Star,
23 + Top
24 +} from '@nutui/icons-vue-taro';
25 +
26 +const props = defineProps({
27 + name: {
28 + type: String,
29 + required: true
30 + },
31 + size: {
32 + type: [String, Number],
33 + default: ''
34 + },
35 + color: {
36 + type: String,
37 + default: ''
38 + },
39 + customClass: {
40 + type: String,
41 + default: ''
42 + }
43 +});
44 +
45 +const icons = {
46 + Cart,
47 + Category,
48 + Check,
49 + Checklist,
50 + Clock,
51 + Edit,
52 + Find,
53 + Home,
54 + My,
55 + Order,
56 + PlayCircleFill,
57 + RectRight,
58 + Search,
59 + Service,
60 + Star,
61 + Top
62 +};
63 +
64 +const iconComponent = computed(() => {
65 + return icons[props.name] || null;
66 +});
67 +</script>
1 +<!--
2 + * @Date: 2026-01-29 21:09:28
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2026-01-29 21:18:14
5 + * @FilePath: /manulife-weapp/src/components/NavHeader.vue
6 + * @Description: 通用导航头组件，用于页面顶部固定导航栏，展示页面标题。
7 +-->
8 +<template>
9 + <!-- Placeholder to prevent content from being hidden behind fixed header -->
10 + <div class="w-full h-[250rpx]"></div>
11 + <!-- Fixed Header -->
12 + <div class="fixed top-0 left-0 z-50 w-full h-[250rpx] bg-gradient-to-b from-[#1E3A8A] to-[#2563EB] flex items-center justify-center pt-[100rpx]">
13 + <span class="text-white text-[35rpx] font-normal">{{ title }}</span>
14 + </div>
15 +</template>
16 +
17 +<script setup>
18 +defineProps({
19 + title: {
20 + type: String,
21 + required: true
22 + }
23 +})
24 +</script>
1 <!-- 1 <!--
2 * @Date: 2026-01-29 20:33:23 2 * @Date: 2026-01-29 20:33:23
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2026-01-29 20:42:52 4 + * @LastEditTime: 2026-01-29 21:18:33
5 * @FilePath: /manulife-weapp/src/components/TabBar.vue 5 * @FilePath: /manulife-weapp/src/components/TabBar.vue
6 - * @Description: 文件描述 6 + * @Description: 通用底部导航栏组件，用于页面底部固定导航栏，展示页面标题。
7 --> 7 -->
8 <template> 8 <template>
9 <view class="fixed bottom-0 left-0 w-full bg-white shadow-[0_-4rpx_16rpx_rgba(0,0,0,0.05)] pb-[env(safe-area-inset-bottom)] z-50"> 9 <view class="fixed bottom-0 left-0 w-full bg-white shadow-[0_-4rpx_16rpx_rgba(0,0,0,0.05)] pb-[env(safe-area-inset-bottom)] z-50">
...@@ -14,8 +14,8 @@ ...@@ -14,8 +14,8 @@
14 :key="index" 14 :key="index"
15 @tap="handleTabClick(item)" 15 @tap="handleTabClick(item)"
16 > 16 >
17 - <component 17 + <IconFont
18 - :is="item.icon" 18 + :name="item.icon"
19 :class="[current === item.key ? 'text-blue-600' : 'text-gray-400']" 19 :class="[current === item.key ? 'text-blue-600' : 'text-gray-400']"
20 size="24" 20 size="24"
21 /> 21 />
...@@ -29,8 +29,8 @@ ...@@ -29,8 +29,8 @@
29 </template> 29 </template>
30 30
31 <script setup> 31 <script setup>
32 -import { ref } from 'vue' 32 +import { ref, shallowRef } from 'vue'
33 -import { Home, Service, My } from '@nutui/icons-vue-taro' 33 +import IconFont from '@/components/IconFont.vue'
34 import { useGo } from '@/hooks/useGo' 34 import { useGo } from '@/hooks/useGo'
35 import Taro from '@tarojs/taro' 35 import Taro from '@tarojs/taro'
36 36
...@@ -43,24 +43,24 @@ const props = defineProps({ ...@@ -43,24 +43,24 @@ const props = defineProps({
43 43
44 const go = useGo() 44 const go = useGo()
45 45
46 -const tabs = ref([ 46 +const tabs = shallowRef([
47 { 47 {
48 key: 'home', 48 key: 'home',
49 label: '首页', 49 label: '首页',
50 - icon: Home, 50 + icon: 'Home',
51 path: '/pages/index/index' 51 path: '/pages/index/index'
52 }, 52 },
53 { 53 {
54 key: 'ai', 54 key: 'ai',
55 label: 'AI答疑', 55 label: 'AI答疑',
56 - icon: Service, 56 + icon: 'Service',
57 - path: '/pages/ai/index' // Placeholder path 57 + path: '/pages/ai/index'
58 }, 58 },
59 { 59 {
60 key: 'me', 60 key: 'me',
61 label: '我的', 61 label: '我的',
62 - icon: My, 62 + icon: 'My',
63 - path: '/pages/me/index' // Placeholder path 63 + path: '/pages/me/index'
64 } 64 }
65 ]) 65 ])
66 66
......
1 +/*
2 + * @Date: 2025-06-28 10:33:00
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2026-01-29 17:51:21
5 + * @FilePath: /manulife-weapp/src/pages/index/index.config.js
6 + * @Description: 首页配置
7 + */
8 +export default definePageConfig({
9 + navigationBarTitleText: '入职相关',
10 + navigationStyle: 'custom'
11 +})
1 +<template>
2 + <div class="min-h-screen bg-[#f9fafb] pb-[calc(160rpx+env(safe-area-inset-bottom))]">
3 + <!-- Navigation Header -->
4 + <NavHeader title="家办相关" />
5 +
6 + <!-- Content List -->
7 + <div class="px-[40rpx] mt-[40rpx] relative z-10">
8 + <div v-for="(section, index) in sections" :key="index"
9 + class="bg-white rounded-[32rpx] mb-[32rpx] pb-[56rpx] overflow-hidden shadow-sm">
10 + <!-- Section Header -->
11 + <div class="px-[40rpx] py-[32rpx]" :style="{ background: section.bgGradient }">
12 + <span class="text-[#1f2937] text-[32rpx] font-normal">{{ section.title }}</span>
13 + </div>
14 +
15 + <!-- Section Items -->
16 + <div class="flex flex-col">
17 + <div v-for="(item, itemIndex) in section.items" :key="itemIndex" class="flex flex-col">
18 + <div class="flex items-center justify-between px-[40rpx] mt-[56rpx] cursor-pointer"
19 + @tap="handleItemClick(item)">
20 + <div class="flex items-center">
21 + <div class="w-[96rpx] h-[96rpx] mr-[32rpx] flex items-center justify-center bg-gray-50 rounded-full">
22 + <IconFont :name="item.icon" class="text-blue-600" size="32" />
23 + </div>
24 + <div class="flex flex-col">
25 + <span class="text-[#1f2937] text-[28rpx] font-normal leading-[40rpx]">{{ item.title }}</span>
26 + <span class="text-[#6b7280] text-[24rpx] mt-[8rpx] leading-[32rpx]">{{ item.subtitle }}</span>
27 + </div>
28 + </div>
29 + <IconFont name="RectRight" class="text-gray-400" size="16" />
30 + </div>
31 + <!-- Divider -->
32 + <div v-if="itemIndex < section.items.length - 1"
33 + class="w-[626rpx] h-[2rpx] bg-[#e5e7eb] mx-auto mt-[32rpx]"></div>
34 + </div>
35 + </div>
36 + </div>
37 + </div>
38 +
39 + <!-- Tab Bar -->
40 + <TabBar current="" />
41 + </div>
42 +</template>
43 +
44 +<script setup>
45 +import { shallowRef } from 'vue'
46 +import { useGo } from '@/hooks/useGo'
47 +import TabBar from '@/components/TabBar.vue'
48 +import NavHeader from '@/components/NavHeader.vue'
49 +import IconFont from '@/components/IconFont.vue'
50 +
51 +const go = useGo()
52 +
53 +const sections = shallowRef([
54 + {
55 + title: '家庭成员',
56 + bgGradient: 'linear-gradient(90deg, #F3E8FF 0%, #E9D5FF 100%)',
57 + items: [
58 + {
59 + title: '成员列表',
60 + subtitle: '管理家庭成员信息',
61 + icon: 'My'
62 + },
63 + {
64 + title: '新增成员',
65 + subtitle: '添加家庭成员',
66 + icon: 'Edit'
67 + }
68 + ]
69 + },
70 + {
71 + title: '健康档案',
72 + bgGradient: 'linear-gradient(90deg, #F0FDF4 0%, #DCFCE7 100%)',
73 + items: [
74 + {
75 + title: '体检报告',
76 + subtitle: '查看家庭成员体检记录',
77 + icon: 'Order'
78 + },
79 + {
80 + title: '就医记录',
81 + subtitle: '家庭成员就医历史',
82 + icon: 'Clock'
83 + }
84 + ]
85 + },
86 + {
87 + title: '资产管理',
88 + bgGradient: 'linear-gradient(90deg, #FFF7ED 0%, #FFEDD5 100%)',
89 + items: [
90 + {
91 + title: '保单管理',
92 + subtitle: '家庭保单汇总',
93 + icon: 'Star'
94 + },
95 + {
96 + title: '资产总览',
97 + subtitle: '家庭资产分布',
98 + icon: 'Find'
99 + }
100 + ]
101 + },
102 + {
103 + title: '生活服务',
104 + bgGradient: 'linear-gradient(90deg, #E0F2FE 0%, #BAE6FD 100%)',
105 + items: [
106 + {
107 + title: '高端医疗',
108 + subtitle: '预约高端医疗服务',
109 + icon: 'Service'
110 + },
111 + {
112 + title: '康养服务',
113 + subtitle: '健康养生服务',
114 + icon: 'PlayCircleFill'
115 + }
116 + ]
117 + }
118 +])
119 +
120 +/**
121 + * Handle item click
122 + * @param {Object} item - Clicked item data
123 + */
124 +const handleItemClick = (item) => {
125 + console.log('Clicked:', item.title)
126 + // TODO: Navigate to respective page
127 +}
128 +</script>
129 +
130 +<script>
131 +export default {
132 + name: 'FamilyOfficeIndex'
133 +}
134 +</script>
1 /* 1 /*
2 * @Date: 2025-06-28 10:33:00 2 * @Date: 2025-06-28 10:33:00
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2026-01-29 17:51:21 4 + * @LastEditTime: 2026-01-29 21:07:21
5 * @FilePath: /manulife-weapp/src/pages/index/index.config.js 5 * @FilePath: /manulife-weapp/src/pages/index/index.config.js
6 * @Description: 首页配置 6 * @Description: 首页配置
7 */ 7 */
8 -export default { 8 +export default definePageConfig({
9 - navigationBarTitleText: '臻奇智荟圈' 9 + navigationBarTitleText: '臻奇智荟圈',
10 -} 10 + navigationStyle: 'custom'
11 +})
......
This diff is collapsed. Click to expand it.
1 <template> 1 <template>
2 <div class="min-h-screen bg-[#f9fafb] pb-[calc(160rpx+env(safe-area-inset-bottom))]"> 2 <div class="min-h-screen bg-[#f9fafb] pb-[calc(160rpx+env(safe-area-inset-bottom))]">
3 <!-- Navigation Header --> 3 <!-- Navigation Header -->
4 - <div class="relative w-full h-[300rpx] bg-gradient-to-b from-[#1E3A8A] to-[#2563EB] flex items-center justify-center pt-[40rpx]"> 4 + <NavHeader title="入职相关" />
5 - <span class="text-white text-[44rpx] font-normal">入职相关</span>
6 - </div>
7 5
8 <!-- Content List --> 6 <!-- Content List -->
9 <div class="px-[40rpx] mt-[40rpx] relative z-10"> 7 <div class="px-[40rpx] mt-[40rpx] relative z-10">
...@@ -19,14 +17,14 @@ ...@@ -19,14 +17,14 @@
19 <div class="flex items-center justify-between px-[40rpx] mt-[56rpx] cursor-pointer" @tap="handleItemClick(item)"> 17 <div class="flex items-center justify-between px-[40rpx] mt-[56rpx] cursor-pointer" @tap="handleItemClick(item)">
20 <div class="flex items-center"> 18 <div class="flex items-center">
21 <div class="w-[96rpx] h-[96rpx] mr-[32rpx] flex items-center justify-center bg-gray-50 rounded-full"> 19 <div class="w-[96rpx] h-[96rpx] mr-[32rpx] flex items-center justify-center bg-gray-50 rounded-full">
22 - <component :is="item.icon" class="text-blue-600" size="32" /> 20 + <IconFont :name="item.icon" class="text-blue-600" size="32" />
23 </div> 21 </div>
24 <div class="flex flex-col"> 22 <div class="flex flex-col">
25 <span class="text-[#1f2937] text-[28rpx] font-normal leading-[40rpx]">{{ item.title }}</span> 23 <span class="text-[#1f2937] text-[28rpx] font-normal leading-[40rpx]">{{ item.title }}</span>
26 <span class="text-[#6b7280] text-[24rpx] mt-[8rpx] leading-[32rpx]">{{ item.subtitle }}</span> 24 <span class="text-[#6b7280] text-[24rpx] mt-[8rpx] leading-[32rpx]">{{ item.subtitle }}</span>
27 </div> 25 </div>
28 </div> 26 </div>
29 - <RectRight class="text-gray-400" size="16" /> 27 + <IconFont name="RectRight" class="text-gray-400" size="16" />
30 </div> 28 </div>
31 <!-- Divider --> 29 <!-- Divider -->
32 <div v-if="itemIndex < section.items.length - 1" class="w-[626rpx] h-[2rpx] bg-[#e5e7eb] mx-auto mt-[32rpx]"></div> 30 <div v-if="itemIndex < section.items.length - 1" class="w-[626rpx] h-[2rpx] bg-[#e5e7eb] mx-auto mt-[32rpx]"></div>
...@@ -41,85 +39,72 @@ ...@@ -41,85 +39,72 @@
41 </template> 39 </template>
42 40
43 <script setup> 41 <script setup>
44 -import { ref } from 'vue' 42 +import { shallowRef } from 'vue'
45 import { useGo } from '@/hooks/useGo' 43 import { useGo } from '@/hooks/useGo'
46 import TabBar from '@/components/TabBar.vue' 44 import TabBar from '@/components/TabBar.vue'
47 -import { 45 +import NavHeader from '@/components/NavHeader.vue'
48 - Edit, 46 +import IconFont from '@/components/IconFont.vue'
49 - Find,
50 - Order,
51 - Clock,
52 - Checklist,
53 - Check,
54 - Star,
55 - Top,
56 - PlayCircleFill,
57 - RectRight
58 -} from '@nutui/icons-vue-taro'
59 47
60 const go = useGo() 48 const go = useGo()
61 49
62 -const sections = ref([ 50 +const sections = shallowRef([
63 { 51 {
64 title: '入职前', 52 title: '入职前',
65 - bgGradient: 'linear-gradient(90deg, #F3E8FF 0%, #E9D5FF 100%)',
66 items: [ 53 items: [
67 { 54 {
55 + icon: 'Edit',
68 title: '考试报名', 56 title: '考试报名',
69 - subtitle: '资格考试报名入口', 57 + subtitle: '报名参加代理人资格考试'
70 - icon: Edit
71 }, 58 },
72 { 59 {
73 - title: '考试资料及刷题', 60 + icon: 'Find',
74 - subtitle: '历年真题及模拟题库', 61 + title: '面试结果查询',
75 - icon: Find 62 + subtitle: '查看面试状态和结果'
76 }, 63 },
77 { 64 {
78 - title: '签合约锁人规则', 65 + icon: 'Order',
79 - subtitle: '合约条款详解', 66 + title: '入职材料提交',
80 - icon: Order 67 + subtitle: '上传入职所需证件和资料'
81 } 68 }
82 ] 69 ]
83 }, 70 },
84 { 71 {
85 title: '入职中', 72 title: '入职中',
86 - bgGradient: 'linear-gradient(90deg, #F0FDF4 0%, #DCFCE7 100%)',
87 items: [ 73 items: [
88 { 74 {
75 + icon: 'Clock',
89 title: '各个进度时间线表格', 76 title: '各个进度时间线表格',
90 - subtitle: '入职进度跟踪表', 77 + subtitle: '查看入职流程关键节点'
91 - icon: Clock
92 }, 78 },
93 { 79 {
94 - title: '各个财务计划盘及对数', 80 + icon: 'Checklist',
95 - subtitle: '财务计划配置指南', 81 + title: '待办事项清单',
96 - icon: Checklist 82 + subtitle: '你需要完成的任务列表'
97 }, 83 },
98 { 84 {
99 - title: '基本法对比', 85 + icon: 'Check',
100 - subtitle: '公司制度对比分析', 86 + title: '签署合同',
101 - icon: Check 87 + subtitle: '电子合同在线签署'
102 } 88 }
103 ] 89 ]
104 }, 90 },
105 { 91 {
106 title: '入职后', 92 title: '入职后',
107 - bgGradient: 'linear-gradient(90deg, #FFF7ED 0%, #FFEDD5 100%)',
108 items: [ 93 items: [
109 { 94 {
110 - title: '公司拿钱必修课', 95 + icon: 'Star',
111 - subtitle: '薪酬体系培训', 96 + title: '新人培训',
112 - icon: Star 97 + subtitle: '参加新人岗前培训课程'
113 }, 98 },
114 { 99 {
115 - title: '升职流程条件', 100 + icon: 'Top',
116 - subtitle: '晋升通道说明', 101 + title: '业绩目标设定',
117 - icon: Top 102 + subtitle: '制定首月业绩目标'
118 }, 103 },
119 { 104 {
120 - title: '必修课程', 105 + icon: 'PlayCircleFill',
121 - subtitle: '岗位技能课程', 106 + title: '团队介绍',
122 - icon: PlayCircleFill 107 + subtitle: '了解你的团队和主管'
123 } 108 }
124 ] 109 ]
125 } 110 }
......
1 <template> 1 <template>
2 <div class="min-h-screen bg-[#f9fafb] pb-[calc(160rpx+env(safe-area-inset-bottom))]"> 2 <div class="min-h-screen bg-[#f9fafb] pb-[calc(160rpx+env(safe-area-inset-bottom))]">
3 <!-- Navigation Header --> 3 <!-- Navigation Header -->
4 - <div class="relative w-full h-[300rpx] bg-gradient-to-b from-[#1E3A8A] to-[#2563EB] flex items-center justify-center pt-[40rpx]"> 4 + <NavHeader title="签单相关" />
5 - <span class="text-white text-[44rpx] font-normal">签单相关</span>
6 - </div>
7 5
8 <!-- Content List --> 6 <!-- Content List -->
9 <div class="px-[40rpx] mt-[40rpx] relative z-10"> 7 <div class="px-[40rpx] mt-[40rpx] relative z-10">
...@@ -19,14 +17,14 @@ ...@@ -19,14 +17,14 @@
19 <div class="flex items-center justify-between px-[40rpx] mt-[56rpx] cursor-pointer" @tap="handleItemClick(item)"> 17 <div class="flex items-center justify-between px-[40rpx] mt-[56rpx] cursor-pointer" @tap="handleItemClick(item)">
20 <div class="flex items-center"> 18 <div class="flex items-center">
21 <div class="w-[96rpx] h-[96rpx] mr-[32rpx] flex items-center justify-center bg-gray-50 rounded-full"> 19 <div class="w-[96rpx] h-[96rpx] mr-[32rpx] flex items-center justify-center bg-gray-50 rounded-full">
22 - <component :is="item.icon" class="text-blue-600" size="32" /> 20 + <IconFont :name="item.icon" class="text-blue-600" size="32" />
23 </div> 21 </div>
24 <div class="flex flex-col"> 22 <div class="flex flex-col">
25 <span class="text-[#1f2937] text-[28rpx] font-normal leading-[40rpx]">{{ item.title }}</span> 23 <span class="text-[#1f2937] text-[28rpx] font-normal leading-[40rpx]">{{ item.title }}</span>
26 <span class="text-[#6b7280] text-[24rpx] mt-[8rpx] leading-[32rpx]">{{ item.subtitle }}</span> 24 <span class="text-[#6b7280] text-[24rpx] mt-[8rpx] leading-[32rpx]">{{ item.subtitle }}</span>
27 </div> 25 </div>
28 </div> 26 </div>
29 - <RectRight class="text-gray-400" size="16" /> 27 + <IconFont name="RectRight" class="text-gray-400" size="16" />
30 </div> 28 </div>
31 <!-- Divider --> 29 <!-- Divider -->
32 <div v-if="itemIndex < section.items.length - 1" class="w-[626rpx] h-[2rpx] bg-[#e5e7eb] mx-auto mt-[32rpx]"></div> 30 <div v-if="itemIndex < section.items.length - 1" class="w-[626rpx] h-[2rpx] bg-[#e5e7eb] mx-auto mt-[32rpx]"></div>
...@@ -41,109 +39,92 @@ ...@@ -41,109 +39,92 @@
41 </template> 39 </template>
42 40
43 <script setup> 41 <script setup>
44 -import { ref } from 'vue' 42 +import { shallowRef } from 'vue'
45 import { useGo } from '@/hooks/useGo' 43 import { useGo } from '@/hooks/useGo'
46 import TabBar from '@/components/TabBar.vue' 44 import TabBar from '@/components/TabBar.vue'
47 -import { 45 +import NavHeader from '@/components/NavHeader.vue'
48 - Shop, 46 +import IconFont from '@/components/IconFont.vue'
49 - Category,
50 - Check,
51 - Edit,
52 - Checklist,
53 - Cart,
54 - People,
55 - Order,
56 - Clock,
57 - Refresh,
58 - Location,
59 - RectRight
60 -} from '@nutui/icons-vue-taro'
61 47
62 const go = useGo() 48 const go = useGo()
63 49
64 -const sections = ref([ 50 +const sections = shallowRef([
65 { 51 {
66 title: '培训板块', 52 title: '培训板块',
67 - bgGradient: 'linear-gradient(90deg, #F3E8FF 0%, #E9D5FF 100%)',
68 items: [ 53 items: [
69 { 54 {
55 + icon: 'Shop',
70 title: '公司介绍', 56 title: '公司介绍',
71 - subtitle: '企业背景及发展历程', 57 + subtitle: '企业背景及发展历程'
72 - icon: Shop
73 }, 58 },
74 { 59 {
60 + icon: 'Category',
75 title: '产品介绍及更新', 61 title: '产品介绍及更新',
76 - subtitle: '最新产品资料库', 62 + subtitle: '最新产品资料库'
77 - icon: Category
78 } 63 }
79 ] 64 ]
80 }, 65 },
81 { 66 {
82 title: '签单前', 67 title: '签单前',
83 - bgGradient: 'linear-gradient(90deg, #F0FDF4 0%, #DCFCE7 100%)',
84 items: [ 68 items: [
85 { 69 {
70 + icon: 'Check',
86 title: '预核保', 71 title: '预核保',
87 - subtitle: '核保流程指引', 72 + subtitle: '核保流程指引'
88 - icon: Check
89 }, 73 },
90 { 74 {
75 + icon: 'Edit',
91 title: '做计划书', 76 title: '做计划书',
92 - subtitle: '方案设计工具', 77 + subtitle: '方案设计工具'
93 - icon: Edit
94 } 78 }
95 ] 79 ]
96 }, 80 },
97 { 81 {
98 title: '签单中', 82 title: '签单中',
99 - bgGradient: 'linear-gradient(90deg, #FFF7ED 0%, #FFEDD5 100%)',
100 items: [ 83 items: [
101 { 84 {
85 + icon: 'Checklist',
102 title: '信息收集及健康告知模板', 86 title: '信息收集及健康告知模板',
103 - subtitle: '标准表格及注意事项', 87 + subtitle: '标准表格及注意事项'
104 - icon: Checklist
105 }, 88 },
106 { 89 {
90 + icon: 'Cart',
107 title: '缴费方式银行开户', 91 title: '缴费方式银行开户',
108 - subtitle: '支付渠道办理指南', 92 + subtitle: '支付渠道办理指南'
109 - icon: Cart
110 }, 93 },
111 { 94 {
95 + icon: 'People',
112 title: '体检经验', 96 title: '体检经验',
113 - subtitle: '体检流程及常见问题', 97 + subtitle: '体检流程及常见问题'
114 - icon: People
115 } 98 }
116 ] 99 ]
117 }, 100 },
118 { 101 {
119 title: '签单后', 102 title: '签单后',
120 - bgGradient: 'linear-gradient(90deg, #EFF6FF 0%, #DBEAFE 100%)',
121 items: [ 103 items: [
122 { 104 {
105 + icon: 'Order',
123 title: '批单跟进', 106 title: '批单跟进',
124 - subtitle: '保单变更处理流程', 107 + subtitle: '保单变更处理流程'
125 - icon: Order
126 }, 108 },
127 { 109 {
110 + icon: 'Clock',
128 title: '核保/pending', 111 title: '核保/pending',
129 - subtitle: '核保进度查询', 112 + subtitle: '核保进度查询'
130 - icon: Clock
131 }, 113 },
132 { 114 {
115 + icon: 'Refresh',
133 title: '续保', 116 title: '续保',
134 - subtitle: '续期服务指引', 117 + subtitle: '续期服务指引'
135 - icon: Refresh
136 } 118 }
137 ] 119 ]
138 }, 120 },
139 { 121 {
140 title: '售后', 122 title: '售后',
141 - bgGradient: 'linear-gradient(90deg, #F0FDF4 0%, #DCFCE7 100%)',
142 items: [ 123 items: [
143 { 124 {
125 + icon: 'Location',
144 title: '香港医生资源', 126 title: '香港医生资源',
145 - subtitle: '专业医疗机构名录', 127 + subtitle: '专业医疗机构名录'
146 - icon: Location
147 } 128 }
148 ] 129 ]
149 } 130 }
......