Hooke / manulife-weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
b800ad6e 1 parent 2011b808

feat: 新增产品详情页面 

新增产品详情页面，包含 Banner、产品信息、特色、附件等模块
使用 Tailwind CSS 实现响应式布局，集成 NavHeader 和 TabBar 组件
注册页面路由至 app.config.js 并更新 CHANGELOG 文档
Expand all
Inline Side-by-side
Showing 7 changed files with 374 additions and 0 deletions
...@@ -41,6 +41,13 @@ All notable changes to this project will be documented in this file. ...@@ -41,6 +41,13 @@ All notable changes to this project will be documented in this file.
41 - 补充 `src/pages/feedback/index.vue` 中 `NavHeader` 组件的引用 41 - 补充 `src/pages/feedback/index.vue` 中 `NavHeader` 组件的引用
42 42
43 ### Added 43 ### Added
44 +- 新增 "产品详情" 页面 (`src/pages/product-detail/index`)：
45 + - 还原设计稿 (`docs/design/manulife-V1/产品详情`) 布局与交互
46 + - 使用 Tailwind CSS 实现响应式布局
47 + - 集成 `NavHeader` 和 `TabBar` 组件
48 + - 使用随机图片作为 Banner 占位，使用 NutUI 图标组件替代静态图标
49 + - 注册新页面路由至 `src/app.config.js`
50 +
44 - 新增 "资料列表" 页面 (`src/pages/material-list/index`)： 51 - 新增 "资料列表" 页面 (`src/pages/material-list/index`)：
45 - 实现基于 Design 的列表 UI，精确还原设计稿 (`docs/design/manulife-V1/资料列表`) 52 - 实现基于 Design 的列表 UI，精确还原设计稿 (`docs/design/manulife-V1/资料列表`)
46 - 集成 `NavHeader` 和 `TabBar` 组件，保持全站导航一致性 53 - 集成 `NavHeader` 和 `TabBar` 组件，保持全站导航一致性
......
This diff is collapsed. Click to expand it.
1 +<template>
2 + <div class="page flex-col">
3 + <div class="box_1 flex-col">
4 + <div class="group_1 flex-row justify-between">
5 + <span class="text_1">9:41</span>
6 + <img
7 + class="image_1"
8 + referrerpolicy="no-referrer"
9 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng413f9d678a24a9b746fdc981fa579b56b2cbd98eddd024ab1279ef48ae59291e"
10 + />
11 + </div>
12 + <div class="group_2 flex-row justify-between">
13 + <div class="image-text_1 flex-row justify-between">
14 + <img
15 + class="thumbnail_1"
16 + referrerpolicy="no-referrer"
17 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngcf455e9215a4f7c705d61caac63b2f258566e9e9093e62ab91b71188ae8f0787"
18 + />
19 + <span class="text-group_1">产品详情</span>
20 + </div>
21 + <img
22 + class="label_1"
23 + referrerpolicy="no-referrer"
24 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng4b49399358768d994666264f4789147f4c3712eee5edee5c0a0388a0b3eea4c2"
25 + />
26 + </div>
27 + <div class="group_3 flex-col">
28 + <div class="group_4 flex-col">
29 + <div class="text-wrapper_1 flex-col">
30 + <span class="text_2">热卖</span>
31 + </div>
32 + </div>
33 + <span class="text_3">终身寿险尊享版</span>
34 + <div class="group_5 flex-row justify-between">
35 + <div class="text-wrapper_2 flex-col">
36 + <span class="text_4">收益率3.5%</span>
37 + </div>
38 + <div class="text-wrapper_3 flex-col">
39 + <span class="text_5">5年超值</span>
40 + </div>
41 + <div class="text-wrapper_4 flex-col">
42 + <span class="text_6">保证收益万能</span>
43 + </div>
44 + </div>
45 + </div>
46 + <div class="group_6 flex-col">
47 + <div class="grid_1 flex-row">
48 + <div
49 + class="text-group_2 flex-col"
50 + v-for="(item, index) in loopData0"
51 + :key="index"
52 + >
53 + <span class="text_7" v-html="item.lanhutext0"></span>
54 + <span class="text_8" v-html="item.lanhutext1"></span>
55 + </div>
56 + </div>
57 + </div>
58 + <div class="group_7 flex-col">
59 + <span class="text_9">产品特色</span>
60 + <div class="image-text_2 flex-row justify-between">
61 + <img
62 + class="image_2"
63 + referrerpolicy="no-referrer"
64 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngecc2b07c805beacd9caa6d3b372bbf386d1b154c480ce1b759676421a12a7f24"
65 + />
66 + <span class="text-group_3">身故保险金：赔付100%基本保额</span>
67 + </div>
68 + <div class="image-text_3 flex-row justify-between">
69 + <img
70 + class="image_3"
71 + referrerpolicy="no-referrer"
72 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng6fce43476a53d80cba2198dadcc5201fa57ea7af1e4532712d26ba67fd902bc4"
73 + />
74 + <span class="text-group_4">全残保险金：赔付100%基本保额</span>
75 + </div>
76 + <div class="image-text_4 flex-row justify-between">
77 + <img
78 + class="image_4"
79 + referrerpolicy="no-referrer"
80 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngc53114f603abaca96913163bcd1e032b2da57abbb22d05b4592a63ad4312e7cd"
81 + />
82 + <span class="text-group_5">保费豁免：重疾后免交剩余保费</span>
83 + </div>
84 + <div class="image-text_5 flex-row justify-between">
85 + <img
86 + class="image_5"
87 + referrerpolicy="no-referrer"
88 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng3191ba6cf4c57d6731e044695369af60040fa22a438bd918e3d1125c59f67776"
89 + />
90 + <span class="text-group_6">保单贷款：最高可贷现金价值80%</span>
91 + </div>
92 + </div>
93 + <div class="group_8 flex-col">
94 + <span class="text_10">相关附件</span>
95 + <div class="block_1 flex-row justify-between">
96 + <div class="image-text_6 flex-row justify-between">
97 + <img
98 + class="label_2"
99 + referrerpolicy="no-referrer"
100 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng870bc430c2ddc1d28de894251ff314e0e4dd0e9ab2da4a2e8b0eb9cfbfc11962"
101 + />
102 + <div class="text-group_7 flex-col">
103 + <span class="text_11">产品条款.pdf</span>
104 + <span class="text_12">2.3MB</span>
105 + </div>
106 + </div>
107 + <img
108 + class="thumbnail_2"
109 + referrerpolicy="no-referrer"
110 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd36b35df4ed347995d6edde2c42aa1a2591397a4dc2e580da5c1cbfa46e9a561"
111 + />
112 + </div>
113 + <div class="block_2 flex-row justify-between">
114 + <div class="image-text_7 flex-row justify-between">
115 + <img
116 + class="label_3"
117 + referrerpolicy="no-referrer"
118 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng870bc430c2ddc1d28de894251ff314e0e4dd0e9ab2da4a2e8b0eb9cfbfc11962"
119 + />
120 + <div class="text-group_8 flex-col">
121 + <span class="text_13">投保须知.pdf</span>
122 + <span class="text_14">1.8MB</span>
123 + </div>
124 + </div>
125 + <img
126 + class="thumbnail_3"
127 + referrerpolicy="no-referrer"
128 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd36b35df4ed347995d6edde2c42aa1a2591397a4dc2e580da5c1cbfa46e9a561"
129 + />
130 + </div>
131 + <div class="block_3 flex-row justify-between">
132 + <div class="image-text_8 flex-row justify-between">
133 + <img
134 + class="label_4"
135 + referrerpolicy="no-referrer"
136 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng870bc430c2ddc1d28de894251ff314e0e4dd0e9ab2da4a2e8b0eb9cfbfc11962"
137 + />
138 + <div class="text-group_9 flex-col">
139 + <span class="text_15">健康告知.pdf</span>
140 + <span class="text_16">980KB</span>
141 + </div>
142 + </div>
143 + <img
144 + class="thumbnail_4"
145 + referrerpolicy="no-referrer"
146 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd36b35df4ed347995d6edde2c42aa1a2591397a4dc2e580da5c1cbfa46e9a561"
147 + />
148 + </div>
149 + <div class="block_4 flex-row justify-between">
150 + <div class="image-text_9 flex-row justify-between">
151 + <img
152 + class="label_5"
153 + referrerpolicy="no-referrer"
154 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng870bc430c2ddc1d28de894251ff314e0e4dd0e9ab2da4a2e8b0eb9cfbfc11962"
155 + />
156 + <div class="text-group_10 flex-col">
157 + <span class="text_17">保险责任说明.pdf</span>
158 + <span class="text_18">1.5MB</span>
159 + </div>
160 + </div>
161 + <img
162 + class="thumbnail_5"
163 + referrerpolicy="no-referrer"
164 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd36b35df4ed347995d6edde2c42aa1a2591397a4dc2e580da5c1cbfa46e9a561"
165 + />
166 + </div>
167 + </div>
168 + <div class="group_9 flex-col">
169 + <img
170 + class="image_6"
171 + referrerpolicy="no-referrer"
172 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbf3e746af52a38753bd540d5f486761a166161ff3c8f2985aa5e994a36349ea4"
173 + />
174 + <div class="group_10 flex-row justify-between">
175 + <div class="image-text_10 flex-col">
176 + <img
177 + class="label_6"
178 + referrerpolicy="no-referrer"
179 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPnge1c34aa753793ad1927d03e0a526cbc67283feda10ac5b4442c01c932b1940e3"
180 + />
181 + <span class="text-group_11">首页</span>
182 + </div>
183 + <div class="image-text_11 flex-col">
184 + <img
185 + class="label_7"
186 + referrerpolicy="no-referrer"
187 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng8447fb4a0a45c6195884415974c636ba50f9e486a89489a3ed9a7749523e3a52"
188 + />
189 + <span class="text-group_12">AI客服</span>
190 + </div>
191 + <div class="image-text_12 flex-col">
192 + <img
193 + class="label_8"
194 + referrerpolicy="no-referrer"
195 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng9c0498226c2a52625ed5af0366f4b3a8f439148f929afc840e382b2096d8b49d"
196 + />
197 + <span class="text-group_13">我的</span>
198 + </div>
199 + </div>
200 + </div>
201 + <img
202 + class="image_7"
203 + referrerpolicy="no-referrer"
204 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng830c4568c4d0141e1fa97f7fad1e075e2178ab08e5613734b08eaf46dcdd4207"
205 + />
206 + </div>
207 + </div>
208 +</template>
209 +<script>
210 +export default {
211 + data() {
212 + return {
213 + loopData0: [
214 + { lanhutext0: '保险期间', lanhutext1: '终身' },
215 + { lanhutext0: '缴费期间', lanhutext1: '20年' },
216 + { lanhutext0: '起保年龄', lanhutext1: '0-60岁' },
217 + { lanhutext0: '保障额度', lanhutext1: '最高100万' },
218 + ],
219 + constants: {},
220 + };
221 + },
222 + methods: {},
223 +};
224 +</script>
225 +<style src="./common.css" />
226 +<style src="./index.css" />
...@@ -15,6 +15,7 @@ const pages = [ ...@@ -15,6 +15,7 @@ const pages = [
15 'pages/onboarding/index', 15 'pages/onboarding/index',
16 'pages/family-office/index', 16 'pages/family-office/index',
17 'pages/knowledge-base/index', 17 'pages/knowledge-base/index',
18 + 'pages/product-detail/index',
18 'pages/material-list/index', 19 'pages/material-list/index',
19 'pages/signing/index', 20 'pages/signing/index',
20 'pages/mine/index', 21 'pages/mine/index',
......
1 +/*
2 + * @Date: 2026-01-30 16:10:01
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2026-01-30 16:11:38
5 + * @FilePath: /manulife-weapp/src/pages/product-detail/index.config.js
6 + * @Description: 文件描述
7 + */
8 +export default {
9 + navigationBarTitleText: '产品详情',
10 + enablePullDownRefresh: true,
11 + backgroundColor: '#F9FAFB',
12 + navigationStyle: 'custom'
13 +}
1 +<!--
2 + * @Date: 2026-01-30
3 + * @Description: 产品详情页
4 +-->
5 +<template>
6 + <div class="min-h-screen bg-[#F9FAFB] pb-[calc(160rpx+env(safe-area-inset-bottom))]">
7 + <NavHeader title="产品详情" />
8 +
9 + <!-- Banner Image -->
10 + <div class="w-full h-[420rpx] relative">
11 + <img
12 + class="w-full h-full object-cover"
13 + :src="bannerImage"
14 + mode="aspectFill"
15 + />
16 + <div class="absolute top-[32rpx] right-[32rpx] bg-red-500 text-white text-[24rpx] px-[16rpx] py-[8rpx] rounded-full shadow-sm">
17 + 热卖
18 + </div>
19 + </div>
20 +
21 + <!-- Product Header -->
22 + <div class="relative mt-[-40rpx] bg-white rounded-t-[40rpx] px-[40rpx] pt-[48rpx] pb-[40rpx] z-10">
23 + <h1 class="text-[#1F2937] text-[44rpx] font-bold mb-[24rpx]">终身寿险尊享版</h1>
24 +
25 + <div class="flex flex-wrap gap-[16rpx]">
26 + <div class="px-[16rpx] py-[6rpx] bg-red-50 rounded-[8rpx]">
27 + <span class="text-red-600 text-[24rpx]">收益率3.5%</span>
28 + </div>
29 + <div class="px-[16rpx] py-[6rpx] bg-orange-50 rounded-[8rpx]">
30 + <span class="text-orange-600 text-[24rpx]">5年超值</span>
31 + </div>
32 + <div class="px-[16rpx] py-[6rpx] bg-green-50 rounded-[8rpx]">
33 + <span class="text-green-600 text-[24rpx]">保证收益万能</span>
34 + </div>
35 + </div>
36 + </div>
37 +
38 + <!-- Stats Grid -->
39 + <div class="px-[32rpx] mt-[24rpx]">
40 + <div class="grid grid-cols-2 gap-[24rpx]">
41 + <div
42 + v-for="(item, index) in stats"
43 + :key="index"
44 + class="bg-white rounded-[24rpx] p-[32rpx] border border-gray-100"
45 + >
46 + <div class="text-[#6B7280] text-[24rpx] mb-[12rpx]">{{ item.label }}</div>
47 + <div class="text-[#1F2937] text-[30rpx] font-medium">{{ item.value }}</div>
48 + </div>
49 + </div>
50 + </div>
51 +
52 + <!-- Product Features -->
53 + <div class="px-[32rpx] mt-[32rpx]">
54 + <div class="bg-white rounded-[32rpx] p-[40rpx]">
55 + <h2 class="text-[#1F2937] text-[32rpx] font-bold mb-[32rpx]">产品特色</h2>
56 + <div class="flex flex-col gap-[32rpx]">
57 + <div v-for="(feature, index) in features" :key="index" class="flex items-start">
58 + <div class="w-[48rpx] h-[48rpx] rounded-full bg-blue-50 flex items-center justify-center mr-[24rpx] flex-shrink-0">
59 + <IconFont name="Check" size="14" color="#2563EB" />
60 + </div>
61 + <div class="flex-1">
62 + <div class="text-[#1F2937] text-[28rpx] font-medium leading-[1.4]">{{ feature.title }}</div>
63 + <div class="text-[#6B7280] text-[24rpx] mt-[8rpx] leading-[1.4]">{{ feature.desc }}</div>
64 + </div>
65 + </div>
66 + </div>
67 + </div>
68 + </div>
69 +
70 + <!-- Attachments -->
71 + <div class="px-[32rpx] mt-[32rpx]">
72 + <div class="bg-white rounded-[32rpx] p-[40rpx]">
73 + <h2 class="text-[#1F2937] text-[32rpx] font-bold mb-[32rpx]">相关附件</h2>
74 + <div class="flex flex-col gap-[24rpx]">
75 + <div
76 + v-for="(file, index) in files"
77 + :key="index"
78 + class="flex items-center justify-between p-[24rpx] bg-gray-50 rounded-[16rpx]"
79 + >
80 + <div class="flex items-center flex-1 mr-[24rpx]">
81 + <IconFont name="Order" size="24" color="#EF4444" customClass="mr-[24rpx]" />
82 + <div class="flex flex-col">
83 + <span class="text-[#1F2937] text-[28rpx] font-medium mb-[4rpx] line-clamp-1">{{ file.name }}</span>
84 + <span class="text-[#9CA3AF] text-[24rpx]">{{ file.size }}</span>
85 + </div>
86 + </div>
87 + <IconFont name="Download" size="20" color="#9CA3AF" />
88 + </div>
89 + </div>
90 + </div>
91 + </div>
92 +
93 + <!-- TabBar -->
94 + <TabBar />
95 + </div>
96 +</template>
97 +
98 +<script setup>
99 +import { ref } from 'vue'
100 +import NavHeader from '@/components/NavHeader.vue'
101 +import TabBar from '@/components/TabBar.vue'
102 +import IconFont from '@/components/IconFont.vue'
103 +
104 +// Random banner image
105 +const bannerImage = `https://picsum.photos/seed/${Math.floor(Math.random() * 1000)}/750/420`
106 +
107 +const stats = ref([
108 + { label: '投保年龄', value: '30天-70周岁' },
109 + { label: '保障期限', value: '终身' },
110 + { label: '缴费方式', value: '3/5/10年交' },
111 + { label: '起投金额', value: '10000元起' }
112 +])
113 +
114 +const features = ref([
115 + { title: '身故保险金', desc: '赔付100%基本保额，给家人留爱不留债' },
116 + { title: '全残保险金', desc: '赔付100%基本保额，生活有保障' },
117 + { title: '保费豁免', desc: '确诊重疾后免交剩余保费，保障继续有效' },
118 + { title: '保单贷款', desc: '最高可贷现金价值80%，资金周转灵活' }
119 +])
120 +
121 +const files = ref([
122 + { name: '产品条款.pdf', size: '2.3MB' },
123 + { name: '投保须知.pdf', size: '1.8MB' },
124 + { name: '健康告知.pdf', size: '980KB' },
125 + { name: '保险责任说明.pdf', size: '1.5MB' }
126 +])
127 +</script>