津贴详情图片放大功能以及关系证明分组放大

This commit is contained in:
liyuetong
2021-09-18 13:16:51 +08:00
committed by zhangqi1
parent f634863fa4
commit 69da12fac8
7 changed files with 179 additions and 73 deletions

View File

@@ -3634,6 +3634,28 @@ export default {
allowanceEnjoyUserRole: [
{ id: '0', text: '父亲' },
{ id: '1', text: '母亲' }
]
],
// <!--------- 津贴申请专用 end --------->
imageInfoType:[
{ id: '1', text: '居民身份证正面' },
{ id: '2', text: '居民身份证反面' },
{ id: '3', text: '银行卡正面' },
{ id: '5', text: '户口本正面' },
{ id: '6', text: '户口本反面' },
{ id: '7', text: '出生证正面' },
{ id: '12', text: '出生证反面' },
{ id: '8', text: '护照面' },
{ id: '9', text: '港澳居民来往内地通行证正面' },
{ id: '13', text: '港澳居民来往内地通行证反面' },
{ id: '10', text: '台湾居民来往大陆通行证正面' },
{ id: '14', text: '台湾居民来往大陆通行证反面' },
{ id: '15', text: '外国人永久居留身份证正面' },
{ id: '16', text: '外国人永久居留身份证反面' },
{ id: '17', text: '港澳台居民居住证正面' },
{ id: '18', text: '港澳台居民居住证反面' },
{ id: '24', text: '健康告知异常类资料' },
{ id: '25', text: '执业证' },
{ id: '26', text: '享受人无银行卡证明' },
{ id: '27', text: '关系证明' }
]
}

View File

