<template>
	<view class="container p-30">
		<view class="p1">修改密码</view>
		<view class="c-menu p-r-20">
			<u--form labelPosition="left" ref="uForm">
				<u-form-item borderBottom>
					<u--input value="1529238591" border="none" readonly></u--input>
				</u-form-item>
				<u-form-item borderBottom>
					<u-input v-model="form.code" border="none" placeholder="请输入验证码" clearable>
						<template slot="suffix">
							<u-code ref="uCode" @change="codeChange" seconds="20" @start="disabled1 = true"
								@end="disabled1 = false"></u-code>
							<u-button @tap="getCode" :text="tips" type="primary" size="mini"
								:disabled="disabled1"></u-button>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item borderBottom>
					<u-input v-model="form.password" border="none" password type="password" clearable
						placeholder="请输入密码" />
				</u-form-item>
				<u-form-item borderBottom>
					<u-input v-model="form.rePassword" border="none" password type="password" clearable
						placeholder="请输入确认密码" />
				</u-form-item>
			</u--form>
		</view>
		
		<view style="padding: 50rpx;">
			<u-button shape="circle" type="primary">提交</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					code: ''
				},
				disabled1: false,
				tips: '',
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		.p1 {
			color: #323333;
			font-size: 40upx;
			font-weight: bold;
		}

	}
</style>