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)
					}
				})
			})
		},
	}
}
</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>