<template> <view class="rzbox"> <uni-forms ref="form" :model="user"> <view class="f15 co23 fw5" @click="getaddImage(0)">请添加申请人相关企业 <text>(可添加多个)</text></view> <view v-for="(ite,idx) in qylist" :key="idx" class="mt24"> <view class="flexcc mb20"> <view class="carbox" @click="getaddImage(idx)"> <image :src="baseUrl+ite.imageUrl" v-if="ite.imageUrl" class="img"></image> <image :src="cardq" v-else class="img"></image> <view class="tit">营业执照</view> </view> </view> <view class="mb28"> <view class="cardtip">企业信息会跟进上传的营业执照图片自动识别,支持手动输入。</view> <view class="cardtip">如果识别错误,可尝试再次拍照</view> </view> <!-- style="color: red;" --> <view class="flexe"> <view v-if="idx!=0" @click="getDel(idx)" class="delimg flexc"><image :src="delimg"></image>删除企业</view> </view> <!-- 身份信息 --> <uni-forms-item label="统一社会信用代码" name="creditCode"> <uni-easyinput v-model="ite.creditCode" disabled :inputBorder='false' placeholder="自动识别" /> </uni-forms-item> <uni-forms-item label="企业名称" name="enterpriseName"> <uni-easyinput v-model="ite.enterpriseName" disabled :inputBorder='false' placeholder="自动识别" /> </uni-forms-item> <block v-if="zheList[idx].zheflag"> <uni-forms-item label="企业类型" name="enterpriseType"> <uni-easyinput v-model="ite.enterpriseType" disabled :inputBorder='false' placeholder="自动识别" /> </uni-forms-item> <uni-forms-item label="企业地址" name="enterpriseAddress"> <uni-easyinput type="textarea" disabled :autoHeight="true" v-model="ite.enterpriseAddress" :inputBorder='false' placeholder="自动识别" /> </uni-forms-item> <uni-forms-item label="法人姓名" name="legalName"> <uni-easyinput v-model="ite.legalName" disabled :inputBorder='false' placeholder="自动识别" /> </uni-forms-item> <uni-forms-item label="注册资金" name="registeredCapital"> <uni-easyinput v-model="ite.registeredCapital" disabled :inputBorder='false' placeholder="自动识别" /> </uni-forms-item> <uni-forms-item label="成立日期" name="establishData"> <uni-easyinput v-model="ite.establishData" disabled :inputBorder='false' placeholder="自动识别" /> </uni-forms-item> <uni-forms-item label="营业期限" name="businessTerm"> <uni-easyinput v-model="ite.businessTerm" disabled :inputBorder='false' placeholder="自动识别" /> </uni-forms-item> <uni-forms-item label="经营范围" name="businessScope"> <uni-easyinput type="textarea" disabled :autoHeight="true" v-model="ite.businessScope" :inputBorder='false' placeholder="自动识别" /> </uni-forms-item> </block> <view class="upbox" :class="zheList[idx].zheflag?'':'act'" @click="getZheFn(idx)"> <image :src="upimg"></image> <view>{{zheList[idx].zheflag?'折叠企业信息':'展开企业信息'}}</view> </view> </view> </uni-forms> <view class="rzbfot"> <view class="rzbtns bgb" @click="getAddQyFn"> <image :src="addqy"></image>添加企业 </view> <view class="rzbtns bga" @click="getSubmit">提交</view> </view> </view> </template> <script> import config from '@/config' const baseUrl = config.baseUrl import {uploadmore} from '@/utils/common.js' import { getToken } from '@/utils/auth' import {getOcrBusinessLicense,getEnterpriseAdd} from "@/api/mine/card.js" import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数 export default { components: {}, data() { return { cardq: require('@/work/static/images/prove/cardq.png'), addqy: require('@/work/static/images/prove/addqy.png'), delimg: require('@/work/static/images/delb.png'), upimg: require('@/work/static/images/up.png'), user: { }, zheList:[{zheflag:true}], idCard:"34282419730618003X", realName:"admin", baseUrl:'', qylist: [{ "idCard":"",//身份证号码 "realName":"",//真实姓名 "creditCode":"",//统一社会信用代码 "enterpriseName":"",//企业名称 "enterpriseType":"",//企业类型 "enterpriseAddress":"",//企业地址 "legalName":"",//法人姓名 "registeredCapital":"",//注册资金 "establishData":"",//成立日期 "businessTerm":"",//营业期限 "businessScope":"",//经营范围 "imageUrl":'',//营业执照URL }], } }, onLoad() { this.baseUrl=baseUrl }, methods: { checkPermi, checkRole, getZheFn(idx){ this.zheList[idx].zheflag=!this.zheList[idx].zheflag }, getAddQyFn(){ var obj = { "idCard":"", "realName":"", "creditCode":"", "enterpriseName":"", "enterpriseType":"", "enterpriseAddress":"", "legalName":"", "registeredCapital":"", "establishData":"", "businessTerm":"", "businessScope":"", "imageUrl":'', } this.qylist.push(obj); var zheobj={zheflag:true} this.zheList.push(zheobj); }, getDel(idx) { var that = this; uni.showModal({ title: '确认删除', content: "是否确认删除", cancelText: '取消删除', confirmText: '确认删除', success: function(res) { if (res.confirm) { that.qylist.splice(idx, 1) that.zheList.splice(idx, 1) } else if (res.cancel) { } } }); }, getaddImage(idx){ let that = this; let file =[],count=1; uni.chooseImage({ count: 1, success:function(res){ let img= res.tempFilePaths; if(img.length + file.length > count){ uni.showToast({ title: '最多上传'+count+'张图片', icon: 'none', duration: 2000 }) }else{ let imglen = res.tempFilePaths.length; var fuwufile = []; uploadmore('/common/upload',img,0,0,0,imglen,fuwufile,function(rs){ if(rs&&rs.length>0){ var res=['D:\\zhizhao.jpg'] var obj={ url:rs.join(','), urls:res.join(','), idx:idx } that.getOcrBusinessLicense(obj) } }) } } }); }, getOcrBusinessLicense(obj){ var that=this; var idx=obj.idx; // var obj={ // 'businessScope':"互联网数据服务;大数据服务;数据处理和存储支持服务;卫星遥感数据处理;", // 'businessTerm': "长期", // 'creditCode': "91340824MA2UGYLP60", // 'enterpriseAddress': "安徽省安庆市潜山市经济开发区朝阳路0008号", // 'enterpriseName': "安徽中新云计算有限公司", // 'enterpriseType': "有限责任公司(自然人投资或控股)", // 'establishData': "2020年02月24日", // 'legalName': "江瑾", // 'registeredCapital': "6000万元", // "imageUrl":'123', // "idCard":'123', // "realName":'123', // } // that.qylist.splice(idx,1,obj) // return var params={ // image:baseUrl+obj.url, image:obj.urls, idCardSide:obj.type } getOcrBusinessLicense(params).then(res=>{ if(res.code==200){ var params=JSON.parse(JSON.stringify(res.data)) params.imageUrl=obj.url params.idCard=that.idCard params.realName=that.realName that.qylist.splice(idx,1,params); } }) }, getSubmit() { var that = this; // that.$toast("添加企业成功") // setTimeout(function(){ // if (getToken()) { // uni.$emit('qyRefresh') // uni.navigateBack({ // delta:1 // }) // }else{ // that.$tab.reLaunch('/pages/login') // } // },1200) // return var qylist = JSON.parse(JSON.stringify(this.qylist)) var newArr = [],params=[]; qylist.forEach((item, idx) => { if (item.imageUrl) { newArr.push(item) } }) if (newArr.length < 1) { uni.showToast({ title: '请上传营业执照', icon: "none" }) return } else { params = JSON.parse(JSON.stringify(newArr)) } // 判断是否有值 getEnterpriseAdd(params).then(res=>{ if(res.code==200){ that.$toast("添加企业成功") setTimeout(function(){ if (getToken()) { uni.$emit('qyRefresh') uni.navigateBack({ delta:1 }) }else{ that.$tab.reLaunch('/pages/login') } },1200) } }) }, } } </script> <style> page{ background:#ffffff; } </style> <style lang="scss" scoped> .rzbox /deep/ .uni-forms-item{min-height: 116rpx;box-sizing: border-box;display: flex;align-items: center;margin-bottom: 0;border-bottom: 2rpx solid #E6E6E6;padding:22rpx 0;} .rzbox /deep/ .uni-forms-item__label{font-weight: bold;font-size: 30rpx;color: #222327;flex: 0 0 auto;width: auto !important;} .rzbox /deep/ .uni-easyinput{flex: 1;text-align: right;font-size: 30rpx;color: #222327;} .rzbox /deep/ .uni-easyinput__content-textarea{min-height: 40rpx;font-size: 30rpx;} .rzbox /deep/ .uni-easyinput__placeholder-class{font-size: 30rpx;color: #AAAAAA;} .rzbox /deep/ .uni-input-input{font-size: 30rpx;} .rzbox /deep/ .uni-textarea-textarea{font-size: 30rpx;} .rzbox /deep/ .is-disabled{color: #222327;background-color: #ffffff !important;} .rzbox{padding: 44rpx 34rpx 324rpx; .carbox{width: 320rpx;border-radius: 14rpx;overflow: hidden; .img{width: 320rpx;height: 216rpx;} .tit{width: 100%;height: 60rpx;background: #A0C6D5;text-align: center;font-weight: 500; font-size: 26rpx;line-height: 60rpx; color: #FFFFFF;} } .cardtip{font-weight: 500;font-size: 24rpx;color: #999999;line-height: 40rpx;} .inttxet{font-weight: 500;font-size: 30rpx;flex: 1;text-align: right;color: #222327;} .formtip{font-weight: 500;font-size: 24rpx;color: #FF6969;margin-top: 40rpx;text-align: right;} .upbox{display: flex;flex-direction: column;align-items: center;padding: 32rpx 0 28rpx; image{width: 30rpx;height: 26rpx;margin-bottom: 18rpx;transition: all 0.3s;} view{font-weight: 500;font-size: 24rpx;color: #AAAAAA;} &.act{ image{transform: rotate(180deg);} } } .delimg{font-weight: 500;font-size: 26rpx;color: #FF6969; image{width: 26rpx;height: 26rpx;margin-right: 12rpx;} } } .rzbfot{ .rzbtns{width: 100%;border-radius:10rpx;height: 100rpx;display: flex;align-items: center;justify-content: center;font-weight: bold;font-size: 30rpx; &.bga{background: #00A9F0;color: #FFFFFF;} &.bgb{background:#EBF3FF;color: $com-cd3;margin-bottom: 28rpx; image{width: 30rpx;height: 30rpx;margin-right: 10rpx;} } } } </style>