rongzidanbao-ui/work/pages/prove/addqy.vue

<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 style="height: 128rpx;" v-if="ptype=='add'"></view>
		<view class="rzbfot">
			<view class="rzbtns bgb" @click="getAddQyFn" v-if="ptype=='add'">
				<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 {uploadIdentify} from '@/utils/common.js'
	import { getToken } from '@/utils/auth'
	import {getOcrBusinessLicense,getEnterpriseAdd,getEnterpriseDet,getEnterpriseEdit} 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:"",
				realName:"",
				baseUrl:'',
				id:'',
				ptype:'add',
				pfrom:'',
				qylist: [{
					"idCard":"",//身份证号码
					"realName":"",//真实姓名
					 "creditCode":"",//统一社会信用代码
					"enterpriseName":"",//企业名称
					"enterpriseType":"",//企业类型
					"enterpriseAddress":"",//企业地址
					"legalName":"",//法人姓名
					"registeredCapital":"",//注册资金
					"establishData":"",//成立日期
					"businessTerm":"",//营业期限
					"businessScope":"",//经营范围
					"imageUrl":'',//营业执照URL
				}],
				
			}
		},
		onLoad(e) {
			this.baseUrl=baseUrl;
			if(e.type&&e.type=='edit'){
				this.id=e.id;
				this.ptype=e.type;
				this.getDetail()
			}
			if(e.from){
				this.pfrom=e.from;
			}
		},
		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) {
							
						}
					}
				});
			},
			getDetail(){
				getEnterpriseDet(this.id).then(res=>{
					if(res.code==200){
						this.qylist.splice(0,1,res.data);
					}
				})
			},
			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 = [];
							uploadIdentify('/common/upload',img,0,0,0,imglen,fuwufile,function(rs){
								if(rs&&rs.length>0){
									var resurl=rs[0];
									var obj={
										url:resurl.fileName,
										idx:idx,
										urlOnline:resurl.urlOnline
									}
									that.getOcrBusinessLicense(obj)
								}
							})	
						}
					}
				});
			},
			getOcrBusinessLicense(obj){
				var that=this;
				var idx=obj.idx;
				var params={
					image:obj.urlOnline,
					idCardSide:obj.type
				}
				getOcrBusinessLicense(params).then(res=>{
					if(res.code==200){
						var params=JSON.parse(JSON.stringify(res.data))
						params.imageUrl=obj.url
						that.qylist.splice(idx,1,params);
					}
				})
			},
			getSubmit() {
				var that = this;
				// that.$toast("添加企业成功")
				// setTimeout(function(){
				// 	if(that.pfrom=='rz'){
				// 		that.$tab.reLaunch('/pages/index/index')
				// 	}else{
				// 		uni.$emit('qyRefresh')
				// 		uni.navigateBack({
				// 			delta:1
				// 		})
				// 	}
				// },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))
				}
				// 判断是否有值
				if(this.ptype=='edit'){
					var pobj=params[0];
					getEnterpriseEdit(pobj).then(res=>{
						if(res.code==200){
							that.$toast("修改企业成功")
							setTimeout(function(){
								uni.$emit('qyRefresh')
								uni.navigateBack({
									delta:1
								})
							},1200)
						}
					})
				}else{
					getEnterpriseAdd(params).then(res=>{
						if(res.code==200){
							that.$toast("添加企业成功")
							setTimeout(function(){
								if(that.pfrom=='rz'){
									that.$tab.reLaunch('/pages/index/index')
								}else{
									uni.$emit('qyRefresh')
									uni.navigateBack({
										delta:1
									})
								}
							},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 196rpx;
	.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>