yunshengtai-uniapp/pages/release/companyAuth/index.vue

<template>
	<!--pages/release/companyAuth/index.wxml-->
	<view class="auth-page">
		<view class="is-legal-box">
			<view class="acea-row row-between row-middle">
				<view>申请人是否为企业法人</view>
				<radio-group @change="radioClick" class="acea-row row-between row-middle">
					<label>
						<radio value="1" :checked="form.isLegalPerson == 1"></radio>是
					</label>
					<label>
						<radio value="0" :checked="form.isLegalPerson == 0"></radio>否
					</label>
				</radio-group>
			</view>
			<view class="authbook-box" v-if="form.isLegalPerson == 0">
				<view class="tips">非法人申请需上传加盖公章的申请授权书</view>
				<view class="upload-box acea-row row-between">
					<image src="https://download.cyjyyjy.com/sq.png" v-if="form.authorizationPath == ''" @tap="upCard"
						data-type="ap"></image>
					<image :src="form.authorizationPath" v-else @tap="upCard" data-type="ap"></image>
					<image src="https://download.cyjyyjy.com/sqs.png" @tap="prevImg"></image>
				</view>
			</view>
		</view>
		<view class="splitLine"></view>
		<view class="company-info-box">
			<view class="title">企业信息</view>
			<view class="form-item acea-row row-between row-middle">
				<view class="label">主体类型</view>
				<view class="inp-box">
					<input type="text" value="企业" disabled="disabled">
				</view>
			</view>
			<view class="form-item acea-row row-between row-middle">
				<view class="label">企业名称</view>
				<view class="inp-box">
					<input type="text" :value="form.enterpriseName" @input="inpChange" data-type="enterpriseName"
						placeholder="请填写企业名称">
				</view>
			</view>
			<view class="form-item acea-row row-between row-middle">
				<view class="label">信用代码</view>
				<view class="inp-box">
					<input type="text" :value="form.creditCode" @input="inpChange" data-type="creditCode"
						placeholder="13位或18位数字及大写字母">
				</view>
			</view>
			<view class="form-item acea-row row-between row-middle">
				<view class="label">所在行业</view>
				<view class="inp-box acea-row row-right row-middle">
					<!-- <input type="text" value="{{form.profession}}" disabled="true" placeholder="请选择" />
        <image src="https://download.cyjyyjy.com/home/arrow-r.png" class="arrorR"></image> -->
					<picker class="pick-box" @change="resourcesChange" :value="idx" :range="resourcesList"
						:range-key="'cagetoryName'" mode="selector">
						<view class="picker">{{resourcesList[resourcesIdx].cagetoryName || '请选择'}}</view>
					</picker>
				</view>
			</view>
			<view class="form-item acea-row row-between row-middle">
				<view class="label">企业规模</view>
				<view class="inp-box">
					<picker @change="bindPickerChange" :value="form.enterpriseScale" :range="scaleArr">
						<view class="picker">{{form.enterpriseScale}}</view>
					</picker>
				</view>
			</view>
			<view class="form-item noBorder">
				<view class="label">营业执照</view>
				<view class="inp-box yyzz">
					<image src="https://download.cyjyyjy.com/yyzz.png" v-if="form.businessLicense == ''" @tap="upCard"
						data-type="bl"></image>
					<image :src="form.businessLicense" v-else @tap="upCard" data-type="bl"></image>
				</view>
			</view>
		</view>
		<view class="splitLine"></view>
		<view class="company-info-box">
			<view class="title">对公银行信息</view>
			<view class="form-item acea-row row-between row-middle">
				<view class="label">银行账号</view>
				<view class="inp-box">
					<input type="text" :value="form.bankAccount" @input="inpChange" @blur="checkBank"
						data-type="bankAccount" placeholder="银行账号">
				</view>
			</view>
			<view class="form-item acea-row row-between row-middle">
				<view class="label">开户银行</view>
				<view class="inp-box">
					<input type="text" :value="form.bankName" @input="inpChange" data-type="bankName"
						placeholder="请填写开户银行">
				</view>
			</view>
			<view class="form-item acea-row row-between row-middle">
				<view class="label">开户网点</view>
				<view class="inp-box">
					<input type="text" :value="form.bankBranch" @input="inpChange" data-type="bankBranch"
						placeholder="请填写开户网点">
				</view>
			</view>
		</view>
		<view class="splitLine"></view>
		<view class="company-info-box">
			<view class="title">法人/申请人信息</view>
			<view class="form-item acea-row row-between row-middle">
				<view class="label">姓名</view>
				<view class="inp-box">
					<input type="text" :value="form.legalPersonName" @input="inpChange" data-type="name"
						placeholder="请填写姓名">
				</view>
			</view>
			<view class="form-item acea-row row-between row-middle">
				<view class="label">手机号</view>
				<view class="inp-box">
					<input type="text" :value="form.legalPhone" @input="inpChange" data-type="phone"
						placeholder="请填写手机号">
				</view>
			</view>
			<view class="form-item acea-row row-between row-middle">
				<view class="label">身份证号</view>
				<view class="inp-box">
					<input type="text" :value="form.legalPersonIdcard" @input="inpChange" data-type="idcard"
						placeholder="请填写身份证号">
				</view>
			</view>
			<!-- <view class="form-item noBorder">
      <view class="label">身份证</view>
      <view class="inp-box sfz">
        <view class="acea-row row-between-wrapper">
          <image src="https://download.cyjyyjy.com/sfz1.png" @tap="upCard" data-type="b" v-if="form.idcardPicBehind == ''"></image>
          <image :src="form.idcardPicBehind" @tap="upCard" data-type="b" v-else></image>
          <image src="https://download.cyjyyjy.com/sfzb.png"></image>
        </view>
        <view class="acea-row row-between-wrapper">
          <image src="https://download.cyjyyjy.com/sfz2.png" @tap="upCard" data-type="f" v-if="form.idcardPicFront == ''"></image>
          <image :src="form.idcardPicFront" @tap="upCard" data-type="f" v-else></image>
          <image src="https://download.cyjyyjy.com/sfzz.png"></image>
        </view>
        <view class="acea-row row-between-wrapper">
          <image src="https://download.cyjyyjy.com/sfz3.png" @tap="upCard" data-type="h" v-if="form.idcardPicHold == ''"></image>
          <image :src="form.idcardPicHold" @tap="upCard" data-type="h" v-else></image>
          <image src="https://download.cyjyyjy.com/sfzs.png"></image>
        </view>
      </view>
    </view> -->
		</view>
		<view class="submit-btn" @tap="submit">保存并提交</view>
		
		<view class="argeement-box">
				<checkbox-group  @change="argeementClick">
					<checkbox value="1" style="transform:scale(0.7);position: relative; top: 3rpx;" :checked="isCheck" />
				</checkbox-group>
				<view class="acea-row">
					我已阅读并同意
					<navigator url="/pages/login/agreementPage"  open-type="navigate" style="color: rgb(255, 50, 50);">《用户协议及隐私政策》</navigator>
				</view>
		</view>
	</view>
