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.
- 补充 `src/pages/feedback/index.vue` 中 `NavHeader` 组件的引用
### Added
- 新增 "产品详情" 页面 (`src/pages/product-detail/index`)：
- 还原设计稿 (`docs/design/manulife-V1/产品详情`) 布局与交互
- 使用 Tailwind CSS 实现响应式布局
- 集成 `NavHeader` 和 `TabBar` 组件
- 使用随机图片作为 Banner 占位，使用 NutUI 图标组件替代静态图标
- 注册新页面路由至 `src/app.config.js`
- 新增 "资料列表" 页面 (`src/pages/material-list/index`)：
- 实现基于 Design 的列表 UI，精确还原设计稿 (`docs/design/manulife-V1/资料列表`)
- 集成 `NavHeader` 和 `TabBar` 组件，保持全站导航一致性
......
This diff is collapsed. Click to expand it.
<template>
<div class="page flex-col">
<div class="box_1 flex-col">
<div class="group_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="group_2 flex-row justify-between">
<div class="image-text_1 flex-row justify-between">
<img
class="thumbnail_1"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngcf455e9215a4f7c705d61caac63b2f258566e9e9093e62ab91b71188ae8f0787"
/>
<span class="text-group_1">产品详情</span>
</div>
<img
class="label_1"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng4b49399358768d994666264f4789147f4c3712eee5edee5c0a0388a0b3eea4c2"
/>
</div>
<div class="group_3 flex-col">
<div class="group_4 flex-col">
<div class="text-wrapper_1 flex-col">
<span class="text_2">热卖</span>
</div>
</div>
<span class="text_3">终身寿险尊享版</span>
<div class="group_5 flex-row justify-between">
<div class="text-wrapper_2 flex-col">
<span class="text_4">收益率3.5%</span>
</div>
<div class="text-wrapper_3 flex-col">
<span class="text_5">5年超值</span>
</div>
<div class="text-wrapper_4 flex-col">
<span class="text_6">保证收益万能</span>
</div>
</div>
</div>
<div class="group_6 flex-col">
<div class="grid_1 flex-row">
<div
class="text-group_2 flex-col"
v-for="(item, index) in loopData0"
:key="index"
>
<span class="text_7" v-html="item.lanhutext0"></span>
<span class="text_8" v-html="item.lanhutext1"></span>
</div>
</div>
</div>
<div class="group_7 flex-col">
<span class="text_9">产品特色</span>
<div class="image-text_2 flex-row justify-between">
<img
class="image_2"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngecc2b07c805beacd9caa6d3b372bbf386d1b154c480ce1b759676421a12a7f24"
/>
<span class="text-group_3">身故保险金：赔付100%基本保额</span>
</div>
<div class="image-text_3 flex-row justify-between">
<img
class="image_3"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng6fce43476a53d80cba2198dadcc5201fa57ea7af1e4532712d26ba67fd902bc4"
/>
<span class="text-group_4">全残保险金：赔付100%基本保额</span>
</div>
<div class="image-text_4 flex-row justify-between">
<img
class="image_4"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngc53114f603abaca96913163bcd1e032b2da57abbb22d05b4592a63ad4312e7cd"
/>
<span class="text-group_5">保费豁免：重疾后免交剩余保费</span>
</div>
<div class="image-text_5 flex-row justify-between">
<img
class="image_5"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng3191ba6cf4c57d6731e044695369af60040fa22a438bd918e3d1125c59f67776"
/>
<span class="text-group_6">保单贷款：最高可贷现金价值80%</span>
</div>
</div>
<div class="group_8 flex-col">
<span class="text_10">相关附件</span>
<div class="block_1 flex-row justify-between">
<div class="image-text_6 flex-row justify-between">
<img
class="label_2"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng870bc430c2ddc1d28de894251ff314e0e4dd0e9ab2da4a2e8b0eb9cfbfc11962"
/>
<div class="text-group_7 flex-col">
<span class="text_11">产品条款.pdf</span>
<span class="text_12">2.3MB</span>
</div>
</div>
<img
class="thumbnail_2"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd36b35df4ed347995d6edde2c42aa1a2591397a4dc2e580da5c1cbfa46e9a561"
/>
</div>
<div class="block_2 flex-row justify-between">
<div class="image-text_7 flex-row justify-between">
<img
class="label_3"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng870bc430c2ddc1d28de894251ff314e0e4dd0e9ab2da4a2e8b0eb9cfbfc11962"
/>
<div class="text-group_8 flex-col">
<span class="text_13">投保须知.pdf</span>
<span class="text_14">1.8MB</span>
</div>
</div>
<img
class="thumbnail_3"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd36b35df4ed347995d6edde2c42aa1a2591397a4dc2e580da5c1cbfa46e9a561"
/>
</div>
<div class="block_3 flex-row justify-between">
<div class="image-text_8 flex-row justify-between">
<img
class="label_4"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng870bc430c2ddc1d28de894251ff314e0e4dd0e9ab2da4a2e8b0eb9cfbfc11962"
/>
<div class="text-group_9 flex-col">
<span class="text_15">健康告知.pdf</span>
<span class="text_16">980KB</span>
</div>
</div>
<img
class="thumbnail_4"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd36b35df4ed347995d6edde2c42aa1a2591397a4dc2e580da5c1cbfa46e9a561"
/>
</div>
<div class="block_4 flex-row justify-between">
<div class="image-text_9 flex-row justify-between">
<img
class="label_5"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng870bc430c2ddc1d28de894251ff314e0e4dd0e9ab2da4a2e8b0eb9cfbfc11962"
/>
<div class="text-group_10 flex-col">
<span class="text_17">保险责任说明.pdf</span>
<span class="text_18">1.5MB</span>
</div>
</div>
<img
class="thumbnail_5"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd36b35df4ed347995d6edde2c42aa1a2591397a4dc2e580da5c1cbfa46e9a561"
/>
</div>
</div>
<div class="group_9 flex-col">
<img
class="image_6"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbf3e746af52a38753bd540d5f486761a166161ff3c8f2985aa5e994a36349ea4"
/>
<div class="group_10 flex-row justify-between">
<div class="image-text_10 flex-col">
<img
class="label_6"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPnge1c34aa753793ad1927d03e0a526cbc67283feda10ac5b4442c01c932b1940e3"
/>
<span class="text-group_11">首页</span>
</div>
<div class="image-text_11 flex-col">
<img
class="label_7"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng8447fb4a0a45c6195884415974c636ba50f9e486a89489a3ed9a7749523e3a52"
/>
<span class="text-group_12">AI客服</span>
</div>
<div class="image-text_12 flex-col">
<img
class="label_8"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng9c0498226c2a52625ed5af0366f4b3a8f439148f929afc840e382b2096d8b49d"
/>
<span class="text-group_13">我的</span>
</div>
</div>
</div>
<img
class="image_7"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng830c4568c4d0141e1fa97f7fad1e075e2178ab08e5613734b08eaf46dcdd4207"
/>
</div>
</div>
</template>
<script>
export default {
data() {
return {
loopData0: [
{ lanhutext0: '保险期间', lanhutext1: '终身' },
{ lanhutext0: '缴费期间', lanhutext1: '20年' },
{ lanhutext0: '起保年龄', lanhutext1: '0-60岁' },
{ lanhutext0: '保障额度', lanhutext1: '最高100万' },
],
constants: {},
};
},
methods: {},
};
</script>
<style src="./common.css" />
<style src="./index.css" />
......@@ -15,6 +15,7 @@ const pages = [
'pages/onboarding/index',
'pages/family-office/index',
'pages/knowledge-base/index',
'pages/product-detail/index',
'pages/material-list/index',
'pages/signing/index',
'pages/mine/index',
......
/*
* @Date: 2026-01-30 16:10:01
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-01-30 16:11:38
* @FilePath: /manulife-weapp/src/pages/product-detail/index.config.js
* @Description: 文件描述
*/
export default {
navigationBarTitleText: '产品详情',
enablePullDownRefresh: true,
backgroundColor: '#F9FAFB',
navigationStyle: 'custom'
}
<!--
* @Date: 2026-01-30
* @Description: 产品详情页
-->
<template>
<div class="min-h-screen bg-[#F9FAFB] pb-[calc(160rpx+env(safe-area-inset-bottom))]">
<NavHeader title="产品详情" />
<!-- Banner Image -->
<div class="w-full h-[420rpx] relative">
<img
class="w-full h-full object-cover"
:src="bannerImage"
mode="aspectFill"
/>
<div class="absolute top-[32rpx] right-[32rpx] bg-red-500 text-white text-[24rpx] px-[16rpx] py-[8rpx] rounded-full shadow-sm">
热卖
</div>
</div>
<!-- Product Header -->
<div class="relative mt-[-40rpx] bg-white rounded-t-[40rpx] px-[40rpx] pt-[48rpx] pb-[40rpx] z-10">
<h1 class="text-[#1F2937] text-[44rpx] font-bold mb-[24rpx]">终身寿险尊享版</h1>
<div class="flex flex-wrap gap-[16rpx]">
<div class="px-[16rpx] py-[6rpx] bg-red-50 rounded-[8rpx]">
<span class="text-red-600 text-[24rpx]">收益率3.5%</span>
</div>
<div class="px-[16rpx] py-[6rpx] bg-orange-50 rounded-[8rpx]">
<span class="text-orange-600 text-[24rpx]">5年超值</span>
</div>
<div class="px-[16rpx] py-[6rpx] bg-green-50 rounded-[8rpx]">
<span class="text-green-600 text-[24rpx]">保证收益万能</span>
</div>
</div>
</div>
<!-- Stats Grid -->
<div class="px-[32rpx] mt-[24rpx]">
<div class="grid grid-cols-2 gap-[24rpx]">
<div
v-for="(item, index) in stats"
:key="index"
class="bg-white rounded-[24rpx] p-[32rpx] border border-gray-100"
>
<div class="text-[#6B7280] text-[24rpx] mb-[12rpx]">{{ item.label }}</div>
<div class="text-[#1F2937] text-[30rpx] font-medium">{{ item.value }}</div>
</div>
</div>
</div>
<!-- Product Features -->
<div class="px-[32rpx] mt-[32rpx]">
<div class="bg-white rounded-[32rpx] p-[40rpx]">
<h2 class="text-[#1F2937] text-[32rpx] font-bold mb-[32rpx]">产品特色</h2>
<div class="flex flex-col gap-[32rpx]">
<div v-for="(feature, index) in features" :key="index" class="flex items-start">
<div class="w-[48rpx] h-[48rpx] rounded-full bg-blue-50 flex items-center justify-center mr-[24rpx] flex-shrink-0">
<IconFont name="Check" size="14" color="#2563EB" />
</div>
<div class="flex-1">
<div class="text-[#1F2937] text-[28rpx] font-medium leading-[1.4]">{{ feature.title }}</div>
<div class="text-[#6B7280] text-[24rpx] mt-[8rpx] leading-[1.4]">{{ feature.desc }}</div>
</div>
</div>
</div>
</div>
</div>
<!-- Attachments -->
<div class="px-[32rpx] mt-[32rpx]">
<div class="bg-white rounded-[32rpx] p-[40rpx]">
<h2 class="text-[#1F2937] text-[32rpx] font-bold mb-[32rpx]">相关附件</h2>
<div class="flex flex-col gap-[24rpx]">
<div
v-for="(file, index) in files"
:key="index"
class="flex items-center justify-between p-[24rpx] bg-gray-50 rounded-[16rpx]"
>
<div class="flex items-center flex-1 mr-[24rpx]">
<IconFont name="Order" size="24" color="#EF4444" customClass="mr-[24rpx]" />
<div class="flex flex-col">
<span class="text-[#1F2937] text-[28rpx] font-medium mb-[4rpx] line-clamp-1">{{ file.name }}</span>
<span class="text-[#9CA3AF] text-[24rpx]">{{ file.size }}</span>
</div>
</div>
<IconFont name="Download" size="20" color="#9CA3AF" />
</div>
</div>
</div>
</div>
<!-- TabBar -->
<TabBar />
</div>
</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'
// Random banner image
const bannerImage = `https://picsum.photos/seed/${Math.floor(Math.random() * 1000)}/750/420`
const stats = ref([
{ label: '投保年龄', value: '30天-70周岁' },
{ label: '保障期限', value: '终身' },
{ label: '缴费方式', value: '3/5/10年交' },
{ label: '起投金额', value: '10000元起' }
])
const features = ref([
{ title: '身故保险金', desc: '赔付100%基本保额，给家人留爱不留债' },
{ title: '全残保险金', desc: '赔付100%基本保额，生活有保障' },
{ title: '保费豁免', desc: '确诊重疾后免交剩余保费，保障继续有效' },
{ title: '保单贷款', desc: '最高可贷现金价值80%，资金周转灵活' }
])
const files = ref([
{ name: '产品条款.pdf', size: '2.3MB' },
{ name: '投保须知.pdf', size: '1.8MB' },
{ name: '健康告知.pdf', size: '980KB' },
{ name: '保险责任说明.pdf', size: '1.5MB' }
])
</script>