<template>
|
<view class="details">
|
<template v-if="info">
|
<view class="details_back" :style="{ background: returnStyle(info.status) }"></view>
|
</template>
|
<view class="box">
|
<view class="box_info">
|
<template v-if="info">
|
<view class="box_info_head" :style="{ background: returnStyle1(info.status) }">
|
<view class="box_info_head_left">
|
<text>{{info.solutionsName || ''}}</text>
|
<text>关联保单号：{{info.applyCode}}</text>
|
</view>
|
<image v-if="info.status === 2" src="@/static/icon/progress_yishengxiao@2x.png" mode="widthFix"></image>
|
<image v-if="info.status === 9" src="@/static/icon/ic_toubaozhong.png" mode="widthFix"></image>
|
<image v-if="info.status === 1" src="@/static/icon/progress_daishenhe@2x.png" mode="widthFix"></image>
|
<image v-if="info.status === 0" src="@/static/icon/progress_daiqianshu@2x.png" mode="widthFix"></image>
|
<image v-if="info.status === 3" src="@/static/icon/progress_shenqingtuihui@2x.png" mode="widthFix"></image>
|
<image v-if="info.status === 5" src="@/static/icon/progress_yituihui@2x.png" mode="widthFix"></image>
|
<image v-if="info.status === 6" src="@/static/icon/progress_yiguanbi@2x.png" mode="widthFix"></image>
|
<image v-if="info.status === 7" src="@/static/icon/progress_daichudan@2x.png" mode="widthFix"></image>
|
</view>
|
</template>
|
<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.addNum}}人</view>
|
</view>
|
<view class="box_info_list_item">
|
<view class="box_info_list_item_label">减保人数：</view>
|
<view class="box_info_list_item_val">{{info.delNum}}人</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}}~{{info.endTime}}</view>
|
</view>
|
<view class="box_info_list_item">
|
<view class="box_info_list_item_label">批增生效日期：</view>
|
<view class="box_info_list_item_val">{{info.applyStartTime}}</view>
|
</view>
|
<view class="box_info_list_item">
|
<view class="box_info_list_item_label">批减生效日期：</view>
|
<view class="box_info_list_item_val">{{info.delValidTime}}</view>
|
</view>
|
</view>
|
</view>
|
<view class="box_people">
|
<view class="box_people_label">
|
<u-tabs
|
lineColor="#437CB3"
|
:activeStyle="{
|
color: '#222222',
|
fontWeight: '500'
|
}"
|
:inactiveStyle="{
|
color: '#666666'
|
}"
|
:list="cate"
|
@click="changeTabs">
|
</u-tabs>
|
</view>
|
<view class="box_people_list">
|
<view class="box_people_list_item" v-for="(item, index) in list" :key="index">
|
<view class="item_status active" v-if="types[0] === '0'">加保</view>
|
<view class="item_status des" v-if="types[0] === '1'">减保</view>
|
<view class="item_head">
|
<view class="item_head_top">
|
<text>{{item.memberName}}</text>
|
<text>{{item.sex === 1 ? '女' : '男'}}｜{{IdCard(item.memberIdcardNo)}}岁</text>
|
</view>
|
<view class="item_head_bottom">
|
身份证号：{{item.memberIdcardNo}}
|
</view>
|
<view class="item_head_bottom">
|
备注：{{item.remark || ''}}
|
</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>
|
</view>
|
</view>
|
</view>
|
</view>
|
<template v-if="info">
|
<view style="width: 100%; height: calc(env(safe-area-inset-bottom) + 100rpx);" v-if="[2,1,5,0].includes(info.status)"></view>
|
</template>
|
<!-- 直保 -->
|
<template v-if="info && info.solutionType === 0">
|
<!-- 已生效 -->
|
<view class="details_footer" v-if="info.status === 2">
|
<u-button type="primary" shape="circle" color="#437CB3" text="查看申请单" @click="seePdf(info.applyFile.fileurlFull)"></u-button>
|
<view style="width: 44rpx; height: 50rpx;"></view>
|
<u-button type="primary" shape="circle" color="#437CB3" text="查看批单" @click="seePdf(info.pidanFile.fileurlFull)"></u-button>
|
</view>
|
<!-- 待审核 -->
|
<view class="details_footer" v-if="info.status === 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.applyFile.fileurlFull)"></u-button>
|
</view>
|
<!-- 已退回 -->
|
<view class="details_footer" v-if="info.status === 5">
|
<u-button type="primary" shape="circle" color="#437CB3" @click="show2 = true" :plain="true" text="关闭订单"></u-button>
|
</view>
|
<!-- 待签署 -->
|
<view class="details_footer" v-if="info.status === 0">
|
<u-button type="primary" shape="circle" color="#437CB3" :plain="true" @click="show = true" text="申请退回"></u-button>
|
<view style="width: 44rpx; height: 50rpx;"></view>
|
<u-button type="primary" shape="circle" color="#437CB3" text="签署投保单" @click="openmessage(1)"></u-button>
|
</view>
|
</template>
|
<!-- 委托保 -->
|
<template v-if="info && info.solutionType === 1">
|
<!-- 已生效 -->
|
<view class="details_footer" v-if="info.status === 2">
|
<u-button type="primary" shape="circle" color="#437CB3" text="查看申请单" @click="seePdf(info.applyFile.fileurlFull)"></u-button>
|
<view style="width: 44rpx; height: 50rpx;"></view>
|
<u-button type="primary" shape="circle" color="#437CB3" text="查看批单" @click="seePdf(info.pidanFile.fileurlFull)"></u-button>
|
</view>
|
<!-- 待审核/待出单/投保中 -->
|
<view class="details_footer" v-if="info.status === 1 || info.status === 9 || info.status === 7">
|
<u-button type="primary" shape="circle" color="#437CB3" text="查看申请单" @click="seePdf(info.applyFile.fileurlFull)"></u-button>
|
</view>
|
<!-- 已退回 -->
|
<view class="details_footer" v-if="info.status === 5">
|
<u-button type="primary" shape="circle" color="#437CB3" @click="show2 = true" :plain="true" text="关闭订单"></u-button>
|
</view>
|
<!-- 待签署 -->
|
<view class="details_footer" v-if="info.status === 0">
|
<u-button type="primary" shape="circle" color="#437CB3" text="签署申请单" @click="openmessage(2)"></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 {
|
id: null,
|
info: null,
|
types: ['0'],
|
next: false,
|
page: 1,
|
list: [],
|
show: false,
|
show1: false,
|
show2: false,
|
cate: [{
|
name: '加保人员',
|
// id: ['0']
|
}, {
|
name: '减保人员',
|
// id: ['1']
|
}],
|
|
type: null,
|
code: '',
|
num: 0,
|
error: false,
|
timer: null,
|
|
loading: false
|
};
|
},
|
onLoad(options) {
|
this.id = options.id
|
this.getInfo()
|
this.getList()
|
},
|
computed: {
|
...mapState(['userInfo'])
|
},
|
onReachBottom() {
|
this.getList()
|
},
|
methods: {
|
// 查看pdf
|
seePdf(url) {
|
if(!url) return;
|
uni.downloadFile({
|
url,
|
success: function (res) {
|
var filePath = res.tempFilePath;
|
uni.openDocument({
|
filePath: filePath,
|
success: function (res) {}
|
})
|
}
|
})
|
},
|
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.confirm1()
|
// this.show1 = 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;
|
},
|
changeTabs(index) {
|
this.types = index.index === 1 ? ['1'] : ['0']
|
this.next = false
|
this.page = 1
|
this.list = []
|
this.getList()
|
},
|
getInfo() {
|
this.$u.api.applyChangeById(this.id)
|
.then(res => {
|
if (res.code === 200) {
|
this.info = res.data
|
}
|
})
|
},
|
// 加减保人员
|
getList() {
|
if (this.next) return
|
this.$u.api.applyChagneDetailPage({
|
capacity: 10,
|
page: this.page,
|
model: {
|
applyChangeId: this.id,
|
types: this.types
|
}
|
}).then(res => {
|
if (res.code === 200) {
|
if (res.data.records.length > 0) {
|
this.page++
|
this.list.push(...res.data.records)
|
} else {
|
this.next = true
|
}
|
}
|
})
|
},
|
// 申请退回
|
confirm() {
|
this.$u.api.applyChangeOpt({
|
applyId: this.info.id,
|
optType: 3
|
}).then(res => {
|
if (res.code === 200) {
|
this.show = false
|
this.getInfo()
|
}
|
})
|
},
|
cancel() {
|
this.show = false
|
},
|
// 签署
|
confirm1() {
|
// if (!this.code) {
|
// this.error = 1
|
// return
|
// }
|
this.loading = true
|
// 签署投保单
|
if (this.type === 1) {
|
console.log('签署申请单')
|
this.$u.api.validateCode({
|
code: this.code
|
}).then(res => {
|
if (res.code === 200) {
|
// this.error = ''
|
// this.show1 = false
|
this.$u.api.getJiajianBaoSignLink({ id: this.info.id })
|
.then(url => {
|
if (url.code === 200) {
|
this.loading = false
|
uni.navigateTo({
|
url: `/pages/webView/webView?url=${encodeURIComponent(url.data)}`
|
})
|
}
|
})
|
}
|
// else {
|
// this.error = 2
|
// }
|
})
|
// this.show1 = false
|
// 申请单
|
} else if (this.type === 2) {
|
this.$u.api.getChangeMemberListOnlineSignLink({
|
businessId: this.info.id,
|
code: this.code
|
}).then(res => {
|
if (res.code === 200) {
|
// this.error = ''
|
// this.show1 = false
|
this.loading = false
|
uni.navigateTo({
|
url: `/pages/webView/webView?url=${encodeURIComponent(res.data)}`
|
})
|
}
|
// else {
|
// this.error = 2
|
// }
|
})
|
}
|
},
|
cancel1() {
|
this.show1 = false
|
},
|
// 关闭订单
|
confirm2() {
|
this.$u.api.applyChangeOpt({
|
applyId: this.info.id,
|
optType: 6
|
}).then(res => {
|
if (res.code === 200) {
|
this.show2 = false
|
this.getInfo()
|
}
|
})
|
},
|
cancel2() {
|
this.show2 = false
|
},
|
returnStyle(type) {
|
if ([2,9].includes(type)) {
|
return 'linear-gradient(#97DDC5 0%, #F7F7F7 100%);'
|
} else if ([0,1,7].includes(type)) {
|
return 'linear-gradient( 180deg, #FBC88C 0%, #F7F7F7 100%);'
|
} else if ([3,5,6].includes(type)) {
|
return ''
|
}
|
},
|
returnStyle1(type) {
|
if ([2,9].includes(type)) {
|
return 'linear-gradient( 180deg, #E5F7F1 0%, rgba(255,255,255,0) 100%)'
|
} else if ([0,1,7].includes(type)) {
|
return 'linear-gradient( 180deg, #FFF2E3 0%, rgba(255,255,255,0) 100%);'
|
} else if ([3,5,6].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: flex-start;
|
margin-bottom: 20rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
.box_info_list_item_label {
|
flex-shrink: 0;
|
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_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: #FF971D;
|
}
|
.item_status {
|
position: absolute;
|
top: 0;
|
right: 0;
|
width: 92rpx;
|
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: center;
|
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 calc(env(safe-area-inset-bottom) + 10rpx) 30rpx;
|
box-sizing: border-box;
|
background-color: #ffffff;
|
display: flex;
|
align-items: center;
|
}
|
.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>
|