</template>

<script>
	// pages/release/companyAuth/index.js
	const util = require("../../../utils/util.js");
	const app = getApp();

	export default {
		data() {
			return {
				form: {
					isLegalPerson: 0,
					//是否为企业法人
					authorizationPath: '',
					// 授权书图片
					enterpriseName: '',
					//企业名称
					creditCode: '',
					//信用代码
					industryId: '',
					//所在行业
					enterpriseScale: '请选择',
					//企业规模
					businessLicense: '',
					//营业执照照片
					bankAccount: '',
					//银行账号
					bankName: '',
					// 开户银行
					bankBranch: '',
					// 开户网点
					legalPersonName: '',
					//法人姓名
					legalPhone: '',
					//法人手机号
					legalPersonIdcard: '',
					// 法人身份证
					idcardPicFront: '',
					// 法人身份证正面照
					idcardPicBehind: '',
					// 法人身份证背面照
					idcardPicHold: '' // 法人手持身份证

				},
				isEdit: false,
				scaleArr: ['0-25', '25-99', '99-200', '200-500', '500及以上'],
				resourcesList: null,
				resourcesIdx: null
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.getResourcesCagetory();

			if (options.authInfo) {
				let authInfo = JSON.parse(decodeURIComponent(options.authInfo));
				this.form.authorizationType = 1;
				this.form.id = authInfo.id;
				this.form.enterpriseId = authInfo.enterpriseId;
				this.form.idcardPicHold = authInfo.idcardPicHold || '';
				this.form.idcardPicBehind = authInfo.idcardPicBehind || '';
				this.form.idcardPicFront = authInfo.idcardPicFront || '';
				this.form.legalPersonIdcard = authInfo.legalPersonIdcard || '';
				this.form.legalPhone = authInfo.legalPhone || '';
				this.form.legalPersonName = authInfo.legalPersonName || '';
				this.form.bankBranch = authInfo.bankBranch || '';
				this.form.bankName = authInfo.bankName || '';
				this.form.bankAccount = authInfo.bankAccount || '';
				this.form.businessLicense = authInfo.businessLicense || '';
				this.form.enterpriseScale = authInfo.enterpriseScale || '请选择';
				this.form.creditCode = authInfo.creditCode;
				this.form.enterpriseName = authInfo.enterpriseName;
				this.form.authorizationPath = authInfo.authorizationPath || '';
				this.form.isLegalPerson = 0;
				this.isEdit = true
			}
		},
		methods: {
			//获取供应、需求类型
			getResourcesCagetory() {
				app.http('GET', 'ResourcesCagetory/listResourcesCagetory').then(res => {
					// console.log(res)
					if (res.data.success) {
						this.setData({
							resourcesList: res.data.data
						});
					}
				});
			},

			resourcesChange(e) {
				console.log(e)
				let idx = Number(e.detail.value);
				this.setData({ 
					resourcesIdx: idx,
				});
				this.form.industryId = this.resourcesList[idx].id;
			},

			//选择行业
			toProfession() { // wx.navigateTo({
				//   url: '/pages/user/profession/index',
				// })
			},

			checkBank(e) {
				// console.log(e.detail.value)
				app.http('get', 'EnterpriseAuthentication/getBankName', {
					bankAccount: e.detail.value
				}).then(res => {
					if (res.data.success) {
						this.setData({ //['form.bankName']: res.data.data
						});
						//try fix
						this.form.bankName = res.data.data;
					}
				});
			},

			inpChange(e) {
				let type = e.currentTarget.dataset.type;
				let value = e.detail.value;

				switch (type) {
					case 'enterpriseName':
						this.form.enterpriseName = value;
						break;
					case 'creditCode':
						this.form.creditCode = value;
						break;
					case 'bankAccount':
						this.form.bankAccount = value;
						break;
					case 'bankName':
						this.form.bankName = value;
						break;
					case 'bankBranch':
						this.form.bankBranch = value;
						break;
					case 'name':
						this.form.legalPersonName = value;
						break;
					case 'phone':
						this.form.legalPhone = value;
						break;
					case 'idcard':
						this.form.legalPersonIdcard = value;
						break;
				}
			},

			upCard(e) {
				let type = e.currentTarget.dataset.type;
				util.chooseImages(img => {
					if (type == 'f') {
						this.form.idcardPicFront = img;
					} else if (type == 'b') {
						this.form.idcardPicBehind = img;
					} else if (type == 'h') {
						this.form.idcardPicHold = img;
					} else if (type == 'ap') {
						this.form.authorizationPath = img;
					} else if (type == 'bl') {
						this.form.businessLicense = img;
					}
				});
			},

			bindPickerChange(e) {
				this.form.enterpriseScale = this.scaleArr[e.detail.value];
			},

			radioClick(e) {
				this.form.isLegalPerson = e.detail.value;
			},

			prevImg(e) { // let url = e.currentTarget.dataset.url;
				// wx.previewImage({
				//   urls: [url],
				// })
			},
			argeementClick(e){
				console.log(e)
				let state = e.detail.value
				if(state.length > 0) {
					this.isCheck = true
				} else{
					this.isCheck = false
				}
			},
			submit() {
				let form = this.form;
				console.log(form);
				if(!this.isCheck){
					uni.showToast({
					  title: '请阅读并勾选用户隐私协议',
					  icon: 'none'
					});
					return;
				}

				if (form.isLegalPerson == 0 && form.authorizationPath == '') {
					uni.showToast({
						title: '请上传授权书！',
						icon: 'none'
					});
					return;
				} else if (form.enterpriseName == '') {
					uni.showToast({
						title: '请填写企业名称',
						icon: 'none'
					});
					return;
				} else if (form.creditCode == '') {
					uni.showToast({
						title: '请填写信用代码',
						icon: 'none'
					});
					return;
				} else if (form.enterpriseScale == '请选择') {
					uni.showToast({
						title: '请选择企业规模',
						icon: 'none'
					});
					return;
				} else if (form.businessLicense == '') {
					uni.showToast({
						title: '请上传营业执照',
						icon: 'none'
					});
					return;
				} else if (form.bankAccount == '') {
					uni.showToast({
						title: '请输入银行账号',
						icon: 'none'
					});
					return;
				} else if (form.bankName == '') {
					uni.showToast({
						title: '请输入银行名称',
						icon: 'none'
					});
					return;
				} else if (form.bankName == '') {
					uni.showToast({
						title: '请输入开户网点',
						icon: 'none'
					});
					return;
				} else if (form.legalPersonName == '') {
					uni.showToast({
						title: '请填写姓名',
						icon: 'none'
					});
					return;
				} else if (form.legalPhone == '') {
					uni.showToast({
						title: '请填写手机号',
						icon: 'none'
					});
					return;
				} else if (form.legalPersonIdcard == '') {
					uni.showToast({
						title: '请填写身份证号',
						icon: 'none'
					});
					return;
				} else {
					if (!this.isEdit) {
						app.http('post', 'EnterpriseAuthentication/createAuthenticInfoTwo', this.form).then(res => {
							if (res.data.success) {
								uni.showModal({
									title: '提示！',
									content: '提交成功！请等待审核',
									success(res) {
										uni.navigateBack({
											delta: 1
										});
									}

								});
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								});
							}
						});
					} else {
						app.http('post', 'EnterpriseAuthentication/editAuthenticInfo', this.form).then(res => {
							if (res.data.success) {
								uni.showModal({
									title: '提示！',
									content: '提交成功！请等待审核',

									success(res) {
										uni.navigateBack({
											delta: 1
										});
									}

								});
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								});
							}
						});
					}
				}
			}

		}
	};
