<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" 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" 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>
|
</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);"></view>
|
<!-- 保障中 -->
|
<view class="details_footer" v-if="info.statusCollect === 2">
|
<u-button type="primary" shape="circle" color="#437CB3" :plain="true" text="查看投保单"></u-button>
|
<view style="width: 44rpx; height: 50rpx;"></view>
|
<u-button type="primary" shape="circle" color="#437CB3" :plain="true" text="查看保险单"></u-button>
|
</view>
|
<!-- 待审核 -->
|
<view class="details_footer" v-if="info.statusCollect === 0">
|
<!-- show = true -->
|
<u-button type="primary" shape="circle" color="#437CB3" @click="open1" :plain="true" text="申请退回"></u-button>
|
</view>
|
<!-- 待签署 -->
|
<view class="details_footer" v-if="info.statusCollect === 7">
|
<u-button type="primary" shape="circle" color="#437CB3" :plain="true" text="申请退回"></u-button>
|
<view style="width: 44rpx; height: 50rpx;"></view>
|
<u-button type="primary" shape="circle" color="#437CB3" @click="show1 = true" text="签署投保单"></u-button>
|
</view>
|
<!-- 待出账 -->
|
<view class="details_footer" v-if="info.statusCollect === 1">
|
<u-button type="primary" shape="circle" color="#437CB3" :plain="true" text="申请退回"></u-button>
|
<view style="width: 44rpx; height: 50rpx;"></view>
|
<u-button type="primary" shape="circle" color="#437CB3" text="查看投保单"></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 style="width: 44rpx; height: 50rpx;"></view>
|
<u-button type="primary" shape="circle" color="#437CB3" text="再次投保"></u-button>
|
</view>
|
<!-- 申请退回确认弹窗 -->
|
<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" placeholder="输入验证码" />
|
</view>
|
<view class="code_text">
|
<text class="code_text_error">验证码错误</text>
|
<text>获取验证码</text>
|
</view>
|
</view>
|
</u-modal>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
orderId: null,
|
info: {},
|
page: 1,
|
next: false,
|
list: [],
|
show: false,
|
show1: false,
|
show2: false
|
};
|
},
|
onLoad(options) {
|
this.orderId = options.orderId
|
this.getDetails()
|
this.applyDetailPage()
|
},
|
onReachBottom() {
|
this.applyDetailPage()
|
},
|
methods: {
|
// 获取详情
|
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
|
}
|
}
|
})
|
},
|
open1() {
|
uni.navigateToMiniProgram({
|
appId: 'wxf7fd282cd119885f', // 要打开的小程序的appid
|
path: 'pages/index/index', // 打开的页面路径，可选
|
extraData: {
|
// 需要传递给目标小程序的数据，可选
|
},
|
success(res) {
|
// 打开成功的回调，可选
|
console.log('打开成功');
|
},
|
fail(err) {
|
// 打开失败的回调，可选
|
console.log('打开失败', err);
|
}
|
});
|
},
|
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.show = false
|
},
|
cancel() {
|
this.show = false
|
},
|
confirm1() {
|
this.show1 = false
|
},
|
cancel1() {
|
this.show1 = false
|
},
|
confirm2() {
|
this.show2 = false
|
},
|
cancel2() {
|
this.show2 = false
|
},
|
returnStyle(type) {
|
if ([2].includes(type)) {
|
return 'linear-gradient( 180deg, #E5F7F1 0%, rgba(255,255,255,0) 100%);'
|
} else if ([0,7,1].includes(type)) {
|
return 'linear-gradient( 180deg, #FFF2E3 0%, rgba(255,255,255,0) 100%);'
|
} else if ([5,4,6,3].includes(type)) {
|
return '#f7f7f7'
|
}
|
},
|
returnStyle1(type) {
|
if ([2].includes(type)) {
|
return 'linear-gradient( 180deg, #E5F7F1 0%, rgba(255,255,255,0) 100%);'
|
} else if ([0,7,1].includes(type)) {
|
return 'linear-gradient( 180deg, #FFF2E3 0%, rgba(255,255,255,0) 100%);'
|
} else if ([5,4,6,3].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>
|
