yiliangyiyun-app/pageD/identity/companyIdentity.vue

<template>
	<view class="center">
		<view v-if='!status' class="top">
			<text @click='consent' v-bind:class="switchs1">公司</text>
			<text @click='consent' v-bind:class="switchs2">个人</text>
		</view>
		<view class="content">
			<view v-if="consentStatus == true">
				<!-- 公司营业执照上传 -->
				<view v-if="license1 != ''">
					<upload :file-list='businesslicense' v-if="consentStatus == true" class="upload" ref="upload" :action="action"
						:max-size="maxSize" delIconSize='30' delBgColor='rgba(0,0,0,0.4)' delIcon="trash" :max-count="1" :size-type="['compressed']" @on-success="getImgUrl"
						@on-remove="onRemove" @on-uploaded="isAdd = true" :before-upload="filterFileType"
						:options="uploadOptions" :custom="uploadCustom"></upload>
				</view>
				<view class="person-info">
					<view class="c-row b-b">
						<text class="tit_red">*</text>
						<text class="tit">公司名称</text>
						<view class="con-list">
							<input placeholder="请填写公司名称" name="input"
								v-model="identityAuthenticationInfo.compName"></input>
						</view>
					</view>
					<view class="c-row">
						<text class="tit">纳税人识别号</text>
						<view class="con-list">
							<input type='number' placeholder="请填写纳税人识别号" name="input"
								v-model="identityAuthenticationInfo.payTaxesCard"></input>
						</view>
					</view>
				</view>
			</view>
			<view v-else>
				<view>
					<!-- <image src="../../static/img/authentication/business.png" mode=""></image> -->
					<!-- 个人身份证正面 -->
					<upload class="upload" ref="upload1" :action="action" :max-size="maxSize" :max-count="1"
						:size-type="['compressed']" @on-success="getImgUrl1" @on-remove="onRemove"
						delIconSize='30' delBgColor='rgba(0,0,0,0.4)' delIcon="trash"
						@on-uploaded="isAdd = true" :before-upload="filterFileType" :options="uploadOptions1"
						:custom="uploadCustom1"></upload>
					<!-- 个人身份证反面 -->
					<upload class="upload" ref="upload2" :action="action" :max-size="maxSize" :max-count="1"
					    delIconSize='30' delBgColor='rgba(0,0,0,0.4)' delIcon="trash"
						:size-type="['compressed']" @on-success="getImgUrl2" @on-remove="onRemove"
						@on-uploaded="isAdd = true" :before-upload="filterFileType" :options="uploadOptions2"
						:custom="uploadCustom2"></upload>
				</view>
				<view class="person-info">
					<view class="c-row b-b">
					<text class="tit_red">*</text>
					<text class="tit">姓名</text>
					<view class="con-list">
						<input placeholder="请填写姓名" name="input"
							v-model="identityAuthenticationInfo.customerName"></input>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit_red">*</text>
					<text class="tit">身份证号</text>
					<view class="con-list">
						<input placeholder="请填写身份证号" name="input" maxlength="18"
							v-model="identityAuthenticationInfo.customerNumberCard"></input>
					</view>
				</view>
				<view class="c-row">
					<text class="tit_red">*</text>
					<text class="tit">联系地址</text>
					<view class="con-list">
						<input  placeholder="请填写联系地址" name="input"
							v-model="identityAuthenticationInfo.compAddress"></input>
					</view>
				</view>
				</view>
				
			</view>
			<button class="btns btn" @click="jumpUrl">下一步</button>
		</view>
	</view>
</template>

