diff --git a/web1/src/api/index.js b/web1/src/api/index.js
index 48bf84d..3ff9d86 100644
--- a/web1/src/api/index.js
+++ b/web1/src/api/index.js
@@ -8,6 +8,9 @@ export default {
// 手机号
registerPhone: (data) => request.post('/app-user/register', data, { noNeedToken: true }),
loginPhone: (data) => request.post('/app-user/login', data, { noNeedToken: true }),
+ // 短信验证码(待后端实现)
+ sendVerifyCode: (data) => request.post('/app-user/send-verify-code', data, { noNeedToken: true }),
+ loginWithVerifyCode: (data) => request.post('/app-user/login-with-code', data, { noNeedToken: true }),
// pages
getIndustryList: () => request.get('/industry/list'),
getHistoryList: (params) => request.get('/app-valuations/', { params }),
diff --git a/web1/src/views/login/index.vue b/web1/src/views/login/index.vue
index 7d9cbdf..9917fb6 100644
--- a/web1/src/views/login/index.vue
+++ b/web1/src/views/login/index.vue
@@ -5,7 +5,7 @@
class="m-auto max-w-1500 min-w-750 f-c-c rounded-12 bg-white bg-opacity-80"
dark:bg-dark
>
-
+
非遗IP价值评估系统
@@ -18,8 +18,8 @@
v-model:value="loginInfo.phone"
style="display: inline-block; width: 260px; height: 42px; text-align: left; line-height: 42px;"
placeholder="请输入手机号"
- :maxlength="20"
- @keypress.enter="handleRegister"
+ :maxlength="11"
+ @keypress.enter="handleLogin"
>
@@ -32,12 +32,29 @@
rounded-5
type="primary"
style="background: linear-gradient( 93deg, #880C22 0%, #A30113 100%); margin-left: 20px; font-size: 16px; border: none !important;"
- @click="handleRegister"
+ @click="handleLogin"
>
立即登录
+
+
+
+
+ {{ countdown > 0 ? `${countdown}秒后重试` : '发送验证码' }}
+
+
@@ -56,8 +73,12 @@ const { t } = useI18n({ useScope: 'global' })
const loginInfo = ref({
phone: '',
+ verifyCode: '',
})
+const countdown = ref(0)
+let countdownTimer = null
+
initLoginInfo()
function initLoginInfo() {
@@ -73,37 +94,110 @@ function initLoginInfo() {
const loading = ref(false)
-async function handleRegister() {
+// 验证手机号格式
+function validatePhone(phone) {
+ const phoneReg = /^1[3-9]\d{9}$/
+ return phoneReg.test(phone)
+}
+
+// 发送验证码
+async function handleSendCode() {
const { phone } = loginInfo.value
+
if (!phone) {
$message.warning('请输入手机号')
return
}
- loading.value = true
- await api.registerPhone({ phone })
- .then(res=>{
- handleLogin()
- })
- .catch(res=>{
- handleLogin()
- })
+
+ if (!validatePhone(phone)) {
+ $message.warning('请输入正确的手机号')
+ return
+ }
+
+ try {
+ // TODO: 调用发送验证码接口
+ // await api.sendVerifyCode({ phone })
+
+ // 模拟发送成功
+ $message.success('验证码已发送')
+
+ // 开始倒计时
+ countdown.value = 60
+ countdownTimer = setInterval(() => {
+ countdown.value--
+ if (countdown.value <= 0) {
+ clearInterval(countdownTimer)
+ countdownTimer = null
+ }
+ }, 1000)
+ } catch (error) {
+ $message.error('验证码发送失败,请重试')
+ }
}
+// 登录
async function handleLogin() {
- const { phone } = loginInfo.value
- loading.value = true
- await api.loginPhone({ phone, password: phone.slice(5,11) }).catch(res=>{
- setToken(res.error.access_token)
- if (query.redirect) {
- const path = query.redirect
- localStorage.setItem('phone', phone)
- Reflect.deleteProperty(query, 'redirect')
- router.push({ path, query })
- } else {
- router.push('/')
- }
- loading.value = false
- })
+ const { phone, verifyCode } = loginInfo.value
+ if (!phone) {
+ $message.warning('请输入手机号')
+ return
+ }
+
+ if (!validatePhone(phone)) {
+ $message.warning('请输入正确的手机号')
+ return
+ }
+
+ // TODO: 等待后端接口完成后再启用验证码验证
+ // if (!verifyCode) {
+ // $message.warning('请输入验证码')
+ // return
+ // }
+ //
+ // if (verifyCode.length < 4) {
+ // $message.warning('请输入完整的验证码')
+ // return
+ // }
+
+ loading.value = true
+
+ try {
+ // TODO: 调用登录接口,传入手机号和验证码
+ // const res = await api.loginWithVerifyCode({ phone, verifyCode })
+ // setToken(res.access_token)
+
+ // 模拟登录成功(暂时使用原有的注册+登录逻辑)
+ await api.registerPhone({ phone })
+ .then(res => {
+ return api.loginPhone({ phone, password: phone.slice(5, 11) })
+ })
+ .catch(res => {
+ if (res.error && res.error.access_token) {
+ setToken(res.error.access_token)
+ localStorage.setItem('phone', phone)
+
+ if (query.redirect) {
+ const path = query.redirect
+ Reflect.deleteProperty(query, 'redirect')
+ router.push({ path, query })
+ } else {
+ router.push('/')
+ }
+ }
+ })
+ } catch (error) {
+ $message.error('登录失败,请重试')
+ } finally {
+ loading.value = false
+ }
}
+
+// 组件卸载时清除定时器
+onBeforeUnmount(() => {
+ if (countdownTimer) {
+ clearInterval(countdownTimer)
+ countdownTimer = null
+ }
+})