<!-- * @Description: In User Settings Edit * @Author: liuxin * @Date: 2019-09-19 09:18:14 * @LastEditTime: 2019-10-09 13:11:10 * @LastEditors: Please set LastEditors --> <template> <h-view id="base-info1" class="public-style" title="基本信息"> <h-header :proportion="[5,1,1]" class="bar-custom"> <div slot="left" class="h-header-btn" @click="$routeGo()"> <img src="@/assets/userBind/arrow.png" > <span>用户绑定</span> </div> </h-header> <Tab :tabNum="tabNum" @getTabNum="getTabNum" /> <h-content class="content"> <div v-show="tabNum==0"> <list-item :item-height="44"> <item v-if="(isApproved&&!isMultiRole)||!isApproved" :showArrow="true"> <div slot="name" class="required">客户类型</div> <input slot="content" v-model="baseInfo.bp_type_n" placeholder="请选择" type="text" readonly onfocus="this.blur()" @click="selectIdTypeOnly()" > </item> <item v-if="isApproved&&isMultiRole" :showArrow="true" @click.native="selectIdType()"> <div slot="name" class="required">客户类型</div> <div slot="content" class="typeBP"> <span>{{ baseInfo.bp_type_n }}</span> <span> {{ multiBpType.bp_type_n }} <img v-if="multiBpType.bp_type_n" src="@/assets/userBind/deleteTag.png" @click.stop @click="deleteBP" > </span> </div> </item> <item v-if="(isPaople&&from)||(isPaople&&isSelected)"> <div slot="name" class="required">业务经办人</div> <input slot="content" v-model="baseInfo.agent_username" placeholder="请输入业务经办员工代码" > </item> <item v-if="(isLesons&&from)||(isLesons&&isSelected)"> <div slot="name" class="required">营业执照</div> <input slot="content" v-model="baseInfo.business_license_num" placeholder="请输入营业执照号" > </item> <item v-if="(isMatter&&from)||(isMatter&&isSelected)"> <div slot="name" class="required">办事处代码</div> <input slot="content" v-model="baseInfo.business_license_num" placeholder="请输入办事处代码" > </item> <button v-if="isAddNewType" class="type-save" @click="addNewRole">新增角色</button> </list-item> <div class="userInfo">客户信息</div> <div class="upload-id-card"> <span>身份证照片上传</span> <div class="upload-box"> <div v-if="!idCardFront" @click="ocrShow('idCard', 'front')"> <img src="@/assets/userBind/front.png" > <p>正面</p> </div> <div v-if="idCardFront && !isApproved" @click="ocrShow('idCard', 'front')"> <img :src="idCardFront" style="width: 100%;height: 100%;margin: 0" > </div> <div v-if="isApproved && idCardFront"> <img v-if="idCardFront" :src="idCardFront" style="width: 100%;height: 100%;margin: 0" @click="showBigPicture(idCardFront)" > </div> <div v-if="!idCardBack" @click="ocrShow('idCard', 'back')"> <img src="@/assets/userBind/back.png" > <p>反面</p> </div> <div v-if="idCardBack && !isApproved" @click="ocrShow('idCard', 'back')"> <img :src="idCardBack" style="width: 100%;height: 100%;margin: 0" > </div> <div v-if="isApproved && idCardBack"> <img v-if="idCardBack" :src="idCardBack" style="width: 100%;height: 100%;margin: 0" @click="showBigPicture(idCardBack)" > </div> </div> </div> <list-item :item-height="44" class="second-part"> <item> <div slot="name" class="required">姓名</div> <input slot="content" v-model="baseInfo.bp_name" readonly placeholder="上传身份证自动填充" class="auto" > </item> <item> <div slot="name" class="required">身份证号码</div> <input slot="content" v-model="baseInfo.id_card_no" readonly placeholder="上传身份证自动填充" class="auto" > </item> <item> <div slot="name" class="required">户籍地址</div> <textarea slot="content" ref="myTestarea" v-model="baseInfo.address_on_resident_booklit" readonly cols="22" rows="1" placeholder="上传身份证自动填充" class="auto" @input="addRows(baseInfo.address_on_resident_booklit)" /> </item> <item> <div slot="name" class="required">身份证有效期从</div> <input slot="content" v-model="baseInfo.id_card_date_from" readonly placeholder="上传身份证自动填充" class="auto" > </item> <item> <div slot="name" class="required">身份证有效期到</div> <input slot="content" v-model="baseInfo.id_card_date_to" readonly placeholder="上传身份证自动填充" class="auto" > </item> <item> <div slot="name" class="required">手机号码</div> <input slot="content" v-model="baseInfo.cell_phone" readonly placeholder="请输入手机号码" > </item> <item :showArrow="true"> <div slot="name" class="required">业务办理省</div> <input slot="content" v-model="baseInfo.province_name" placeholder="请选择" type="text" readonly onfocus="this.blur()" @click="selectProvince()" > </item> <item :showArrow="true"> <div slot="name" class="required">业务办理市</div> <input slot="content" v-model="baseInfo.city_name" placeholder="请选择" type="text" readonly onfocus="this.blur()" @click="selectCity()" > </item> <item :showArrow="true"> <div slot="name" class="required">业务办理区/县</div> <input slot="content" v-model="baseInfo.district_name" placeholder="请选择" type="text" readonly onfocus="this.blur()" @click="selectDistrict()" > </item> <item> <div slot="name" class="required">联系地址</div> <textarea slot="content" ref="myTestareaLive" v-model="baseInfo.living_address" rows="1" cols="22" placeholder="请输入联系地址" @input="addRowsLive(baseInfo.living_address)" /> </item> <item :showArrow="true"> <div slot="name" class="required">学历</div> <input slot="content" v-model="baseInfo.academic_background_n" placeholder="请选择学历" readonly onfocus="this.blur()" @click="selectBackType" > </item> <item v-if="baseInfo.bp_type === 'TENANT' || baseInfo.bp_type === 'GUTA'" :showArrow="true" > <div slot="name" class="required">婚姻状况</div> <input slot="content" v-model="baseInfo.marital_status_n" placeholder="请选择" readonly onfocus="this.blur()" @click="selectMarital" > </item> </list-item> <div v-if="(hasSP && baseInfo.bp_type === 'TENANT') || (hasSP && baseInfo.bp_type === 'GUTA')" > <!-- 主承租人活担保人为已婚显示--> <div class="userInfo">配偶信息</div> <div class="upload-id-card"> <span>身份证照片上传</span> <div class="upload-box"> <div v-if="!idCardFrontSp" @click="ocrShow('idCardSp', 'front')"> <img src="@/assets/userBind/front.png" > <p>正面</p> </div> <div v-if="idCardFrontSp && !isApproved" @click="ocrShow('idCardSp', 'front')"> <img :src="idCardFrontSp" style="width: 100%;height: 100%;margin: 0" > </div> <div v-if="isApproved && idCardFrontSp"> <img v-if="idCardFrontSp" :src="idCardFrontSp" style="width: 100%;height: 100%;margin: 0" @click="showBigPicture(idCardFrontSp)" > </div> <div v-if="!idCardBackSp" @click="ocrShow('idCardSp', 'back')"> <img src="@/assets/userBind/back.png" > <p>反面</p> </div> <div v-if="idCardBackSp && !isApproved" @click="ocrShow('idCardSp', 'back')"> <img :src="idCardBackSp" style="width: 100%;height: 100%;margin: 0" > </div> <div v-if="isApproved && idCardBackSp"> <img v-if="idCardBackSp" :src="idCardBackSp" style="width: 100%;height: 100%;margin: 0" @click="showBigPicture(idCardBackSp)" > </div> </div> </div> <list-item :item-height="44"> <item> <div slot="name" class="required">姓名</div> <input slot="content" v-model="baseInfo.bp_name_sp" readonly placeholder="上传身份证自动填充" > </item> <item> <div slot="name" class="required">配偶身份证号</div> <input slot="content" v-model="baseInfo.id_card_no_sp" readonly placeholder="上传身份证自动填充" > </item> <item> <div slot="name" class="required">身份证有效期从</div> <input slot="content" v-model="baseInfo.id_card_date_from_sp" readonly placeholder="上传身份证自动填充" > </item> <item> <div slot="name" class="required">身份证有效期到</div> <input slot="content" v-model="baseInfo.id_card_date_to_sp" readonly placeholder="上传身份证自动填充" > </item> <item> <div slot="name" class="required">手机号码</div> <input slot="content" v-model="baseInfo.spouse_phone" placeholder="请输入手机号码" > </item> <item> <div slot="name" class="required">工作单位</div> <input slot="content" v-model="baseInfo.working_place_sp" placeholder="请输入工作单位" > </item> <item> <div slot="name" class="required">联系地址</div> <input slot="content" v-model="baseInfo.address_sp" placeholder="请输入联系地址" > </item> </list-item> </div> <div v-if="(cddItemList.length && baseInfo.bp_type === 'TENANT') || (cddItemList.length && baseInfo.bp_type === 'GUTA')" class="userInfo" >附件信息 </div> <div v-for="(list, index) in cddItemList" v-if="baseInfo.bp_type === 'TENANT' || baseInfo.bp_type === 'GUTA'" :key="index" class="card" > <span>{{ list.description }}</span> <div class="img-content"> <!--待上传图片列表--> <div v-for="(item, index) in upload_list" v-if="item.check_id==list.check_id" :key="index" 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="item in dowload_list"> <div v-for="(pic, index) in item" v-if="pic.check_id==list.check_id" :key="index" 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 class="card-upload plus" @click="imgUploadShow(list.description,list.check_id)"> <img src="@/assets/userBind/camera.png" class="upload-btn" > </div> </div> </div> <!-- <div v-if="(from&&isApproved&&isAGENT)||fromPromisePay" class="tax" @click="changeUndertake" > <img src="@/assets/userBind/tax.png" class="left-img" > <div> <span>缴纳保证金</span> <p>已缴纳:500000</p> </div> <img src="@/assets/userBind/arrow-right.png" class="right-img" > </div> --> </div> <BankInfo v-show="tabNum==1" :getBankList="getBankList" :from="from" @getInfo="getInfo" @getList="getList" /> <InvoiceInfo v-show="tabNum==2" :baseInfo="baseInfo" :tabNum="tabNum" @getinvoiceList="getinvoiceList" /> </h-content> <bottom-tab class="footer-button"> <tab-button class="put" @click.native="putData">提交</tab-button> <tab-button class="save" @click.native="verified">保存</tab-button> </bottom-tab> <h-modal ref="modal" v-model="showModalValue" position="bottom" cus-class="sign-modal"> <h-view> <div class="modal-content"> <div class="modal-content-add-top"> <span>添加银行卡</span> <img src="@/assets/userBind/close.png" @click="hideModal" > </div> <img v-if="!bankImg && !isApproved" src="@/assets/userBind/addBack.png" class="addBack" @click="ocrShow('bankCard', '')" > <img v-if="bankImg" :src="bankImg" class="addBack" style="height: 38%;" @click="ocrShow('bankCard', '')" > <img v-if="isClear && isApproved && !bankImg" src="@/assets/userBind/addBack.png" class="addBack" @click="ocrShow('bankCard', '')" > <img v-if="!bankImg && isApproved && !isClear" src="@/assets/userBind/addBack.png" class="addBack" > <list-item :item-height="44" class="card-Info"> <item> <div slot="name">银行卡卡号</div> <input slot="content" v-model="bank.bank_account_num" readonly placeholder="识别银行卡自动填充" > </item> <item> <div slot="name">账户姓名</div> <input slot="content" v-model="bank.bank_account_name" readonly placeholder="请输入账户名称" > </item> <item> <div slot="name">银行名称</div> <input slot="content" v-model="bank.bank_full_name" readonly placeholder="识别银行卡自动填充" > </item> <item> <div slot="name">支行名称</div> <input slot="content" v-model="bank.bank_branch_name" placeholder="请输入支行名称" > </item> </list-item> </div> </h-view> <bottom-tab class="add-box"> <!-- v-if="!isApproved || (isClear && isApproved)"--> <tab-button class="add-card" @click.native="addBankInfo">添加</tab-button> </bottom-tab> </h-modal> </h-view> </template> <script> import Tab from '@/components/tab' import InvoiceInfo from '@/pages/userBind/np/invoiceInfo' import BankInfo from '@/pages/userBind/np/bankInfo' export default { components: { Tab, InvoiceInfo, BankInfo, }, data () { return { list: {}, isAddNewType: false, fromPromisePay: false, hasSP: false, isPaople: false, isLesons: false, isMatter: false, showModalValue: false, isApproved: false, isSave: false, isAGENT: this.$route.params.isAGENT, isMultiRole: this.$route.params.isMultiRole, isSelected: false, tabNum: 0, from: false, multiBpType: { bp_type_n: '', bp_type: '', }, cityList: [], provinceList: [], upload_list: [], // 上传图片列表 dowload_list: [], // 下载图片列表 typeList: [], backList: [], bankList: [], maritalList: [], getBankList: [], districtList: [], bank: { bank_account_num: '', bank_account_name: '', bank_card_type: '', bank_full_name: '', bank_branch_name: '', }, img_url: {}, baseInfo: { bp_type_n: '', academic_background_n: '', marital_status_n: '', bp_type: '', bp_class: this.$route.params.bp_class, bp_name: '', province_name: '', province_id: '', city_name: '', city_id: '', id_card_no: null, id_card_date_from: '', // 身份证有效期从 id_card_date_to: '', // 身份证有效期到 cell_phone: window.localStorage.getItem('user_phone'), living_address: '', address_on_resident_booklit: '', marital_status: '', academic_background: '', bp_name_sp: '', id_card_no_sp: '', // 配偶身份证号 id_card_date_from_sp: '', // 配偶身份证有效期从 id_card_date_to_sp: '', // 配偶身份证有效期到 district_id: '', district_name: '', spouse_phone: '', working_place_sp: '', address_sp: '', invoice_adds: '', invoice_tel: '', taxpayer_type: '', invoice_title: '', open_bank: '', open_account: '', invoice_kind: '', user_phone: window.localStorage.user_phone, }, idCardFront: '', // 身份证正面图片 idCardBack: '', // 身份证反面图片 idCardFrontSp: '', // 配偶身份证正面图片 idCardBackSp: '', // 配偶身份证反面图片 idCardFrontUrlFlag: false, // 身份证正面图片查看标识,为false则用查询出来的,为true则用拍照出来的 idCardBackUrlFlag: false, // 身份证反面图片,为false则用查询出来的,为true则用拍照出来的 idCardFrontSpUrlFlag: false, // 配偶身份证正面图片,为false则用查询出来的,为true则用拍照出来的 idCardBackSpUrlFlag: false, // 配偶身份证反面图片,为false则用查询出来的,为true则用拍照出来的 bankImg: '', // 银行卡图片 cddItemList: [], // 资料清单列表 idCardFrontCheck_id: '', // 身份证正面check_id idCardBackCheck_id: '', // 身份证反面check_id idCardFrontSpCheck_id: '', // 配偶身份证正面check_id idCardBackSpCheck_id: '', // 配偶身份证反面check_id idCardFrontAttachmentId: '', // 身份证正面AttachmentId idCardBackAttachmentId: '', // 身份证反面AttachmentId idCardFrontSpAttachmentId: '', // 配偶身份证正面AttachmentId idCardBackSpAttachmentId: '', // 配偶身份证反面AttachmentId // idCardImgList: [], // 存身份证图片列表 idCardFrontEditFlag: false, // 身份证正面修改标识,为true则标识已修改,后续需要重新上传此照片 idCardBackEditFlag: false, // 身份证反面修改标识,为true则标识已修改,后续需要重新上传此照片 idCardFrontSpEditFlag: false, // 配偶身份证正面修改标识,为true则标识已修改,后续需要重新上传此照片 idCardBackSpEditFlag: false, // 配偶身份证反面修改标识,为true则标识已修改,后续需要重新上传此照片 isClear: false, } }, watch: { 'baseInfo.bp_type_n' (newVal, oldVal) { let vm = this if (vm.baseInfo.bp_type === 'TENANT' || vm.baseInfo.bp_type === 'GUTA') { vm.isPaople = true vm.isMatter = false vm.isLesons = false } else if ( vm.baseInfo.bp_type === 'AGENT' || vm.baseInfo.bp_type === 'FACTORY' ) { vm.isPaople = false vm.isMatter = false vm.isLesons = true } else if (vm.baseInfo.bp_type === 'OFFICE') { vm.isMatter = true vm.isPaople = false vm.isLesons = false } }, tabNum: function (newVal, oldVal) { if (newVal === 1 && !this.isSave && !this.from) { this.hlsPopup.showError('请先保存基本信息') this.tabNum = oldVal } }, 'baseInfo.marital_status_n': function (newVal, oldVal) { if (newVal === '已婚') { this.hasSP = true } else { this.hasSP = false this.baseInfo.bp_name_sp = '' this.baseInfo.spouse_phone = '' this.baseInfo.working_place_sp = '' this.baseInfo.address_sp = '' } }, }, created () { this.getBpType() this.getEducationBackground() this.getMarital() // this.getBankInfo() this.getProvince() if (this.$route.params.status === 'APPROVED') { this.isApproved = true } }, beforeRouteEnter (to, from, next) { if (from.fullPath === '/tab/my-info') { // 绑定查询入口 next(vm => { vm.from = true vm.basicInfoQuery() vm.loadItemList() // 附件查询 vm.getBankInfo() }) } else if (from.fullPath === '/margin-first-pay') { next(vm => { vm.fromPromisePay = true vm.basicInfoQuery() vm.loadItemList() // 附件查询 vm.getBankInfo() }) } next() }, updated () { this.getinvoiceList() }, methods: { deleteBP () { this.multiBpType.bp_type_n = '' this.multiBpType.bp_type = '' this.isAddNewType = false }, addNewRole () { let vm = this let url = process.env.basePath + 'bp_type_save' let param = { master: { bp_id: vm.fromPromisePay ? window.localStorage.getItem('bp_id') : vm.$route.params.bp_id, bp_type: vm.multiBpType.bp_type, }, } hlsPopup.showLoading('请稍候') vm.$post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { hlsPopup.showLongCenter('新增成功') vm.isAddNewType = false } else { hlsPopup.showLongCenter(res.message) } }) }, basicInfoQuery () { let vm = this let url = process.env.basePath + 'bp_np_info_query' let param = { bp_id: vm.fromPromisePay ? window.localStorage.getItem('bp_id') : vm.$route.params.bp_id, } hlsPopup.showLoading('请稍候') vm.$post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { Object.assign(vm.baseInfo, res.info) vm.from = true vm.addRows(vm.baseInfo.address_on_resident_booklit) vm.addRowsLive(vm.baseInfo.living_address) } else { hlsPopup.showLongCenter(res.message) } }) }, changeUndertake () { this.$router.push({ name: 'MarginFirstPay', params: { bp_id: this.$route.params.bp_id, status: this.$route.params.status, isAGENT: this.isAGENT, }, }) }, 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 }) 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 'NP_ID_CARD_B': // 承租人身份证背面 if (!vm.idCardBackUrlFlag) { vm.idCardBack = res.lists[0].url } vm.idCardBackAttachmentId = res.lists[0].attachment_id break case 'MATE_ID_CARD_F': // 配偶身份证正面 if (!vm.idCardFrontSpUrlFlag) { vm.idCardFrontSp = res.lists[0].url } vm.idCardFrontSpAttachmentId = res.lists[0].attachment_id break case 'MATE_ID_CARD_B': // 配偶身份证背面 if (!vm.idCardBackSpUrlFlag) { vm.idCardBackSp = res.lists[0].url } vm.idCardBackSpAttachmentId = res.lists[0].attachment_id break default: vm.dowload_list.push(res.lists) } } else { hlsPopup.showLongCenter(res.message) } }) }, async verified () { this.dowload_list = [] // 保存之前将图片下载列表清空,防止出现重复的图片 this.upload_list = [] // 保存之前将待上传列表清空,防止出现重复的图片 let res = await this.saveWord() if (res) { this.getBankInfo() // 查询资料清单 this.loadItemList() } }, loadItemList () { let vm = this let bpId = vm.from ? vm.$route.params.bp_id : window.localStorage.getItem('bp_id') let url = process.env.basePath + 'prj_cdd_check_list' let param = { master: { document_id: bpId, document_table: 'HLS_BP_MASTER', tab_group: 'HLS_NP', }, } // vm.hlsPopup.showLoading('请稍候') vm.hlsHttp.post(url, param).then(function (res) { // vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.cddItemList = [] var listTemp = [...res.lists] listTemp.forEach(item => { switch (item.cdd_item) { case 'NP_ID_CARD_F': // 承租人身份证正面 vm.idCardFrontCheck_id = item.check_id break case 'NP_ID_CARD_B': // 承租人身份证背面 vm.idCardBackCheck_id = item.check_id break case 'MATE_ID_CARD_F': // 配偶身份证正面 vm.idCardFrontSpCheck_id = item.check_id break case 'MATE_ID_CARD_B': // 配偶身份证背面 vm.idCardBackSpCheck_id = item.check_id break case 'BANK_CARD': break default: vm.cddItemList.push(item) } }) // 查询图片 listTemp.forEach((item, index) => { vm.load_picture(item.check_id, index, item.cdd_item) }) if (vm.idCardFrontEditFlag) { vm.idCardFrontUrlFlag = true vm.delete_pic_to_ocr(vm.idCardFrontAttachmentId)// 先删除之前识别的图片 // 身份证正面图片已修改,重新上传 var list = [] let obj = { pkvalue: vm.idCardFrontCheck_id, source_type: 'PRJ_CDD_ITEM_CHECK', picture: '', check_id: vm.idCardFrontCheck_id, filePath: vm.idCardFront, attachment_id: '', user_id: 1, fileName: '自然人身份证正面', } list.push(obj) vm.save_picture(list) vm.idCardFrontEditFlag = false // 置为false,防止再次保存重复上传,只有重新识别才会重新上传 } if (vm.idCardBackEditFlag) { vm.idCardBackUrlFlag = true vm.delete_pic_to_ocr(vm.idCardBackAttachmentId)// 先删除之前识别的图片 // 身份证反面图片已修改,重新上传 var list = [] let obj = { pkvalue: vm.idCardBackCheck_id, source_type: 'PRJ_CDD_ITEM_CHECK', picture: '', check_id: vm.idCardBackCheck_id, filePath: vm.idCardBack, attachment_id: '', user_id: 1, fileName: '自然人身份证背面', } list.push(obj) vm.save_picture(list) vm.idCardBackEditFlag = false // 置为false,防止再次保存重复上传,只有重新识别才会重新上传 } if (vm.idCardFrontSpEditFlag) { vm.idCardFrontSpUrlFlag = true vm.delete_pic_to_ocr(vm.idCardFrontSpAttachmentId)// 先删除之前识别的图片 // 配偶身份证正面图片已修改,重新上传 var list = [] let obj = { pkvalue: vm.idCardFrontSpCheck_id, source_type: 'PRJ_CDD_ITEM_CHECK', picture: '', check_id: vm.idCardFrontSpCheck_id, filePath: vm.idCardFrontSp, attachment_id: '', user_id: 1, fileName: '配偶身份证正面', } list.push(obj) vm.save_picture(list) vm.idCardFrontSpEditFlag = false // 置为false,防止再次保存重复上传,只有重新识别才会重新上传 } if (vm.idCardBackSpEditFlag) { vm.idCardBackSpUrlFlag = true vm.delete_pic_to_ocr(vm.idCardBackSpAttachmentId)// 先删除之前识别的图片 // 配偶身份证背面图片已修改,重新上传 var list = [] let obj = { pkvalue: vm.idCardBackSpCheck_id, source_type: 'PRJ_CDD_ITEM_CHECK', picture: '', check_id: vm.idCardBackSpCheck_id, filePath: vm.idCardBackSp, attachment_id: '', user_id: 1, fileName: '配偶身份证背面', } list.push(obj) vm.save_picture(list) vm.idCardBackSpEditFlag = false // 置为false,防止再次保存重复上传,只有重新识别才会重新上传 } } }) }, async saveProtocol () { let vm = this let url = process.env.basePath + 'bp_np_bind_save' let param = { master: this.baseInfo, } vm.hlsPopup.showLoading('保存中!') let res = await vm.hlsHttp.post(url, param) if (res.result === 'S') { vm.hlsPopup.showSuccess('保存成功,请去维护附件信息') vm.isSave = true window.localStorage.setItem('user_id', res.bp_id) window.localStorage.setItem('bp_id', res.bp_id) window.localStorage.setItem('bp_name', vm.baseInfo.bp_name) window.localStorage.setItem('bp_name', vm.baseInfo.bp_name) return res.bp_id } }, async saveWord () { let vm = this if (!vm.baseInfo.bp_type) { vm.hlsPopup.showLongCenter('客户类型不能为空!') } else if (vm.isSelected && vm.isPaople && !vm.baseInfo.agent_username) { vm.hlsPopup.showLongCenter('业务经办员工代码不能为空!') } else if ( vm.isSelected && !vm.isPaople && !vm.baseInfo.business_license_num ) { vm.hlsPopup.showLongCenter('营业执照号不能为空!') } else if (!vm.baseInfo.bp_name) { vm.hlsPopup.showLongCenter('客户姓名不能为空!') } else if (!vm.baseInfo.id_card_no) { vm.hlsPopup.showLongCenter('身份证号不能为空!') } else if (!vm.baseInfo.id_card_date_from) { vm.hlsPopup.showLongCenter('身份证有效期从不能为空!') } else if (!vm.baseInfo.id_card_date_to) { vm.hlsPopup.showLongCenter('身份证有效期到不能为空!') } else if (!vm.baseInfo.cell_phone) { vm.hlsPopup.showLongCenter('手机号不能为空!') } else if (!vm.baseInfo.living_address) { vm.hlsPopup.showLongCenter('联系地址不能为空!') } else if (!vm.baseInfo.address_on_resident_booklit) { vm.hlsPopup.showLongCenter('户籍地址不能为空!') } else if (!vm.baseInfo.academic_background) { vm.hlsPopup.showLongCenter('学历不能为空!') } else if (!vm.baseInfo.marital_status) { vm.hlsPopup.showLongCenter('婚姻状况不能为空!') } else if (vm.marital_status_n === '已婚' && !vm.baseInfo.bp_name_sp) { vm.hlsPopup.showLongCenter('配偶姓名不能为空!') } else if (vm.marital_status_n === '已婚' && !vm.baseInfo.id_card_no_sp) { vm.hlsPopup.showLongCenter('配偶身份证号不能为空!') } else if ( vm.marital_status_n === '已婚' && !vm.baseInfo.id_card_date_from_sp ) { vm.hlsPopup.showLongCenter('配偶身份证有效期从不能为空!') } else if ( vm.marital_status_n === '已婚' && !vm.baseInfo.id_card_date_to_sp ) { vm.hlsPopup.showLongCenter('配偶身份证有效期到不能为空!') } else if (vm.marital_status_n === '已婚' && !vm.baseInfo.spouse_phone) { vm.hlsPopup.showLongCenter('配偶手机号不能为空!') } else if ( vm.marital_status_n === '已婚' && !vm.baseInfo.working_place_sp ) { vm.hlsPopup.showLongCenter('配偶工作单位不能为空!') } else if (vm.marital_status_n === '已婚' && !vm.baseInfo.address_sp) { vm.hlsPopup.showLongCenter('配偶联系地址不能为空!') } else if (!vm.hlsUtil.phoneNumber(vm.baseInfo.cell_phone)) { vm.hlsPopup.showLongCenter('手机号码有误!') } else { let bpId = await vm.saveProtocol() return true } }, // 图片上传入口 imgUploadShow (description, check_id) { let vm = this // vm.upload_list = [] hlsPopup.showActionSheet({ titleText: '请选择照片', buttonArray: ['拍照', '从相册取'], callback: index => { if (index === 0) { vm.imgUploadOpenCamera(description, check_id) } else { vm.imgUploadTakePicture(description, check_id) } }, }) }, imgUploadOpenCamera (description, check_id) { let vm = this let obj = { pkvalue: check_id, source_type: 'PRJ_CDD_ITEM_CHECK', picture: '', check_id: check_id, filePath: '', attachment_id: '', user_id: 1, fileName: description + '_' + new Date().getTime(), } let cameraoptions = { quality: 100, } let success = function (imgdata) { obj.picture = imgdata obj.filePath = imgdata let list = [] list.push(obj) // vm.upload_list.push(obj) // 拍完一张立马执行保存图片逻辑 vm.save_picture(list) } let error = function () { hlsPopup.showLongCenter('请拍照') } hlsUtil.openCamera(cameraoptions, success, error) }, imgUploadTakePicture (description, check_id) { let vm = this let cameraoptions = { quality: 100, } let success = function (imgUrl) { var list = [] for (let i = 0; i < imgUrl.length; i++) { let obj = { pkvalue: check_id, source_type: 'PRJ_CDD_ITEM_CHECK', picture: '', check_id: check_id, filePath: '', attachment_id: '', user_id: 1, fileName: description + '_' + 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) } }) }, // 身份证重新识别后,先删除之前的照片 delete_pic_to_ocr (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, } vm.hlsHttp.post(url, param).then(function (res) { hlsPopup.hideLoading() if (res.result === 'S') { } else if (res.result === 'E') { } }) }, remove_dowload_list (attachment_id) { let vm = this for (let i = 0; i < vm.dowload_list.length; i++) { let list = vm.dowload_list[i] for (let j = 0; j < list.length; j++) { let li = list[j] if (parseFloat(li.attachment_id) === parseFloat(attachment_id)) { list.remove(j) break } } } vm.dowload_list.sort() }, ocrShow (ocrType, type) { let vm = this hlsPopup.showActionSheet({ titleText: '请选择照片', buttonArray: ['拍照', '从相册取'], callback: index => { if (index === 0) { vm.openCamera(ocrType, type) } else { vm.takePicture(ocrType, type) } }, }) }, openCamera (ocrType, type) { let vm = this let cameraoptions = { quality: 60, width: 1843, height: 1382, } let success = function (imgdata) { if (!imgdata) { hlsPopup.showLongCenter('请拍照') } else { if (ocrType === 'idCard') { type === 'front' ? ((vm.idCardFront = imgdata), vm.idCardIdentify(imgdata, 'idCard'), (vm.idCardFrontEditFlag = true)) : ((vm.idCardBack = imgdata), vm.idCardBackIdentify(imgdata, 'idCard'), (vm.idCardBackEditFlag = true)) } else if (ocrType === 'idCardSp') { // 配偶身份证识别 type === 'front' ? ((vm.idCardFrontSp = imgdata), vm.idCardIdentify(imgdata, 'idCardSp'), (vm.idCardFrontSpEditFlag = true)) : ((vm.idCardBackSp = imgdata), vm.idCardBackIdentify(imgdata, 'idCardSp'), (vm.idCardBackSpEditFlag = true)) } else if (ocrType === 'bankCard') { vm.bankImg = imgdata vm.bankCardIdentify(imgdata) } } } let error = function () { hlsPopup.showLongCenter('请拍照') } hlsUtil.openCamera(cameraoptions, success, error) }, takePicture (ocrType, type) { let vm = this var cameraoptions = { quality: 70, width: 1843, height: 1382, maxCount: 1, } let success = function (imgUrl) { if (imgUrl.length === 0) { hlsPopup.showLongCenter('请选择一张图片') } else { if (ocrType === 'idCard') { type === 'front' ? ((vm.idCardFront = imgUrl[0]), vm.idCardIdentify(imgUrl[0], 'idCard'), (vm.idCardFrontEditFlag = true)) : ((vm.idCardBack = imgUrl[0]), vm.idCardBackIdentify(imgUrl[0], 'idCard'), (vm.idCardBackEditFlag = true)) } else if (ocrType === 'idCardSp') { // 配偶身份证识别 type === 'front' ? ((vm.idCardFrontSp = imgUrl[0]), vm.idCardIdentify(imgUrl[0], 'idCardSp'), (vm.idCardFrontSpEditFlag = true)) : ((vm.idCardBackSp = imgUrl[0]), vm.idCardBackIdentify(imgUrl[0], 'idCardSp'), (vm.idCardBackSpEditFlag = true)) } else if (ocrType === 'bankCard') { vm.bankImg = imgUrl[0] vm.bankCardIdentify(imgUrl[0]) } } } let error = function () { hlsPopup.showLongCenter(error) } vm.hlsUtil.takePicture(cameraoptions, success, error) }, // 身份证识别 idCardIdentify (fileUrl, cardType) { let vm = this hlsPopup.showLoading('正在识别') let url = process.env.ocrPath + '/baidu/ocr/idCard' hlsUtil.baiduOcr(fileUrl, url, function (res) { hlsPopup.hideLoading() let result = res.result.words_result if (cardType === 'idCard') { vm.baseInfo.bp_name = result.姓名.words vm.baseInfo.id_card_no = result.公民身份号码.words vm.baseInfo.address_on_resident_booklit = result.住址.words vm.baseInfo.living_address = vm.baseInfo.address_on_resident_booklit // 联系地址默认为户籍地址,支持修改 } else { vm.baseInfo.bp_name_sp = result.姓名.words vm.baseInfo.id_card_no_sp = result.公民身份号码.words vm.baseInfo.address_sp = result.住址.words // 联系地址默认为户籍地址,支持修改 } }) }, // 身份证背面识别 idCardBackIdentify (fileUrl, cardType) { let vm = this hlsPopup.showLoading('正在识别') let url = process.env.ocrPath + '/baidu/ocr/idCardBack' hlsUtil.baiduOcr(fileUrl, url, function (res) { hlsPopup.hideLoading() let result = res.result.words_result if (cardType === 'idCard') { vm.baseInfo.id_card_date_from = result.签发日期.words vm.baseInfo.id_card_date_to = result.失效日期.words } else { vm.baseInfo.id_card_date_from_sp = result.签发日期.words vm.baseInfo.id_card_date_to_sp = result.失效日期.words } }) }, // 银行卡识别 bankCardIdentify (fileUrl) { let vm = this hlsPopup.showLoading('正在识别') let url = process.env.ocrPath + '/baidu/ocr/bankCard' hlsUtil.baiduOcr(fileUrl, url, function (res) { hlsPopup.hideLoading() let result = res.result.result vm.bank.bank_account_num = result.bank_card_number.replace(/\s*/g, '') vm.bank.bank_full_name = result.bank_name vm.bank.bank_card_type = result.bank_card_type }) }, addRows (e) { let addNum = parseInt(e.length / 16) if (addNum === 0) { this.$refs.myTestarea.rows = 1 } else if (addNum >= addNum - 1 && addNum < addNum + 1) { this.$refs.myTestarea.rows = addNum + 1 } }, addRowsLive (e) { let addNum = parseInt(e.length / 16) if (addNum === 0) { this.$refs.myTestareaLive.rows = 1 } else if (addNum >= addNum - 1 && addNum < addNum + 1) { this.$refs.myTestareaLive.rows = addNum + 1 } }, successCall () { this.hideModal() this.getBankInfo() this.bank.bank_account_num = '' this.bank.bank_account_name = '' this.bank.bank_full_name = '' this.bank.bank_branch_name = '' }, addBankInfo () { this.hlsPopup.showConfirm({ title: '提示', content: '您确认添加吗?', onConfirm: data => { if (data === 1) { let bpName = this.from ? this.$route.params.user_bp_name : window.localStorage.getItem('bp_name') if ( this.bank.bank_account_num === '' || this.bank.bank_account_name === '' || this.bank.bank_full_name === '' ) { this.hlsPopup.showLongCenter('请输入完整字段') } else if (this.hlsUtil.isBankAccount(this.bank.bank_account_num)) { this.hlsPopup.showLongCenter('银行卡号有误') } else if (this.bank.bank_account_name !== bpName) { this.hlsPopup.showLongCenter('请输入本人银行卡') } else { let list = JSON.parse(JSON.stringify(this.bank)) this.bankList.push(list) let vm = this let url = process.env.basePath + 'bp_bank_save' let param = { master: { bp_id: this.from ? this.$route.params.bp_id : window.localStorage.getItem('bp_id'), bank_lists: this.bankList, }, } vm.hlsPopup.showLoading('请稍候') vm.hlsHttp.post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.successCall() vm.hlsPopup.showLongCenter('保存成功') setTimeout(vm.successCall, 2000) } }) } } }, }) }, putData () { let bp_id = this.from ? this.$route.params.bp_id : window.localStorage.getItem('bp_id') if (bp_id) { this.hlsPopup.showConfirm({ title: '提示', content: '您确认提交吗?', onConfirm: data => { if (data) { let vm = this let url = process.env.basePath + 'bp_bind_submit' let param = { master: { bp_id: this.from ? this.$route.params.bp_id : window.localStorage.getItem('bp_id'), company_id: '2145', }, } 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: 'HomePage', }) } else { vm.hlsPopup.showLongCenter(res.message) } }) } }, }) } else { this.hlsPopup.showLongCenter('请先保存') } }, hideModal () { this.showModalValue = false }, getInfo (i, isClear) { this.isClear = isClear if (isClear) { // this.bank = {} this.bank.bank_account_num = '' this.bank.bank_account_name = this.baseInfo.bp_name this.bank.bank_card_type = '' this.bank.bank_full_name = '' this.bank.bank_branch_name = '' } this.showModalValue = i }, getList (a) { Object.assign(this.bank, a) }, showModal () { this.showModalValue = true }, selectIdType (e) { let vm = this let List if (vm.baseInfo.bp_type === 'TENANT') { List = vm.typeList.filter(i => { return i.code === 'GUTA' }) } else if (vm.baseInfo.bp_type === 'GUTA') { List = vm.typeList.filter(i => { return i.code === 'TENANT' }) } vm.hlsPopup.selectList({ list: List, code: 'bp_type', object: {}, returnItem: function (index, obj) { vm.multiBpType.bp_type = obj.bp_type vm.multiBpType.bp_type_n = obj.bp_type_n vm.isAddNewType = true vm.isSelected = true }, }) }, selectIdTypeOnly (e) { let vm = this vm.hlsPopup.selectList({ list: vm.typeList, code: 'bp_type', object: {}, returnItem: function (index, obj) { vm.baseInfo.bp_type = obj.bp_type vm.baseInfo.bp_type_n = obj.bp_type_n }, }) vm.isSelected = true }, getBankInfo () { let vm = this let id = vm.from ? vm.$route.params.bp_id : window.localStorage.getItem('bp_id') let url = process.env.basePath + 'bp_bank_query' let param = { bp_id: id, } vm.hlsPopup.showLoading('请稍候') vm.hlsHttp .post(url, param) .then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.getBankList = res.lists } }) .catch(() => { this.hlsPopup.showLongCenter('传入参数异常') }) }, getinvoiceList (i) { Object.assign(this.baseInfo, i) }, selectBackType (e) { let vm = this vm.hlsPopup.selectList({ list: vm.backList, code: 'bp_type', object: {}, returnItem: function (index, obj) { vm.baseInfo.academic_background = obj.bp_type vm.baseInfo.academic_background_n = obj.bp_type_n }, }) }, selectMarital (e) { let vm = this vm.hlsPopup.selectList({ list: vm.maritalList, code: 'bp_type', object: {}, returnItem: function (index, obj) { vm.baseInfo.marital_status = obj.bp_type vm.baseInfo.marital_status_n = obj.bp_type_n }, }) }, selectProvince (e) { let vm = this vm.hlsPopup.selectList({ list: vm.provinceList, code: 'bp_type', object: {}, returnItem: function (index, obj) { vm.baseInfo.province_id = obj.bp_type vm.baseInfo.province_name = obj.bp_type_n vm.getCity() }, }) }, selectCity (e) { let vm = this if (vm.baseInfo.province_id === '') { hlsPopup.showLongCenter('请先选择省份') } vm.hlsPopup.selectList({ list: vm.cityList, code: 'bp_type', object: {}, returnItem: function (index, obj) { vm.baseInfo.city_id = obj.bp_type vm.baseInfo.city_name = obj.bp_type_n vm.getDistrict() }, }) }, selectDistrict (e) { let vm = this if (vm.baseInfo.city_id === '' || vm.baseInfo.province_id === '') { hlsPopup.showLongCenter('请先选择城市') } vm.hlsPopup.selectList({ list: vm.districtList, code: 'bp_type', object: {}, returnItem: function (index, obj) { vm.baseInfo.district_id = obj.bp_type vm.baseInfo.district_name = obj.bp_type_n }, }) }, getProvince () { let vm = this let url = process.env.basePath + 'fnd_province_query' let param = {} vm.hlsPopup.showLoading('请稍候') vm.hlsHttp.post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.provinceList = res.lists.map(item => { return { code: item.province_id, code_name: item.province_name, } }) } }) }, getCity () { let vm = this let url = process.env.basePath + 'fnd_city_query' let param = { province_id: vm.baseInfo.province_id, } // vm.hlsPopup.showLoading('请稍候') vm.hlsHttp.post(url, param).then(function (res) { // vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.cityList = res.lists.map(item => { return { code: item.city_id, code_name: item.city_name, } }) } }) }, getDistrict () { let vm = this let url = process.env.basePath + 'fnd_district_query' let param = { city_id: vm.baseInfo.city_id, } // vm.hlsPopup.showLoading('请稍候') vm.hlsHttp.post(url, param).then(function (res) { // vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.districtList = res.lists.map(item => { return { code: item.district_id, code_name: item.district_name, } }) } }) }, getMarital () { let vm = this let url = process.env.basePath + 'bp_marital_status_query' let param = {} vm.hlsPopup.showLoading('请稍候') vm.hlsHttp.post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.maritalList = res.lists.map(item => { return { code: item.marital_status, code_name: item.marital_status_n, } }) } }) }, getEducationBackground () { let vm = this let url = process.env.basePath + 'bp_academic_bg_query' let param = {} vm.hlsPopup.showLoading('请稍候') vm.hlsHttp.post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.backList = res.lists.map(item => { return { code: item.academic_bg, code_name: item.academic_bg_n, } }) } }) }, getTabNum (i) { this.tabNum = i }, fileSuccess (fileList, result) { this.fileList = fileList this.fileList.forEach((itemFile, index) => { if ( result.response && itemFile.file && !itemFile.attachment_id && result.response.fileName === itemFile.file.name ) { itemFile.attachment_id = result.response.attachment_id } }) }, getBpType () { let vm = this let url = process.env.basePath + 'bp_type_select' let param = {} vm.hlsPopup.showLoading('请稍候') vm.hlsHttp.post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.typeList = res.lists.map(item => { return { code: item.bp_type, code_name: item.bp_type_n, } }) } }) }, // 查看大图 showBigPicture (pic) { let vm = this vm.hlsPopup.showBigPicture({ imgUrl: pic, width: '100% !important', }) }, }, } </script> <style lang="less"> #base-info1 { font-family: PingFangSC-Regular; input::placeholder { color: #b4b4b5; } textarea::placeholder { color: #b4b4b5; } textarea { text-align: right; color: #666; } .type-save{ color: #fff; width:80px; height: 25px; font-size:10px; border-radius: 5px; margin:5px 15px 5px 0px; float: right; background-color: @headerColor; } .typeBP { span { display: inline-block; padding: 1px 5px; border-radius: 5px; text-align: center; line-height: 20px; background-color: rgba(220, 220, 221, 0.26); color: #666; margin-right: 5px; margin-top: 3px; } img { width: 10px; height: 10px; margin-left: 1px; } } .tax { width: 351px; height: 78px; background: #fff; margin: 0 auto; margin-bottom: 30px; display: flex; align-items: center; .left-img { width: 24px; height: 28px; flex: 2.5; padding-left: 24px; } div { flex: 25; padding-left: 24px; span { font-family: PingFangSC-Regular; font-size: 14px; color: #383f45; letter-spacing: 0; line-height: 22px; } p { font-family: PingFangSC-Regular; font-size: 12px; color: rgba(56, 63, 69, 0.5); letter-spacing: 0; line-height: 22px; } } .right-img { width: 10px; height: 16px; flex: 1; padding-right: 21px; } } .content { height: 76%; .userInfo { height: 45px; line-height: 45px; 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; } .upload-id-card { height: 176px; background-color: #fff; span { display: block; color: #656464; margin-left: 16px; padding-top: 16px; font-size: 13px; } .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; } } } .second-part { margin-top: 9px; .auto { color: #b4b4b5; } } .card { padding-bottom: 8px; height: auto; background-color: #fff; margin-bottom: 10px; display: flex; flex-direction: column; span { color: #656464; font-size: 13px; line-height: 18px; padding-top: 8px; display: block; margin-left: 16px; } .img-content { /*display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center;*/ } .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; } } } } .put { width: 175px; height: 45px; color: #fdb62f; border-radius: 4px; border: 1px solid #fdb62f; background-color: #fafafa; } .put-approved { width: 90%; height: 45px; color: #fff; border-radius: 4px; background-color: @headerColor; } .save { width: 175px; height: 45px; color: #fff; border-radius: 4px; background-color: @headerColor; } .footer-button { padding-top: 15px; margin-bottom: 15px; } .front, .photo, .backphoto, .back { display: none; } .modal-content { width: 100%; height: 75%; position: absolute; top: 25%; background-color: #fff; overflow-y: scroll; .modal-content-add-top { width: 320px; height: 34px; line-height: 34px; padding-top: 10px; background-color: #fff; padding-bottom: 40px; position: fixed; left: 28px; span { font-family: PingFangSC-Semibold; font-size: 15px; color: @headerColor; letter-spacing: 0.47px; } img { width: 34px; height: 34px; float: right; } } .addBack { display: block; width: 320px; margin: 0 auto; margin-top: 50px; border-radius: 6px; margin-bottom: 17px; } .card-Info { margin-bottom: 220px; } } .add-card { width: 358px; height: 40px; background: @headerColor; border-radius: 4px; color: #fff; } } .modal { background-color: rgba(0, 0, 0, 0) !important; } .hls-notify-wrap { height: 50px; line-height: 34px !important; } </style>