Hooke / manulife-weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
93ab3e37 1 parent 60cf8b29

feat(plan): 集成录入计划书方案B并扩展弹窗组件 

新增方案B内容组件，包含币种、计划、性别、年龄等字段，并还原设计稿布局与交互。
修改首页，将热卖产品的"计划书"按钮点击事件改为弹出录入界面，实现多方案演示。
扩展组件类型声明，注册新增组件以供使用。
Inline Side-by-side
Showing 6 changed files with 536 additions and 2 deletions
......@@ -13,6 +13,8 @@ declare module 'vue' {
NavHeader: typeof import('./src/components/NavHeader.vue')['default']
NutAvatar: typeof import('@nutui/nutui-taro')['Avatar']
NutButton: typeof import('@nutui/nutui-taro')['Button']
NutInput: typeof import('@nutui/nutui-taro')['Input']
NutPicker: typeof import('@nutui/nutui-taro')['Picker']
NutPopup: typeof import('@nutui/nutui-taro')['Popup']
NutSearchbar: typeof import('@nutui/nutui-taro')['Searchbar']
NutTabPane: typeof import('@nutui/nutui-taro')['TabPane']
......@@ -22,11 +24,14 @@ declare module 'vue' {
OfficeViewer: typeof import('./src/components/OfficeViewer.vue')['default']
PdfPreview: typeof import('./src/components/PdfPreview.vue')['default']
Picker: typeof import('./src/components/time-picker-data/picker.vue')['default']
PlanPopup: typeof import('./src/components/PlanPopup/index.vue')['default']
PosterBuilder: typeof import('./src/components/PosterBuilder/index.vue')['default']
QrCode: typeof import('./src/components/qrCode.vue')['default']
QrCodeSearch: typeof import('./src/components/qrCodeSearch.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
SchemeA: typeof import('./src/components/PlanSchemes/SchemeA.vue')['default']
SchemeB: typeof import('./src/components/PlanSchemes/SchemeB.vue')['default']
SectionCard: typeof import('./src/components/SectionCard.vue')['default']
SectionItem: typeof import('./src/components/SectionItem.vue')['default']
TabBar: typeof import('./src/components/TabBar.vue')['default']
......
## [2026-01-31] - 集成录入计划书方案B
### 新增
- 新增录入计划书方案B内容组件 (`src/components/PlanSchemes/SchemeB.vue`)
- 还原设计稿 (`docs/design/manulife-V1/录入计划书/方案B`) 布局与交互
- 包含币种、计划、性别、年龄、保险期间、交费期间、保费等字段
### 变更
- 修改首页 (`src/pages/index/index.vue`)
- 引入 `PlanPopup`, `SchemeA`, `SchemeB` 组件
- 将热卖产品的"计划书"按钮点击事件改为弹出录入界面
- 第一个产品对应方案A，第二个产品对应方案B，实现多方案演示
---
**详细信息**：
- **新增文件**: `src/components/PlanSchemes/SchemeB.vue`
- **修改文件**: `src/pages/index/index.vue`
- **技术栈**: Vue 3, Tailwind CSS, NutUI
## [2026-01-31] - 新增录入计划书功能
### 新增
- 新增录入计划书弹窗容器组件 (`src/components/PlanPopup`)
- 使用 `nut-popup` 实现底部弹出的 90% 高度弹窗
- 支持 `slot` 插入不同内容，具备良好的扩展性
- 新增录入计划书方案A内容组件 (`src/components/PlanSchemes/SchemeA.vue`)
- 还原设计稿 (`docs/design/manulife-V1/录入计划书/方案A`) 布局与交互
- 使用 Tailwind CSS 和 NutUI 组件 (`nut-input`, `nut-picker`, `nut-button` 等) 实现
- 包含完整的表单逻辑：姓名、性别、年龄、行业、年收入、家庭结构、保险需求、期望收益率
- 使用图标和交互式选择器提升用户体验
---
**详细信息**：
- **新增文件**: `src/components/PlanPopup/index.vue`, `src/components/PlanSchemes/SchemeA.vue`
- **技术栈**: Vue 3, Tailwind CSS, NutUI
- **测试状态**: 已通过
- **备注**:
- 为后续新增其他方案预留了目录结构 (`src/components/PlanSchemes/`)
## [2026-01-31] - 重构文件操作逻辑，消除代码重复
### 重构
......
<!--
* @Date: 2026-01-31 12:49:11
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-01-31 12:50:32
* @FilePath: /manulife-weapp/src/components/PlanPopup/index.vue
* @Description: 文件描述
-->
<template>
<nut-popup :visible="visible" position="bottom" round :style="{ height: '90%' }"
@update:visible="emit('update:visible', $event)" :close-on-click-overlay="true">
<div class="h-full flex flex-col bg-white overflow-hidden rounded-t-2xl">
<slot></slot>
</div>
</nut-popup>
</template>
<script setup>
/**
* @description 录入计划书弹窗容器组件
* @param {boolean} visible - 控制弹窗显示隐藏
* @emits update:visible - 更新 visible 状态
*/
import { defineProps, defineEmits } from 'vue';
const props = defineProps({
visible: {
type: Boolean,
default: false,
},
});
const emit = defineEmits(['update:visible']);
</script>
<style lang="less" scoped>
:deep(.nut-popup) {
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}
</style>
<template>
<div class="flex flex-col h-full bg-white">
<!-- Header -->
<div class="flex justify-between items-center px-6 py-6 border-b border-gray-100">
<span class="text-lg font-normal text-gray-800">申请计划书</span>
<img
class="w-6 h-6"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng9edea6fd27cf6cb2ff57c90a0834dcda1f86b6072ce07f5e7e07069c2d3b3e9e"
@click="close"
/>
</div>
<!-- Scrollable Content -->
<div class="flex-1 overflow-y-auto px-6 py-4">
<!-- 客户姓名 -->
<div class="text-sm text-gray-700 mb-2">客户姓名</div>
<nut-input
v-model="form.name"
placeholder="请输入客户姓名"
class="!border !border-gray-200 !rounded-lg !px-3 !py-2 mb-4"
:border="false"
/>
<!-- 性别 -->
<div class="text-sm text-gray-700 mb-2">性别</div>
<div class="flex items-center mb-4">
<div
class="flex items-center mr-8 cursor-pointer"
@click="form.gender = 'male'"
>
<img
class="w-5 h-5 mr-2"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngaa89ac8577908dfb2901e1067741dcdc9a5b58739da04a5243e45c296275f5ef"
/>
<span :class="form.gender === 'male' ? 'text-blue-600 font-bold' : 'text-gray-800'">男</span>
</div>
<div
class="flex items-center cursor-pointer"
@click="form.gender = 'female'"
>
<img
class="w-5 h-5 mr-2"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng86258dc38e0dde555b09ba68a94fb042ce0172628791dc178dd1a7c0c89a824f"
/>
<span :class="form.gender === 'female' ? 'text-blue-600 font-bold' : 'text-gray-800'">女</span>
</div>
</div>
<!-- 年龄 -->
<div class="text-sm text-gray-700 mb-2">年龄</div>
<nut-input
v-model="form.age"
type="digit"
placeholder="请输入年龄"
class="!border !border-gray-200 !rounded-lg !px-3 !py-2 mb-4"
:border="false"
/>
<!-- 行业 -->
<div class="text-sm text-gray-700 mb-2">行业</div>
<div
class="flex justify-between items-center p-3 border border-gray-200 rounded-lg mb-4 bg-white"
@click="showIndustryPicker = true"
>
<span :class="form.industry ? 'text-gray-900' : 'text-gray-400'" class="text-sm">
{{ form.industry || '请选择职业' }}
</span>
<img
class="w-3.5 h-3.5"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngcf768ccd4a7e2a9d761be1bbd425d7c09e15f44c66570d21e5e9121448ccada5"
/>
</div>
<!-- 年收入区间 -->
<div class="text-sm text-gray-700 mb-2">年收入区间</div>
<div class="relative mb-4">
<nut-input
v-model="form.income"
type="digit"
placeholder="请输入年收入"
class="!border !border-gray-200 !rounded-lg !px-3 !py-2 !pr-10"
:border="false"
/>
<span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 text-sm">万元</span>
</div>
<!-- 家庭结构 -->
<div class="text-sm text-gray-700 mb-2">家庭结构</div>
<div class="flex flex-wrap gap-4 mb-4">
<div
v-for="item in familyOptions"
:key="item.value"
class="flex items-center cursor-pointer min-w-[60px]"
@click="toggleSelection('family', item.value)"
>
<img :src="item.icon" class="w-5 h-5 mr-2" />
<span :class="form.family.includes(item.value) ? 'text-blue-600 font-bold' : 'text-gray-800'" class="text-sm">
{{ item.label }}
</span>
</div>
</div>
<!-- 保险需求 -->
<div class="text-sm text-gray-700 mb-2">保险需求</div>
<div class="flex flex-wrap gap-4 mb-4">
<div
v-for="item in insuranceOptions"
:key="item.value"
class="flex items-center cursor-pointer min-w-[85px]"
@click="toggleSelection('insurance', item.value)"
>
<img :src="item.icon" class="w-5 h-5 mr-2" />
<span :class="form.insurance.includes(item.value) ? 'text-blue-600 font-bold' : 'text-gray-800'" class="text-sm">
{{ item.label }}
</span>
</div>
</div>
<!-- 期望收益率 -->
<div class="text-sm text-gray-700 mb-2">期望收益率</div>
<div class="relative mb-8">
<nut-input
v-model="form.returnRate"
type="digit"
placeholder="请输入期望收益率"
class="!border !border-gray-200 !rounded-lg !px-3 !py-2 !pr-10"
:border="false"
/>
<span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 text-sm">%</span>
</div>
</div>
<!-- Footer Buttons -->
<div class="p-6 pt-2 pb-8 flex justify-between gap-4 border-t border-gray-100 bg-white">
<div
class="flex-1 py-3 text-center border border-blue-600 text-blue-600 rounded-lg text-base"
@click="close"
>
取消
</div>
<div
class="flex-1 py-3 text-center bg-blue-600 text-white rounded-lg text-base"
@click="submit"
>
提交申请
</div>
</div>
<!-- Industry Picker -->
<nut-popup position="bottom" v-model:visible="showIndustryPicker">
<nut-picker
:columns="industryColumns"
title="选择行业"
@confirm="confirmIndustry"
@cancel="showIndustryPicker = false"
/>
</nut-popup>
</div>
</template>
<script setup>
/**
* @description 录入计划书 - 方案A 内容组件
* @emits close - 关闭弹窗事件
* @emits submit - 提交事件，携带表单数据
*/
import { ref, reactive } from 'vue';
const emit = defineEmits(['close', 'submit']);
const form = reactive({
name: '',
gender: '', // 'male' | 'female'
age: '',
industry: '',
income: '',
family: [],
insurance: [],
returnRate: '',
});
const showIndustryPicker = ref(false);
const industryColumns = [
{ text: 'IT/互联网', value: 'it' },
{ text: '金融', value: 'finance' },
{ text: '教育', value: 'education' },
{ text: '医疗', value: 'medical' },
{ text: '其他', value: 'other' },
];
const familyOptions = [
{ label: '配偶', value: 'spouse', icon: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng78cf3ef069859580d9e4f17fc5095d6fbf460f1437ac3deaa43ab0a5a71a775e' },
{ label: '子女', value: 'children', icon: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng845af3ba96be197313380a56d1607660c93f44687cb6e966dbf28c9d51142dd9' },
{ label: '父母', value: 'parents', icon: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng845af3ba96be197313380a56d1607660c93f44687cb6e966dbf28c9d51142dd9' }, // Using same icon as placeholder from design if needed, or check if unique one exists. Design uses same for parents/others in reference code snippet (lines 70, 78) but distinct in variable name logic? Actually design uses specific URLs. I copied from reference.
{ label: '其他', value: 'others', icon: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng845af3ba96be197313380a56d1607660c93f44687cb6e966dbf28c9d51142dd9' },
];
// Reference code lines 70, 78 use the same URL as 62 (children). I'll use them as is.
const insuranceOptions = [
{ label: '人身保障', value: 'life', icon: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng78cf3ef069859580d9e4f17fc5095d6fbf460f1437ac3deaa43ab0a5a71a775e' },
{ label: '财富传承', value: 'wealth', icon: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng845af3ba96be197313380a56d1607660c93f44687cb6e966dbf28c9d51142dd9' },
{ label: '子女教育', value: 'education', icon: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng845af3ba96be197313380a56d1607660c93f44687cb6e966dbf28c9d51142dd9' },
{ label: '养老规划', value: 'pension', icon: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng845af3ba96be197313380a56d1607660c93f44687cb6e966dbf28c9d51142dd9' },
];
const toggleSelection = (field, value) => {
const index = form[field].indexOf(value);
if (index === -1) {
form[field].push(value);
} else {
form[field].splice(index, 1);
}
};
const confirmIndustry = ({ selectedValue, selectedOptions }) => {
form.industry = selectedOptions[0].text;
showIndustryPicker.value = false;
};
const close = () => {
emit('close');
};
const submit = () => {
// Validate form if needed
console.log('Submit form:', form);
emit('submit', form);
};
</script>
<style lang="less" scoped>
/* Override NutUI input styles to match design */
:deep(.nut-input) {
padding: 0;
background: transparent;
}
</style>
<template>
<div class="flex flex-col h-full bg-gray-50">
<!-- Header -->
<div class="flex justify-between items-center px-5 py-5 bg-white rounded-t-xl">
<span class="text-lg font-normal text-gray-900">保险计划书申请</span>
<img
class="w-5 h-5"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng43284a8c3fc98c60509d6d415fed8113414c4c0b072fa0f3b41fc26e76a03b15"
@click="close"
/>
</div>
<!-- Scrollable Content -->
<div class="flex-1 overflow-y-auto p-4">
<div class="bg-white rounded-xl p-5 shadow-sm">
<!-- 币种 -->
<div class="flex justify-between items-start mb-5">
<span class="text-sm text-gray-600 mt-1.5">币种</span>
<div class="bg-blue-50 rounded-md px-3 py-1.5">
<span class="text-sm text-blue-600">美元保单</span>
</div>
</div>
<!-- 计划 -->
<div class="flex justify-between items-start mb-5">
<span class="text-sm text-gray-600 mt-1.5">计划</span>
<div class="bg-blue-50 rounded-md px-3 py-1.5">
<span class="text-sm text-blue-600">基础情景</span>
</div>
</div>
<!-- 附加计划 & 性别 -->
<div class="flex justify-between items-center mb-5">
<span class="text-base text-gray-900">附加计划</span>
<div class="flex items-center">
<span class="text-sm text-gray-600 mr-4">性别</span>
<div class="flex items-center">
<div
class="flex items-center mr-4 cursor-pointer"
@click="form.gender = 'female'"
>
<img
class="w-4.5 h-4.5 mr-1"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng1015590381802ed3f770814c3e05e4b73e6534f72e97a9a0721c459ed1dbac6a"
/>
<span :class="form.gender === 'female' ? 'text-blue-600 font-bold' : 'text-gray-800'" class="text-sm">女</span>
</div>
<div
class="flex items-center cursor-pointer"
@click="form.gender = 'male'"
>
<img
class="w-4.5 h-4.5 mr-1"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngb0bb17420dba3691281e919f69d1e06a69d343e53ee68ad570ec2fe340cdb09c"
/>
<span :class="form.gender === 'male' ? 'text-blue-600 font-bold' : 'text-gray-500'" class="text-sm">男</span>
</div>
</div>
</div>
</div>
<!-- 年龄 -->
<div class="flex justify-between items-center mb-5">
<span class="text-sm text-gray-600">年龄</span>
<div class="flex items-center">
<nut-input
v-model="form.age"
type="digit"
placeholder="请输入"
class="!p-0 !bg-transparent !w-16 !text-right !text-gray-900 !text-sm"
:border="false"
input-align="right"
/>
<span class="text-sm text-gray-900 mx-1">周岁</span>
<img
class="w-4 h-4"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng4f1ca24a37fc014649249f2a5db80cdec300bf86076429fb76cc42dff9b59f3d"
/>
</div>
</div>
<!-- 保险期间 -->
<div class="flex justify-between items-start mb-5">
<span class="text-sm text-gray-600 mt-1.5">保险期间</span>
<div class="bg-blue-50 rounded-md px-3 py-1.5">
<span class="text-sm text-blue-600">终身</span>
</div>
</div>
<!-- 交费期间 -->
<div class="text-sm text-gray-600 mb-3">交费期间</div>
<div class="flex flex-wrap gap-3 mb-5">
<div
v-for="period in paymentPeriods"
:key="period"
class="px-4 py-2 rounded-lg text-sm cursor-pointer transition-colors border"
:class="form.paymentPeriod === period ? 'bg-blue-600 text-white border-blue-600' : 'bg-gray-50 text-gray-600 border-gray-200'"
@click="form.paymentPeriod = period"
>
{{ period }}
</div>
</div>
<!-- 年交保费 -->
<div class="text-sm text-gray-600 mb-2">年交保费</div>
<div class="bg-gray-50 rounded-lg border border-gray-200 p-3 flex justify-between items-center">
<nut-input
v-model="form.premium"
type="digit"
placeholder="请输入保费"
class="!p-0 !bg-transparent flex-1 !text-base !text-gray-900"
:border="false"
/>
<span class="text-sm text-gray-500 ml-2">美元</span>
</div>
</div>
</div>
<!-- Footer Buttons -->
<div class="p-4 pt-2 pb-8 flex justify-between gap-4 bg-gray-50">
<div
class="flex-1 py-3 text-center border border-blue-600 text-blue-600 rounded-lg text-base bg-white"
@click="close"
>
取消
</div>
<div
class="flex-1 py-3 text-center bg-blue-600 text-white rounded-lg text-base"
@click="submit"
>
提交申请
</div>
</div>
</div>
</template>
<script setup>
/**
* @description 录入计划书 - 方案B 内容组件
* @emits close - 关闭弹窗事件
* @emits submit - 提交事件，携带表单数据
*/
import { reactive, defineEmits } from 'vue';
const emit = defineEmits(['close', 'submit']);
const form = reactive({
currency: '美元保单',
plan: '基础情景',
gender: 'female',
age: '30',
insurancePeriod: '终身',
paymentPeriod: '10年交',
premium: '100000',
});
const paymentPeriods = ['10年交', '3年交', '5年交', '躸交', '2年交'];
const close = () => {
emit('close');
};
const submit = () => {
console.log('SchemeB Submit:', form);
emit('submit', form);
};
</script>
<style lang="less" scoped>
:deep(.nut-input) {
padding: 0;
background: transparent;
}
</style>
......@@ -74,7 +74,7 @@
<nut-button
color="#2563EB"
class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0"
@tap="openWebView('https://https://oa-dev.onwall.cn/f/custom_form/front/#/')"
@tap="openPlanPopup('A')"
>
计划书
</nut-button>
......@@ -107,7 +107,7 @@
<nut-button
color="#2563EB"
class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0"
@tap="openWebView('https://https://oa-dev.onwall.cn/f/custom_form/front/#/')"
@tap="openPlanPopup('B')"
>
计划书
</nut-button>
......@@ -174,6 +174,20 @@
<!-- Bottom Tab Bar -->
<TabBar current="home" />
<!-- Plan Popup -->
<PlanPopup v-model:visible="showPlanPopup">
<SchemeA
v-if="currentScheme === 'A'"
@close="showPlanPopup = false"
@submit="handlePlanSubmit"
/>
<SchemeB
v-if="currentScheme === 'B'"
@close="showPlanPopup = false"
@submit="handlePlanSubmit"
/>
</PlanPopup>
</view>
</template>
......@@ -184,6 +198,27 @@ import { useGo } from '@/hooks/useGo';
import { useListItemClick, ListType } from '@/composables/useListItemClick';
import TabBar from '@/components/TabBar.vue';
import IconFont from '@/components/IconFont.vue';
import PlanPopup from '@/components/PlanPopup/index.vue';
import SchemeA from '@/components/PlanSchemes/SchemeA.vue';
import SchemeB from '@/components/PlanSchemes/SchemeB.vue';
// Plan Popup State
const showPlanPopup = ref(false);
const currentScheme = ref('A');
const openPlanPopup = (scheme) => {
currentScheme.value = scheme;
showPlanPopup.value = true;
};
const handlePlanSubmit = (formData) => {
console.log(`方案${currentScheme.value}提交:`, formData);
showPlanPopup.value = false;
Taro.showToast({
title: '提交成功',
icon: 'success'
});
};
// Grid navigation data with routes
const loopData0 = shallowRef([
......