81 lines
2.1 KiB
Vue
81 lines
2.1 KiB
Vue
<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> |