yiliangyiyun-app/pageD/identity/companyIdentity.vue

<template>
	<view class="center">
		<view>
			<image @click='consent' style='width:14px;height:14px;position:relative;top:2px;margin-right:5px;'
				:src="consentStatus==true?'../../static/img/login/select@2x.png':'../../static/img/login/selected2.png'"
				alt=""></image>
			<text>公司</text>
			<image @click='consent' style='width:14px;height:14px;position:relative;top:2px;margin-right:5px;'
				:src="consentStatus1==true?'../../static/img/login/select@2x.png':'../../static/img/login/selected2.png'"
				alt=""></image>
			<text>个人</text>
		</view>
		<view v-if="consentStatus == true">
			<view>
				<button type="default" @click="license">上传营业执照</button>
				<view style="width: 100px;margin: 0 auto;" v-if="license1 != ''">
					<image v-bind:src = "license1" style="width: 100px;height: 100px;"></image>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">公司名称</text>
				<view class="con-list">
					<input placeholder="请填写公司名称" name="input" v-model="identityAuthenticationInfo.compName"></input>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">纳税人识别号</text>
				<view class="con-list">
					<input placeholder="请填写纳税人识别号" name="input"v-model="identityAuthenticationInfo.payTaxesCard"></input>
				</view>
			</view>
			<view>
				<button type="default" @click="idUp">上传身份证正面</button>
				<view style="width: 100px;margin: 0 auto;" v-if="id1 != ''">
					<image v-bind:src = "id1" style="width: 100px;height: 100px;"></image>
				</view>
				<button type="default" @click="idLow">上传身份证反面</button>
				<view style="width: 100px;margin: 0 auto;" v-if="id2 != ''">
					<image v-bind:src = "id2" style="width: 100px;height: 100px;"></image>
				</view>
			</view>
			<view class="c-row b-b">
				<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">身份证号</text>
				<view class="con-list">
					<input placeholder="请填写身份证号" name="input"
						v-model="identityAuthenticationInfo.customerNumberCard"></input>
				</view>
			</view>
			<view>
				<button type="default" @click="bankUp()">上传银行卡正面</button>
				<view style="width: 100px;margin: 0 auto;" v-if="bank1 != ''">
					<image v-bind:src = "bank1" style="width: 100px;height: 100px;"></image>
				</view>
				<button type="default" @click="bankLow()">上传银行卡反面</button>
				<view style="width: 100px;margin: 0 auto;" v-if="bank2 != ''">
					<image v-bind:src = "bank2" style="width: 100px;height: 100px;"></image>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">银行卡号</text>
				<view class="con-list">
					<input placeholder="请填写银行卡号" name="input" v-model="identityAuthenticationInfo.bankCard"></input>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">开户行</text>
				<view class="con-list">
					<input placeholder="请填写开户行" name="input" v-model="identityAuthenticationInfo.bankDeposit"></input>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">开户支行</text>
				<view class="con-list">
					<input placeholder="请填写开户支行" name="input"
						v-model="identityAuthenticationInfo.bankDepositBranch"></input>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">手机号</text>
				<view class="con-list">
					<input placeholder="请填写手机号" @input='phoneinput' v-model="identityAuthenticationInfo.customerPhone"></input>
				</view>
			</view>
			<view style='width:100%;border-bottom:1px solid #E8E9ED;position:relative;padding:10px;' class="flex">
				<button :class='codestatus&&!sendDisabled?"active":""' @click='getcode'
					class='getcode'>{{sendText}}</button>
				<view style='width:70%;position:relative;margin-left: 200px;'>
					<input v-model='verifyCode' placeholder="请输入验证码" type="text">
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">公司地址</text>
				<view class="con-list">
					<input placeholder="请填写公司地址" name="input" v-model="identityAuthenticationInfo.compAddress"></input>
				</view>
			</view>
		</view>
		<view v-else>
			<view>
				<button type="default" @click="idUp">上传身份证正面</button>
				<view style="width: 100px;margin: 0 auto;" v-if="id1 != ''">
					<image v-bind:src = "id1" style="width: 100px;height: 100px;"></image>
				</view>
				<button type="default" @click="idLow">上传身份证反面</button>
				<view style="width: 100px;margin: 0 auto;" v-if="id2 != ''">
					<image v-bind:src = "id2" style="width: 100px;height: 100px;"></image>
				</view>
			</view>
			<view class="c-row b-b">
				<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">身份证号</text>
				<view class="con-list">
					<input placeholder="请填写身份证号" name="input"
						v-model="identityAuthenticationInfo.customerNumberCard"></input>
				</view>
			</view>
			<view>
				<button type="default" @click="bankUp()">上传银行卡正面</button>
				<view style="width: 100px;margin: 0 auto;" v-if="bank1 != ''">
					<image v-bind:src = "bank1" style="width: 100px;height: 100px;"></image>
				</view>
				<button type="default" @click="bankLow()">上传银行卡反面</button>
				<view style="width: 100px;margin: 0 auto;" v-if="bank2 != ''">
					<image v-bind:src = "bank2" style="width: 100px;height: 100px;"></image>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">银行卡号</text>
				<view class="con-list">
					<input placeholder="请填写银行卡号" name="input" v-model="identityAuthenticationInfo.bankCard"></input>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">开户行</text>
				<view class="con-list">
					<input placeholder="请填写开户行" name="input" v-model="identityAuthenticationInfo.bankDeposit"></input>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">开户支行</text>
				<view class="con-list">
					<input placeholder="请填写开户支行" name="input"
						v-model="identityAuthenticationInfo.bankDepositBranch"></input>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">收款人姓名</text>
				<view class="con-list">
					<input placeholder="请填写收款人姓名" name="input" v-model="identityAuthenticationInfo.payeeName"></input>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">收款人身份证号</text>
				<view class="con-list">
					<input placeholder="请填写收款身份证号" name="input"
						v-model="identityAuthenticationInfo.payeeNumberCard"></input>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">手机号</text>
				<view class="con-list">
					<input placeholder="请填写手机号" @input='phoneinput' v-model="identityAuthenticationInfo.customerPhone"></input>
				</view>
			</view>
			<view style='width:100%;border-bottom:1px solid #E8E9ED;position:relative;padding:10px;' class="flex">
				<button :class='codestatus&&!sendDisabled?"active":""' @click='getcode'
					class='getcode'>{{sendText}}</button>
				<view style='width:70%;position:relative;margin-left: 200px;'>
					<input v-model='verifyCode' placeholder="请输入验证码" type="text">
				</view>

			</view>
			<view class="c-row b-b">
				<text class="tit">联系地址</text>
				<view class="con-list">
					<input placeholder="请填写联系地址" name="input" v-model="identityAuthenticationInfo.compAddress"></input>
				</view>
			</view>
		</view>
		<view class="padding flex flex-direction">
			<button class="cu-btn bg-red margin-tb-sm lg" @click="commit">提交</button>
		</view>
	</view>

