<template>
|
<view class="box">
|
<view class="box_head">
|
<view class="box_head_info">
|
<view class="box_head_info_title">{{info.name}}</view>
|
<view class="box_head_info_list">
|
<image src="@/static/icon/ic_toubao@2x.png" mode="widthFix"></image>
|
<view class="box_head_info_list_item">
|
<view class="label">保险生效起期：</view>
|
<view class="value">{{model.startDate}}</view>
|
</view>
|
<view class="box_head_info_list_item">
|
<view class="label">保险生效止期：</view>
|
<view class="value">{{model.endDate}}</view>
|
</view>
|
<view class="box_head_info_list_item">
|
<view class="label">投保年龄：</view>
|
<view class="value">{{info.minAge}}至{{info.maxAge}}周岁</view>
|
</view>
|
<view class="box_head_info_list_item" v-if="info.type !== 1">
|
<view class="label">费用：</view>
|
<view class="value">
|
{{info.price}}元
|
<text v-if="info.timeUnit === 0">/天</text>
|
<text v-if="info.timeUnit === 1">/半月</text>
|
<text v-if="info.timeUnit === 2">/月</text>
|
<text v-if="info.timeUnit === 3">/年</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="box_head_cate">
|
<text>人员名单</text>
|
<text @click="addPersonnel">+添加投保人员</text>
|
</view>
|
<view class="box_head_list">
|
<view class="box_head_list_item" v-for="(item, index) in list" :key="index">
|
<view class="dele" @click="dele(index)">
|
<image src="@/static/icon/ic_delete@2x.png" mode="widthFix"></image>
|
</view>
|
<view class="top">
|
<view class="top_a">
|
<text>{{item.name}}</text>
|
<text>{{IdCard(item.idCard, 2)}}｜{{IdCard(item.idCard, 3)}}岁</text>
|
</view>
|
<view class="top_b">身份证号：{{item.idCard}}</view>
|
<view class="top_b">备注：{{item.remark||''}}</view>
|
</view>
|
<view class="center"></view>
|
<view class="bottom">
|
<view class="bottom_item">
|
<view class="bottom_item_label">派遣单位：</view>
|
<view class="bottom_item_val">{{item.pqName}}</view>
|
</view>
|
<view class="bottom_item">
|
<view class="bottom_item_label">所属工种：</view>
|
<view class="bottom_item_val">{{item.gzName}}</view>
|
</view>
|
</view>
|
</view>
|
<view class="box_head_list_add" @click="addPersonnel">
|
<view class="box_head_list_add_yuan">
|
<image src="@/static/icon/ic_add@2x.png" mode="widthFix"></image>
|
</view>
|
<text>添加人员信息</text>
|
</view>
|
</view>
|
<view style="width: 100%; height: calc(200rpx + env(safe-area-inset-bottom));"></view>
|
</view>
|
<view class="box_footer">
|
<view class="box_footer_xy" @click="show = true">
|
<image src="@/static/icon/ic_tips@2x.png" mode="widthFix"></image>
|
<text>请阅读《投保须知》</text>
|
</view>
|
<view class="box_footer_info">
|
<view class="left">
|
<view class="box_footer_info_top">
|
<view class="box_footer_info_top_item">
|
<view class="top_item_label">投保人数：</view>
|
<view class="top_item_val">{{list.length}}人</view>
|
</view>
|
</view>
|
<view class="box_footer_info_bottom" v-if="info.type !== 1">
|
<view class="box_footer_info_bottom_label">总费用：</view>
|
<view class="box_footer_info_bottom_val">{{totalPrice}}</view>
|
</view>
|
</view>
|
<view class="right">
|
<u-button type="primary" shape="circle" color="#437CB3" text="投保申请" @click="openXUZHI"></u-button>
|
</view>
|
</view>
|
<view style="width: 100%; height: env(safe-area-inset-bottom); background-color: #ffffff;"></view>
|
</view>
|
<!-- 投保须知 -->
|
<u-popup :show="show" round="20" :closeable="true" @close="closeXUZHI" mode="bottom">
|
<view class="info">
|
<view class="info_title">投保须知</view>
|
<scroll-view scroll-y="true" class="info_nr">
|
<view>{{info.specialAgreement}}</view>
|
</scroll-view>
|
<view class="info_footer">
|
<u-button type="primary" shape="circle" color="#437CB3" :text="`已知晓${num > 0 ? '(' + num + 's)' : ''}`" @click="know"></u-button>
|
</view>
|
</view>
|
</u-popup>
|
<!-- 提交投保 -->
|
<u-popup :show="show1" round="20" :closeable="true" @close="show1 = false" mode="bottom">
|
<view class="info">
|
<view class="info_title">确认提交投保</view>
|
<view class="info_data">
|
<view class="info_data_label">{{info.name}}</view>
|
<view class="info_data_item">
|
<view class="info_data_item_label">投保人数：</view>
|
<view class="info_data_item_val">{{list.length}}人</view>
|
</view>
|
<view class="info_data_item" v-if="info.type !== 1">
|
<view class="info_data_item_label">总费用：</view>
|
<view class="info_data_item_val">{{totalPrice}}元</view>
|
</view>
|
<view class="info_data_item">
|
<view class="info_data_item_label">保险生效日期：</view>
|
<view class="info_data_item_val">{{model.startDate}}</view>
|
</view>
|
<view class="info_data_item">
|
<view class="info_data_item_label">保险生效止期：</view>
|
<view class="info_data_item_val">{{model.endDate}}</view>
|
</view>
|
</view>
|
<view class="info_footer">
|
<u-button type="primary" shape="circle" :plain="true" color="#437CB3" text="取消" @click="show1 = false"></u-button>
|
<view style="width: 22rpx; height: 100%;"></view>
|
<u-button type="primary" shape="circle" color="#437CB3" text="确认投保" @click="submit"></u-button>
|
</view>
|
</view>
|
</u-popup>
|
<u-toast ref="uToast"></u-toast>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
show: false,
|
show1: false,
|
model: null,
|
info: null,
|
list: [],
|
num: 0,
|
timer: null
|
};
|
},
|
computed: {
|
totalPrice() {
|
if (this.model && this.model.cyclePrice) {
|
return (this.list.length * this.model.cyclePrice).toFixed(2)
|
}
|
return '0.00'
|
}
|
},
|
onLoad(options) {
|
if (options.model) {
|
this.model = JSON.parse(options.model)
|
this.getDetails()
|
}
|
uni.$on('add', (data) => {
|
if (JSON.stringify(this.list).indexOf(data.model.idCard) !== -1) {
|
this.$refs.uToast.show({
|
type: 'default',
|
message: `[${data.model.name}]人员身份证重复`
|
})
|
} else {
|
this.list.unshift(data.model)
|
}
|
})
|
},
|
methods: {
|
submit() {
|
let arr = this.list.map(item => {
|
return {
|
memberName: item.name,
|
idcardNo: item.idCard,
|
duId: item.pqId,
|
duName: item.pqName,
|
remark:item.remark,
|
workTypeName: item.gzName,
|
worktypeId: item.gzId,
|
fee: this.info.price
|
}
|
})
|
this.$u.api.insuranceApplyCreate({
|
applyDetailList: arr,
|
applyStartTime: this.model.startDate,
|
applyEndTime: this.model.endDate,
|
solutionId: this.model.programmeId
|
}).then(res => {
|
if (res.code === 200) {
|
uni.reLaunch({
|
url: `/pages/success/success?orderId=${res.data}`
|
})
|
}
|
})
|
},
|
know() {
|
if (this.list.length === 0) {
|
this.show = false
|
return
|
}
|
if (this.num !== 0) return
|
this.show = false
|
this.show1 = true
|
},
|
openXUZHI() {
|
if (this.list.length === 0) return uni.showToast({
|
title: '至少添加一名人员',
|
icon: 'none'
|
})
|
this.num = 5
|
this.setTime()
|
this.show = true
|
},
|
closeXUZHI() {
|
this.show = false
|
clearInterval(this.timer)
|
this.timer = null
|
},
|
setTime() {
|
this.timer = setInterval(() => {
|
if (this.num !== 0) {
|
this.num = this.num - 1
|
return
|
}
|
clearInterval(this.timer)
|
this.timer = null
|
}, 1000)
|
},
|
dele(index) {
|
this.list.splice(index, 1)
|
},
|
IdCard(UUserCard, num) {
|
let idcard = UUserCard.toString();
|
if (num == 1) {
|
//获取出生日期
|
birth = idcard.substring(6, 10) + "-" + idcard.substring(10, 12) + "-" + idcard.substring(12, 14);
|
return birth;
|
}
|
if (num == 2) {
|
//获取性别
|
if (parseInt(idcard.substr(16, 1)) % 2 == 1) {
|
//男
|
return "男";
|
} else {
|
//女
|
return "女";
|
}
|
}
|
if (num == 3) {
|
//获取年龄
|
var myDate = new Date();
|
var month = myDate.getMonth() + 1;
|
var day = myDate.getDate();
|
var age = myDate.getFullYear() - idcard.substring(6, 10) - 1;
|
if (idcard.substring(10, 12) < month || idcard.substring(10, 12) == month && idcard.substring(12, 14) <= day) {
|
age++;
|
}
|
return age;
|
}
|
},
|
getDetails() {
|
this.$u.api.solutionsById(this.model.programmeId)
|
.then(res => {
|
if (res.code === 200) {
|
this.info = res.data
|
}
|
})
|
},
|
addPersonnel() {
|
uni.navigateTo({
|
url: `/pages/add_insured_personnel/add_insured_personnel?solutionId=${this.model.programmeId}`
|
})
|
}
|
}
|
}
|
</script>
|
<style>
|
page {
|
background-color: #f7f7f7;
|
}
|
</style>
|
<style lang="scss" scoped>
|
.box {
|
width: 100%;
|
.info {
|
width: 100%;
|
padding: 32rpx 30rpx;
|
box-sizing: border-box;
|
.info_title {
|
width: 100%;
|
text-align: center;
|
font-weight: 500;
|
font-size: 30rpx;
|
color: #222222;
|
font-style: normal;
|
}
|
.info_nr {
|
width: 100%;
|
max-height: 70vh;
|
margin-top: 40rpx;
|
font-size: 30rpx;
|
color: black;
|
white-space: pre-wrap;
|
}
|
.info_data {
|
width: 100%;
|
margin-top: 40rpx;
|
.info_data_label {
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #222222;
|
font-style: normal;
|
margin-bottom: 20rpx;
|
}
|
.info_data_item {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-bottom: 20rpx;
|
&:last-child {
|
margin-bottom: 0 !important;
|
}
|
.info_data_item_label {
|
flex-shrink: 0;
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #777777;
|
font-style: normal;
|
}
|
.info_data_item_val {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #222222;
|
font-style: normal;
|
}
|
}
|
}
|
.info_footer {
|
width: 100%;
|
margin-top: 40rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
}
|
.box_footer {
|
width: 100%;
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
.box_footer_xy {
|
width: 100%;
|
height: 80rpx;
|
display: flex;
|
align-items: center;
|
background: #FFF7E7;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
image {
|
width: 32rpx;
|
height: 32rpx;
|
margin-right: 16rpx;
|
}
|
text {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #437CB3;
|
font-style: normal;
|
}
|
}
|
.box_footer_info {
|
width: 100%;
|
height: 120rpx;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
background-color: #FFFFFF;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.left {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
.box_footer_info_top {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
.box_footer_info_top_item {
|
flex: 1;
|
display: flex;
|
align-content: center;
|
.top_item_label {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #666666;
|
font-style: normal;
|
}
|
.top_item_val {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #333333;
|
font-style: normal;
|
}
|
}
|
}
|
.box_footer_info_bottom {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-top: 8rpx;
|
.box_footer_info_bottom_label {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #666666;
|
font-style: normal;
|
}
|
.box_footer_info_bottom_val {
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #222222;
|
font-style: normal;
|
&::after {
|
content: '元';
|
font-weight: 500;
|
font-size: 24rpx;
|
color: #222222;
|
font-style: normal;
|
}
|
}
|
}
|
}
|
.right {
|
flex-shrink: 0;
|
}
|
}
|
}
|
.box_head {
|
width: 100%;
|
height: 240rpx;
|
padding: 30rpx;
|
box-sizing: border-box;
|
background: linear-gradient( 180deg, #437CB3 0%, #F7F7F7 100%);
|
.box_head_info {
|
width: 100%;
|
padding: 32rpx 30rpx;
|
box-sizing: border-box;
|
background-color: rgba(255, 255, 255, 0.7);
|
border-radius: 16rpx;
|
.box_head_info_title {
|
font-weight: 500;
|
font-size: 40rpx;
|
color: #222222;
|
font-style: normal;
|
}
|
.box_head_info_list {
|
width: 100%;
|
margin-top: 24rpx;
|
position: relative;
|
image {
|
width: 200rpx;
|
height: 202rpx;
|
position: absolute;
|
bottom: 0;
|
right: 0;
|
}
|
.box_head_info_list_item {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-bottom: 20rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
.label {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #777777;
|
font-style: normal;
|
}
|
.value {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #222222;
|
font-style: normal;
|
}
|
}
|
}
|
}
|
.box_head_cate {
|
width: 100%;
|
display: flex;
|
align-content: center;
|
justify-content: space-between;
|
margin-top: 40rpx;
|
text {
|
&:nth-child(1) {
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #222222;
|
font-style: normal;
|
}
|
&:nth-child(2) {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #437CB3;
|
font-style: normal;
|
}
|
}
|
}
|
.box_head_list {
|
width: 100%;
|
margin-top: 30rpx;
|
.box_head_list_item {
|
width: 100%;
|
padding: 24rpx 30rpx;
|
box-sizing: border-box;
|
background-color: #FFFFFF;
|
position: relative;
|
border-radius: 16rpx;
|
margin-bottom: 20rpx;
|
.dele {
|
width: 56rpx;
|
height: 56rpx;
|
position: absolute;
|
right: 0;
|
top: 0;
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.top {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
.top_a {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
text {
|
&:first-child {
|
font-weight: 500;
|
font-size: 30rpx;
|
color: #222222;
|
font-style: normal;
|
}
|
&:last-child {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #777777;
|
font-style: normal;
|
margin-left: 16rpx;
|
}
|
}
|
}
|
.top_b {
|
width: 100%;
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #777777;
|
font-style: normal;
|
margin-top: 8rpx;
|
}
|
}
|
.center {
|
width: 100%;
|
margin: 20rpx 0;
|
border-bottom: 1rpx dashed #E5E5E5;
|
}
|
.bottom {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
.bottom_item {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-bottom: 16rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
.bottom_item_label {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #777777;
|
font-style: normal;
|
}
|
.bottom_item_val {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #222222;
|
font-style: normal;
|
}
|
}
|
}
|
}
|
.box_head_list_add {
|
width: 100%;
|
height: 280rpx;
|
background: #FFFFFF;
|
border-radius: 16rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
.box_head_list_add_yuan {
|
width: 68rpx;
|
height: 68rpx;
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
text {
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #437CB3;
|
font-style: normal;
|
margin-top: 24rpx;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
