SchemeB.vue
3.54 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
<template>
<PlanPopup title="保险计划书申请" @close="close" @submit="submit">
<!-- 币种 -->
<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="mb-5">
<span class="text-base text-gray-900">附加计划</span>
</div>
<!-- 性别 -->
<div class="text-sm text-gray-600 mb-2">性别</div>
<nut-radio-group v-model="form.gender" direction="horizontal" class="mb-4">
<nut-radio label="female" class="mr-8">女</nut-radio>
<nut-radio label="male">男</nut-radio>
</nut-radio-group>
<!-- 年龄 -->
<div class="text-sm text-gray-600 mb-2">年龄</div>
<div class="border border-gray-200 rounded-lg mb-4 overflow-hidden">
<nut-input
v-model="form.age"
type="digit"
placeholder="请输入年龄"
class="!p-0 !bg-transparent !text-sm !text-gray-900"
:border="false"
/>
</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>
<nut-radio-group v-model="form.paymentPeriod" direction="horizontal" class="mb-4">
<nut-radio
v-for="period in paymentPeriods"
:key="period"
:label="period"
class="mr-6"
>
{{ period }}
</nut-radio>
</nut-radio-group>
<!-- 年交保费 -->
<div class="text-sm text-gray-600 mb-2">年交保费</div>
<div class="border border-gray-200 rounded-lg mb-4 flex items-center overflow-hidden">
<nut-input
v-model="form.premium"
type="digit"
placeholder="请输入保费"
class="!p-0 !bg-transparent flex-1 !text-sm !text-gray-900"
:border="false"
/>
<span class="text-sm text-gray-500 shrink-0 ml-2 mr-5">美元</span>
</div>
</PlanPopup>
</template>
<script setup>
/**
* @description 录入计划书 - 方案B 内容组件
* @description 使用 PlanPopup 容器组件提供统一的布局和按钮
*
* @emits close - 关闭弹窗事件
* @emits submit - 提交事件，携带表单数据
*/
import { reactive } from 'vue'
import PlanPopup from './PlanPopup.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>
/* Override NutUI input styles to match design */
:deep(.nut-input) {
padding: 0;
background: transparent;
border-radius: inherit;
}
</style>