</template>

<script>
	import {
	    mapState 
	} from 'vuex';
	export default {
		name: "buy",
		data() {
			return {
				tupian:"",
				inputContent: null,
				customerPhone: '',
				consentStatus: true,
				consentStatus1: false,
				codestatus: false,
				verifyCode: null,
				inputStatus: 'none',
				sendText: '获取验证码',
				platform: '',
				sendDisabled: false,
				id:[],
				id1:"",
				id2:"",
				license1:"",
				bank1:"",
				bank2:"",
				bankid:[],

				identityAuthenticationInfo: {
					customerPhone: '',
			
				},
				tempFilePaths: [],
				businessLicenseAddressUrl:"",

				// userInfo:{
				// 	phone: ''
				// },
				identityAuthenticationInfo: {},
			};

		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		methods: {
			consent() {
				if (this.consentStatus == false && this.consentStatus1 == true) {
					this.consentStatus = true
					this.consentStatus1 = false
				} else if (this.consentStatus == true && this.consentStatus1 == false) {
					this.consentStatus = false
					this.consentStatus1 = true
				}
			},

			license() {
				var that = this
				wx.chooseImage({
					success: function(res) {
						wx.uploadFile({
							url: 'https://www.zthymaoyi.com/upload/admin',
							filePath: res.tempFilePaths[0],
							name: 'file',
							success(res) {
								var data = res.data
								var strToObj = JSON.parse(data)			
								that.identityAuthenticationInfo.businessLicenseAddressUrl = strToObj.url
								that.license1 = strToObj.url
							}
						})
					}
				})
			},
			idUp(){
				var that = this
				wx.chooseImage({
					success: function(res) {
						wx.uploadFile({
							url: 'https://www.zthymaoyi.com/upload/admin',
							filePath: res.tempFilePaths[0],
							name: 'file',
							success(res) {
								var data = res.data
								var strToObj = JSON.parse(data)			
								that.id[0] = strToObj.url
								that.id1 = strToObj.url
							}
						})
					}
				})
			},
			idLow(){
				var that = this
				wx.chooseImage({
					success: function(res) {
						wx.uploadFile({
							url: 'https://www.zthymaoyi.com/upload/admin',
							filePath: res.tempFilePaths[0],
							name: 'file',
							success(res) {
								var data = res.data
								var strToObj = JSON.parse(data)			
								that.id[1] = strToObj.url
								that.id2 = strToObj.url
							}
						})
					}
				})
			},
			bankUp(){
				var that = this
				wx.chooseImage({
					success: function(res) {
						wx.uploadFile({
							url: 'https://www.zthymaoyi.com/upload/admin',
							filePath: res.tempFilePaths[0],
							name: 'file',
							success(res) {
								var data = res.data
								var strToObj = JSON.parse(data)			
								that.bankid[0] = strToObj.url
								that.bank1 = strToObj.url
							}
						})
					}
				})
			},
			bankLow(){
				var that = this
				wx.chooseImage({
					success: function(res) {
						wx.uploadFile({
							url: 'https://www.zthymaoyi.com/upload/admin',
							filePath: res.tempFilePaths[0],
							name: 'file',
							success(res) {
								var data = res.data
								var strToObj = JSON.parse(data)			
								that.bankid[1] = strToObj.url
								that.bank2 = strToObj.url
							}
						})
					}
				})
			},
			commit() {
				this.identityAuthenticationInfo.commonId = this.userInfo.id
				this.identityAuthenticationInfo.cardAddressUrl = this.id.toString()
				this.identityAuthenticationInfo.payeeAddressUrl = this.bankid.toString()
				if(this.consentStatus1 == true){
					this.identityAuthenticationInfo.customerTypeFlag = "个人"
				}else if(this.consentStatus == true){
					this.identityAuthenticationInfo.customerTypeFlag = "企业"
				}
				this.$api.doRequest('post', '/identityAuthenticationInfo/api/addIdentityAuthenticationInfo', this
						.identityAuthenticationInfo)
					.then(res => {
						console.log(12545645)
					}).catch(res => {
						uni.showToast({
							title: res.data.message,
							icon: 'none',
							duration: 2000
						})
					})
			},

			getcode() {
				var that = this
				if (/^0?1[3|4|5|6|7|8][0-9]\d{8}$/.test(this.identityAuthenticationInfo.customerPhone)) {
					this.$api.doRequest('get', '/commonUser/sendVerifyCode', {
							phone: this.identityAuthenticationInfo.customerPhone
						}).then(res => {
							if (res.data.code == 200) {
								that.sendDisabled = true
								let sec = 60
								let interval = setInterval(() => {
									sec--;
									that.sendText = sec + 's后重发'
									if (sec <= 0) {
										that.sendDisabled = false
										that.sendText = "获取验证码"
										clearInterval(interval)
									}
								}, 1000)
							} else {
								uni.showToast({
									title: res.data.message,
									icon: 'none',
									duration: 2000
								})
							}
						})
						.catch(res => {
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 2000
							})
						});
				} else {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						duration: 2000
					})
				}
			},
			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;
	}
	.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;
	}
	.getcode {
		font-size: 14px;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		color: #AFB3BF;
		background: #F5F6F9;
		height: 30px;
		line-height: 30px;
	}
	.getcode.active {
		border: none;
	}
	.uni-navigator{
		display:inline-block;
		color:#22C572;
	}
	.getcode.active {
		background: #22C572;
		color: #fff;
	}
</style>