hz/ebiz-h5
1
0
Fork 0
mirror of http://112.124.100.131/GFRS/ebiz-h5.git synced 2025-12-06 18:56:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

添加重新投保页面

Browse Source
This commit is contained in:
mengxiaolong
2021-03-02 17:48:01 +08:00
parent d2bb084097
commit 1dd20275bb
21 changed files with 1472 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/common/ListShowing.vue Normal file
View File

@@ -0,0 +1,40 @@
<template>
<van-list v-model="loading" @load="onLoad" :finished="finished" :finished-text="finishText" :immediate-check="immediateCheck">
<slot> </slot>
</van-list>
</template>
<script>
export default {
name: 'ListShowing',
props: {
loadFun: {
type: Function
},
finishText: {
type: String,
default: '没有更多数据了'
},
immediateCheck: {
type: Boolean,
default: true
}
},
data() {
return {
loading: false,
finished: false
}
},
methods: {
async onLoad() {
let res = await this.loadFun()
this.finished = res.finished
this.loading = false
console.log(res)
}
}
}
</script>
<style lang="scss" scoped></style>

6
src/router/ebiz/index.js
View File

@@ -29,6 +29,9 @@ import goodStart from './goodStart'
import renewalManage from './renewalManage'
import question from './question'
import hgb from './hgb'
// 重新投保
import insureAgain from './insureAgain'
export default [
...proposal,
...sale,
@@ -55,5 +58,6 @@ export default [
...renewalManage,
...question,
...hgb,
...goodStart
...goodStart,
...insureAgain
] //根据需要进行删减

60
src/router/ebiz/insureAgain.js Normal file
View File

@@ -0,0 +1,60 @@
const InsureAgain = () => import('@/views/ebiz/insureAgain')
const InsureAgainDetail = () => import('@/views/ebiz/insureAgain/InsureAgainDetail')
const InsureAgainProgress = () => import('@/views/ebiz/insureAgain/InsureAgainProgress')
const InsureAgainPayment = () => import('@/views/ebiz/insureAgain/Payment')
const PaymentResult = () => import('@/views/ebiz/insureAgain/PaymentResult')
const ReadingAgreement = () => import('@/views/ebiz/insureAgain/ReadingAgreement')
export default [
{
// 重新投保首页
path: '/insureAgain',
name: 'InsureAgain',
component: InsureAgain,
meta: {
title: '可申请重新投保保单列表'
}
},
{
// 重新投保首页
path: '/insureAgain/insureAgainDetail',
name: 'InsureAgainDetail',
component: InsureAgainDetail,
meta: {
title: '可申请重新投保保单列表'
}
},
{
// 投保流程首页
path: '/insureAgain/progress',
name: 'InsureAgainProgress',
component: InsureAgainProgress,
meta: {
title: '投保信息'
}
},
{
// 支付
path: '/insureAgain/payment',
name: 'InsureAgainPayment',
component: InsureAgainPayment,
meta: {
title: '支付'
}
},
{
// 支付结果
path: '/insureAgain/paymentResult',
name: 'InsureAgainPaymentResult',
component: PaymentResult,
meta: {
title: '支付结果'
}
},
{
// 协议阅读
path: '/insureAgain/readingAgreement',
name: 'ReadingAgreement',
component: ReadingAgreement
}
]

70
src/views/ebiz/insureAgain/Committed.vue Normal file
View File

@@ -0,0 +1,70 @@
<template>
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
<van-list ref="uncommitted" v-model="loading" @load="onLoad" :finished="finished" finished-text="没有更多数据了">
<Order v-for="item in list" :key="item" :title="item">
<p class="name mb8">
<van-tag plain color="#999999">重新投保单号</van-tag>
<span class="ml5 span">8186270000011942</span>
</p>
<p class="name">
<van-tag plain color="#999999">状态</van-tag>
<span class="ml5 span">重新投保失败</span>
</p>
</Order>
</van-list>
</van-pull-refresh>
</template>
<script>
import { PullRefresh, list, Tag } from 'vant'
import Order from './Order'
export default {
name: 'Committed',
components: {
Order,
[PullRefresh.name]: PullRefresh,
[list.name]: list,
[Tag.name]: Tag
},
data() {
return {
list: [],
loading: false,
finished: false,
isLoading: false,
scrollTop: 0
}
},
activated() {
document.documentElement.scrollTo({
top: this.scrollTop
})
},
deactivated() {
this.scrollTop = document.documentElement.scrollTop
},
methods: {
async onLoad() {
setTimeout(() => {
for (let i = 0; i < 10; i++) {
this.list.push(this.list.length + 1)
}
this.loading = false
// 数据全部加载完成
if (this.list.length >= 80) {
this.finished = true
}
}, 1000)
},
onRefresh() {
setTimeout(() => {
this.isLoading = false
this.count++
}, 1000)
}
}
}
</script>
<style lang="scss" scoped></style>

57
src/views/ebiz/insureAgain/DropdownBox.vue Normal file
View File

@@ -0,0 +1,57 @@
<template>
<div :class="gutter ? 'mb10' : ''">
<van-cell is-link>
<template #title>
<slot name="boxTitle">
<span class="title">{{ title }}</span>
</slot>
</template>
<template #right-icon>
<slot name="right-title"></slot>
<van-icon v-show="!isOpened" name="arrow-down" @click.native="isOpened = !isOpened" />
<van-icon v-show="isOpened" name="arrow-up" @click.native="isOpened = !isOpened" />
</template>
</van-cell>
<div class="content bg-white" v-show="isOpened">
<slot>
<p style="text-align: center;" class="p10">暂无内容</p>
</slot>
</div>
<slot name="footer"></slot>
</div>
</template>
<script>
export default {
name: 'DropdownBox',
props: {
gutter: {
type: Boolean,
default: true
},
title: {
type: String,
default: ''
}
},
data() {
return {
isOpened: true
}
}
}
</script>
<style lang="scss" scoped>
.title {
color: #ff0000;
font-weight: bold;
}
/deep/ .van-cell {
display: flex;
align-items: center;
}
</style>

55
src/views/ebiz/insureAgain/InfoCell.vue Normal file
View File

@@ -0,0 +1,55 @@
<template>
<van-field label-width="12.2em">
<template #label>
<slot name="cellLabel">
<span :style="styleObj">{{ label }}</span>
</slot>
</template>
<template #input>
<slot>
<span :style="styleObj">{{ value }}</span>
</slot>
</template>
</van-field>
</template>
<script>
import { Field } from 'vant'
export default {
name: 'InfoCell',
components: {
[Field.name]: Field
},
props: {
value: {
type: [String, Number],
default: '暂无数据',
required: false
},
label: {
type: String
},
color: {
type: String,
default: '#000'
}
},
computed: {
styleObj() {
return {
color: this.color
}
}
},
data() {
return {}
},
created() {}
}
</script>
<style lang="scss" scoped>
/deep/ .van-field__control {
text-align: center;
}
</style>

71
src/views/ebiz/insureAgain/InsureAgainDetail.vue Normal file
View File

@@ -0,0 +1,71 @@
<template>
<div>
<DropdownBox>
<template #boxTitle>
<span>投保人信息</span>
</template>
<InfoCell label="保单号" />
<InfoCell label="生效日期" />
<InfoCell label="保单状态" />
<InfoCell label="签收状态" />
</DropdownBox>
<DropdownBox>
<template #boxTitle>
<span>投保人信息</span>
</template>
<InfoCell label="投保人" />
<InfoCell label="性别" />
<InfoCell label="证件类型" />
<InfoCell label="证件号码" />
<InfoCell label="联系电话" />
</DropdownBox>
<DropdownBox>
<template #boxTitle>
<span>被保险人信息</span>
</template>
<InfoCell label="姓名" />
<InfoCell label="性别" />
<InfoCell label="证件类型" />
<InfoCell label="证件号码" />
<InfoCell label="联系电话" />
</DropdownBox>
<DropdownBox>
<template #boxTitle>
<span>受益人信息</span>
</template>
<InfoCell label="受益人" />
<InfoCell label="姓名" />
<InfoCell label="性别" />
<InfoCell label="受益比例" />
<InfoCell label="证件类型" />
<InfoCell label="证件号码" />
</DropdownBox>
<DropdownBox>
<template #boxTitle>
<span>险种类型</span>
</template>
<InfoCell label="险种名称" />
<InfoCell label="保险期间" />
<InfoCell label="交费期间" />
<InfoCell label="险种保额(元)" />
<InfoCell label="险种保费(元)" />
</DropdownBox>
</div>
</template>
<script>
import DropdownBox from './DropdownBox'
import InfoCell from './InfoCell'
export default {
components: {
DropdownBox,
InfoCell
},
data() {
return {}
}
}
</script>
<style lang="scss" scoped></style>

95
src/views/ebiz/insureAgain/InsureAgainProgress.vue Normal file
View File

@@ -0,0 +1,95 @@
<template>
<div class="insure-again">
<ProgressBar :items="progressItems" :active.sync="active" />
<keep-alive>
<component :is="componentName" />
</keep-alive>
<van-button type="danger" class="bottom-btn" v-no-more-click="1000" @click="nextStep">{{ nextStepText }}</van-button>
</div>
</template>
<script>
import InsureInformation from './InsureInformation'
import ProductInformation from './ProductInformation'
import NotificationInformation from './NotificationInformation'
import SignConfirmation from './SignConfirmation'
import ProgressBar from './ProgressBar'
export default {
name: 'InsureAgainProgress',
components: {
InsureInformation,
ProductInformation,
NotificationInformation,
SignConfirmation,
ProgressBar
},
computed: {
componentName() {
switch (this.active) {
case 0:
return 'InsureInformation'
case 1:
return 'ProductInformation'
case 2:
return 'NotificationInformation'
case 3:
return 'SignConfirmation'
default:
return 'InsureInformation'
}
},
nextStepText() {
if (this.active === 3) {
return '提交'
} else {
return '下一步'
}
}
},
data() {
return {
active: 0,
progressItems: [
{ name: '投保信息', icon: this.$assetsUrl + 'images/kmh/tbrxx_n.png', icon_active: this.$assetsUrl + 'images/kmh/tbrxx.png' },
{ name: '险种信息', icon: this.$assetsUrl + 'images/kmh/xzcp_n.png', icon_active: this.$assetsUrl + 'images/kmh/xzcp.png' },
{ name: '告知信息', icon: this.$assetsUrl + 'images/kmh/gzxx_n.png', icon_active: this.$assetsUrl + 'images/kmh/gzxx.png' },
{ name: '签名确认', icon: this.$assetsUrl + 'images/kmh/qmqr_n.png', icon_active: this.$assetsUrl + 'images/kmh/qmqr.png' }
]
}
},
methods: {
nextStep() {
switch (this.active) {
case 0:
this.active++
return
case 1:
this.active++
return
case 2:
this.active++
return
case 3:
this.$jump({
flag: 'h5',
extra: {
url: location.origin + `/#/insureAgain/payment`,
forbidSwipeBack: '1',
needRefresh: '1'
},
routerInfo: { path: `/insureAgain/payment` }
})
return
}
}
}
}
</script>
<style lang="scss" scoped>
.insure-again {
padding-bottom: 45px;
}
</style>

100
src/views/ebiz/insureAgain/InsureInformation.vue Normal file
View File

@@ -0,0 +1,100 @@
<template>
<div>
<DropdownBox>
<template #boxTitle>
<span class="title">投保人信息</span>
</template>
<InfoCell label="姓名" value="zjp" />
<InfoCell label="证件类型" />
<InfoCell label="出生日期" />
<InfoCell label="证件截止日期" />
<InfoCell label="性别">
<van-button class="mr10" size="small" type="danger" round>男</van-button>
<van-button plain size="small" type="danger" round>女</van-button>
</InfoCell>
<InfoCell label="国籍" />
<InfoCell label="婚姻状况" />
<InfoCell label="职业类别" />
<InfoCell label="移动电话" />
<InfoCell label="电子邮箱" />
<InfoCell label="有无社保">
<van-button class="mr10" size="small" type="danger" round>有</van-button>
<van-button plain size="small" type="danger" round>无</van-button>
</InfoCell>
<InfoCell label="税收居民身份" />
<InfoCell label="联系地址" />
</DropdownBox>
<DropdownBox>
<template #boxTitle>
<span class="title">被保险人信息</span>
</template>
<InfoCell label="姓名" />
<InfoCell label="证件类型" />
<InfoCell label="证件号码" />
<InfoCell label="出生日期" />
<InfoCell label="性别">
<van-button class="mr10" size="small" type="danger" round>男</van-button>
<van-button plain size="small" type="danger" round>女</van-button>
</InfoCell>
<InfoCell label="国籍" />
<InfoCell label="婚姻状况" />
<InfoCell label="职业类别" />
<InfoCell label="有无社保">
<van-button class="mr10" size="small" type="danger" round>有</van-button>
<van-button plain size="small" type="danger" round>无</van-button>
</InfoCell>
<InfoCell label="税收居民身份" />
<InfoCell label="联系地址" />
</DropdownBox>
<DropdownBox>
<template #boxTitle>
<span class="title">受益人信息</span>
</template>
<InfoCell label="受益类型" />
<InfoCell label="是被保险人的" />
<InfoCell label="姓名" />
<InfoCell label="证件类型" />
<InfoCell label="证件截止日期" />
<InfoCell label="性别">
<van-button class="mr10" size="small" type="danger" round>男</van-button>
<van-button plain size="small" type="danger" round>女</van-button>
</InfoCell>
<InfoCell label="国籍" />
<InfoCell label="婚姻状况" />
<InfoCell label="移动电话" />
<InfoCell label="联系地址" />
<InfoCell label="职业类别" />
<InfoCell label="收益顺序" />
<InfoCell label="收益比例" />
</DropdownBox>
<DropdownBox>
<template #boxTitle>
<span class="title">账户信息</span>
</template>
<InfoCell label="性别">
<van-button class="mr10" size="small" type="danger" round>男</van-button>
<van-button plain size="small" type="danger" round>女</van-button>
</InfoCell>
<InfoCell label="账户名称" />
<InfoCell label="开户银行" />
<InfoCell label="银行账号" />
</DropdownBox>
</div>
</template>
<script>
import InfoCell from './InfoCell'
import DropdownBox from './DropdownBox'
export default {
name: 'InsureInformation',
components: {
InfoCell,
DropdownBox
},
data() {
return {}
}
}
</script>
<style lang="scss" scoped></style>

48
src/views/ebiz/insureAgain/NotificationInformation.vue Normal file
View File

@@ -0,0 +1,48 @@
<template>
<div>
<p style="font-weight: bold;" class="bg-white p10 van-hairline--bottom">告知项目</p>
<DropdownBox :gutter="false">
<template #boxTitle>
<span>被保人财务告知</span>
</template>
<template #right-title>
<span class="mr10">李磊</span>
</template>
<NotificationItem />
</DropdownBox>
<DropdownBox :gutter="false">
<template #boxTitle>
<span>被保人健康告知</span>
</template>
<template #right-title>
<span class="mr10">李磊</span>
</template>
<NotificationItem />
<NotificationItem />
</DropdownBox>
<p class="notifition bg-white p15">
注意：本次重新投保仅限于无其他补充告知的情况，若您有其他补充告知，您的条件不符合本重新投保流程。请您联系保单服务专员或拨打4006946688咨询，通过其他途径进行投保申请。
</p>
</div>
</template>
<script>
import NotificationItem from './NotificationItem'
import DropdownBox from './DropdownBox'
export default {
components: {
NotificationItem,
DropdownBox
},
data() {
return {}
}
}
</script>
<style lang="scss" scoped>
.notifition {
font-size: 14px;
color: #ff0000;
}
</style>

44
src/views/ebiz/insureAgain/NotificationItem.vue Normal file
View File

@@ -0,0 +1,44 @@
<template>
<div class="container">
<p class="title p10">1.您目前或曾经是否有吸烟习惯？</p>
<van-radio-group v-model="radio" class="radio-group p10" disabled>
<van-radio class="mr50" name="1">是</van-radio>
<van-radio name="2">否</van-radio>
</van-radio-group>
<div class="question-detail">
<InfoCell label="目前/曾经吸烟数量(支/天)" value="2" />
<InfoCell label="吸烟延续（年）" value="5" />
<InfoCell label="平均已戒烟（年）" value="0" />
</div>
</div>
</template>
<script>
import { RadioGroup, Radio } from 'vant'
import InfoCell from './InfoCell'
export default {
name: 'NotificationItem',
components: {
InfoCell,
[RadioGroup.name]: RadioGroup,
[Radio.name]: Radio
},
data() {
return {
radio: '1'
}
}
}
</script>
<style lang="scss" scoped>
.container {
.title {
font-size: 14px;
}
.radio-group {
display: flex;
justify-content: center;
}
}
</style>

98
src/views/ebiz/insureAgain/Order.vue Normal file
View File

@@ -0,0 +1,98 @@
<template>
<div class="order">
<slot name="header">
<p class="title pt10 pb10">保单号: 23042834929832</p>
</slot>
<div class="content p15">
<p class="name mb8">
<van-tag plain color="#5CA7DE">投保</van-tag>
<span class="ml5">李磊</span>
</p>
<p class="name mb8">
<van-tag plain color="#DD9C56">被保</van-tag>
<span class="ml5">李磊</span>
</p>
<p class="name mb8">
<van-tag plain type="danger">主险</van-tag>
<span class="ml5">国富人寿国富民惠医疗保险（2020版）</span>
</p>
<p class="prem mb10">
<span>首期总保费(元)</span>
<span>10,000</span>
</p>
<div class="divider mb10" />
<slot></slot>
<div class="btns">
<slot name="btns">
<van-button size="small" round type="danger" plain>查看详情</van-button>
<van-button class="ml10" size="small" round type="danger" @click="insureAgain">重新投保</van-button>
</slot>
</div>
</div>
</div>
</template>
<script>
import { Tag } from 'vant'
export default {
name: 'Order',
components: {
[Tag.name]: Tag
},
data() {
return {}
},
methods: {
insureAgain() {
this.$jump({
flag: 'h5',
extra: {
url: location.origin + `/#/insureAgain/progress`,
forbidSwipeBack: '1',
needRefresh: '1'
},
routerInfo: { path: `/insureAgain/progress` }
})
}
}
}
</script>
<style lang="scss" scoped>
.order {
background: #fff;
.title {
font-size: 14px;
text-align: center;
background-color: #f2f2f2;
}
.content {
.name {
font-size: 14px;
.span {
color: #999999;
}
}
.prem {
color: #e42b2b;
display: flex;
justify-content: space-between;
font-size: 14px;
font-weight: bolder;
}
.divider {
width: 200%;
border-bottom: 1px solid #cccccc;
transform-origin: left;
transform: scale(0.5);
}
.btns {
display: flex;
justify-content: flex-end;
}
}
}
</style>

62
src/views/ebiz/insureAgain/Payment.vue Normal file
View File

@@ -0,0 +1,62 @@
<template>
<van-cell-group>
<van-cell title="投保人" value="李磊" />
<van-cell title="支付金额" value="2,000.00" />
<van-cell value="2,000.00">
<template #title>
<img class="icon mr5" :src="src" />
<span class="custom-title">银行卡支付</span>
</template>
<template #default>
<van-radio name="bank" v-model="checked" />
</template>
</van-cell>
<van-cell value="2,000.00">
<template #title>
<img class="icon mr5" :src="vxSrc" />
<span class="custom-title">银行卡支付</span>
</template>
<template #default>
<van-radio disabled name="vx" v-model="checked" />
</template>
</van-cell>
<van-cell title="姓名" value="静静" />
<van-cell title="卡号" value="563353455325345345" />
<van-cell title="银行" value="交通银行" />
</van-cell-group>
</template>
<script>
import { Radio } from 'vant'
export default {
name: 'InsureAgainPayment',
components: {
[Radio.name]: Radio
},
data() {
return {
checked: 'bank',
// 银行卡支付图片地址
src: this.$assetsUrl + 'images/cardImg.png',
// 微信支付图片地址
vxSrc: this.$assetsUrl + 'images/vxImg.png'
}
}
}
</script>
<style lang="scss" scoped>
/deep/ .van-cell__title {
display: flex;
align-items: center;
}
.icon {
width: 20px;
}
/deep/ .van-radio {
justify-content: flex-end;
}
</style>

68
src/views/ebiz/insureAgain/PaymentResult.vue Normal file
View File

@@ -0,0 +1,68 @@
<template>
<div class="payment-result p10 bg-white">
<div class="emoji bg-white p30 van-hairline--surround mb5">
<img class="img mb20" :src="emojiSuccess" />
<p class="msg">支付成功</p>
</div>
<div class="bg-white">
<van-cell title="付款人" value="李磊" />
<van-cell title="投保单号" value="8186270000011900" />
<van-cell title="支付金额" value="2000.00" />
</div>
<p class="ps p10">{{ psText }}</p>
<van-button type="danger" class="bottom-btn" v-no-more-click="1000">返回可重新投保保单列表</van-button>
</div>
</template>
<script>
import emojiSuccess from '@/assets/images/renewalManage/u51859.png'
import emojiFailed from '@/assets/images/renewalManage/u51859.png'
export default {
computed: {
emoji() {
if (this.resultState) {
return this.emojiSuccess
} else {
return emojiFailed
}
},
psText() {
if (this.resultState) {
return '温馨提示： 您的新保单将于2021年2月20日生效，请您前往官微或联 系保单服务人员签收您的保单。'
} else {
return '温馨提示：亲，您本次提交的重新申请，因XX原因，未提交成功，如需帮助，可联系保单服务专员或拨打公司服务热线：400-694-6688。'
}
}
},
data() {
return {
emojiSuccess,
emojiFailed,
resultState: true
}
}
}
</script>
<style lang="scss" scoped>
.payment-result {
.emoji {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.img {
width: 50px;
}
.ps {
color: #ff0000;
font-size: 14px;
}
}
</style>

141
src/views/ebiz/insureAgain/ProductInformation.vue Normal file
View File

@@ -0,0 +1,141 @@
<template>
<div>
<!-- 险种信息 -->
<p style="font-weight: bold;" class="bg-white p10 van-hairline--bottom">保险计划详情</p>
<InfoCell label="保险期间" />
<InfoCell label="交费期间" />
<InfoCell label="交费频率" />
<DropdownBox :gutter="false">
<template #boxTitle>
<span style="font-weight: bold;">主险</span>
<span class="ml30">国富人寿附加住院医疗保险（B款）</span>
</template>
<InfoCell label="保险责任" />
<InfoCell label="保额(万元)" />
<InfoCell>
<template #cellLabel>
<span style="font-weight: bold;">保费(元)</span>
</template>
</InfoCell>
</DropdownBox>
<DropdownBox :gutter="false">
<template #boxTitle>
<van-checkbox v-model="remitRiskA" shape="square" checked-color="#ee0a24">
<span style="font-weight: bold;">附加险</span>
<span class="ml30">国富人寿附加住院医疗保险（B款）</span>
</van-checkbox>
</template>
<InfoCell label="保险责任" />
<InfoCell label="住院医疗保险金" />
<InfoCell label="住院津贴保险金" />
<InfoCell label="恶性肿瘤住院津贴保险金" />
<InfoCell label="免赔额" />
<InfoCell label="赔付比例" />
<InfoCell>
<template #cellLabel>
<span style="font-weight: bold;">保费(元)</span>
</template>
</InfoCell>
</DropdownBox>
<DropdownBox>
<template #boxTitle>
<span style="font-weight: bold;">附加险</span>
<span class="ml30">国富人寿附加综合意外伤害保险</span>
</template>
<InfoCell label="保险责任" />
<InfoCell label="意外身故/伤残保险金" />
<InfoCell label="轨道列车意外身故保险金/轨道列车意外伤残保险金" />
<InfoCell label="客运汽车意外身故保险金/客运汽车意外伤残保险金" />
<InfoCell label="免赔额" />
<InfoCell label="赔付比例" />
<InfoCell>
<template #cellLabel>
<span style="font-weight: bold;">保费(元)</span>
</template>
</InfoCell>
<template #footer>
<div style="text-align: center;" class="p10 bg-white">
<van-button size="small" round type="danger" @click="readSpecialPromise" :disabled="isRead">
{{ isRead ? '已阅读《特别约定》' : '点击这里阅读《特别约定》' }}
</van-button>
</div>
</template>
</DropdownBox>
<van-popup v-model="show" position="right" :style="style">
<ReadingAgreement :needTime="false">
<h3 class="p10">重新投保声明提示</h3>
<p class="pl10">尊敬的xxx先生/女士：</p>
<p class="p10">
您好！您于保单生效日期投保的保单号为保单号码的国富人寿国富民惠医疗保险（2020版）保单即将到期（到期日期详见保单，以下简称旧保单），为保护您的权益，即日起至<期满日后第60天>期间，您可以选择重新投保国富人寿国富民惠医疗保险（2020版），本次申请投保的国富人寿国富民惠医疗保险（2020版）保单以下简称新保单，请您仔细阅读以下内容：
1.国富人寿国富民惠医疗保险（2020版）合同保险期间为一年，到期后需要重新投保。
2.本次重新投保，我们将按照国富人寿国富民惠医疗保险（2020版）费率表中的“在上一保险期间届满后60日内申请重新投保时对应的费率”计算保费。
3.若本次重新投保成功，新保单免除等待期。
4.本次重新投保仅限于无其他补充告知的情况，若您有其他补充告知，您的条件不符合本重新投保流程。请您联系保单服务专员，通过新增投保单进行投保申请。
5.若您于旧保单满期前申请重新投保，且于满期前成功支付保险费，则新保单在旧保单保险期满日对应日的次日零时生效，旧保单在保险期满日24时终止。若您于旧保单满期后60天（包含）内重新投保申请，且成功支付保险费，则新保单于支付次日零时生效，旧保单在保险期满日24时终止。
6.若您未在旧保单满期后60天（包含）内申请重新投保，则您的重新投保资格将被取消。后续您可再次申请投保，但新单不再与旧保单关联，需重新计算等待期。具体详情，可咨询保单服务专员。
</p>
<template #action>
<van-radio-group class="m10" v-model="radio">
<van-radio name="1">
<span style="font-size: 14px;">本人已阅读、知晓本投保声明内容，同意重新投保</span>
</van-radio>
<!-- <p style="font-size: 14px;" class="mt10">
<span>投保人签字：</span>
<van-button size="small" type="danger" disabled>签名</van-button>
</p> -->
</van-radio-group>
<div class="btns">
<van-button type="danger" @click="readAgreement">不同意</van-button>
<van-button type="danger" @click="readAgreement">同意</van-button>
</div>
</template>
</ReadingAgreement>
</van-popup>
</div>
</template>
<script>
import InfoCell from './InfoCell'
import DropdownBox from './DropdownBox'
import ReadingAgreement from './ReadingAgreement'
import { Checkbox, RadioGroup, Radio } from 'vant'
export default {
name: 'ProductInformation',
components: {
InfoCell,
DropdownBox,
ReadingAgreement,
[Checkbox.name]: Checkbox,
[RadioGroup.name]: RadioGroup,
[Radio.name]: Radio
},
data() {
return {
radio: 1,
show: false,
remitRiskA: false,
style: { height: '100vh', width: '100vw' },
isRead: false
}
},
methods: {
readSpecialPromise() {
this.show = true
},
readAgreement() {
this.show = false
this.isRead = true
}
}
}
</script>
<style lang="scss" scoped>
.btns {
display: flex;
/deep/ .van-button--danger {
flex: 1;
}
}
</style>

66
src/views/ebiz/insureAgain/ProgressBar.vue Normal file
View File

@@ -0,0 +1,66 @@
<template>
<div class="prgoress-bar">
<template v-for="(item, index) in items">
<div class="progress-item" :key="index" @click="changeProgressBar(index)">
<div class="icon">
<van-image v-show="index === active" width="20" :src="item.icon_active" />
<van-image v-show="index !== active" width="20" :src="item.icon" />
</div>
<p :class="index === active ? 'active' : ''">{{ item.name }}</p>
</div>
<van-icon :class="index === active ? 'active' : ''" v-if="index != items.length - 1" name="arrow" :key="index" />
</template>
</div>
</template>
<script>
import { Image as VanImage } from 'vant'
export default {
name: 'ProgressBar',
components: {
[VanImage.name]: VanImage
},
props: {
items: {
type: Array
},
active: {
type: Number,
default: 0
}
},
data() {
return {}
},
methods: {
changeProgressBar(index) {
this.$emit('update:active', index)
}
}
}
</script>
<style lang="scss" scoped>
.prgoress-bar {
display: flex;
align-items: center;
background-color: #ededed;
.progress-item {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
height: 80px;
text-align: center;
p {
font-size: 14px;
}
}
.active {
color: #ea3833;
}
}
</style>

171
src/views/ebiz/insureAgain/ReadingAgreement.vue Normal file
View File

@@ -0,0 +1,171 @@
<template>
<div class="bg-white">
<van-notice-bar v-if="time && needTime" :text="tip" />
<div class="agreement">
<slot>
<div class="agreement-content">
<p class="agreement-title mb10">人身保险投保提示</p>
<p>尊敬的客户：</p>
<p class="p">
人身保险是以人的寿命和身体为保险标的的保险。当被保险人发生死亡、伤残、疾病等风险事故时或者达到合同约定的年龄、期限等条件时，保险公司按照保险合同约定给付保险金。人身保险具有保障和长期储蓄功能，可以用于为人们的生活进行长期财务规划。为帮助您更好地认识和购买人身保险产品，保护您的合法权益，我们按中国保监会的要求，请您在填写投保单之前认真阅读以下内容：
</p>
<p class="p">
一、请您确认保险机构和销售人员的合法资格
</p>
<p class="p">
请您从持有中国银行保险监督管理委员会颁发《经营保险业务许可证》或《保险兼业代理许可证》的合法机构或持有《保险销售从业人员执业证书》的销售人员处办理保险业务。如需要查询销售人员的销售资格，您可以要求销售人员告知具体查询方式，或登录保险中介监管信息系统查询（网址：http://iir.circ.gov.cn）。
</p>
<p class="p">
二、请您根据实际保险需求和支付能力选择人身保险产品
</p>
<p class="p">
请您根据自身已有的保障水平和经济实力等实际情况，选择适合自身需求的保险产品。多数人身保险产品期限较长，如果需要分期交纳保险费，请您充分考虑是否有足够、稳定的财力长期支付保险费，不按时交费可能会影响您的权益。建议您使用银行转账等非现金方式交纳保险费。
</p>
<p class="p">
三、请您详细阅读并充分了解保险合同的条款内容
</p>
<p class="p">
四、请您了解“犹豫期”的有关约定
</p>
<p class="p">
一年期以上的人身保险产品一般有犹豫期（投保人、被保险人收到保险合同并书面签收保险合同回执的次日零时起15日以内）的有关约定。除合同另有约定外，在犹豫期内，您可以无条件解除保险合同，但应退还保险合同，我们将退还您全部保险费并不会对此收取其他任何费用。
</p>
<p class="p">
五、“犹豫期”后解除保险合同请您慎重
</p>
<p class="p">
若您在犹豫期过后解除保险合同，您会有一定的损失。我们自收到解除合同的申请书之日起三十日以内，按照合同约定退还保险合同的现金价值（现金价值表附在正式保险合同之中，您若存在疑问，可要求我们予以解释）。
</p>
<p class="p">
六、请您充分理解并认识分红保险、投资连结保险、万能保险等人身保险新型产品的风险和特点
</p>
<p class="p">
（1）如果您选择购买分红保险产品，请您注意以下事项：分红水平主要取决于保险公司的实际经营成果。如果实际经营成果优于定价假设，我们才会将部分盈余分配给您。如果实际经营成果差于定价假设，我们可能不会派发红利。产品说明书或保险利益测算书中关于未来保险合同利益的预测是基于公司精算假设，不能理解为对未来的预期，红利分配是不确定的。
</p>
<p class="p">
（2）如果您选择购买投资连结保险产品，请您注意以下事项：您应当详细了解投资连结保险的费用扣除情况，包括但不限于初始费用、买入卖出差价、死亡风险保险费、保单管理费、资产管理费、手续费、退保费用等。您应当要求销售人员将投资连结保险账户价值的详细计算方法对您进行解释。投资连结保险产品的投资回报具有不确定性，投资风险完全由您承担。产品说明书或保险利益测算书中关于未来保险合同利益的预测是基于公司精算假设，不能理解为对未来的预期，实际投资可能赢利或出现亏损。如果您选择灵活交费方式的，您应当要求销售人员将您停止交费可能产生的风险和不利后果对您进行详细解释。
</p>
<p class="p">
（3）如果您选择购买万能保险产品，请您注意以下事项：万能保险产品通常有最低保证利率的约定，最低保证利率仅针对投资账户中资金。您应当详细了解万能保险的费用扣除情况，包括但不限于初始费用、死亡风险保险费、保单管理费、手续费、退保费用等。您应当要求销售人员将万能保险账户价值的详细计算方法对您进行解释。万能保险产品的投资回报具有不确定性，您要承担部分投资风险。保险公司每月公布的结算利率只能代表一个月的投资情况，不能理解为对全年的预期，结算利率仅针对投资账户中的资金，不针对全部保险费。产品说明书或保险利益测算书中关于未来保险合同利益的预测是基于公司精算假设，最低保证利率之上的投资收益是不确定的，不能理解为对未来的预期。如果您选择灵活交费方式的，您应当要求销售人员将您停止交费可能产生的风险和不利后果对您进行详细解释。
</p>
<p class="p">
七、请您正确认识人身保险新型产品与其他金融产品
</p>
<p class="p">
六、请您充分理解并认识分红保险、投资连结保险、万能保险等人身保险新型产品的风险和特点
</p>
<p class="p">
八、选择健康保险产品时请您注意产品特性和条款具体约定
</p>
<p class="p">
六、请您充分理解并认识分红保险、投资连结保险、万能保险等人身保险新型产品的风险和特点
</p>
<p class="p">
九、为未成年子女选择保险产品时保险金额应适当
</p>
<p class="p">
如果您为未成年子女购买保险产品，因被保险人身故给付的保险金总和应符合中国银保监会的有关规定。其主要目的是为了保护未成年人权益，防止道德风险；同时，从整个家庭看，父母是家庭的主要经济来源和支柱，以父母为被保险人购买保险，可以使整个家庭获得更加全面的保险保障。
</p>
<p class="p">
十、请您如实填写投保资料、正确履行如实告知义务等有关情况并亲笔签名
</p>
<p class="p">
我国《保险法》对投保人的如实告知行为进行了明确的规定。投保时，您填写的投保单应当属实；对于销售人员询问的有关被保险人的问题，您也应当如实回答，否则可能影响您和被保险人的权益。为了有效保障自身权益，请您在充分理解知悉人身保险投保提示、投保单等相关文件后亲笔签名。
</p>
<p class="p">
十一、请您配合保险公司做好客户回访工作
</p>
<p class="p">
我们按规定开展客户回访工作，一般通过电话、信函和上门回访等形式进行。为确保您自己的权益得到切实保障，您应对回访问题进行如实答复，不清楚的地方可以立即提出，要求我们进行详细解释。请您在投保时准确、完整填写地址、邮编、常用联系电话等个人信息，以便我们能够对您及时回访。
</p>
<p class="p">
十二、请您注意保护自身的合法权益
</p>
<p class="p">
如果您发现销售人员在保险销售过程中存在误导销售行为，或认为自身权益受到侵犯，请注意保留书面证据或其他证据，可
</p>
</div>
</slot>
</div>
<div class="action-bar">
<slot name="action"></slot>
</div>
</div>
</template>
<script>
import { NoticeBar } from 'vant'
export default {
name: 'ReadingAgreement',
components: {
[NoticeBar.name]: NoticeBar
},
props: {
paddingBottom: {
type: Number,
default: 0
},
needTime: {
type: Boolean,
default: true
}
},
computed: {
tip() {
return `提示：阅读时长需在${this.time}秒以上`
}
},
data() {
return {
radio: 1,
time: 10,
timer: null
}
},
created() {
this.timeOut()
},
methods: {
timeOut() {
this.timer = setInterval(() => {
this.time--
if (this.time <= 0) {
clearInterval(this.timer)
this.timer = null
}
}, 1000)
}
}
}
</script>
<style lang="scss" scoped>
.agreement {
height: 100vh;
overflow: auto;
.agreement-title {
font-size: 20px;
font-weight: bold;
text-align: center;
}
p {
font-size: 14px;
}
.p {
text-indent: 2em;
}
}
.action-bar {
position: fixed;
bottom: 0;
background: #fff;
width: 100vw;
}
/deep/ .van-radio__label {
color: #ff0000;
}
</style>

69
src/views/ebiz/insureAgain/SignConfirmation.vue Normal file
View File

@@ -0,0 +1,69 @@
<template>
<div>
<van-cell-group class="mb10">
<van-cell title="销售人员工号" value="1450000562" />
<van-cell title="销售人员姓名" value="韦辉" />
<van-cell title="投保单号" value="823942423492392" />
<van-cell title="投保日期" value="2021-03-01" />
<van-cell title="保费合计" value="2,000.00" />
</van-cell-group>
<DropdownBox>
<template #boxTitle>
<span class="mr10">投保人</span>
<span>李磊</span>
</template>
<p style="font-size: 14px; color: #666666;" class="p15">以下内容需要您按照顺序并阅读确认：</p>
<div class="files pl15">
<p class="mb5">需阅读</p>
<p class="file-name">
<span style="color: #0099ff;">《国富人寿投保须知》</span>
<StateRadio :result.sync="result" />
</p>
</div>
<div class="files pl15 pt10">
<p class="mb5">需阅读</p>
<p class="file-name">
<span style="color: #0099ff;">《国富人寿投保须知》</span>
<StateRadio :result.sync="result" />
</p>
</div>
<div class="files pl15 pt10 pb10">
<p class="mb5">需阅读</p>
<p class="file-name">
<span style="color: #0099ff;">《国富人寿投保须知》</span>
<StateRadio :result.sync="result" />
</p>
</div>
</DropdownBox>
</div>
</template>
<script>
import DropdownBox from './DropdownBox'
import StateRadio from './StateRadio'
export default {
name: 'SignConfirmation',
components: {
DropdownBox,
StateRadio
},
data() {
return {
result: 2
}
}
}
</script>
<style lang="scss" scoped>
.file-name {
display: flex;
align-items: center;
}
.files {
p {
font-size: 14px;
}
}
</style>

33
src/views/ebiz/insureAgain/StateRadio.vue Normal file
View File

@@ -0,0 +1,33 @@
<template>
<van-radio-group v-model="result">
<van-radio :disabled="disabled" :name="1" />
<van-radio checked-color="#19970e" v-show="false" :name="2" />
</van-radio-group>
</template>
<script>
import { Radio, RadioGroup } from 'vant'
export default {
name: 'StateRadio',
components: {
[Radio.name]: Radio,
[RadioGroup.name]: RadioGroup
},
props: {
result: {
type: Number,
default: 2
}
},
computed: {
disabled() {
return this.result !== 1
}
},
data() {
return {}
}
}
</script>
<style lang="scss" scoped></style>

70
src/views/ebiz/insureAgain/Uncommitted.vue Normal file
View File

@@ -0,0 +1,70 @@
<template>
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
<van-list ref="uncommitted" v-model="loading" @load="onLoad" :finished="finished" finished-text="没有更多数据了">
<Order v-for="item in list" :key="item" :title="item">
<p class="name mb8">
<van-tag plain color="#999999">保单保障日截止日期</van-tag>
<span class="ml5 span">23453524234324</span>
</p>
<p class="name">
<van-tag plain color="#999999">状态</van-tag>
<span class="ml5 span">重新投保失败</span>
</p>
</Order>
</van-list>
</van-pull-refresh>
</template>
<script>
import { PullRefresh, list, Tag } from 'vant'
import Order from './Order'
export default {
name: 'Uncommitted',
components: {
Order,
[PullRefresh.name]: PullRefresh,
[list.name]: list,
[Tag.name]: Tag
},
data() {
return {
list: [],
loading: false,
finished: false,
isLoading: false,
scrollTop: 0
}
},
activated() {
document.documentElement.scrollTo({
top: this.scrollTop
})
},
deactivated() {
this.scrollTop = document.documentElement.scrollTop
},
methods: {
async onLoad() {
setTimeout(() => {
for (let i = 0; i < 10; i++) {
this.list.push(this.list.length + 1)
}
this.loading = false
// 数据全部加载完成
if (this.list.length >= 80) {
this.finished = true
}
}, 1000)
},
onRefresh() {
setTimeout(() => {
this.isLoading = false
this.count++
}, 1000)
}
}
}
</script>
<style lang="scss" scoped></style>

49
src/views/ebiz/insureAgain/index.vue Normal file
View File

@@ -0,0 +1,49 @@
<template>
<div>
<van-search v-model="value" placeholder="请输入保单号/投保人姓名/被保险人姓名" />
<van-sticky>
<van-tabs v-model="active">
<van-tab title="未提交" />
<van-tab title="已提交" />
</van-tabs>
</van-sticky>
<div class="container">
<keep-alive>
<component :is="is" />
</keep-alive>
</div>
</div>
</template>
<script>
import { Search, Sticky } from 'vant'
import Committed from './Committed'
import Uncommitted from './Uncommitted'
export default {
name: 'InsureAgain',
components: {
Committed,
Uncommitted,
[Search.name]: Search,
[Sticky.name]: Sticky
},
data() {
return {
active: 0,
value: ''
}
},
computed: {
is() {
if (this.active === 0) {
return 'Uncommitted'
} else {
return 'Committed'
}
}
}
}
</script>
<style lang="scss" scoped></style>