<template>
	<view class="account-bound">
		<view class="main">
			<u--form
				labelPosition="left"
				:model="form"
				:rules="rules"
				labelWidth="100"
				ref="form">
				<u-form-item label="用户名" prop="name" borderBottom :required="true">
					<u--input
						placeholder="用户名"
						v-model="form.name"
						border="none"
					></u--input>
				</u-form-item>
				
				<u-form-item label="密码" prop="password" borderBottom :required="true">
					<u--input
						placeholder="密码"
						v-model="form.password"
						border="none"
					></u--input>
				</u-form-item>
				
				<u-form-item label="验证码" prop="code" borderBottom :required="true">
					<u--input
						placeholder="验证码"
						v-model="form.code"
						border="none"
					></u--input>
					<image src="../../static/code.jpg" style="width: 64rpx;height: 64rpx;"></image>
				</u-form-item>
			</u--form>
		</view>
		<view class="button" @click="submit">确定</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rules: {
					// 旧密码规则
					'name': [
						{
							type: 'string',
							required: true,
							message: '请填写用户名',
							trigger: ['blur', 'change']
						},
						// {
						// 	min: 8,
						// 	max: 30,
						// 	message: '长度在8-30个字符之间'
						// }
					],
					// 新密码规则
					'password': [
						{
							type: 'string',
							required: true,
							message: '请填写密码',
							trigger: ['blur', 'change']
						},
						{
							min: 8,
							max: 30,
							message: '长度在8-30个字符之间'
						},
					],
					// 确认密码规则
					'code': [
						{
							type: 'string',
							required: true,
							message: '请填写验证码',
							trigger: ['blur', 'change']
						},
					],
				},
				form: {
					name: '',  //用户名
					password: '',  //密码
					code: '',  //验证码
				},
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			submit() {
				this.$refs.form.validate().then(res => {
					uni.$u.toast('校验通过')
					//调改密码接口
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.account-bound {
		width: 100%;
		padding: 40rpx 20rpx;
		box-sizing: border-box;
		.main {
			padding: 20rpx 20rpx 40rpx 20rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 16rpx;
		}
		.button {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20rpx;
			color: #fff;
			font-weight: 600;
			letter-spacing: 4rpx;
			background-color: #0096e0;
			border: 2rpx solid #0096e0;
			border-radius: 10rpx;
			margin: 64rpx 0 32rpx 0;
			white-space: nowrap;
			box-sizing: border-box;
			&:active {
				background-color: #fff;
				color: #0096e0;
			}
		}
	}
</style>
<style lang="scss">
	.account-bound {
		.u-form-item__body__right__content__slot {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}
	}
</style>