<template> <h-view id="create-enclosure-info"> <h-header :proportion="[5,1,1]" class="bar-custom"> <div slot="left" class="h-header-btn"> <img src="@/assets/userBind/arrow.png" @click="$routeGo()" > <span>附件信息</span> </div> </h-header> <h-content> <div class="top"> <div class="item"> <img src="@/assets/contractCreate/finished.png" > <p>基本信息</p> </div> <span class="line" /> <div class="item"> <img src="@/assets/contractCreate/finished.png" > <p>租赁信息</p> </div> <span class="line" /> <div class="item"> <span v-if="!isReadOnly">3</span> <img v-if="isReadOnly" src="@/assets/contractCreate/finished.png" > <p style="color: #383F45;">附件信息</p> </div> </div> <div class="userInfo">基本资料</div> <div v-if="bpClass === 'ORG'" class="house"> <p class="titles">营业执照</p> <div v-if="licenseImg" class="card-upload"> <img :src="licenseImg" @click="showBigPicture(licenseImg)"> </div> </div> <div class="house"> <p v-if="bpClass === 'NP'" class="titles">身份证</p> <p v-if="bpClass === 'ORG'" class="titles">法人代表身份证</p> <div class="upload-box"> <div v-if="idCardFront"> <img v-if="idCardFront" :src="idCardFront" style="width: 100%;height: 100%;margin: 0" @click="showBigPicture(idCardFront)" > </div> <div v-if="idCardBack"> <img v-if="idCardBack" :src="idCardBack" style="width: 100%;height: 100%;margin: 0" @click="showBigPicture(idCardBack)" > </div> </div> </div> <div class="house"> <p class="titles">房产证件</p> <div v-if="houseImg" class="card-upload"> <img :src="houseImg" @click="showBigPicture(houseImg)"> </div> </div> <div class="house"> <p class="titles">车辆行驶证</p> <div v-if="carImg" class="card-upload"> <img :src="carImg" @click="showBigPicture(carImg)"> </div> </div> <div v-if="bpClass === 'NP'" class="house"> <p class="titles">婚姻状况证明</p> <div v-if="marryImg" class="card-upload"> <img :src="marryImg" @click="showBigPicture(marryImg)"> </div> </div> <div class="userInfo">补充资料</div> <div class="house"> <p class="titles">抵押证书</p> <!--抵押 待上传图片列表--> <div v-for="(item, index) in mort_upload_list" v-if="item.check_id === mortId" :key="index+'info'" class="card-upload" > <img :src="item.picture" @click="showBigPicture(item.picture)" > <div class="close" @click="remove_pic(item.attachment_id,index)"> <img src="@/assets/userBind/deleteIcon.png" > </div> </div> <!--抵押 下载的图片--> <div v-for="(pic, index) in dowload_list" :key="index+'i'"> <div v-if="pic.check_id===mortId" :key="index+'info1'" class="card-upload"> <img :src="pic.url" @click="showBigPicture(pic.url)" > <div class="close" @click="delete_pic(pic.attachment_id)"> <img src="@/assets/userBind/deleteIcon.png" > </div> </div> </div> <div v-if="!isReadOnly" class="card-upload plus" @click="ocrShow('抵押证书',checkId)"> <img src="@/assets/userBind/camera.png" class="upload-btn" > </div> </div> <div class="house"> <p class="titles">特批申请书</p> <!--待上传图片列表--> <div v-for="(item, index) in upload_list" v-if="item.check_id === checkId" :key="index+'info2'" class="card-upload" > <img :src="item.picture" @click="showBigPicture(item.picture)" > <div class="close" @click="remove_pic(item.attachment_id,index)"> <img src="@/assets/userBind/deleteIcon.png" > </div> </div> <!--从服务器上下载的图片--> <div v-for="(pic, index) in dowload_list" :key="index+'info4'"> <div v-if="pic.check_id==checkId" :key="index+'info3'" class="card-upload"> <img :src="pic.url" @click="showBigPicture(pic.url)" > <div class="close" @click="delete_pic(pic.attachment_id)"> <img src="@/assets/userBind/deleteIcon.png" > </div> </div> </div> <div v-if="!isReadOnly" class="card-upload plus" @click="ocrShow('特批申请书',checkId)"> <img src="@/assets/userBind/camera.png" class="upload-btn" > </div> </div> </h-content> <bottom-tab class="add-box"> <tab-button v-if="!isReadOnly" class="before" @click.native="$routeGo()">上一步</tab-button> <tab-button v-if="!isReadOnly" class="next" @click.native="isSubmit">提交</tab-button> <tab-button v-if="isReadOnly" class="before" @click.native="$routeGo()">上一步</tab-button> </bottom-tab> </h-view> </template> <script> export default { data () { return { checkId: '', // 特批申请书id mortId: '', // 抵押证书id cddItemList: [], upload_list: [], mort_upload_list: [], // 抵押上传数组 mort_dowload_list: [], dowload_list: [], // 下载图片列表 idCardFrontCheck_id: '', // 承租人身份证正面 idCardBackCheck_id: '', // 承租人身份证背面 idCardFrontUrlFlag: false, idCardBackUrlFlag: false, houseFlag: false, carFlag: false, licenseFlag: false, idCardFront: '', // 身份证图片 idCardBack: '', houseImg: '', carImg: '', marryImg: '', licenseImg: '', house_id: '', car_id: '', license_id: '', status: '', // 审批状态 bpClass: '', isReadOnly: false, // 是否只读 fromPage: window.localStorage.fromPage, } }, watch: { }, beforeRouteEnter (to, from, next) { next(vm => { if (from.name === 'CreateRentInfo') { vm.idCardFront = '' vm.idCardBack = '' vm.houseImg = '' vm.carImg = '' vm.marryImg = '' vm.licenseImg = '' vm.upload_list = [] vm.mort_upload_list = [] vm.dowload_list = [] vm.mort_dowload_list = [] vm.cddItemList = [] vm.bpClass = window.localStorage.bp_class vm.status = window.localStorage.user_bp_status vm.fromPage = window.localStorage.fromPage vm.loadItemList() vm.queryCheckId() vm.queryMortId() if (vm.fromPage === 'sale') { vm.isReadOnly = false } else if (vm.fromPage === 'list') { if (window.localStorage.contractReadonly === 'true') { vm.isReadOnly = true } else { vm.isReadOnly = false } } } }) }, methods: { // 抵押证书check_id查询 queryMortId () { let vm = this let url = process.env.basePath + 'prj_mortgage_query' let param = { project_id: window.localStorage.project_id, } vm.hlsPopup.showLoading('请稍候') vm.hlsHttp.post(url, param).then(function (res) { vm.hlsPopup.hideLoading() console.log('抵押证书check_id查询', res) if (res.result === 'S') { vm.mortId = res.info.check_id vm.mortgageQuery() } }) }, // 抵押证书查询 mortgageQuery () { let vm = this let url = process.env.basePath + 'attachment_list_query' // 附件查询 let param = { check_id: vm.mortId, } hlsPopup.showLoading('请稍候') vm.$post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { res.lists.forEach(item => { item['url'] = process.env.filePath + 'attachment_id=' + item.attachment_id + '&access_token=' + window.localStorage.access_token }) vm.mort_dowload_list = res.lists } }) }, // 特批证书check_id查询 queryCheckId () { let vm = this let url = process.env.basePath + 'prj_atm_query' let param = { project_id: window.localStorage.project_id, } vm.hlsPopup.showLoading('请稍候') vm.hlsHttp.post(url, param).then(function (res) { vm.hlsPopup.hideLoading() console.log('特批证书check_id查询', res) if (res.result === 'S') { vm.checkId = res.info.check_id vm.certificateQuery() } }) }, // 特批证书查询 certificateQuery () { let vm = this let url = process.env.basePath + 'attachment_list_query' // 附件查询 let param = { check_id: vm.checkId, } hlsPopup.showLoading('请稍候') vm.$post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { res.lists.forEach(item => { item['url'] = process.env.filePath + 'attachment_id=' + item.attachment_id + '&access_token=' + window.localStorage.access_token }) vm.dowload_list = res.lists console.log('下载图片', vm.dowload_list) } }) }, // 查看大图 showBigPicture (pic) { let vm = this vm.hlsPopup.showBigPicture({ imgUrl: pic, width: '100% !important', }) }, // ocr识别入口 ocrShow (desc, checkId) { let vm = this hlsPopup.showActionSheet({ titleText: '请选择照片', buttonArray: ['拍照', '从相册取'], callback: index => { if (index === 0) { vm.openCamera(desc, checkId) } else { vm.takePicture(desc, checkId) } }, }) }, openCamera (desc, checkId) { let vm = this let obj = { 'pkvalue': checkId, 'source_type': 'PRJ_CDD_ITEM_CHECK', 'picture': '', 'check_id': checkId, 'filePath': '', 'attachment_id': '', 'user_id': 1, 'fileName': desc + '_' + new Date().getTime(), } let cameraoptions = { quality: 100, } let success = function (imgdata) { obj.picture = imgdata obj.filePath = imgdata let list = [] list.push(obj) // 拍完一张立马执行保存图片逻辑 vm.save_picture(list) } let error = function () { hlsPopup.showLongCenter('请拍照') } hlsUtil.openCamera(cameraoptions, success, error) }, takePicture (desc, checkId) { let vm = this let cameraoptions = { quality: 100, } let success = function (imgUrl) { var list = [] for (let i = 0; i < imgUrl.length; i++) { let obj = { 'pkvalue': checkId, 'source_type': 'PRJ_CDD_ITEM_CHECK', 'picture': '', 'check_id': checkId, 'filePath': '', 'attachment_id': '', 'user_id': 1, 'fileName': desc + '_' + new Date().getTime(), } obj.picture = imgUrl[i] obj.filePath = imgUrl[i] list.push(obj) } vm.save_picture(list) } let error = function () { } vm.hlsUtil.takePicture(cameraoptions, success, error) }, // 图片保存 save_picture (list) { let vm = this if (list.length) { // hlsPopup.showLoading('图片上传请稍候') var alreadyUploadNum = 0 var attLength = 0 var recordUploadInterval = setInterval(function () { if (alreadyUploadNum === attLength) { clearInterval(recordUploadInterval) /* hlsPopup.hideLoading() hlsPopup.showLongCenter('图片上传成功') */ } }, 500) for (var i = 0; i < list.length; i++) { let uploadSuccess = function (res) { if (res.result === 'S') { alreadyUploadNum++ for (var j = 0; j < list.length; j++) { if (list[j].filePath === res.response.filePath) { list[j].attachment_id = res.response.attachment_id vm.upload_list.push(list[j]) break } } } else { hlsPopup.hideLoading() } } if (!list[i].attachment_id) { attLength++ hlsUtil.fileUploadSvc(list[i], uploadSuccess) } } } else { hlsPopup.hideLoading() } }, // 移除图片 remove_pic (attachment_id, index) { let vm = this var delete_list = [] let obj = {'attachment_id': attachment_id} delete_list.push(obj) let url = process.env.basePath + 'app_delete_attment' // 附件删除 let param = { 'picturelist': delete_list, } hlsPopup.showLoading('请稍候') vm.hlsHttp.post(url, param).then(function (res) { hlsPopup.hideLoading() if (res.result === 'S') { hlsPopup.showLongCenter('删除成功!') vm.remove_upload_list(attachment_id, index) } else if (res.result === 'E') { hlsPopup.showShortCenter(res.message) } }) }, remove_upload_list (attachment_id, index) { let vm = this vm.upload_list.remove(index) vm.upload_list.sort() }, // 删除图片 delete_pic (attachment_id) { let vm = this var delete_list = [] let obj = {'attachment_id': attachment_id} delete_list.push(obj) let url = process.env.basePath + 'app_delete_attment' // 附件删除 let param = { 'picturelist': delete_list, } hlsPopup.showLoading('请稍候') vm.hlsHttp.post(url, param).then(function (res) { hlsPopup.hideLoading() if (res.result === 'S') { hlsPopup.showLongCenter('删除成功!') vm.remove_dowload_list(attachment_id) } else if (res.result === 'E') { hlsPopup.showShortCenter(res.message) } }) }, remove_dowload_list (attachment_id) { console.log('attachment_id', attachment_id) let vm = this vm.dowload_list = vm.dowload_list.filter(item => { return item.attachment_id !== attachment_id }) }, loadItemList () { let vm = this let bp_id_tenant = window.localStorage.getItem('bp_id_tenant') if (bp_id_tenant === 'undefined') { bp_id_tenant = null } let url = process.env.basePath + 'prj_cdd_check_list' let group = '' if (vm.bpClass === 'NP') { group = 'HLS_NP' } else { window.localStorage.auth_flag === '是' ? group = 'HLS_ORG_AUTH' : group = 'HLS_ORG_NAUTH' } let param = { master: { document_id: bp_id_tenant, document_table: 'HLS_BP_MASTER', tab_group: group, }, } // vm.hlsPopup.showLoading('请稍候') vm.hlsHttp.post(url, param).then(function (res) { // vm.hlsPopup.hideLoading() console.log(res) vm.cddItemList = res.lists if (res.result === 'S') { let listTemp = [...res.lists] listTemp.forEach(item => { switch (item.cdd_item) { // case 'NP_ID_CARD_F': // 自然人身份证正面 // vm.idCardFrontCheck_id = item.check_id // break // case 'LEGAL_ID_CARD_F': // 法人代表身份证正面 // vm.idCardFrontCheck_id = item.check_id // break // case 'NP_ID_CARD_B': // 身份证背面 // vm.idCardBackCheck_id = item.check_id // break // case 'LEGAL_ID_CARD_B': // 身份证背面 // vm.idCardBackCheck_id = item.check_id // break // case 'HOUSE_CARD': // 房产证 // vm.house_id = item.check_id // break // case 'CAR_CARD': // 行驶证 // vm.car_id = item.check_id // break case 'ORG_CODE': // 营业执照 vm.license_id = item.check_id break default: } }) // 查询图片 listTemp.forEach((item, index) => { vm.load_picture(item.check_id, index, item.cdd_item) }) } }) }, load_picture (check_id, index, cdd_item) { let vm = this let url = process.env.basePath + 'attachment_list_query' + '&index' + index // 附件查询 let param = { check_id: check_id, } hlsPopup.showLoading('请稍候') vm.$post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { res.lists.forEach(item => { item['url'] = process.env.filePath + 'attachment_id=' + item.attachment_id + '&access_token=' + window.localStorage.access_token }) console.log('图片查询', res.lists) switch (cdd_item) { case 'NP_ID_CARD_F': // 自然人身份证正面 if (!vm.idCardFrontUrlFlag) { vm.idCardFront = res.lists[0].url } // vm.idCardFrontAttachmentId = res.lists[0].attachment_id break case 'LEGAL_ID_CARD_F': // 身份证正面 if (!vm.idCardFrontUrlFlag) { vm.idCardFront = res.lists[0].url } // vm.idCardFrontAttachmentId = res.lists[0].attachment_id break case 'NP_ID_CARD_B': // 承租人身份证背面 if (!vm.idCardBackUrlFlag) { vm.idCardBack = res.lists[0].url } // vm.idCardBackAttachmentId = res.lists[0].attachment_id break case 'LEGAL_ID_CARD_B': // 承租人身份证背面 if (!vm.idCardBackUrlFlag) { vm.idCardBack = res.lists[0].url } // vm.idCardBackAttachmentId = res.lists[0].attachment_id break case 'HOUSE_CARD': // 房产证 if (!vm.houseFlag) { vm.houseImg = res.lists[0].url } // vm.house_id = res.lists[0].attachment_id break case 'CAR_CARD': // 房产证 if (!vm.carFlag) { vm.carImg = res.lists[0].url } // vm.house_id = res.lists[0].attachment_id break case 'ORG_CODE': // 营业执照 if (!vm.licenseFlag) { vm.licenseImg = res.lists[0].url } // vm.house_id = res.lists[0].attachment_id break default: } } else { hlsPopup.showLongCenter(res.message) } }) }, // 同步电子签 handSave () { hlsPopup.showLongCenter('保存成功!') // let vm = this // let url = process.env.basePath + 'syn_content_app' // let param = { // project_id: window.localStorage.project_id, // } // vm.hlsPopup.showLoading('请稍候') // vm.hlsHttp.post(url, param).then(function (res) { // vm.hlsPopup.hideLoading() // if (res.result === 'S') { // vm.hlsPopup.showSuccess('同步成功') // } else { // vm.hlsPopup.showLongCenter(res.message) // } // }) }, isSubmit () { let vm = this this.hlsPopup.showConfirm({ title: '提示', content: '您确定提交吗?', onConfirm: data => { if (data === 1) { this.handleSubmit() } }, }) }, // 项目提交审批 handleSubmit () { let vm = this let url = process.env.basePath + 'prj_project_submit' let param = { master: { project_id: window.localStorage.project_id, phone: window.localStorage.getItem('user_phone'), }, } vm.hlsPopup.showLoading('请稍候') vm.hlsHttp.post(url, param).then(function (res) { // vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.hlsPopup.showSuccess('提交成功') vm.$router.push({ name: 'MyInfo', }) } else { vm.hlsPopup.showLongCenter(res.message) } }) }, }, } </script> <style lang="less" > #create-enclosure-info { .swipeout-list .item .function { height: 68px; background: url("../../assets/contractCreate/delete.png") 45% 45% #fde5e8 no-repeat; background-size: 20px 20px; } .hls-list-item { margin-bottom: 0px !important; } .swipeout-list { padding: 0px; } .h-header-right { display: flex; align-items: center; } .flow { z-index: 999; } .left-icon { width: 18px; height: 18px; text-align: center; line-height: 18px; background-color: rgba(29, 63, 255, 0.2); color: @headerColor; border-radius: 4px; } input::placeholder { color: #b4b4b5; } .top { width: 100%; height: 81px; background-color: #faf5e0; display: flex; justify-content: center; align-items: center; .line { display: inline-block; width: 78px; border-top: 1px solid #a4a4a4; margin-bottom: 18px; } .line { border-top: 1px solid #ffa000; } .item { display: flex; justify-content: center; align-items: center; flex-flow: column wrap; font-family: PingFangSC-Semibold; font-size: 12px; color: rgba(56, 63, 69, 0.5); letter-spacing: 0.43px; img { width: 18px; } span { display: block; text-align: center; line-height: 18px; border-radius: 50%; width: 18px; height: 18px; color: #fff; background: #a4a4a4; } p { margin-top: 10px; } } .item:nth-of-type(3) { font-family: PingFangSC-Semibold; font-size: 12px; color: rgb(56, 63, 69); letter-spacing: 0.43px; span { background-color: #ffa000; } } } .userInfo { height: 40px; line-height: 40px; color: @headerColor; // margin-top: -10px; font-size: 15px; margin-left: 16px; position: relative; } .userInfo::before { content: ""; display: block; width: 4px; height: 20px; background-color: @headerColor; position: absolute; left: -15px; top: 12px; } .add-box { .before { border: 1px solid #fdb62f; border-radius: 4px; color: #fdb62f; } .next { background: #1d3fff; border-radius: 4px; color: #fff; } } .titles { color: #656464; margin-left: 16px; padding-top: 16px; font-size: 13px; } .house { background: #fff; margin-top: 10px; padding-bottom: 10px; .plus { display: flex; justify-content: center; align-items: center; } .card-upload { position: relative; width: 80px; height: 80px; border: 1px dashed #dcdcdd; display: flex; justify-content: center; align-items: center; margin-top: 12px; margin-left: 16px; //float: left; .close { /* position: relative; color: #F96F68; margin-top: -100%; margin-left: -10%;*/ position: absolute; color: #F96F68; top: -6px; right: -6px; img { width: 14px; height: 14px; } } img { /*width: 88px; height: 88px;*/ width: 100%; height: 100%; } .upload-btn { width: 24px; height: 24px; } } } // .house:last-child { // margin-top: 0; // div { // float: left; // } // } .upload-box { display: flex; justify-content: center; margin-top: 15px; div { width: 172px; height: 120px; border: 1px dashed #dcdcdd; text-align: center; font-size: 14px; color: #b4b4b5; .front, .back { width: 172px; height: 120px; } } div:nth-of-type(2) { margin-left: 7px; } img { margin-top: 32px; width: 58px; height: 45px; } p { margin-top: 12px; font-size: 13px; } } } </style>