<template>
|
<view class="details">
|
<view class="details_back" :style="{ background: returnStyle(info.statusCollect) }"></view>
|
<view class="box">
|
<view class="box_info">
|
<view class="box_info_head" :style="{ background: returnStyle1(info.statusCollect) }">
|
<view class="box_info_head_left">
|
<text>{{info.solutionsName}}</text>
|
<text>保单号：{{info.code ? info.code : '-'}}</text>
|
</view>
|
<image v-if="info.statusCollect === 2" src="@/static/icon/progress_baozhangzhong@2x.png" mode="widthFix"></image>
|
<image v-if="info.statusCollect === 0 || info.statusCollect === 22" src="@/static/icon/progress_daishenhe@2x.png" mode="widthFix"></image>
|
<image v-if="info.statusCollect === 7" src="@/static/icon/progress_daiqianshu@2x.png" mode="widthFix"></image>
|
<image v-if="info.statusCollect === 1" src="@/static/icon/progress_daichudan@2x.png" mode="widthFix"></image>
|
<image v-if="info.statusCollect === 5" src="@/static/icon/progress_shenqingtuihui@2x.png" mode="widthFix"></image>
|
<image v-if="info.statusCollect === 4" src="@/static/icon/progress_yituihui@2x.png" mode="widthFix"></image>
|
<image v-if="info.statusCollect === 6 || info.statusCollect === 25" src="@/static/icon/progress_yiguanbi@2x.png" mode="widthFix"></image>
|
<image v-if="info.statusCollect === 3" src="@/static/icon/progress_yiguoqi@2x.png" mode="widthFix"></image>
|
<image v-if="info.statusCollect === 26" src="@/static/icon/ic_toubaozhong.png" mode="widthFix"></image>
|
</view>
|
<view class="box_info_center">
|
<view class="box_info_center_x"></view>
|
</view>
|
<view class="box_info_list">
|
<view class="box_info_list_item">
|
<view class="box_info_list_item_label">投保人数：</view>
|
<view class="box_info_list_item_val">{{info.insureNum}}人</view>
|
</view>
|
<view class="box_info_list_item">
|
<view class="box_info_list_item_label">在保时长：</view>
|
<view class="box_info_list_item_val">{{(info.serviceDays - info.loseEfficacyDays) < 0 ? `-` : info.serviceDays - info.loseEfficacyDays + '天'}}</view>
|
</view>
|
<view class="box_info_list_item">
|
<view class="box_info_list_item_label">已产生费用：</view>
|
<view class="box_info_list_item_val">{{info.currentFee}}元</view>
|
</view>
|
<view class="box_info_list_item">
|
<view class="box_info_list_item_label">总费用：</view>
|
<view class="box_info_list_item_val">{{info.fee}}元</view>
|
</view>
|
<view class="box_info_list_item">
|
<view class="box_info_list_item_label">保险生效起期：</view>
|
<view class="box_info_list_item_val">{{info.startTime}}</view>
|
</view>
|
<view class="box_info_list_item">
|
<view class="box_info_list_item_label">保险生效止期：</view>
|
<view class="box_info_list_item_val">{{info.endTime}}</view>
|
</view>
|
</view>
|
</view>
|
<view class="box_people">
|
<view class="box_people_label">被保人员</view>
|
<view class="box_people_list">
|
<view class="box_people_list_item" v-for="(item, index) in list" :key="index">
|
<template v-if="info.statusCollect !== 2">
|
<view class="item_status des">不在保</view>
|
</template>
|
<template v-else>
|
<view class="item_status des" v-if="item.applyStatus == 1">不在保</view>
|
<view class="item_status active" v-else>保障中</view>
|
</template>
|
<view class="item_head">
|
<view class="item_head_top">
|
<text>{{item.memberName}}</text>
|
<text>{{item.sex === 1 ? '女' : '男'}}｜{{IdCard(item.idcardNo)}}岁</text>
|
</view>
|
<view class="item_head_bottom">
|
身份证号：{{item.idcardNo}}
|
</view>
|
</view>
|
<view class="item_x"></view>
|
<view class="item_list">
|
<view class="item_list_item">
|
<view class="item_list_item_label">派遣单位：</view>
|
<view class="item_list_item_val">{{item.duName}}</view>
|
</view>
|
<view class="item_list_item">
|
<view class="item_list_item_label">所属工种：</view>
|
<view class="item_list_item_val">{{item.workTypeName}}</view>
|
</view>
|
<view class="item_list_item">
|
<view class="item_list_item_label">保险生效期：</view>
|
<view class="item_list_item_val">{{item.startTime}}-{{item.endTime}}</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view style="width: 100%; height: calc(env(safe-area-inset-bottom) + 100rpx);" v-if="[2,0,7,1,4,22,25,26].includes(info.statusCollect)"></view>
|
<!-- 直保 -->
|
<template v-if="info.solutionType === 0">
|
<!-- 保障中 -->
|
<view class="details_footer" v-if="info.statusCollect === 2">
|
<u-button type="primary" shape="circle" color="#437CB3" :plain="true" text="查看投保单" @click="seePdf(info.toubaodanSignedFile.fileurlFull)"></u-button>
|
<view style="width: 44rpx; height: 50rpx;"></view>
|
<u-button type="primary" shape="circle" color="#437CB3" :plain="true" text="查看保险单" @click="seePdf(info.baoxiandanFile.fileurlFull)"></u-button>
|
</view>
|
<!-- 待审核 -->
|
<view class="details_footer" v-if="info.statusCollect === 0">
|
<!-- show = true -->
|
<u-button type="primary" shape="circle" color="#437CB3" :plain="true" text="申请退回" @click="show = true"></u-button>
|
</view>
|
<!-- 待签署 -->
|
<view class="details_footer" v-if="info.statusCollect === 7">
|
<u-button type="primary" shape="circle" color="#437CB3" :plain="true" text="申请退回" @click="show = true"></u-button>
|
<view style="width: 44rpx; height: 50rpx;"></view>
|
<!-- @click="show1 = true" -->
|
<u-button type="primary" shape="circle" color="#437CB3" text="签署投保单" @click="signApplication"></u-button>
|
</view>
|
<!-- 待出账 -->
|
<view class="details_footer" v-if="info.statusCollect === 1">
|
<u-button type="primary" shape="circle" color="#437CB3" :plain="true" text="申请退回" @click="show = true"></u-button>
|
<view style="width: 44rpx; height: 50rpx;"></view>
|
<u-button type="primary" shape="circle" color="#437CB3" text="查看投保单" @click="seePdf(info.toubaodanSignedFile.fileurlFull)"></u-button>
|
</view>
|
<!-- 已退回 -->
|
<view class="details_footer" v-if="info.statusCollect === 4">
|
<u-button type="primary" shape="circle" color="#437CB3" @click="show2 = true" :plain="true" text="关闭订单"></u-button>
|
</view>
|
</template>
|
<!-- 委托投保 -->
|
<template v-else>
|
<!-- 待签署 -->
|
<view class="details_footer" v-if="info.statusCollect === 7">
|
<u-button type="primary" shape="circle" color="#437CB3" :plain="true" text="签署确认书" @click="openmessage(2)"></u-button>
|
<view style="width: 44rpx; height: 50rpx;"></view>
|
<u-button type="primary" shape="circle" color="#437CB3" text="签署申请单" @click="openmessage(3)"></u-button>
|
</view>
|
<!-- 待审核/待出账 -->
|
<view class="details_footer" v-if="info.statusCollect === 0 || info.statusCollect === 1">
|
<u-button type="primary" shape="circle" color="#437CB3" :plain="true" text="查看申请单" @click="seePdf(info.shenqingdanFile.fileurlFull)"></u-button>
|
<view style="width: 44rpx; height: 50rpx;"></view>
|
<u-button type="primary" shape="circle" color="#437CB3" text="查看确认书" @click="seePdf(info.fanganFile.fileurlFull)"></u-button>
|
</view>
|
<!-- 已退回 -->
|
<view class="details_footer" v-if="info.statusCollect === 4">
|
<u-button type="primary" shape="circle" color="#437CB3" @click="show2 = true" :plain="true" text="关闭申请"></u-button>
|
</view>
|
<!-- 投保中 -->
|
<view class="details_footer" v-if="info.statusCollect === 26 && info.unionApplyTbdStatus !== 0">
|
<u-button type="primary" shape="circle" color="#437CB3" text="签署投保单" @click="openmessage(1)"></u-button>
|
</view>
|
</template>
|
<!-- 申请退回确认弹窗 -->
|
<u-modal :show="show" title="温馨提示" :showCancelButton="true" cancelText="我再想想" confirmColor="#437CB3" @cancel="cancel" @confirm="confirm">
|
确认申请退回？
|
</u-modal>
|
<!-- 关闭确认弹窗 -->
|
<u-modal :show="show2" title="温馨提示" :showCancelButton="true" cancelText="我再想想" confirmColor="#437CB3" @cancel="cancel2" @confirm="confirm2">
|
确认关闭订单？
|
</u-modal>
|
<!-- 签署投保单验证码弹窗 -->
|
<u-modal :show="show1" title="获取验证码" :showCancelButton="true" confirmColor="#437CB3" @cancel="cancel1" @confirm="confirm1">
|
<view class="code">
|
<view class="code_input">
|
<input type="text" v-model="code" placeholder="输入验证码" />
|
</view>
|
<view class="code_text">
|
<text class="code_text_error" v-if="error === 1">验证码不能为空</text>
|
<text class="code_text_error" v-else-if="error === 2">验证码错误</text>
|
<text v-else></text>
|
|
<text @click="send" v-if="num === 0">获取验证码</text>
|
<text v-else>{{num}}</text>
|
</view>
|
</view>
|
</u-modal>
|
</view>
|
</template>
|
|
<script>
|
import { mapState } from 'vuex'
|
export default {
|
data() {
|
return {
|
orderId: null,
|
info: {},
|
page: 1,
|
next: false,
|
list: [],
|
show: false,
|
show1: false,
|
show2: false,
|
|
type: null,
|
code: '',
|
num: 0,
|
error: false,
|
timer: null
|
};
|
},
|
computed: {
|
...mapState(['userInfo'])
|
},
|
onLoad(options) {
|
this.orderId = options.orderId
|
this.getDetails()
|
this.applyDetailPage()
|
},
|
onReachBottom() {
|
this.applyDetailPage()
|
},
|
methods: {
|
send () {
|
this.$u.api.sendSms({
|
phone: this.userInfo.mobile
|
}).then(res => {
|
if (res.code === 200) {
|
this.num = 60
|
this.setTime()
|
}
|
})
|
},
|
setTime () {
|
this.timer = setInterval(() => {
|
if (this.num === 0) {
|
clearInterval(this.timer)
|
this.timer = null
|
return
|
}
|
this.num = this.num - 1
|
}, 1000)
|
},
|
// 打开发送验证码弹窗
|
openmessage(type) {
|
this.code = ''
|
clearInterval(this.timer)
|
this.error = ''
|
this.timer = null
|
this.num = 0
|
this.type = type
|
this.show1 = true
|
},
|
signApplication() {
|
uni.navigateTo({
|
url: `/pages/webView/webView?url=https://web.sandbox.junziqian.com/signInfo/viewDetail?ts=1711966477502&signNo=SSN1774742154020143104&sign=GHW6wWRJfEZiXO-gXZwTezR5CYUvhwbmoWHlPsqUCLA`
|
})
|
},
|
// 查看pdf
|
seePdf(url) {
|
if(!url) return;
|
uni.downloadFile({
|
url,
|
success: function (res) {
|
var filePath = res.tempFilePath;
|
uni.openDocument({
|
filePath: filePath,
|
success: function (res) {}
|
})
|
}
|
})
|
},
|
// 获取详情
|
getDetails() {
|
this.$u.api.insuranceApplyById(this.orderId)
|
.then(res => {
|
if (res.code === 200) {
|
this.info = res.data
|
}
|
})
|
},
|
// 获取在保人员
|
applyDetailPage() {
|
if (this.next) return
|
this.$u.api.applyDetailPage({
|
capacity: 10,
|
page: this.page,
|
model: {
|
applyId: this.orderId
|
}
|
}).then(res => {
|
if (res.code === 200) {
|
if (res.data.records && res.data.records.length > 0) {
|
this.page++
|
this.list.push(...res.data.records)
|
} else {
|
this.next = true
|
}
|
}
|
})
|
},
|
IdCard(UUserCard) {
|
let idcard = UUserCard.toString();
|
//获取年龄
|
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;
|
},
|
confirm() {
|
this.$u.api.applyOpt({
|
applyId: this.info.id,
|
optIllustration: '',
|
optType: 1
|
}).then(res => {
|
if (res.code === 200) {
|
this.getDetails()
|
this.show = false
|
}
|
})
|
},
|
cancel() {
|
this.show = false
|
},
|
confirm1() {
|
if (!this.code) {
|
this.error = 1
|
return
|
}
|
// 签署投保单
|
if (this.type === 1) {
|
this.$u.api.validateCode({
|
code: this.code
|
}).then(res => {
|
if (res.code === 200) {
|
this.error = ''
|
this.show1 = false
|
this.$u.api.getSignLink(this.info.id)
|
.then(url => {
|
if (url.code === 200) {
|
uni.navigateTo({
|
url: `/pages/webView/webView?url=${url.data}`
|
})
|
}
|
})
|
} else {
|
this.error = 2
|
}
|
})
|
// 确认书
|
} else if (this.type === 2) {
|
this.$u.api.signTBQRSLink({
|
businessId: this.info.id,
|
code: this.code
|
}).then(res => {
|
if (res.code === 200) {
|
this.error = ''
|
this.show1 = false
|
uni.navigateTo({
|
url: `/pages/webView/webView?url=${res.data}`
|
})
|
} else {
|
this.error = 2
|
}
|
})
|
// 签署申请单
|
} else if (this.type === 3) {
|
this.$u.api.getMemberListOnlineSignLink({
|
businessId: this.info.id,
|
code: this.code
|
}).then(res => {
|
if (res.code === 200) {
|
this.error = ''
|
this.show1 = false
|
uni.navigateTo({
|
url: `/pages/webView/webView?url=${res.data}`
|
})
|
} else {
|
this.error = 2
|
}
|
})
|
}
|
},
|
cancel1() {
|
this.show1 = false
|
},
|
confirm2() {
|
this.$u.api.applyOpt({
|
applyId: this.info.id,
|
optType: 2
|
}).then(res => {
|
if (res.code === 200) {
|
this.show2 = false
|
this.getDetails()
|
}
|
})
|
},
|
cancel2() {
|
this.show2 = false
|
},
|
returnStyle(type) {
|
if ([2,26].includes(type)) {
|
return 'linear-gradient( 180deg, #E5F7F1 0%, rgba(255,255,255,0) 100%);'
|
} else if ([0,7,1,22].includes(type)) {
|
return 'linear-gradient( 180deg, #FFF2E3 0%, rgba(255,255,255,0) 100%);'
|
} else if ([5,4,6,3,25].includes(type)) {
|
return '#f7f7f7'
|
}
|
},
|
returnStyle1(type) {
|
if ([2,26].includes(type)) {
|
return 'linear-gradient( 180deg, #E5F7F1 0%, rgba(255,255,255,0) 100%);'
|
} else if ([0,7,1,22].includes(type)) {
|
return 'linear-gradient( 180deg, #FFF2E3 0%, rgba(255,255,255,0) 100%);'
|
} else if ([5,4,6,3,25].includes(type)) {
|
return '#ffffff'
|
}
|
}
|
}
|
}
|
</script>
|
<style>
|
page {
|
background: #f7f7f7;
|
}
|
</style>
|
<style lang="scss" scoped>
|
.details {
|
width: 100%;
|
padding: 30rpx;
|
box-sizing: border-box;
|
.details_back {
|
width: 100%;
|
height: 240rpx;
|
position: fixed;
|
top: 0;
|
left: 0;
|
z-index: -1;
|
}
|
.box {
|
width: 100%;
|
.box_info {
|
width: 100%;
|
background: #FFFFFF;
|
border-radius: 16rpx;
|
overflow: hidden;
|
.box_info_head {
|
width: 100%;
|
height: 162rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 30rpx;
|
box-sizing: border-box;
|
.box_info_head_left {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
text {
|
&:nth-child(1) {
|
font-weight: 500;
|
font-size: 40rpx;
|
color: #222222;
|
font-style: normal;
|
}
|
&:nth-child(2) {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #777777;
|
font-style: normal;
|
margin-top: 8rpx;
|
}
|
}
|
}
|
image {
|
width: 100rpx;
|
height: 100rpx;
|
}
|
}
|
.box_info_center {
|
width: 100%;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
.box_info_center_x {
|
width: 100%;
|
border-top: 1rpx dashed #E5E5E5;
|
}
|
}
|
.box_info_list {
|
width: 100%;
|
padding: 30rpx;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
.box_info_list_item {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-bottom: 20rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
.box_info_list_item_label {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #777777;
|
font-style: normal;
|
}
|
.box_info_list_item_val {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #222222;
|
font-style: normal;
|
}
|
}
|
}
|
}
|
.box_people {
|
width: 100%;
|
margin-top: 32rpx;
|
.box_people_label {
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #222222;
|
font-style: normal;
|
}
|
.box_people_list {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
margin-top: 30rpx;
|
.box_people_list_item {
|
width: 100%;
|
padding: 30rpx;
|
box-sizing: border-box;
|
background-color: #FFFFFF;
|
border-radius: 16rpx;
|
overflow: hidden;
|
margin-top: 30rpx;
|
position: relative;
|
&:first-child {
|
margin-top: 0 !important;
|
}
|
.active {
|
background: #26BE89;
|
}
|
.des {
|
background: #CCCCCC;
|
}
|
.item_status {
|
position: absolute;
|
top: 0;
|
right: 0;
|
width: 118rpx;
|
height: 52rpx;
|
line-height: 52rpx;
|
text-align: center;
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #FFFFFF;
|
font-style: normal;
|
border-radius: 0rpx 16rpx 0rpx 32rpx;
|
}
|
.item_head {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
.item_head_top {
|
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;
|
}
|
}
|
}
|
.item_head_bottom {
|
width: 100%;
|
margin-top: 8rpx;
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #777777;
|
font-style: normal;
|
}
|
}
|
.item_x {
|
width: 100%;
|
margin: 20rpx 0;
|
border-top: 1rpx dashed #E5E5E5;
|
}
|
.item_list {
|
width: 100%;
|
.item_list_item {
|
width: 100%;
|
display: flex;
|
align-items: flex-start;
|
margin-bottom: 16rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
.item_list_item_label {
|
flex-shrink: 0;
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #777777;
|
font-style: normal;
|
}
|
.item_list_item_val {
|
flex: 1;
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #222222;
|
font-style: normal;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
.details_footer {
|
width: 100%;
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
padding: 10rpx 30rpx;
|
box-sizing: border-box;
|
background-color: #ffffff;
|
display: flex;
|
align-items: center;
|
padding-bottom: env(safe-area-inset-bottom);
|
}
|
.code {
|
width: 100%;
|
.code_input {
|
width: 100%;
|
height: 98rpx;
|
background: #F7F7F7;
|
border-radius: 49rpx;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
margin-top: 20rpx;
|
input {
|
width: 100%;
|
height: 100%;
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #222222;
|
font-style: normal;
|
text-align: center;
|
}
|
}
|
.code_text {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-top: 30rpx;
|
.code_text_error {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #FF2828;
|
font-style: normal;
|
}
|
text {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #437CB3;
|
font-style: normal;
|
}
|
}
|
}
|
}
|
</style>
|
