<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: '' }, 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.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>