|
|
@@ -0,0 +1,343 @@
|
|
|
+<template>
|
|
|
+ <div class="mobile-reset-container">
|
|
|
+ <div class="header">
|
|
|
+ <h2>重置密码</h2>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-steps :active="activeStep" finish-status="success" simple style="margin-bottom: 30px; background: transparent; padding: 10px 0;">
|
|
|
+ <el-step title="验证手机" />
|
|
|
+ <el-step title="设置新密码" />
|
|
|
+ </el-steps>
|
|
|
+
|
|
|
+ <!-- Step 1: Send SMS -->
|
|
|
+ <el-form v-if="activeStep === 0" :model="form" label-width="0" size="large">
|
|
|
+ <el-form-item>
|
|
|
+ <el-input v-model="form.mobile" placeholder="手机号" prefix-icon="Iphone" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <div style="display: flex; width: 100%; gap: 10px;">
|
|
|
+ <el-input v-model="form.captcha_code" placeholder="图形验证码" style="flex: 1" />
|
|
|
+ <div class="captcha-img" @click="fetchCaptcha" v-if="captchaImage" style="width: 100px;">
|
|
|
+ <img :src="captchaImage" alt="captcha" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" style="width: 100%" @click="handleSendSms" :loading="loading">
|
|
|
+ 发送验证码
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <div class="links">
|
|
|
+ <router-link to="/mobile/login">返回登录</router-link>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <!-- Step 2: Reset Password -->
|
|
|
+ <el-form v-if="activeStep === 1" :model="form" :rules="step2Rules" ref="step2FormRef" label-width="0" size="large">
|
|
|
+ <el-form-item>
|
|
|
+ <el-input v-model="form.mobile" disabled prefix-icon="Iphone" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="sms_code">
|
|
|
+ <div style="display: flex; width: 100%; gap: 10px;">
|
|
|
+ <el-input
|
|
|
+ v-model="form.sms_code"
|
|
|
+ placeholder="短信验证码"
|
|
|
+ prefix-icon="Message"
|
|
|
+ style="flex: 1"
|
|
|
+ :name="dynamicFields.sms"
|
|
|
+ autocomplete="off"
|
|
|
+ />
|
|
|
+ <el-button type="primary" plain :disabled="countdown > 0" @click="openCaptchaDialog">
|
|
|
+ {{ countdown > 0 ? `${countdown}s` : '重新发送' }}
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="new_password">
|
|
|
+ <el-input
|
|
|
+ v-model="form.new_password"
|
|
|
+ type="password"
|
|
|
+ placeholder="新密码"
|
|
|
+ prefix-icon="Lock"
|
|
|
+ show-password
|
|
|
+ :name="dynamicFields.password"
|
|
|
+ autocomplete="new-password"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="confirm_password">
|
|
|
+ <el-input
|
|
|
+ v-model="form.confirm_password"
|
|
|
+ type="password"
|
|
|
+ placeholder="确认新密码"
|
|
|
+ prefix-icon="Lock"
|
|
|
+ show-password
|
|
|
+ autocomplete="new-password"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" style="width: 100%" @click="handleReset" :loading="loading">
|
|
|
+ 确认重置
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <div class="links">
|
|
|
+ <el-button link @click="activeStep = 0">上一步</el-button>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <!-- Resend Captcha Dialog -->
|
|
|
+ <el-dialog v-model="captchaDialogVisible" title="安全验证" width="90%" append-to-body>
|
|
|
+ <el-form :model="captchaForm" label-width="0">
|
|
|
+ <el-form-item>
|
|
|
+ <div style="display: flex; width: 100%; gap: 10px;">
|
|
|
+ <el-input v-model="captchaForm.code" placeholder="图形验证码" style="flex: 1" />
|
|
|
+ <div class="captcha-img" @click="fetchResendCaptcha" v-if="resendCaptchaImage">
|
|
|
+ <img :src="resendCaptchaImage" alt="captcha" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button @click="captchaDialogVisible = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="handleResendSmsConfirm" :loading="resendLoading">
|
|
|
+ 确认发送
|
|
|
+ </el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref, reactive, onMounted, onUnmounted } from 'vue'
|
|
|
+import { useRouter } from 'vue-router'
|
|
|
+import { getCaptcha, sendSms, resetPassword } from '../../api/public'
|
|
|
+import { ElMessage } from 'element-plus'
|
|
|
+import type { FormInstance, FormRules } from 'element-plus'
|
|
|
+
|
|
|
+const router = useRouter()
|
|
|
+const activeStep = ref(0)
|
|
|
+const loading = ref(false)
|
|
|
+const captchaImage = ref('')
|
|
|
+const step2FormRef = ref<FormInstance>()
|
|
|
+
|
|
|
+// Resend Logic State
|
|
|
+const countdown = ref(0)
|
|
|
+let timer: any = null
|
|
|
+const captchaDialogVisible = ref(false)
|
|
|
+const resendCaptchaImage = ref('')
|
|
|
+const resendCaptchaId = ref('')
|
|
|
+const resendLoading = ref(false)
|
|
|
+const captchaForm = reactive({
|
|
|
+ code: ''
|
|
|
+})
|
|
|
+
|
|
|
+const dynamicFields = reactive({
|
|
|
+ sms: 'sms_code',
|
|
|
+ password: 'new_password'
|
|
|
+})
|
|
|
+
|
|
|
+const form = reactive({
|
|
|
+ mobile: '',
|
|
|
+ captcha_id: '',
|
|
|
+ captcha_code: '',
|
|
|
+ sms_code: '',
|
|
|
+ new_password: '',
|
|
|
+ confirm_password: ''
|
|
|
+})
|
|
|
+
|
|
|
+const validatePass2 = (rule: any, value: any, callback: any) => {
|
|
|
+ if (value === '') {
|
|
|
+ callback(new Error('请再次输入密码'))
|
|
|
+ } else if (value !== form.new_password) {
|
|
|
+ callback(new Error('两次输入密码不一致!'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const step2Rules = reactive<FormRules>({
|
|
|
+ sms_code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
|
|
|
+ new_password: [
|
|
|
+ { required: true, message: '请输入新密码', trigger: 'blur' },
|
|
|
+ { min: 6, message: '密码长度不能少于6位', trigger: 'blur' },
|
|
|
+ { pattern: /^(?=.*[a-zA-Z])(?=.*\d).+$/, message: '密码必须包含字母和数字', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ confirm_password: [{ validator: validatePass2, trigger: 'blur' }]
|
|
|
+})
|
|
|
+
|
|
|
+const fetchCaptcha = async () => {
|
|
|
+ try {
|
|
|
+ const res = await getCaptcha()
|
|
|
+ captchaImage.value = res.data.image
|
|
|
+ form.captcha_id = res.data.captcha_id
|
|
|
+ form.captcha_code = ''
|
|
|
+ } catch (e) {
|
|
|
+ console.error(e)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const startCountdown = () => {
|
|
|
+ countdown.value = 60
|
|
|
+ if (timer) clearInterval(timer)
|
|
|
+ timer = setInterval(() => {
|
|
|
+ countdown.value--
|
|
|
+ if (countdown.value <= 0) {
|
|
|
+ clearInterval(timer)
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+}
|
|
|
+
|
|
|
+const openCaptchaDialog = () => {
|
|
|
+ captchaForm.code = ''
|
|
|
+ fetchResendCaptcha()
|
|
|
+ captchaDialogVisible.value = true
|
|
|
+}
|
|
|
+
|
|
|
+const fetchResendCaptcha = async () => {
|
|
|
+ try {
|
|
|
+ const res = await getCaptcha()
|
|
|
+ resendCaptchaImage.value = res.data.image
|
|
|
+ resendCaptchaId.value = res.data.captcha_id
|
|
|
+ } catch (e) {
|
|
|
+ console.error(e)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const handleResendSmsConfirm = async () => {
|
|
|
+ if (!captchaForm.code) {
|
|
|
+ ElMessage.warning('请输入图形验证码')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ resendLoading.value = true
|
|
|
+ try {
|
|
|
+ await sendSms({
|
|
|
+ mobile: form.mobile,
|
|
|
+ captcha_id: resendCaptchaId.value,
|
|
|
+ captcha_code: captchaForm.code
|
|
|
+ })
|
|
|
+ ElMessage.success('验证码已发送')
|
|
|
+ captchaDialogVisible.value = false
|
|
|
+ startCountdown()
|
|
|
+ } catch (e) {
|
|
|
+ fetchResendCaptcha()
|
|
|
+ } finally {
|
|
|
+ resendLoading.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const handleSendSms = async () => {
|
|
|
+ if (!form.mobile || !form.captcha_code) {
|
|
|
+ ElMessage.warning('请输入手机号和图形验证码')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ loading.value = true
|
|
|
+ try {
|
|
|
+ await sendSms({
|
|
|
+ mobile: form.mobile,
|
|
|
+ captcha_id: form.captcha_id,
|
|
|
+ captcha_code: form.captcha_code
|
|
|
+ })
|
|
|
+ ElMessage.success('验证码已发送')
|
|
|
+ activeStep.value = 1
|
|
|
+ startCountdown()
|
|
|
+ } catch (e) {
|
|
|
+ fetchCaptcha() // Refresh captcha on fail
|
|
|
+ } finally {
|
|
|
+ loading.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const handleReset = async () => {
|
|
|
+ if (!step2FormRef.value) return
|
|
|
+
|
|
|
+ await step2FormRef.value.validate(async (valid) => {
|
|
|
+ if (valid) {
|
|
|
+ loading.value = true
|
|
|
+ try {
|
|
|
+ await resetPassword({
|
|
|
+ mobile: form.mobile,
|
|
|
+ sms_code: form.sms_code,
|
|
|
+ new_password: form.new_password
|
|
|
+ })
|
|
|
+ ElMessage.success('密码重置成功')
|
|
|
+ router.push('/mobile/login')
|
|
|
+ } catch (e) {
|
|
|
+ // handled
|
|
|
+ } finally {
|
|
|
+ loading.value = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ fetchCaptcha()
|
|
|
+ const suffix = Math.random().toString(36).slice(2, 8)
|
|
|
+ dynamicFields.sms = `sms_${suffix}`
|
|
|
+ dynamicFields.password = `pwd_${suffix}`
|
|
|
+})
|
|
|
+
|
|
|
+onUnmounted(() => {
|
|
|
+ if (timer) clearInterval(timer)
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.mobile-reset-container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ min-height: 100vh;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 0 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.header {
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.captcha-img {
|
|
|
+ cursor: pointer;
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 4px;
|
|
|
+ overflow: hidden;
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+}
|
|
|
+.captcha-img img {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+}
|
|
|
+
|
|
|
+.links {
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+/* Custom Large Input Styles - Consistent with Login */
|
|
|
+:deep(.el-input--large .el-input__wrapper) {
|
|
|
+ padding: 8px 15px;
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-input--large .el-input__inner) {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 500;
|
|
|
+ height: 40px;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-button--large) {
|
|
|
+ height: 48px;
|
|
|
+ font-size: 18px;
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-button--default) {
|
|
|
+ height: 48px;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
liuq