</script>
<style>
	/* pages/release/companyAuth/index.wxss */
	@import "./index.css";
	.auth-page{
		padding-bottom: 90rpx;
	}
	.is-legal-box {
		width: 100%;
		padding: 30rpx 40rpx;
	}

	.is-legal-box label {
		margin-right: 40rpx;
	}

	.authbook-box {
		font-size: 28rpx;
		color: #666;
	}

	.tips {
		margin: 40rpx 0;
	}

	.upload-box image {
		width: 332rpx;
		height: 204rpx;
	}

	.splitLine {
		width: 100%;
		height: 20rpx;
		background-color: #eee;
	}

	.company-info-box {
		width: 100%;
		padding: 32rpx 40rpx;
	}

	.title {
		font-size: 32rpx;
		color: #1D1D1D;
		margin-bottom: 38rpx;
		font-weight: 500;
	}

	.form-item {
		font-size: 28rpx;
		color: #666666;
		padding: 16rpx 0;
		border-bottom: 2rpx solid #EEEEEE;
	}

	.form-item .inp-box {
		width: 70%;
		text-align: right;
	}
	.form-item .yyzz{
		width: 100%;
	}
	.yyzz image {
		width: 670rpx;
		height: 368rpx;
		margin-top: 26rpx;
	}

	.noBorder {
		border: none;
	}

	.form-item .sfz {
		width: 100%;
		margin-top: 26rpx;
	}

	.sfz image {
		width: 332rpx;
		height: 205rpx;
		margin-bottom: 10rpx;
	}


	.arrorR {
		width: 14rpx;
		height: 24rpx;
		margin-left: 10rpx;
	}
</style>