CKQ/pages/mine/password/password.vue

<template>
	<view class="password-page">
		<view class="form">
			<uni-forms ref="form" :rules="rules" :model="form" :label-width="80">
				<uni-forms-item label="原密码" name="original_password" required>
					<uni-easyinput v-model="form.original_password" type="password" placeholder="请输入原密码"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="新密码" name="new_password" required>
					<uni-easyinput v-model="form.new_password" type="password" placeholder="请输入新密码"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="再次确认" name="password" required>
					<uni-easyinput v-model="form.password" type="password" placeholder="请再次输入新密码"></uni-easyinput>
				</uni-forms-item>
			</uni-forms>	
			<footer @click="onSubmit">提交</footer>
		</view>		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rules:{
					original_password:{
						rules:[
							{
								required: true,
								errorMessage: '请输入原密码'
							}					
						],
						validateTrigger:'submit'
					},
					new_password:{
						rules:[
							{
								required: true,
								errorMessage: '请输入新密码'
							}					
						],
						validateTrigger:'submit'
					},
					password:{
						rules:[
							{
								required: true,
								errorMessage: '请再次输入新密码'
							}					
						],
						validateTrigger:'submit'
					},
				},
				form:{
					original_password:"",
					new_password:"",
					password:""					
				}
			}
		},
		methods: {
			onSubmit(){
				this.$refs.form.validate().then(res=>{
					console.log('表单数据信息：', res);
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})				
			}
		}
	}
</script>

<style lang="scss" scoped>
.password-page{
	background: #F3F5FB;
	height: 100vh;
	.form{
		width: 686upx;
		background-color: #fff;
		margin: 0 auto;
		padding:40upx 36upx 2upx 36upx;
		box-sizing: border-box;
		border-radius: 20upx;
	}
	footer{
		width: 100%;
		height: 136upx;
		background: #FFFFFF;
		border-radius: 16upx 16upx 0px 0px;
		position: fixed;
		left: 0;
		bottom: 0;
		text-align: center;
		color: #168DEC;
		font-size: 32upx;
		padding-top: 20upx;
		letter-spacing: 2px;
	}
}
</style>