NN2022060801/addons/utcapp/pages/auth/index.vue

<template>
	<view class="main">
		<view class="auth" v-if="loaded">
			<u-form labelPosition="left" :rules="rules" ref="form" :labelWidth="'168rpx'">
				<u-form-item label="姓名" prop="formData.realname">
					<u-input v-model="formData.realname" placeholder="请输入姓名"></u-input>
				</u-form-item>
				<u-form-item label="身份证号" prop="formData.idcard">
					<u-input v-model="formData.idcard" maxlength="20" disabledColor="#ffffff" placeholder="请输入身份证号">
					</u-input>
				</u-form-item>
				<u-form-item label="身份证正面" prop="formData.idcard_front_img">
					<u-upload :action="uploadConfig.url" :header="uploadConfig.header" :accept="'image'"
						:uploadText="'身份证正面'" :imageMode="aspectFit" :file-list="fileList" @delete="deletePic"
						name="file" :maxCount="1" @afterRead="afterRead" @on-uploaded="uploadedFront">
					</u-upload>
				</u-form-item>
				<u-form-item label="身份证反面" prop="formData.idcard_back_img" :border="'none'">
					<u-upload :action="uploadConfig.url" :header="uploadConfig.header" :accept="'image'"
						:uploadText="'身份证反面'" :imageMode="aspectFit" :file-list="fileList1" @delete="deletePic"
						name="file" :maxCount="1" :maxSize="1024*1024*10" @afterRead="afterRead"
						@on-uploaded="uploadedBack"></u-upload>
				</u-form-item>


			</u-form>
			<view class="u-form-submit">
				<u-button type="primary" v-if="formData.idcard_check == 1">已认证</u-button>
				<u-button type="primary" v-else-if="formData.idcard_check == 3" @click="submit()">重新提交</u-button>
				<u-button type="primary" v-else-if="formData.idcard_check == 2" @click="submit()">已提交</u-button>
				<u-button type="primary" v-else @click="submit()">确认</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loaded: false,
				formData: {},
				fileList: [],
				fileList1: [],
				uploadConfig: {
					url: this.$request.baseUrl + '/api/upload/image',
					header: {
						Authorization: "Bearer " + uni.getStorageSync('tokens')
					}
				},
				rules: {
					'realname': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'idcard': {
						type: 'string',
						required: true,
						message: '请填身份证号',
						trigger: ['blur', 'change']
					},
					'idcard_front_img': {
						type: 'string',
						required: true,
						message: '请上传身份证正面',
						trigger: ['blur', 'change']
					},
					'idcard_back_img': {
						type: 'string',
						required: true,
						message: '请上传身份证背面',
						trigger: ['blur', 'change']
					}
				},
			}
		},
		created() {
			this.getUserInfo()
		},
		methods: {
			deletePic() {

			},
			//获取用户数据
			getUserInfo() {
				this.$request.sendToken('/api/user/info', {}, 'POST').then(res => {
					this.loaded = true;
					if (res.success == true) {
						this.userInfo = res.data;
						this.formData.realname = this.userInfo.realname
						this.formData.idcard = this.userInfo.idcard
						this.formData.idcard_check = this.userInfo.idcard_check
						this.formData.idcard_front_img = this.userInfo.idcard_front_img
						this.formData.idcard_back_img = this.userInfo.idcard_back_img

						console.log(this.formData)
						if (this.formData.idcard_front_img) {
							this.fileList[0] = {
								url: this.formData.idcard_front_img
							}
						}
						if (this.formData.idcard_back_img) {
							this.fileList1[0] = {
								url: this.formData.idcard_back_img
							}
						}
					} else {
						this.$u.toast(res.msg);
					}
				})
			},
			// 新增图片
			async afterRead(event) {
				console.log(event)
			},
			uploadedFront(fileList, index) {
				let file = fileList[0].response.data
				this.formData.idcard_front_img = file.path
				console.log(fileList)
			},
			uploadedBack(fileList, index) {
				let file = fileList[0].response.data
				this.formData.idcard_back_img = file.path
				console.log(fileList)
			},
			// 提交
			submit() {
				let _this = this;
				this.$request.sendToken('/api/user/auth/submit', this.formData, 'POST').then(res => {
					this.loaded = true;
					if (res.success == true) {
						this.$u.toast(res.msg);
						setTimeout(function() {
							uni.navigateTo({
								url: '/pages/center/index'
							})
						}, 2000)

					} else {
						this.$u.toast(res.msg);
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		margin: 19rpx 28rpx 38rpx;
		color: #6e6c6b;

		.u-form {
			margin-top: 28rpx;
			background-color: #2c2b2b;
			border-radius: 10rpx;

			.u-form-item {
				padding: 20rpx;
				color: #bb955e !important;

				.u-form-item__body {

					.u-input {
						color: #6e6c6b !important;

						uni-input {
							color: #6e6c6b !important;
						}
					}
				}

			}

			.u-form-item:last-child {
				border: none;


			}

			.u-border-bottom:after {
				border-color: rgba(249, 244, 241, 0.32);
			}

			.u-border-bottom:last-child:after {
				border-color: transparent;
			}
		}


		.auth {
			.u-form-submit {
				margin-top: 56rpx;
				border-radius: 10rpx;

				.u-btn {
					border: 2rpx solid #bb955e;
					background-color: #2c2b2b;
					padding: 10rpx 22rpx;
					color: #bb955e;
					height: auto;
				}
			}
		}
	}
</style>