154 lines
3.1 KiB
Vue
154 lines
3.1 KiB
Vue
<template>
|
|
<view class="password-page">
|
|
<view class="title">修改密码</view>
|
|
<view class="subtitle">输入手机号获取验证码设置新密码</view>
|
|
|
|
<u--form labelPosition="top" :model="form" ref="uForm">
|
|
<u-form-item label="手机号" prop="phone" leftIcon="phone" leftIconStyle="font-size: 22px" labelWidth="80">
|
|
<u--input
|
|
v-model="form.phone"
|
|
placeholder="请输入手机号"
|
|
border="none"
|
|
clearable
|
|
></u--input>
|
|
</u-form-item>
|
|
|
|
<u-form-item label="验证码" prop="code" leftIcon="chat" leftIconStyle="font-size: 22px" labelWidth="80">
|
|
<u-input
|
|
v-model="form.code"
|
|
placeholder="请输入验证码"
|
|
border="none"
|
|
clearable
|
|
>
|
|
<template slot="suffix">
|
|
<span
|
|
class="verify-code"
|
|
:class="{ disabled: counting }"
|
|
@click="getVerifyCode"
|
|
>
|
|
{{ counting ? `${counter}s后重新获取` : '获取验证码' }}
|
|
</span>
|
|
</template>
|
|
</u-input>
|
|
</u-form-item>
|
|
</u--form>
|
|
|
|
<view class="button-wrap">
|
|
<u-button
|
|
type="warning"
|
|
text="下一步"
|
|
shape="circle"
|
|
@click="handleNext"
|
|
:customStyle="{
|
|
width: '100%',
|
|
height: '90rpx',
|
|
background: '#ff6b00',
|
|
border: 'none'
|
|
}"
|
|
></u-button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
form: {
|
|
phone: '',
|
|
code: ''
|
|
},
|
|
counter: 60,
|
|
counting: false
|
|
}
|
|
},
|
|
methods: {
|
|
getVerifyCode() {
|
|
if (this.counting) return
|
|
|
|
// 验证手机号
|
|
if (!this.form.phone) {
|
|
uni.$u.toast('请输入手机号')
|
|
return
|
|
}
|
|
|
|
this.counting = true
|
|
this.counter = 60
|
|
|
|
const timer = setInterval(() => {
|
|
if (this.counter > 0) {
|
|
this.counter--
|
|
} else {
|
|
this.counting = false
|
|
clearInterval(timer)
|
|
}
|
|
}, 1000)
|
|
|
|
// 发送验证码请求
|
|
uni.$u.toast('验证码已发送')
|
|
},
|
|
|
|
handleNext() {
|
|
if (!this.form.phone || !this.form.code) {
|
|
uni.$u.toast('请填写完整信息')
|
|
return
|
|
}
|
|
|
|
// 验证通过，跳转到设置新密码页面
|
|
uni.navigateTo({
|
|
url: '/pages/newPassword'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.password-page {
|
|
padding: 40rpx;
|
|
background-color: #ffffff;
|
|
min-height: 100vh;
|
|
|
|
.title {
|
|
font-size: 40rpx;
|
|
font-weight: 550;
|
|
color: #333;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
margin-bottom: 60rpx;
|
|
}
|
|
|
|
.verify-code {
|
|
color: #3c9cff;
|
|
font-size: 28rpx;
|
|
padding-left: 24rpx;
|
|
|
|
&.disabled {
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
.button-wrap {
|
|
margin-top: 80rpx;
|
|
}
|
|
}
|
|
|
|
::v-deep .u-form-item {
|
|
margin-bottom: 30rpx;
|
|
|
|
&__body {
|
|
padding: 24rpx 0;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
}
|
|
|
|
::v-deep .u-input {
|
|
&__content__prefix-icon {
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
</style> |