exam/exam-06173-uni - reg/pages/user/info/info.vue

<template>
	<view style="padding: 20px;">


		<uni-forms :modelValue="postForm" ref="form" :rules="rules" :label-width="120">

			<uni-forms-item label="ID">
				<uni-easyinput type="text" v-model="postForm.id" disabled />
			</uni-forms-item>

			<uni-forms-item label="用户名">
				<uni-easyinput type="text" v-model="postForm.userName" disabled />
			</uni-forms-item>
			
			<uni-forms-item label="人脸照片" name="avatar">
				<yf-file-upload v-model="postForm.avatar"></yf-file-upload>
			</uni-forms-item>
			
			<uni-forms-item label="身份证正面照" name="face">
				<yf-file-upload v-model="postForm.face"></yf-file-upload>
			</uni-forms-item>

			<uni-forms-item label="姓名" name="realName">
				<uni-easyinput type="text" v-model="postForm.realName" placeholder="请输入姓名" />
			</uni-forms-item>
			
			
			<uni-forms-item label="身份证号" name="idCard">
				<uni-easyinput type="number" v-model="postForm.idCard" placeholder="请输入身份证号" />
			</uni-forms-item>

			<uni-forms-item label="手机号" name="mobile">
				<uni-easyinput type="text" v-model="postForm.mobile" placeholder="请输入手机号" />
			</uni-forms-item>

<!-- 			<uni-forms-item label="邮箱">
				<uni-easyinput type="text" v-model="postForm.email" placeholder="请输入邮箱" />
			</uni-forms-item> -->

		</uni-forms>


		<button type="primary" @click="handleUpdate()">保存并登录</button>


	</view>
</template>

<script>
	import { info, update } from '@/api/user'

	export default {
		data() {
			return {
				postForm: {
					avatar: '',
					face: '',
					userName: '',
					realName: '',
					idCard: '',
					mobile: '',
				},
				rules: {
					
					realName: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空！'
						}]
				
					},
					idCard: {
						rules: [{
							required: true,
							errorMessage: '身份证号不能为空！'
						}, {
							pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
							errorMessage: '请输入正确身份证号！',
						}]
					
					},
					mobile: {
						rules: [{
							required: true,
							errorMessage: '手机号不能为空！'
						},{
							pattern: /^(1)\d{10}$/,
							errorMessage: '请输入正确手机号！'
						}]
				
					},
					avatar: {
						rules: [{
							required: true,
							errorMessage: '请上传人脸照片！'
						}]
					},
					face: {
						rules: [{
							required: true,
							errorMessage: '请上传身份证正面照！'
						}]
					}
				
				},
			}
		},
		mounted() {
			this.handleInfo()
		},
		methods: {

			handleInfo() {
				let token = uni.getStorageSync('token');

				info(token).then(res => {
					this.postForm = res
				})
			},

			handleUpdate() {
				this.$refs.form.validate().then(res => {
					uni.showLoading()
					
					update(this.postForm).then(() => {
					
						uni.showToast({
							title: '资料更新成功！'
						})
						uni.setStorageSync('idCard', this.postForm.idCard);
						
						uni.hideLoading()
						
						setTimeout(()=>{
							uni.switchTab({
								url: '/pages/index/index'
							})
						}, 2000)
					
					})
				}).catch(err => {
					
				})
			},
			
			bindMobile() {
			
				uni.navigateTo({
					url: `/pages/user/info/bind-mobile?type=${this.postForm.mobile?0:1}&mobile=${this.postForm.mobile|| ''}`
				})
			},

		}
	}
</script>

<style>
	.user-banner {
		height: 160px;
		display: flex;
		background: url('https://cdn.yfhl.net/static/user-bg.jpg') no-repeat;
		align-items: center;
		background-position: center;
		background-size: 100%;
		justify-content: center;
		width: 100%;
		flex-direction: column;
	}

	.user-banner .avatar {
		width: 80px;
		height: 80px;
		border: #3771CF 2px solid;
		border-radius: 50%;
	}

	.user-banner .points {
		position: absolute;
		top: 15px;
		right: 15px;
		color: #FDBF40;
		font-weight: bold;
		font-weight: 700;
		font-size: 16px;
	}

	.user-banner .name {
		color: #fff;
		font-weight: 700;
		font-size: 18px;
	}

	.user-banner .dept {
		color: #eee;
		font-weight: 700;
		font-size: 14px;
	}
	
	.mv-box{
		font-size: 16px; 
		font-weight: 700; 
		display: flex; 
		align-items: center;
	}
	
	.mv-box .btn{
		margin-left: 10px;
		display: flex; 
		align-items: center;
	}
</style>