@@ -182,6 +182,9 @@
.black {
color: $black !important;
}
.ffcb6b{
color:#ffcb6b;
}
// 常用文字颜色
.c-gray-base {

View File

@@ -1,5 +1,5 @@
<template>
<div :class="['orderDetail-container', 'bg-white', type == '1' ? 'pb50' : 'pb10']">
<div :class="['orderDetail-container', 'bg-white', type == '1' ? 'pb50' : 'pb30']">
<van-collapse v-model="activeNames">
<!-- 基本信息 开始 -->
<van-collapse-item class="main-title" name="baseInfo">
@@ -45,35 +45,68 @@
</van-collapse-item>
<!-- 账户信息 结束 -->
<!-- 影像资料 开始 -->
<!-- imageInfoType 1-身份证头像 2-身份证国徽 3-银行卡正面影像 4-人脸影像 5-户口本户主页 6-户口本本人页 7-出生证 8-护照本人照片页 9-港澳居民通行证头像 10-台湾居民通行证头像面 11-其他 -->
<!-- subBusinessType 0投保人 1被保人 2其他 3申请人 4受托人 5代理人 -->
<!-- imageInfoType 1-居民身份证 2-居民身份证 3-银行卡正面 5-户口本正面 6-户口本反面 7-出生证 12-出生证反面
8-护照面 9-港澳居民来往内地通行证正面 13-港澳居民来往内地通行证反面 10-台湾居民来往大陆通行证正面 14-台湾居民来往大陆通行证反面
15-外国人永久居留身份证正面 16-外国人永久居留身份证反面 17-港澳台居民居住证正面 18-港澳台居民居住证反面
24-健康告知异常类资料 25-申请人执业证 26-享受人无银行卡证明 27-关系证明-->
<!-- subBusinessType 0-申请人 1-享受人-->
<van-collapse-item class="main-title bg-white" title="影像资料" name="MediaInfo">
<div v-for="(item, i) in mediaUploadDTOLst" :key="i">
<!-- <template v-if="item.subBusinessType == '0'"> -->
<div class="fs16 m-img">
<p class="pv14" v-if="item.imageInfoType == '1'">申请人居民身份证正面</p>
<p class="pv14" v-else-if="item.imageInfoType == '2'">申请人居民身份证反面</p>
<p class="pv14" v-else-if="item.imageInfoType == '3'">申请人执业证</p>
<p class="pv14" v-else-if="item.imageInfoType == '4'">享受人居民身份证正面</p>
<p class="pv14" v-else-if="item.imageInfoType == '5'">享受人居民身份证反面</p>
<p class="pv14" v-else-if="item.imageInfoType == '6'">银行卡正面</p>
<p class="pv14" v-else-if="item.imageInfoType == '7'">关系证明</p>
<p class="pv14" v-else-if="item.imageInfoType == '8'">享受人无银行卡/手机号证明</p>
<img :src="item.rgssUrl | urlFormat" alt="" />
<div v-for="(item, i) in mediaDTOSList" :key="i">
<template v-if="item.subBusinessType == '0'">
<div class="fs16 m-img">
<p class="pv14">申请人{{ item.imageInfoType | idToText('imageInfoType') }}</p>
<img class="mt10" @click="prevImg(imgUrl + item.rgssUrl)" :src="imgUrl + item.rgssUrl" alt="" />
</div>
</template>
</div>
<div v-for="(item, f) in mediaUploadDTOLst" :key="f">
<template v-if="item.imageInfoType == '25'">
<div class="fs16 m-img">
<p class="pv14">申请人执业证</p>
<img class="mt10" @click="prevImg(imgUrl + item.rgssUrl)" :src="imgUrl + item.rgssUrl" alt="" />
</div>
</template>
</div>
<div v-for="(item, m) in mediaDTOSList" :key="m">
<template v-if="item.subBusinessType == '1'">
<div class="fs16 m-img">
<p class="pv14">享受人{{ item.imageInfoType | idToText('imageInfoType') }}</p>
<img class="mt10" @click="prevImg(imgUrl + item.rgssUrl)" :src="imgUrl + item.rgssUrl" alt="" />
</div>
</template>
</div>
<div v-for="(item, n) in mediaUploadDTOLst" :key="n">
<div class="fs16 m-img" v-if="item.imageInfoType == 3">
<p class="pv14">银行卡正面</p>
<img class="mt10" @click="prevImg(imgUrl + item.rgssUrl)" :src="imgUrl + item.rgssUrl" alt="" />
</div>
</div>
<div v-if="mediaDTOSOther.length">
<p class="pv14 fs16 pl20 pt20">关系证明</p>
<p class="red fs10 pl20 pr20">温馨提示申请人和享受人在同一户口本上需上传户主页享受人页及本人页如不在同一户口本上请上传公安局或居委会开具的关系证明</p>
<div v-for="(item, i) in mediaDTOSOther" :key="i" @click="prevImgList(i)" class="fs16 m-img inline-b">
<img class="mt10" :src="imgUrl + item.rgssUrl" alt="" />
</div>
</div>
<div v-if="mediaDTOSNoBank.length">
<p class="pv14 fs16 pl20 pt20">享受人无银行卡/手机号证明</p>
<div v-for="(item, i) in mediaDTOSNoBank" :key="i" class="fs16 m-img">
<img class="mt10" @click="prevImg(imgUrl + item.rgssUrl)" :src="imgUrl + item.rgssUrl" alt="" />
</div>
<!-- </template> -->
</div>
</van-collapse-item>
<!-- 影像信息 结束 -->
<!-- 签名信息 开始 -->
<van-collapse-item class="main-title bg-white" name="signInfo">
<van-collapse-item class="main-title bg-white pt20" name="signInfo">
<template slot="title">
<span>签名信息</span>
</template>
<div class="ml15" v-for="(item, i) in allowanceSignDTOLst" :key="i">
<span v-if="item.type == 1">申请人签名</span>
<span v-else-if="item.type == 2">享受人签名</span>
<img class="ml10 v-middle" :src="item.signPath" alt="" />
<img class="w60 h40 ml15 v-middle" :src="imgUrl + item.signPath.replace(/\+/g, '%2B')" alt="" />
</div>
</van-collapse-item>
<!-- 签名信息 结束 -->
@@ -107,11 +140,12 @@
</div>
</template>
<script>
import { Toast, CellGroup, Field, Dialog, Collapse, CollapseItem, Cell, Popup, Divider, RadioGroup, Radio } from 'vant'
import { Toast, CellGroup, Field, Dialog, Collapse, CollapseItem, Cell, Popup, Divider, RadioGroup, Radio,ImagePreview } from 'vant'
import { getAllowanceDetail, updateApprove } from '@/api/ebiz/allowance/allowance'
import areaList from '@/assets/js/utils/area'
import filter from '@/filters/index'
import SelectRadio from '@/components/ebiz/SelectRadio'
import config from '@/config'
export default {
name: 'detail',
@@ -127,10 +161,12 @@ export default {
[RadioGroup.name]: RadioGroup,
[Radio.name]: Radio,
[Toast.name]: Toast,
[ImagePreview.name]: ImagePreview,
[SelectRadio.name]: SelectRadio
},
data() {
return {
imgUrl: config.imgDomain + `/returnImageStream?a=b.jpg&imgPath=`,
approveResult: '1', //审批结果 (0-审批拒绝,1-审批通过)
approveMsg: '', //审批信息
colorButton: '#2E4591', //select-radio中按钮颜色
@@ -143,7 +179,9 @@ export default {
allowanceApplyDTO: {},
allowanceEnjoyDTO: {},
mediaUploadDTOLst: [], //影像信息
mediaDTOSOther: [], //影像信息--其他
mediaDTOSOther: [], //影像信息--关系
mediaDTOSNoBank: [], //影像信息--无银行卡证明
mediaDTOSList: [], //影像信息--证件类型
allowanceBankDTO: {},
allowanceSignDTOLst: [],
activeNames: ['baseInfo', 'accountInfo', 'MediaInfo', 'signInfo'],
@@ -184,6 +222,17 @@ export default {
},
mounted() {},
methods: {
// 关系证明分组图片放大
prevImgList(i) {
let imgs = this.mediaDTOSOther.map(img => {
return this.imgUrl + img.rgssUrl
})
ImagePreview(imgs, i)
},
// 单图片放大
prevImg(url) {
ImagePreview([url])
},
// 获取订单详情
getAllowanceDetail() {
let data = {
@@ -197,13 +246,21 @@ export default {
this.mediaUploadDTOLst = allowanceDTO.mediaUploadDTOLst
this.allowanceBankDTO = allowanceDTO.allowanceBankDTO //银行卡相关信息
this.allowanceSignDTOLst = allowanceDTO.allowanceSignDTOLst //签字相关信息
this.showbackBankAddressStr(this.backProvinceCode, this.bankAreaCode) // provinceCode, cityCode查询省市数据反显
//处理影像中其他类型
if (this.mediaDTOS != null) {
this.mediaDTOS.forEach((item) => {
if (item.subBusinessType == '2') {
this.mediaUploadDTOLst.push(item)
this.showbackBankAddressStr(this.allowanceBankDTO.bankProvinceCode, this.allowanceBankDTO.bankAreaCode) // provinceCode, cityCode查询省市数据反显
//处理影像中的关系证明
if (this.mediaUploadDTOLst != null) {
this.mediaUploadDTOLst.forEach((item) => {
//27 关系证明
if (item.imageInfoType == '27') {
this.mediaDTOSOther.push(item)
}
//26 享受人无银行卡证明
if (item.imageInfoType == '26') {
this.mediaDTOSNoBank.push(item)
}
// 26 享受人无银行卡证明 27 关系证明 3 银行卡正面 25 执业证
if(item.imageInfoType != '26' && item.imageInfoType != '27' && item.imageInfoType != '3' && item.imageInfoType != '25'){
this.mediaDTOSList.push(item)
}
})
}
@@ -225,7 +282,6 @@ export default {
return false
}
}
updateApprove({ allowanceNo: this.allowanceNo, approveResult: this.approveResult, approveMsg: this.approveMsg }).then((res) => {
if (res.result == '0') {
// this.$toast('审批提交成功!')

View File

@@ -42,9 +42,7 @@
<van-button @click="revokeOrder(order)" v-if="active == 'commit'" plain size="small" class="mr5" type="danger" round>撤销</van-button>
<van-button @click="seeDetail(order)" v-if="active == 'commit'" size="small" type="danger" round class="mr5">查看详情</van-button>
<van-button @click="seeProcess(order)" v-if="active == 'commit'" size="small" type="danger" round>查看审批流程</van-button>
<van-button @click="isConditionsFunc(2, order)" v-if="active == 'pass'" size="small" class="mr5" type="danger" round
>再次申请</van-button
>
<van-button @click="isConditionsFunc(2, order)" v-if="active == 'pass'" size="small" class="mr5" type="danger" round>再次申请</van-button>
<van-button plain @click="seeProcess(order)" v-if="active == 'pass'" size="small" type="danger" round>查看审批流程</van-button>
</div>
</div>
@@ -55,7 +53,7 @@
<div class="fs17 mt40 gray">暂无申请记录</div>
</div>
</div>
<van-button type="danger" class="bottom-btn" @click="isConditionsFunc(0)" v-no-more-click="1000">点击申请</van-button>
<van-button type="danger" class="bottom-btn ffcb6b" @click="isConditionsFunc(0)" v-no-more-click="1000">点击申请</van-button>
</div>
</template>
@@ -91,6 +89,15 @@ export default {
intercept: '1' //是否拦截原生返回事件 1是 其他否
})
}, 100)
// 右上角的显示
window.EWebBridge.webCallAppInJs('webview_right_button', {
btns: [
{
title: '我的资料',
title_color: "2e4591"
}
]
})
window.appCallBack = this.appCallBack
this.getList()
this.remindFunc()
@@ -102,6 +109,21 @@ export default {
flag: 'home'
})
}
if (data.trigger == 'right_button_click') {
this.$jump({
flag: 'h5',
extra: {
url: location.origin + '/#/allowance/application/BaseInfo?type=add&parentShowPicker=true'
},
routerInfo: {
path: '/allowance/application/BaseInfo',
query: {
type: 'add',
parentShowPicker: true
}
}
})
}
},
//初始化保单列表
getList() {
@@ -244,13 +266,14 @@ export default {
this.$jump({
flag: 'h5',
extra: {
url: location.origin + '/#/allowance/application/BaseInfo?allowanceNo=' + order.allowanceNo + '&type=reapply'
url: location.origin + '/#/allowance/application/BaseInfo?allowanceNo=' + order.allowanceNo + '&type=reapply&edit=1'
},
routerInfo: {
path: '/allowance/application/BaseInfo',
query: {
allowanceNo: order.allowanceNo,
type: 'reapply'
type: 'reapply',
edit: 1
}
}
})
@@ -260,41 +283,41 @@ export default {
remindFunc() {
myDataremind({}).then((res) => {
if (res.result == '0') {
if(res.content.length){
// allowanceFirstStatus 提醒状态 Y--初次 N--定期 todo
let confirmButtonText
let cancelButtonText
if(res.content.allowanceFirstStatus == 'Y'){
confirmButtonText = '去填写'
cancelButtonText = '关闭'
}else if(res.content.allowanceFirstStatus == 'N'){
confirmButtonText = '去更新'
cancelButtonText = '暂不需要'
}
this.$dialog
.confirm({
className: 'dialog-blue',
title: '提示',
message: res.content.allowanceFirstDesc,
confirmButtonText: confirmButtonText,
cancelButtonText: cancelButtonText
})
.then(() => {
//parentShowPicker 是否调用父母列表的组件显示
this.$jump({
flag: 'h5',
extra: {
url: location.origin + '/#/allowance/application/BaseInfo?type=add&parentShowPicker=true'
},
routerInfo: {
path: '/allowance/application/BaseInfo',
query: {
type: 'add',
parentShowPicker:true
}
}
if (res.content.allowanceFirstDesc) {
// allowanceFirstStatus 提醒状态 Y--初次 N--定期 todo
let confirmButtonText
let cancelButtonText
if (res.content.allowanceFirstStatus == 'Y') {
confirmButtonText = '去填写'
cancelButtonText = '关闭'
} else if (res.content.allowanceFirstStatus == 'N') {
confirmButtonText = '去更新'
cancelButtonText = '暂不需要'
}
this.$dialog
.confirm({
className: 'dialog-blue',
title: '提示',
message: res.content.allowanceFirstDesc,
confirmButtonText: confirmButtonText,
cancelButtonText: cancelButtonText
})
.then(() => {
//parentShowPicker 是否调用父母列表的组件显示
this.$jump({
flag: 'h5',
extra: {
url: location.origin + '/#/allowance/application/BaseInfo?type=add&parentShowPicker=true'
},
routerInfo: {
path: '/allowance/application/BaseInfo',
query: {
type: 'add',
parentShowPicker: true
}
}
})
})
})
}
} else {
this.$toast(res.resultMessage)

View File

@@ -51,7 +51,7 @@
</p>
</div>
</div>
<van-button v-if="!isWeixin" type="danger" color="#2E4591" class="bottom-btn" @click="nextStep" v-no-more-click="1000">提交审批</van-button>
<van-button v-if="!isWeixin" type="danger" color="#2E4591" class="bottom-btn ffcb6b" @click="nextStep" v-no-more-click="1000">提交审批</van-button>
<SignTure :SignShow="SignShow" :signInfo="allowanceEnjoyDTO" @close="SignClose" @SignSuccessful="SignSuccessful"></SignTure>
<!-- 短信验证 -->
<van-dialog v-model="show" title="提示" show-cancel-button @confirm="authConfirm(authCode)" @cancel="clearTimer">

View File

@@ -141,10 +141,11 @@ export default {
this.$jump({
flag: 'h5',
extra: {
url: location.origin + `/#/allowance/application/BaseInfo?allowanceNo=${this.allowanceNo}`
url: location.origin + `/#/allowance/application/BaseInfo?allowanceNo=${this.allowanceNo}&edit=1`
},
routerInfo: {
path: `/allowance/application/BaseInfo?allowanceNo=${this.allowanceNo}`
path: `/allowance/application/BaseInfo?allowanceNo=${this.allowanceNo}`,
edit:1
}
})
})
@@ -157,6 +158,7 @@ export default {
}).then((res) => {
if (res.result == '0') {
if (res.resultMessage) {
this.processCheck()
this.$toast(res.resultMessage)
}
} else {

View File

@@ -60,7 +60,7 @@
<van-checkbox class="ml10" v-model="checkedAll" checked-color="#2e4591" @click="checkAll">全选</van-checkbox>
</div>
<div>
<van-button type="danger" round size="small" @click="passHandle" v-no-more-click="1000">审批通过</van-button>
<van-button class="ffcb6b" type="danger" round size="small" @click="passHandle" v-no-more-click="1000">审批通过</van-button>
</div>
</div>
</div>