109 lines
3.7 KiB
Vue
109 lines
3.7 KiB
Vue
<template>
|
|
<view
|
|
class="register bg-white min-h-full flex flex-col items-center px-[40rpx] pt-[100rpx] box-border"
|
|
>
|
|
<view class="w-full">
|
|
<view class="text-2xl font-medium mb-[100rpx]">忘记登录密码</view>
|
|
<u-form borderBottom :label-width="150">
|
|
<u-form-item label="手机号" borderBottom>
|
|
<u-input
|
|
class="flex-1"
|
|
v-model="formData.mobile"
|
|
:border="false"
|
|
placeholder="请输入手机号码"
|
|
/>
|
|
</u-form-item>
|
|
<u-form-item label="验证码" borderBottom>
|
|
<u-input
|
|
class="flex-1"
|
|
v-model="formData.code"
|
|
placeholder="请输入验证码"
|
|
:border="false"
|
|
/>
|
|
<view
|
|
class="border-l border-solid border-0 border-light pl-3 text-muted leading-4 ml-3 w-[180rpx]"
|
|
@click="sendSms"
|
|
>
|
|
<u-verification-code
|
|
ref="uCodeRef"
|
|
:seconds="60"
|
|
@change="codeChange"
|
|
change-text="x秒"
|
|
/>
|
|
{{ codeTips }}
|
|
</view>
|
|
</u-form-item>
|
|
<u-form-item label="新密码" borderBottom>
|
|
<u-input
|
|
class="flex-1"
|
|
type="password"
|
|
v-model="formData.password"
|
|
placeholder="6-20位数字+字母或符号组合"
|
|
:border="false"
|
|
/>
|
|
</u-form-item>
|
|
<u-form-item label="确认密码" borderBottom>
|
|
<u-input
|
|
class="flex-1"
|
|
type="password"
|
|
v-model="formData.password2"
|
|
placeholder="再次输入新密码"
|
|
:border="false"
|
|
/>
|
|
</u-form-item>
|
|
</u-form>
|
|
<view class="mt-[100rpx]">
|
|
<u-button type="primary" shape="circle" @click="handleConfirm"> 确定 </u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { forgotPassword } from '@/api/account'
|
|
import { smsSend } from '@/api/app'
|
|
import { SMSEnum } from '@/enums/appEnums'
|
|
import { reactive, ref, shallowRef } from 'vue'
|
|
|
|
const uCodeRef = shallowRef()
|
|
const codeTips = ref('')
|
|
const formData = reactive({
|
|
mobile: '',
|
|
code: '',
|
|
password: '',
|
|
password2: ''
|
|
})
|
|
|
|
const codeChange = (text: string) => {
|
|
codeTips.value = text
|
|
}
|
|
|
|
const sendSms = async () => {
|
|
if (!formData.mobile) return uni.$u.toast('请输入手机号码')
|
|
if (uCodeRef.value?.canGetCode) {
|
|
await smsSend({
|
|
scene: SMSEnum.FIND_PASSWORD,
|
|
mobile: formData.mobile
|
|
})
|
|
uni.$u.toast('发送成功')
|
|
uCodeRef.value?.start()
|
|
}
|
|
}
|
|
|
|
const handleConfirm = async () => {
|
|
if (!formData.mobile) return uni.$u.toast('请输入手机号码')
|
|
if (!formData.password) return uni.$u.toast('请输入密码')
|
|
if (!formData.password2) return uni.$u.toast('请输入确认密码')
|
|
if (formData.password != formData.password2) return uni.$u.toast('两次输入的密码不一致')
|
|
await forgotPassword(formData)
|
|
uni.$u.toast('操作成功')
|
|
uni.navigateBack()
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
height: 100%;
|
|
}
|
|
</style>
|