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

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


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

			<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="用户头像">
				<yf-file-upload v-model="postForm.avatar"></yf-file-upload>
			</uni-forms-item>
			
			<uni-forms-item label="人脸照片">
				<yf-file-upload v-model="postForm.face"></yf-file-upload>
			</uni-forms-item>

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

			<uni-forms-item label="手机号">
				
				
				<view v-if="postForm.mobile" class="mv-box">
					<view>
						 {{ postForm.mobile }}
					</view>
					
					<view class="btn">
						<button type="warn" size="mini" @click="bindMobile">解绑</button>
					</view>
				</view>
				
				<view v-else>
				  <button type="primary" size="mini" @click="bindMobile">绑定</button>
				</view>
				
			</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: ''
				}
			}
		},
		mounted() {
			this.handleInfo()
		},
		methods: {

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

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

			handleUpdate() {
				
				uni.showLoading()
				
				update(this.postForm).then(() => {

					uni.showToast({
						title: '资料更新成功！'
					})
					
					
					uni.hideLoading()
					
					setTimeout(()=>{
						uni.switchTab({
							url: '/pages/user/index'
						})
					}, 2000)

				})
			},
			
			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>