equipment-rental-mini/pages/menus/mine/mine.vue

<template>
	<view class="home">
		<view class="form-area">
			<u--form
				labelPosition="left"
				:model="form"
				:rules="rules"
				ref="Form1"
				:labelWidth="100"
				labelAlign="left">
				<u-form-item
					label="姓名"
					prop="name"
					borderBottom>
					<u--input
					v-model="form.name"
					>
					</u--input>
				</u-form-item>
				<u-form-item
					label="工号"
					prop="ID"
					borderBottom>
						<u--input
						v-model="form.ID"
						disabled
						>
						</u--input>
				</u-form-item>
				<u-form-item
					label="手机号"
					prop="phone"
					borderBottom>	
					<u--input
						v-model="form.phone"
						>
					</u--input>
				</u-form-item>
				<u-form-item
					label="邮箱"
					prop="email"
					borderBottom>
					<u--input
						v-model="form.email"
						>
					</u--input>
				</u-form-item>
				<u-form-item
					label="密码"
					prop="pwd"
					borderBottom>
					<view class="demo-layout" style="width: 300rpx;">
						<u-button type="success" size="small" @click="toPopupShow">修改密码</u-button>
					</view>
				</u-form-item>
			</u--form>
		</view>
		<u-popup :show="popupShow" @close="popupShow = false" >
			<view class="popup-area">
				<view class="form-area" style="padding:0 20rpx;">
					<u--form
						labelPosition="left"
						:model="pwdForm"
						:rules="pwdRules"
						ref="Form2"
						:labelWidth="100"
						labelAlign="left">
						<u-form-item
							label="旧密码"
							prop="oldpwd"
							>
							<u--input
							v-model="pwdForm.oldpwd"
							type="password"
							clearable
							password>
							</u--input>
						</u-form-item>
						<u-form-item
							label="新密码"
							prop="newpwd"
							>	
							<u--input
							v-model="pwdForm.newpwd"
							type="password"
							clearable
							password>
							</u--input>
						</u-form-item>
						<u-form-item
							label="确认密码"
							prop="surepwd"
							>	
							<u--input
								v-model="pwdForm.surepwd"
								type="password"
								clearable
								password>
							</u--input>
						</u-form-item>
					</u--form>
				</view>
				<view class="pwd-btn">
					<u-button size="small" @click="popupShow = false">取消</u-button>
					<u-button type="success" size="small" @click="changePwd">确认</u-button>
				</view>
			</view>
		</u-popup>
		<view class="btn-area">
			<!-- <u-button type="info"   size="small" @click="toLogout">退出登录</u-button> -->
			<u-button  type="success" size="small" @click="save">保存</u-button>
		</view>
	</view>
</template>

