49 lines
1.2 KiB
Vue
49 lines
1.2 KiB
Vue
<template>
|
|
<view class="auth-form-page">
|
|
<app-navbar title="忘记密码" />
|
|
<view class="auth-form-page__body">
|
|
<text class="auth-form-page__heading">忘记密码</text>
|
|
|
|
<base-input v-model="phone" icon="phone" type="number" placeholder="请输入手机号" :maxlength="11" />
|
|
<base-input v-model="code" icon="shield" type="number" placeholder="请输入验证码" :maxlength="6">
|
|
<template #suffix>
|
|
<sms-code-btn :counting="counting" :seconds="seconds" @send="onSendCode" />
|
|
</template>
|
|
</base-input>
|
|
|
|
<view class="auth-form-page__btn">
|
|
<primary-button text="下一步" @click="nextStep" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useForgotPassword } from './use-forgot-password'
|
|
|
|
const { phone, code, counting, seconds, onSendCode, nextStep } = useForgotPassword()
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.auth-form-page {
|
|
min-height: 100vh;
|
|
background: $color-bg-page;
|
|
}
|
|
|
|
.auth-form-page__body {
|
|
padding: 32rpx $page-padding-x 48rpx;
|
|
}
|
|
|
|
.auth-form-page__heading {
|
|
display: block;
|
|
font-size: 44rpx;
|
|
font-weight: 700;
|
|
color: $color-text;
|
|
margin-bottom: 48rpx;
|
|
}
|
|
|
|
.auth-form-page__btn {
|
|
margin-top: 16rpx;
|
|
}
|
|
</style>
|