index.vue
3.89 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<template>
<div class="min-h-screen bg-[#f9fafb] pb-[calc(160rpx+env(safe-area-inset-bottom))]">
<!-- Navigation Header -->
<NavHeader title="签单相关" />
<!-- Content List -->
<div class="px-[40rpx] mt-[40rpx] relative z-10">
<div v-for="(section, index) in sections" :key="index" class="bg-white rounded-[32rpx] mb-[32rpx] pb-[56rpx] overflow-hidden shadow-sm">
<!-- Section Header -->
<div class="px-[40rpx] py-[32rpx]" :style="{ background: section.bgGradient }">
<span class="text-[#1f2937] text-[32rpx] font-normal">{{ section.title }}</span>
</div>
<!-- Section Items -->
<div class="flex flex-col">
<div v-for="(item, itemIndex) in section.items" :key="itemIndex" class="flex flex-col">
<div class="flex items-center justify-between px-[40rpx] mt-[56rpx] cursor-pointer" @tap="handleItemClick(item)">
<div class="flex items-center">
<div class="w-[96rpx] h-[96rpx] mr-[32rpx] flex items-center justify-center bg-gray-50 rounded-full">
<IconFont :name="item.icon" class="text-blue-600" size="32" />
</div>
<div class="flex flex-col">
<span class="text-[#1f2937] text-[28rpx] font-normal leading-[40rpx]">{{ item.title }}</span>
<span class="text-[#6b7280] text-[24rpx] mt-[8rpx] leading-[32rpx]">{{ item.subtitle }}</span>
</div>
</div>
<IconFont name="RectRight" class="text-gray-400" size="16" />
</div>
<!-- Divider -->
<div v-if="itemIndex < section.items.length - 1" class="w-[626rpx] h-[2rpx] bg-[#e5e7eb] mx-auto mt-[32rpx]"></div>
</div>
</div>
</div>
</div>
<!-- Tab Bar -->
<TabBar current="me" />
</div>
</template>
<script setup>
import { shallowRef } from 'vue'
import { useGo } from '@/hooks/useGo'
import TabBar from '@/components/TabBar.vue'
import NavHeader from '@/components/NavHeader.vue'
import IconFont from '@/components/IconFont.vue'
const go = useGo()
const sections = shallowRef([
{
title: '培训板块',
items: [
{
icon: 'Shop',
title: '公司介绍',
subtitle: '企业背景及发展历程'
},
{
icon: 'Category',
title: '产品介绍及更新',
subtitle: '最新产品资料库'
}
]
},
{
title: '签单前',
items: [
{
icon: 'Check',
title: '预核保',
subtitle: '核保流程指引'
},
{
icon: 'Edit',
title: '做计划书',
subtitle: '方案设计工具'
}
]
},
{
title: '签单中',
items: [
{
icon: 'Checklist',
title: '信息收集及健康告知模板',
subtitle: '标准表格及注意事项'
},
{
icon: 'Cart',
title: '缴费方式银行开户',
subtitle: '支付渠道办理指南'
},
{
icon: 'People',
title: '体检经验',
subtitle: '体检流程及常见问题'
}
]
},
{
title: '签单后',
items: [
{
icon: 'Order',
title: '批单跟进',
subtitle: '保单变更处理流程'
},
{
icon: 'Clock',
title: '核保/pending',
subtitle: '核保进度查询'
},
{
icon: 'Refresh',
title: '续保',
subtitle: '续期服务指引'
}
]
},
{
title: '售后',
items: [
{
icon: 'Location',
title: '香港医生资源',
subtitle: '专业医疗机构名录'
}
]
}
])
/**
* Handle item click
* @param {Object} item - Clicked item data
*/
const handleItemClick = (item) => {
console.log('Clicked:', item.title)
// TODO: Navigate to respective page
}
</script>
<script>
export default {
name: 'SigningIndex'
}
</script>