<script>
	import cache from '@/utils/storage.js'
	import { getInfo,saveUserInfo,savePassword } from '@/api/user.js'
	export default {
		data() {
			return {
				form:{
					name:cache.session.getJSON('nickName'),
					ID:cache.session.getJSON('userName'),
					phone:cache.session.getJSON('phone'),
					email:cache.session.getJSON('email'),
					pwd:""
				},
				popupShow:false,
				userId:cache.session.getJSON('userId'),
				rules:{
					name:[
						{
							required: true,
							message: '请输入姓名',
							// blur和change事件触发检验
							trigger: ['blur']
						}
					],
					phone:[
						{
							message: '请输入手机号',
							// blur和change事件触发检验
							trigger: ['blur']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['blur'],
						}
					],
					email:[
						{
							message: '请输入邮箱',
							// blur和change事件触发检验
							trigger: ['blur']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.email(value);
							},
							message: '邮箱不正确',
							// 触发器可以同时用blur和change
							trigger: ['blur'],
						}
					]
				},
				pwdForm:{
					oldpwd:"",
					newpwd:"",
					surepwd:""
				},
				pwdRules:{
					oldpwd:[
						{
							required: true,
							message: '请输入旧密码',
							// blur和change事件触发检验
							trigger: ['blur'],
						},
						{
							pattern: /^[0-9a-zA-Z]*$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '密码只能包含字母或数字'
						},
						{
							min: 6,
							max: 16,
							message: '长度在6-16个字符之间'
						}
					],
					newpwd:[
						{
							required: true,
							message: '请输入新密码',
							// blur和change事件触发检验
							trigger: ['blur'],
						},
						{
							pattern: /^[0-9a-zA-Z]*$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '密码只能包含字母或数字'
						},
						{
							min: 6,
							max: 16,
							message: '长度在6-16个字符之间'
						}
					],
					surepwd:[
						{
							required: true,
							message: '请确认密码',
							// blur和change事件触发检验
							trigger: ['blur'],
						},
						{
							pattern: /^[0-9a-zA-Z]*$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '密码只能包含字母或数字'
						},
						{
							min: 6,
							max: 16,
							message: '长度在6-16个字符之间'
						},
						{
							validator: (rule, value, callback) => {
								if(value != this.pwdForm.newpwd){
									return false;
								}else{
									callback()
								}
							},
							message: '密码与新密码不一致'
						}
					]
				}
			};
		},
		methods:{
			toPopupShow(){
				this.popupShow = true
				this.pwdForm = {
					oldpwd:"",
					newpwd:"",
					surepwd:""
				}
			},
			save(){
				const that = this
				uni.showLoading({
					title:'保存中',
					icon:'none'
				})
				this.$refs.Form1.validate().then(() => {
					let data = {
						email:this.form.email,
						nickName:this.form.name,
						phonenumber:this.form.phone,
						userId:this.userId
					}
					saveUserInfo(data).then(res=>{
						uni.hideLoading()
						console.log(res)
						uni.showToast({
							icon:'success',
							title:"修改成功！"
						})
						// uni.$u.toast()
						if(res.data.code===200 && res.data.msg === "操作成功"){
							that.initInfo()
						}
					})
				}).catch(errors => {
					uni.hideLoading()
					uni.$u.toast(errors[0].message)
				})
			},
			changePwd(){
				uni.showLoading({
					title:'修改中',
					icon:'none'
				})
				this.$refs.Form2.validate().then(() => {
					savePassword(this.pwdForm.oldpwd,this.pwdForm.newpwd).then(res=>{
						// console.log(res)
						uni.hideLoading()
						uni.$u.toast("修改成功！")
						that.pwdForm = {
							oldpwd:"",
							newpwd:"",
							surepwd:""
						}
					})
				}).catch(errors => {
					uni.hideLoading()
					uni.$u.toast(errors[0].message)
				})
			},
			initInfo(){
				const that = this
				getInfo().then(res=>{
					if(res.data.code===200){
						cache.session.setJSON('role',res.data.roles[0])
						cache.session.setJSON('phone',res.data.user.phonenumber)
						cache.session.setJSON('email',res.data.user.email)
						cache.session.setJSON('nickName',res.data.user.nickName)
						cache.session.setJSON('userName',res.data.user.userName)
						cache.session.setJSON('userId',res.data.user.userId)
						that.form = {
							name:res.data.user.nickName,
							ID:res.data.user.userName,
							phone:res.data.user.phonenumber,
							email:res.data.user.email,
							pwd:""
						}
					}
				})
			}
		},
		onReady() {
			this.$refs.Form1.setRules(this.rules)
			this.$refs.Form2.setRules(this.pwdRules)
		}
	}
</script>

<style lang="scss" scoped>
.home{
	position: relative;
	height: 100vh;
}
.layout-row{
	padding:50rpx 30rpx;
	border-bottom:1rpx solid #c6c6c6;
	font-size: 30rpx;
}
.form-area{
	/deep/.u-form-item{
		line-height: 300%;
		font-size: 30rpx;
	}
	/deep/ .u-form-item__body{
		padding-right: 20rpx;
	}
	/deep/ .u-form-item__body__left__content__label{
		padding-left:40rpx
	}
}
.btn-area{
	margin-top: 50rpx;
	width: 100%;
	box-sizing: border-box;
	padding: 0px 200rpx;
	// right: 50rpx;
	// display: flex;
	// /deep/.u-button{
	// 	margin: 30rpx;
	// }
}
.popup-area{
	height: 700rpx;
	box-sizing: border-box;
	// padding: 0 30rpx;
	.pwd-btn{
		display: flex;
		padding-top: 50rpx;
		/deep/.u-button{
			margin: 30rpx;
		}
	}
}
</style>