<script>
	import upload from '@/components/upload.vue';
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			upload
		},
		name: "buy",
		data() {
			return {
				isShowPerson:false,
				action: this.$uploadUrl,
				maxSize: 50 * 1024 * 1024, //限制文件大小 50M
				btnLoading: false, //防止重复点击
				isAdd: true,
				uploadCustom: true,
				uploadCustom1: true,
				uploadCustom2: true,
				businesslicense:[],
				uploadOptions: {
					"text": "上传营业执照",
					"bgc": "https://taohaoliang.oss-cn-beijing.aliyuncs.com/admin/0dd1401f54e34affaa11c711d808a0a0.png"
				},
				uploadOptions1: {
					"text": "上传身份证头像页",
					"bgc": "https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/tmp/identityup%282%29.png"
				},
				uploadOptions2: {
					"text": "上传身份证国徽页",
					"bgc": "https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/tmp/identitylow%282%29.png"
				},
				tupian: "",
				inputContent: null,
				customerPhone: '',
				consentStatus: true,
				consentStatus1: false,
				codestatus: false,
				verifyCode: null,
				inputStatus: 'none',
				sendText: '获取验证码',
				platform: '',
				sendDisabled: false,
				license1: "../../static/img/authentication/business@3x.png",
				switchs1: "switchs1",
				switchs2: "switchs2",
				id: [],
				id1: "../../static/img/authentication/identityup(3).png",
				id2: "../../static/img/authentication/identitylow(3).png",
				identityImgs1: {},
				status:false,
				identityAuthenticationInfo: {},
				tempFilePaths: [],
				businessLicenseAddressUrl: "",
				certificates: true,
				isEdit:false,
				invitation:"",
				inviteCompany:"",
			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad(options) {
			// this.isEdit = options.isEdit;
			this.invitation = options.ids //通过二维码进来的认证粮商，认证后无需审核通过，就直接通过邀请
			this.inviteCompany = options.compId
			if(options.status){
				this.status=true
				this.consentStatus = false
				this.consentStatus1 = true
				this.switchs1 = "switchs2"
				this.switchs2 = "switchs1"
			}
			if(options.id){
				this.$api.doRequest('get', '/identityAuthenticationInfo/api/getIdentityAuthenticationInfo', {id:options.id},
						'application/json;charset=UTF-8').then(res => {
						console.log("成功连接")
				
						this.identityAuthenticationInfo = res.data.data
						if (this.identityAuthenticationInfo.businessLicenseAddressUrl != "") {
							this.businesslicense=[{url:this.identityAuthenticationInfo.businessLicenseAddressUrl}]
						}
						console.log(this.businesslicense)
						// if (this.deptList.cardAddressUrl != "") {
						// 	this.id = this.deptList.cardAddressUrl.split(",")
						// 	this.idup = this.id[0]
						// 	this.idlow = this.id[1]
						// }
						// if (this.deptList.payeeAddressUrl != "") {
						// 	this.payeeAddress = this.deptList.payeeAddressUrl.split(","),
						// 		this.bank1 = this.payeeAddress[0]
						// 	this.bank2 = this.payeeAddress[1]
						// }
						// console.log(this.deptList.customerTypeFlag, "判断")
						if (this.identityAuthenticationInfo.customerTypeFlag == 2) {
							this.consentStatus = true
							this.consentStatus1 = true
							this.switchs1 = "switchs1"
							this.switchs2 = "switchs2"
						} else {
							this.consentStatus = false
							this.consentStatus1 = true
							this.switchs1 = "switchs2"
							this.switchs2 = "switchs1"
						}
				
					})
					.catch(res => {
						if (res.errmsg) {
							uni.showToast({
								title: res.errmsg,
								icon: 'none',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: "系统异常，请联系管理员",
								icon: 'none',
								duration: 2000
							})
						}
					});
			}
		},
		onShow(){
			
		},
		methods: {
			filterFileType(index, lists) {
				if (lists[index].fileType != 'jpeg' &&lists[index].fileType != 'jpg' && lists[index].fileType != 'png' && lists[index].fileType != 'gif') {
					lists.splice(index, 1);
					// 当前文件不支持
					uni.showModal({
						title: '暂不支持当前图片类型',
						showCancel: false
					});
				} else {
					this.isAdd = false;
				}
			},
			// 营业执照上传
			getImgUrl(res) {
				console.log(res)
				console.log('------------res-----------')
				this.identityAuthenticationInfo.businessLicenseAddressUrl = res.data.appendixPath
			},
			// 身份证正面
			getImgUrl1(res) {
				console.log(res)
				let that = this
				that.id[0] = res.data.appendixPath
				that.id1 = res.data.appendixPath
				that.identityImgs1.personImg = res.data.appendixPath
				that.$api.doRequest('get', '/driverViewInfo/personShibie', that
					.identityImgs1).then(res => {
					if (res.data.data.recPerson != null) {
						if (res.data.data.recPerson != "") {
							that.$set(that.identityAuthenticationInfo,
								'customerName', res.data.data.recPerson)
						}
					}
					if (res.data.data.recPersonNo != null) {
						if (res.data.data.recPersonNo != "") {
							that.$set(that.identityAuthenticationInfo,
								'customerNumberCard', res.data.data
								.recPersonNo)
						}
					}
					
					if (res.data.data.recPersonAddr != null) {
						if (res.data.data.recPersonAddr != "") {
							that.$set(that.identityAuthenticationInfo, 'compAddress', res.data.data
								.recPersonAddr)
						}
					}
				}).catch(res => {
					uni.showToast({
						title: res.data.message,
						icon: 'none',
						duration: 2000
					})
				})
			},
			// 身份证反面
			getImgUrl2(res) {
				console.log(res)
				let that = this
				that.id[1] = res.data.appendixPath
				that.id2 = res.data.appendixPath
				that.identityImgs1.personImg = res.data.appendixPath
				// that.$api.doRequest('get', '/driverViewInfo/personShibie', that
				// 	.identityImgs1).then(res => {
				// 	if (res.data.data.recPerson != null) {
				// 		if (res.data.data.recPerson != "") {
				// 			that.$set(that.identityAuthenticationInfo,
				// 				'customerName', res.data.data.recPerson)
				// 		}
				// 	}
				// 	if (res.data.data.recPersonNo != null) {
				// 		if (res.data.data.recPersonNo != "") {
				// 			that.$set(that.identityAuthenticationInfo,
				// 				'customerNumberCard', res.data.data
				// 				.recPersonNo)
				// 		}
				// 	}
					
				// 	if (res.data.data.recPersonAddr != null) {
				// 		if (res.data.data.recPersonAddr != "") {
				// 			that.$set(that.identityAuthenticationInfo, 'compAddress', res.data.data
				// 				.recPersonAddr)
				// 		}
				// 	}
				// }).catch(res => {
				// 	uni.showToast({
				// 		title: res.data.message,
				// 		icon: 'none',
				// 		duration: 2000
				// 	})
				// })
			},
			onError(error) {
				alert(error)
				console.log('------------error-----------')
				console.log(error)
			},
			onProgress(e) {
				console.log(e)
			},
			onRemove(index) {},
			jumpUrl() {
				if (this.consentStatus) {
					if (!this.identityAuthenticationInfo.compName) {
						this.$api.msg('公司名称不能为空')
						return
					}
					if (this.identityAuthenticationInfo.compName.length < 2 || this.identityAuthenticationInfo.compName
						.length > 25) {
						this.$api.msg('公司名称输入错误')
						return
					}
					// if (!this.identityAuthenticationInfo.payTaxesCard) {
					// 	this.$api.msg('纳税人识别号不能为空')
					// 	return
					// }
					// if (this.identityAuthenticationInfo.payTaxesCard.length < 15 || this.identityAuthenticationInfo
					// 	.payTaxesCard.length > 20) {
					// 	this.$api.msg('纳税人识别号输入错误')
					// 	return
					// }
					// if (this.identityAuthenticationInfo.businessLicenseAddressUrl == "" || this.identityAuthenticationInfo
					// 	.businessLicenseAddressUrl == null) {
					// 	this.$api.msg('请上传营业执照')
					// 	return
					// }
					this.identityAuthenticationInfo.customerTypeFlag = "2"
					this.identityAuthenticationInfo.customerType = "企业"
					this.identityAuthenticationInfo.invitation = this.invitation
					this.identityAuthenticationInfo.inviteCompany = this.inviteCompany
					var model = JSON.stringify(this.identityAuthenticationInfo);
					uni.navigateTo({
						url: `/pageD/identity/companyIdentityTwo?identityAuthenticationInfo=` + model,
					})
				} else if (this.consentStatus1) {
					this.identityAuthenticationInfo.cardAddressUrl = this.id.toString()
					if (this.id[0] == '' || this.id[0] == null) {
						this.$api.msg('请上传身份证正面')
						return
					}
					// if (this.id[1] == '' || this.id[1] == null) {
					// 	this.$api.msg('请上传身份证反面')
					// 	return
					// }
					if (!this.identityAuthenticationInfo.customerName) {
						this.$api.msg('姓名不能为空')
						return
					}
					if (this.identityAuthenticationInfo.customerName.length < 2 || this.identityAuthenticationInfo
						.customerName.length > 10) {
						this.$api.msg('姓名输入错误')
						return
					}
					if (!this.identityAuthenticationInfo.customerNumberCard) {
						this.$api.msg('身份证号不能为空')
						return
					}
					if (this.identityAuthenticationInfo.customerNumberCard.length != 18) {
						this.$api.msg('身份证号输入错误')
						return
					}
					this.identityAuthenticationInfo.customerTypeFlag = "1"
					this.identityAuthenticationInfo.customerType = "个人"
					this.identityAuthenticationInfo.invitation = this.invitation
					this.identityAuthenticationInfo.inviteCompany = this.inviteCompany
					var model = JSON.stringify(this.identityAuthenticationInfo);
					uni.navigateTo({
						url: `/pageD/identity/companyIdentityThree?identityAuthenticationInfo=` + model,
					})
				}
			},
			consent() {
				if (this.consentStatus == false && this.consentStatus1 == true) {
					this.consentStatus = true
					this.consentStatus1 = false
					this.switchs1 = "switchs1"
					this.switchs2 = "switchs2"
				} else if (this.consentStatus == true && this.consentStatus1 == false) {
					this.consentStatus = false
					this.consentStatus1 = true
					this.switchs1 = "switchs2"
					this.switchs2 = "switchs1"
				}
			},
			phoneinput(e) {
				if (e.detail.value.length == 11) {
					this.codestatus = true
				}
			},
			verifyCodeInput(e) {
				this.verifyCode = e.detail.value
			},
			cancel() {
				this.inputShow = false
				this.inputStatus = 'none'
				this.isPhone = false
			},

		},
	}
</script>

<style>
	.center {
		/* padding: 10px 20px; */

	}

	.top {
		background: white;
		padding: 10px 20px;
		border-radius: 0 0 20rpx 20rpx;
	}

	.content {
		padding: 10px 20px;
	}

	.c-row {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding: 20rpx 30rpx;
		position: relative;
	}

	.con-list {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		color: #303133;
		line-height: 40rpx;
		text-align: right;
		padding-right: 20rpx;
		font-size: 14px;
	}

	.uni-navigator {
		display: inline-block;
		color: #22C572;
	}

	.getcode.active {
		background: #22C572;
		color: #fff;
	}

	.btn {
		margin-top: 10px;
		background-color: #FFFFFF;
		border-radius: 25px;
		border: none;
	}

	.btns {
		background-color: #22C572;
		color: white;
	}

	.switchs1 {
		font-size: 20px;
		font-weight: 700;
		margin-right: 16px;
		position: relative;
	}

	.switchs1::after,
	.switchs2::after {
		background: #22C572;
		width: 20px;
		height: 4px;
		content: ' ';
		position: absolute;
		bottom: -20rpx;
		left: 0;
		right: 0;
		margin: auto;
	}

	.switchs2 {
		font-size: 20px;
		margin-right: 16px;
	}

	.picture {
		width: 100%;
		height: 220px;
		text-align: center;
		margin-top: 10px;
	}

	.words {
		font-size: 18px;
		font-weight: 600;
		color: #617E8B;
	}

	.floats {
		position: relative;
		top: -150px;
		text-align: center;
	}

	.upload {
		margin: 20rpx 0;
	}

	.tit_red {
		color: #E54D42;
	}
	.person-info{
		background: white;
		padding: 20rpx;
		border-radius: 20rpx;
		margin-bottom: 50rpx;
	}
</style>