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"
					border="none">
					</u--input>
				</u-form-item>
				<u-form-item
					label="工号"
					prop="ID"
					borderBottom>	
					<u--input
					v-model="form.ID"
					border="none">
					</u--input>
				</u-form-item>
				<u-form-item
					label="手机号"
					prop="phone"
					borderBottom>	
					<u--input
						v-model="form.phone"
						border="none">
					</u--input>
				</u-form-item>
				<u-form-item
					label="邮箱"
					prop="email"
					borderBottom>
					<u--input
						v-model="form.email"
						border="none">
					</u--input>
				</u-form-item>
				<u-form-item
					label="密码"
					prop="pwd"
					borderBottom>
					<view class="demo-layout" style="width: 300rpx;">
						<u-button color="#000" size="small" @click="popupShow = true">修改密码</u-button>
					</view>
				</u-form-item>
			</u--form>
		</view>
		<u-popup :show="popupShow" @close="popupShow = false" >
			<view class="popup-area">
				<view class="form-area">
					<u--form
						labelPosition="left"
						:model="pwdForm"
						:rules="pwdRules"
						ref="Form2"
						:labelWidth="100"
						labelAlign="left">
						<u-form-item
							label="旧密码"
							prop="oldpwd"
							borderBottom>
							<u--input
							v-model="pwdForm.oldpwd"
							border="none">
							</u--input>
						</u-form-item>
						<u-form-item
							label="新密码"
							prop="newpwd"
							borderBottom>	
							<u--input
							v-model="pwdForm.newpwd"
							border="none">
							</u--input>
						</u-form-item>
						<u-form-item
							label="确认密码"
							prop="surepwd"
							borderBottom>	
							<u--input
								v-model="pwdForm.surepwd"
								border="none">
							</u--input>
						</u-form-item>
					</u--form>
				</view>
				<view class="pwd-btn">
					<u-button size="small" @click="popupShow = false">取消</u-button>
					<u-button color="#000" size="small" >确认</u-button>
				</view>
			</view>
		</u-popup>
		<view class="btn-area">
			<u-button color="#000" size="small">保存</u-button>
		</view>
	</view>
</template>

<script>
	import cache from '@/utils/storage.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,
				rules:{
					name:[
						{
							required: true,
							message: '请输入姓名',
							// blur和change事件触发检验
							trigger: ['blur']
						}
					],
					ID:[
						{
							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: 8,
							max: 16,
							message: '长度在8-16个字符之间'
						}
					],
					newpwd:[
						{
							required: true,
							message: '请输入新密码',
							// blur和change事件触发检验
							trigger: ['blur'],
						},
						{
							pattern: /^[0-9a-zA-Z]*$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '密码只能包含字母或数字'
						},
						{
							min: 8,
							max: 16,
							message: '长度在8-16个字符之间'
						}
					],
					surepwd:[
						{
							required: true,
							message: '请确认密码',
							// blur和change事件触发检验
							trigger: ['blur'],
						},
						{
							pattern: /^[0-9a-zA-Z]*$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '密码只能包含字母或数字'
						},
						{
							min: 8,
							max: 16,
							message: '长度在8-16个字符之间'
						},
						{
							validator: (rule, value, callback) => {
								if(value != this.pwdForm.newpwd){
									return false;
								}else{
									callback()
								}
							},
							message: '密码与新密码不一致'
						}
					]
				}
			};
		},
		methods:{
		},
		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__left__content__label{
		padding-left:40rpx
	}
}
.btn-area{
	position: absolute;
	width: 300rpx;
	bottom: 100rpx;
	right: 50rpx;
}
.popup-area{
	height: 700rpx;
	box-sizing: border-box;
	// padding: 0 30rpx;
	.pwd-btn{
		display: flex;
		padding-top: 50rpx;
		/deep/.u-button{
			margin: 30rpx;
		}
	}
}
</style>