jje_uniapp/loginPages/login/bind-account-password.vue

<template>
  <view class="container">
    <view class="login-wrap">
		<view class="login-form">
			<u--form
				labelPosition="left"
				:model="userInfo"
				:rules="rules"
				ref="form1"
			>
				<u-form-item
					label="密码"
					prop="password"
					labelWidth="auto"
					labelAlign="right"
				  >
				<u--input
					v-model="userInfo.password"
					placeholder="请输入6到18位的密码"
					border="bottom"
					maxlength="18"
					minlength="6"
					type="password"
				></u--input>
				</u-form-item>
			  <u-form-item
					labelWidth="auto"
					labelAlign="right"
					label="确认密码"
					prop="password1"
					width="120"
				>
				<u--input
					maxlength="20"
					v-model="userInfo.password1"
					placeholder="请再次输入密码"
					border="bottom"
					type="password"
				></u--input>
			  </u-form-item>
			</u--form>
		</view>
	</view>
	<view @click="gotoSettingTransactionPassword()" class="op-btn-wrap">
		<view class="h-btn">
			<text>下一步</text>
		</view>
	</view>
	
	<view class="h-mark-desc">
		<view class="h-text">
			<text>*账号密码建议输入6到18位的数字、字母和特殊符号组成</text>
		</view>
	</view>
	
  </view>
</template>
<script>
export default {
	data() {
		return {
			userInfo: {
				phone: '',
				smsCode: '',
				openId: '',
				password: '',
				password1: '',
				transactionPassword: '',
				reference: '',
			},
			tips2: '',
			rules: {
				password: {
					required: true,
					min: 6,
					max: 18,
					message: '请输入6到18位密码',
					trigger: ['blur', 'change'],
				},
				password1:  [
					{
						required: true,
						min: 6,
						max: 18,
						message: '请输入6到18位密码',
						trigger: ['blur', 'change'],
					},
					{
						validator: (rule, value, callback) => {
							if(this.userInfo.password === value){
								return true;
							}
							return false;
						},
						message: "两次输入密码不一致",
						trigger: ['blur', 'change'],
					}
				],
			},
		}
	},
	onLoad(option) {
		// 判断Openid是否为空
		if(!this.$isDataEmpty(option)){
			this.userInfo = JSON.parse(option.data);
		}
	},
	onReady() {
		this.$refs.form1.setRules(this.rules)
	},
	methods: {
		// 去设置交易密码
		gotoSettingTransactionPassword(){
			let that = this;
			this.$refs.form1.validate().then(res => {
				uni.$u.route({
					url: '/pages/login/bind-transaction-password',
					params: {
						data: JSON.stringify(that.userInfo)
					}
				})
			}).catch(errors => {
				uni.$u.toast('校验失败,请认真填写')
			})
		},
	}
}
</script>
<style lang="scss">
page,body{
	background: #fff;
}
.container{
	background: #fff;
	height: 500px;
	.login-wrap {
		display: flex;
		justify-content: center;
		.login-form{
			width: 90%;
		}
		.account{
			display: flex;
		}
		.identifying-code{
		}
	}
	.op-btn-wrap{
		margin-top: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		.h-btn{
			text-align: center;
			width: 343px;
			height: 42px;
			background: #FFE05C;
			border-radius: 27px;
			line-height: 42px;
		}
	}
}

</style>