keysass_app/pages/personal/setup/companyApply.vue

<template>
	<view class="companyApply">
		<view class="contentBox">
			<view class="sintitle">
				<img src="/static/index/grxx.png" alt="">
				<p>认证信息</p>
			</view>
			<u-form :model="form" ref="form" :rules="rules" label-position='top' label-width='150'
				border-bottom='false'>
				<u-form-item label="企业证件照全称（必填）" prop="name" border-bottom='false'>
					<u-input border style="width:100%;" :disabled='form.companyStatus == 0||form.companyStatus == 1 '
						v-model="form.name" placeholder='输入企业证件照全称' />
				</u-form-item>
				<u-form-item label="法人姓名" prop="contactName" border-bottom='false'>
					<u-input border style="width:100%;" :disabled='form.companyStatus == 0 || form.companyStatus == 1'
						v-model="form.contactName" placeholder='输入法人姓名' />
				</u-form-item>
				<u-form-item label="上传营业执照正本(证件须保持正向，不能翻转倾斜)" prop="businessLicenseUrl" border-bottom='false'>
					<u-upload ref="upload" width='200px' height='100px' :action="action" :header="headers"
						:auto-upload="true" :show-progress="false" max-count="1"
						:deletable="form.companyStatus == 0 || form.companyStatus == 1 ? false: true"
						:file-list="form.businessLicenseUrl"
						@on-success="(data,index,lists) => {fielUploadSuc(data,index,lists) }"
						@on-remove="(index, lists, name)=>{deleteUpfile(index)}"
						@on-error="(data,index, lists)=>{errorUpfile(data,index, lists)}">
						<!-- <view slot="addBtn" class="slot-btn">
							<img v-if="form.businessLicenseUrl" :src="form.businessLicenseUrl" mode="aspectFill"
								style="width: 200px;height: 100px;">
							<div v-else class="upliacla">
								<p style="font-size: 18px;">+</p>
								<p>选择图片</p>
							</div>
						</view> -->
					</u-upload>
				</u-form-item>
			</u-form>
			<!-- 按钮 -->
			<view class="companyBtn" @click="submitApply" v-if=" !form.companyApplyId">
				提交审核
			</view>
			<view class="companyBtn" @click="submitApply" v-else-if="form.companyStatus == 2">
				重新提交
			</view>
			<view class="companyBtn companyBtn1" v-else-if="form.companyStatus == 0">
				审核中
			</view>
			<view class="companyBtn" style="background: #909399" v-else-if="form.companyStatus == 1">
				已认证
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				headers: {
					Authorization: 'Bearer ' + uni.getStorageSync('accessToken'),
				},
				form: {},
				rules: {
					name: [{
						required: true,
						message: '请输入企业全称',
						trigger: 'blur',
					}],
					contactName: [{
						required: true,
						message: '请输入法人姓名',
						trigger: 'blur',
					}],
				},
				action: this.http.baseUrl + '/upload',
			}
		},
		onLoad() {
			this.getApplyDetail()
		},
		onReady() {
			this.$refs.form.setRules(this.rules);
		},
		methods: {
			// 获取认证信息 companyStatus 0待审核 1审核通过 2审核不通过
			getApplyDetail() {
				const phoneuserinfo = uni.getStorageSync('wxUserInfo');
				this.http.quickGet(`/tester/cert/apply/${phoneuserinfo.userId}`, true).then(res => {
					if (res.data.code == 200) {
						this.form = res.data.data
						if (res.data.data.companyApplyId) {
							this.form = {
								...res.data.data,
								name: res.data.data.companyContactName,
								contactName: res.data.data.companyName,
								businessLicenseUrl: [{
									url: this.http.baseUrl + res.data.data
										.companyBusinessLicense
								}]
							}
						}
					}
				})
			},
			// 提交审核
			submitApply() {
				this.$refs.form.validate(valid => {
					if (valid) {

						if (this.form.companyApplyId) {

							// 修改
							// 图片地址处理
							let newUrl;
							if (typeof(this.form.businessLicenseUrl) == 'string') {
								if (!this.form.businessLicenseUrl) {
									return uni.showToast({
										icon: 'none',
										title: '请上传营业执照'
									})
								}
								newUrl = [this.form.businessLicenseUrl]
							} else {
								if (!this.form.businessLicenseUrl[0].url) {
									return uni.showToast({
										icon: 'none',
										title: '请上传营业执照'
									})
								}
								const url = this.form.businessLicenseUrl[0].url
								const index = url.indexOf('/profile')
								newUrl = [url.substring(index)]
							}
							const dataUpdata = {
								applyId: this.form.companyApplyId,
								name: this.form.name,
								contactName: this.form.contactName,
								businessLicenseUrl: newUrl,
							}
							this.http.quickPost('/companyApply/edit', dataUpdata, true).then(res => {
								uni.showToast({
									icon: 'none',
									title: '修改成功，请耐心等待审核',
									duration: 2000,

								})
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/personal/personal'
									})
								}, 2000)

							})

						} else {
							// 首次提交
							if (!this.form.businessLicenseUrl) {
								return uni.showToast({
									icon: 'none',
									title: '请上传营业执照'
								})
							}
							const data = {
								name: this.form.name,
								contactName: this.form.contactName,
								businessLicenseUrl: [this.form.businessLicenseUrl],
							}
							this.http.quickPost('/companyApply/apply', data, true).then(res => {
								uni.showToast({
									icon: 'none',
									title: '提交成功，请耐心等待审核',
									duration: 2000,
								})
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/personal/personal'
									})
								}, 2000)
							})
						}
					}
				})


			},

			fielUploadSuc(data, index) {
				if (data.code === 200) {
					this.form.businessLicenseUrl = data.filePath
				}
			},
			deleteUpfile(index, lists) {
				this.form.businessLicenseUrl = ''
			},
			errorUpfile(data, index) {},
		}
	}
</script>

<style lang="scss" scoped>
	.contentBox ::v-deep.u-form-left__content__label {
		font-weight: bold;
		font-size: 30rpx;
		color: #000000;
	}

	.sintitle {
		display: flex;
		align-items: center;
		/* height: 50px; */
		background: #F2F4F7;
		/* background:#20529c; */
		border-radius: 4rpx;
		padding: 7px 15px;
	}

	.sintitle img {
		width: 20px;
		height: 18px;
		margin-right: 5px;
	}

	.sintitle p {
		font-size: 15px;
		color: #000000;
		font-weight: bold;
	}

	.companyApply {
		padding: 25rpx;
		box-sizing: border-box;
		height: 100%;
	}


	.contentBox {
		width: 100%;
		height: 100%;
		background: #FFFFFF;
		padding: 25rpx;
		box-sizing: border-box;

		.companyBtn {
			width: 100%;
			height: 70rpx;
			background: linear-gradient(90deg, #5EA6FD, #1A81F9);
			border-radius: 35rpx;
			line-height: 70rpx;
			text-align: center;
			color: #FFFFFF;
		}

		.companyBtn1 {
			background: linear-gradient(90deg, #F9BD55, #F49C45);
		}
	}

	.slot-btn {
		width: 200px;
		height: 100px;
		zIndex: 99;
		/* display: flex;
		justify-content: center;
		align-items: center;
		background: rgb(244, 245, 246);
		border-radius: 10rpx; */
	}

	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}

	.upliacla {
		width: 200px;
		height: 100px;
		/* line-height:100px; */
		border-radius: 4px;
		background: #f4f5f6;
		color: #606266;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

	}
</style>