add:登录页面和注册页面增加手机号码选项

This commit is contained in:
hrz
2025-05-18 17:38:20 +08:00
parent 91d2ab7d1d
commit fe88db2094
25 changed files with 701 additions and 217 deletions
+17 -8
View File
@@ -20,6 +20,7 @@ function sendRequest() {
return {
_sucCallback: null,
_failCallback: null,
_networkFailCallback: null,
_method: 'GET',
_data: {},
_header: { 'content-type': 'application/json; charset=utf-8' },
@@ -36,7 +37,7 @@ function sendRequest() {
headers: this._header,
responseType: this._responseType
}).then((res) => {
const error = httpHandlerError(res, this._failCallback);
const error = httpHandlerError(res, this._failCallback, this._networkFailCallback);
if (error) {
return
}
@@ -47,7 +48,7 @@ function sendRequest() {
}).catch((res) => {
// 打印失败响应
console.log('catch', res)
httpHandlerError(res, this._failCallback)
httpHandlerError(res, this._failCallback, this._networkFailCallback)
})
return this
},
@@ -59,6 +60,10 @@ function sendRequest() {
this._failCallback = callback
return this
},
'networkFail'(callback) {
this._networkFailCallback = callback
return this
},
'url'(url) {
if (url) {
url = url.replaceAll('$', '/')
@@ -95,11 +100,11 @@ function sendRequest() {
/**
* Info 请求完成后返回信息
* callBack 回调函数
* errTip 自定义错误信息
* failCallback 回调函数
* networkFailCallback 回调函数
*/
// 在错误处理函数中添加日志
function httpHandlerError(info, callBack) {
function httpHandlerError(info, failCallback, networkFailCallback) {
/** 请求成功,退出该函数 可以根据项目需求来判断是否请求成功。这里判断的是status为200的时候是成功 */
let networkError = false
@@ -111,12 +116,16 @@ function httpHandlerError(info, callBack) {
goToPage(Constant.PAGE.LOGIN, true);
return true
} else {
showDanger(info.data.msg)
if (failCallback) {
failCallback(info)
} else {
showDanger(info.data.msg)
}
return true
}
}
if (callBack) {
callBack(info)
if (networkFailCallback) {
networkFailCallback(info)
} else {
showDanger(`网络请求出现了错误【${info.status}`)
}
+7 -7
View File
@@ -18,7 +18,7 @@ export default {
RequestService.clearRequestTime()
callback(res)
})
.fail((err) => {
.networkFail((err) => {
console.error('请求失败:', err)
RequestService.reAjaxFun(() => {
this.getUserList(callback)
@@ -34,7 +34,7 @@ export default {
RequestService.clearRequestTime()
callback(res)
})
.fail((err) => {
.networkFail((err) => {
console.error('删除失败:', err)
RequestService.reAjaxFun(() => {
this.deleteUser(id, callback)
@@ -50,7 +50,7 @@ export default {
RequestService.clearRequestTime()
callback(res)
})
.fail((err) => {
.networkFail((err) => {
console.error('重置密码失败:', err)
RequestService.reAjaxFun(() => {
this.resetUserPassword(id, callback)
@@ -72,7 +72,7 @@ export default {
RequestService.clearRequestTime()
callback(res)
})
.fail((err) => {
.networkFail((err) => {
console.error('获取参数列表失败:', err)
RequestService.reAjaxFun(() => {
this.getParamsList(params, callback)
@@ -89,7 +89,7 @@ export default {
RequestService.clearRequestTime()
callback(res)
})
.fail((err) => {
.networkFail((err) => {
console.error('添加参数失败:', err)
RequestService.reAjaxFun(() => {
this.addParam(data, callback)
@@ -106,7 +106,7 @@ export default {
RequestService.clearRequestTime()
callback(res)
})
.fail((err) => {
.networkFail((err) => {
console.error('更新参数失败:', err)
RequestService.reAjaxFun(() => {
this.updateParam(data, callback)
@@ -123,7 +123,7 @@ export default {
RequestService.clearRequestTime()
callback(res);
})
.fail((err) => {
.networkFail((err) => {
console.error('删除参数失败:', err)
RequestService.reAjaxFun(() => {
this.deleteParam(ids, callback)
+9 -9
View File
@@ -12,7 +12,7 @@ export default {
RequestService.clearRequestTime();
callback(res);
})
.fail(() => {
.networkFail(() => {
RequestService.reAjaxFun(() => {
this.getAgentList(callback);
});
@@ -28,7 +28,7 @@ export default {
RequestService.clearRequestTime();
callback(res);
})
.fail(() => {
.networkFail(() => {
RequestService.reAjaxFun(() => {
this.addAgent(agentName, callback);
});
@@ -43,7 +43,7 @@ export default {
RequestService.clearRequestTime();
callback(res);
})
.fail(() => {
.networkFail(() => {
RequestService.reAjaxFun(() => {
this.deleteAgent(agentId, callback);
});
@@ -58,7 +58,7 @@ export default {
RequestService.clearRequestTime();
callback(res);
})
.fail((err) => {
.networkFail((err) => {
console.error('获取配置失败:', err);
RequestService.reAjaxFun(() => {
this.getDeviceConfig(deviceId, callback);
@@ -75,7 +75,7 @@ export default {
RequestService.clearRequestTime();
callback(res);
})
.fail(() => {
.networkFail(() => {
RequestService.reAjaxFun(() => {
this.updateAgentConfig(agentId, configData, callback);
});
@@ -90,7 +90,7 @@ export default {
RequestService.clearRequestTime();
callback(res);
})
.fail((err) => {
.networkFail((err) => {
console.error('获取模板失败:', err);
RequestService.reAjaxFun(() => {
this.getAgentTemplate(callback);
@@ -107,7 +107,7 @@ export default {
RequestService.clearRequestTime();
callback(res);
})
.fail(() => {
.networkFail(() => {
RequestService.reAjaxFun(() => {
this.getAgentSessions(agentId, params, callback);
});
@@ -122,7 +122,7 @@ export default {
RequestService.clearRequestTime();
callback(res);
})
.fail(() => {
.networkFail(() => {
RequestService.reAjaxFun(() => {
this.getAgentChatHistory(agentId, sessionId, callback);
});
@@ -137,7 +137,7 @@ export default {
RequestService.clearRequestTime();
callback(res);
})
.fail(() => {
.networkFail(() => {
RequestService.reAjaxFun(() => {
this.getAudioId(audioId, callback);
});
+4 -4
View File
@@ -11,7 +11,7 @@ export default {
RequestService.clearRequestTime();
callback(res);
})
.fail((err) => {
.networkFail((err) => {
console.error('获取设备列表失败:', err);
RequestService.reAjaxFun(() => {
this.getAgentBindDevices(agentId, callback);
@@ -28,7 +28,7 @@ export default {
RequestService.clearRequestTime();
callback(res);
})
.fail((err) => {
.networkFail((err) => {
console.error('解绑设备失败:', err);
RequestService.reAjaxFun(() => {
this.unbindDevice(device_id, callback);
@@ -44,7 +44,7 @@ export default {
RequestService.clearRequestTime();
callback(res);
})
.fail((err) => {
.networkFail((err) => {
console.error('绑定设备失败:', err);
RequestService.reAjaxFun(() => {
this.bindDevice(agentId, deviceCode, callback);
@@ -59,7 +59,7 @@ export default {
RequestService.clearRequestTime()
callback(res)
})
.fail((err) => {
.networkFail((err) => {
console.error('更新OTA状态失败:', err)
this.$message.error(err.msg || '更新OTA状态失败')
RequestService.reAjaxFun(() => {
+11 -11
View File
@@ -18,7 +18,7 @@ export default {
RequestService.clearRequestTime()
callback(res)
})
.fail((err) => {
.networkFail((err) => {
console.error('获取字典类型列表失败:', err)
this.$message.error(err.msg || '获取字典类型列表失败')
RequestService.reAjaxFun(() => {
@@ -36,7 +36,7 @@ export default {
RequestService.clearRequestTime()
callback(res)
})
.fail((err) => {
.networkFail((err) => {
console.error('获取字典类型详情失败:', err)
this.$message.error(err.msg || '获取字典类型详情失败')
RequestService.reAjaxFun(() => {
@@ -55,7 +55,7 @@ export default {
RequestService.clearRequestTime()
callback(res)
})
.fail((err) => {
.networkFail((err) => {
console.error('新增字典类型失败:', err)
this.$message.error(err.msg || '新增字典类型失败')
RequestService.reAjaxFun(() => {
@@ -74,7 +74,7 @@ export default {
RequestService.clearRequestTime()
callback(res)
})
.fail((err) => {
.networkFail((err) => {
console.error('更新字典类型失败:', err)
this.$message.error(err.msg || '更新字典类型失败')
RequestService.reAjaxFun(() => {
@@ -93,7 +93,7 @@ export default {
RequestService.clearRequestTime()
callback(res)
})
.fail((err) => {
.networkFail((err) => {
console.error('删除字典类型失败:', err)
this.$message.error(err.msg || '删除字典类型失败')
RequestService.reAjaxFun(() => {
@@ -119,7 +119,7 @@ export default {
RequestService.clearRequestTime()
callback(res)
})
.fail((err) => {
.networkFail((err) => {
console.error('获取字典数据列表失败:', err)
this.$message.error(err.msg || '获取字典数据列表失败')
RequestService.reAjaxFun(() => {
@@ -137,7 +137,7 @@ export default {
RequestService.clearRequestTime()
callback(res)
})
.fail((err) => {
.networkFail((err) => {
console.error('获取字典数据详情失败:', err)
this.$message.error(err.msg || '获取字典数据详情失败')
RequestService.reAjaxFun(() => {
@@ -156,7 +156,7 @@ export default {
RequestService.clearRequestTime()
callback(res)
})
.fail((err) => {
.networkFail((err) => {
console.error('新增字典数据失败:', err)
this.$message.error(err.msg || '新增字典数据失败')
RequestService.reAjaxFun(() => {
@@ -175,7 +175,7 @@ export default {
RequestService.clearRequestTime()
callback(res)
})
.fail((err) => {
.networkFail((err) => {
console.error('更新字典数据失败:', err)
this.$message.error(err.msg || '更新字典数据失败')
RequestService.reAjaxFun(() => {
@@ -194,7 +194,7 @@ export default {
RequestService.clearRequestTime()
callback(res)
})
.fail((err) => {
.networkFail((err) => {
console.error('删除字典数据失败:', err)
this.$message.error(err.msg || '删除字典数据失败')
RequestService.reAjaxFun(() => {
@@ -217,7 +217,7 @@ export default {
reject(new Error(res.data?.msg || '获取字典数据列表失败'))
}
})
.fail((err) => {
.networkFail((err) => {
console.error('获取字典数据列表失败:', err)
reject(err)
}).send()
+23 -23
View File
@@ -18,7 +18,7 @@ export default {
RequestService.clearRequestTime()
callback(res)
})
.fail((err) => {
.networkFail((err) => {
console.error('获取模型列表失败:', err)
RequestService.reAjaxFun(() => {
this.getModelList(params, callback)
@@ -34,7 +34,7 @@ export default {
RequestService.clearRequestTime()
callback(res.data?.data || [])
})
.fail((err) => {
.networkFail((err) => {
console.error('获取供应器列表失败:', err)
this.$message.error('获取供应器列表失败')
RequestService.reAjaxFun(() => {
@@ -65,7 +65,7 @@ export default {
RequestService.clearRequestTime()
callback(res)
})
.fail((err) => {
.networkFail((err) => {
console.error('新增模型失败:', err)
this.$message.error(err.msg || '新增模型失败')
RequestService.reAjaxFun(() => {
@@ -82,7 +82,7 @@ export default {
RequestService.clearRequestTime()
callback(res)
})
.fail((err) => {
.networkFail((err) => {
console.error('删除模型失败:', err)
this.$message.error(err.msg || '删除模型失败')
RequestService.reAjaxFun(() => {
@@ -100,7 +100,7 @@ export default {
RequestService.clearRequestTime();
callback(res);
})
.fail(() => {
.networkFail(() => {
RequestService.reAjaxFun(() => {
this.getModelNames(modelType, modelName, callback);
});
@@ -118,7 +118,7 @@ export default {
RequestService.clearRequestTime();
callback(res);
})
.fail(() => {
.networkFail(() => {
RequestService.reAjaxFun(() => {
this.getModelVoices(modelId, voiceName, callback);
});
@@ -133,7 +133,7 @@ export default {
RequestService.clearRequestTime()
callback(res)
})
.fail((err) => {
.networkFail((err) => {
console.error('获取模型配置失败:', err)
this.$message.error(err.msg || '获取模型配置失败')
RequestService.reAjaxFun(() => {
@@ -150,7 +150,7 @@ export default {
RequestService.clearRequestTime()
callback(res)
})
.fail((err) => {
.networkFail((err) => {
console.error('更新模型状态失败:', err)
this.$message.error(err.msg || '更新模型状态失败')
RequestService.reAjaxFun(() => {
@@ -166,20 +166,20 @@ export default {
configJson: formData.configJson
};
RequestService.sendRequest()
.url(`${getServiceUrl()}/models/${modelType}/${provideCode}/${id}`)
.method('PUT')
.data(payload)
.success((res) => {
RequestService.clearRequestTime();
callback(res);
})
.fail((err) => {
console.error('更新模型失败:', err);
this.$message.error(err.msg || '更新模型失败');
RequestService.reAjaxFun(() => {
this.updateModel(params, callback);
});
}).send();
.url(`${getServiceUrl()}/models/${modelType}/${provideCode}/${id}`)
.method('PUT')
.data(payload)
.success((res) => {
RequestService.clearRequestTime();
callback(res);
})
.networkFail((err) => {
console.error('更新模型失败:', err);
this.$message.error(err.msg || '更新模型失败');
RequestService.reAjaxFun(() => {
this.updateModel(params, callback);
});
}).send();
},
// 设置默认模型
setDefaultModel(id, callback) {
@@ -190,7 +190,7 @@ export default {
RequestService.clearRequestTime()
callback(res)
})
.fail((err) => {
.networkFail((err) => {
console.error('设置默认模型失败:', err)
this.$message.error(err.msg || '设置默认模型失败')
RequestService.reAjaxFun(() => {
+7 -7
View File
@@ -12,7 +12,7 @@ export default {
RequestService.clearRequestTime();
callback(res);
})
.fail((err) => {
.networkFail((err) => {
console.error('获取OTA固件列表失败:', err);
RequestService.reAjaxFun(() => {
this.getOtaList(params, callback);
@@ -28,7 +28,7 @@ export default {
RequestService.clearRequestTime();
callback(res);
})
.fail((err) => {
.networkFail((err) => {
console.error('获取OTA固件信息失败:', err);
RequestService.reAjaxFun(() => {
this.getOtaInfo(id, callback);
@@ -45,7 +45,7 @@ export default {
RequestService.clearRequestTime();
callback(res);
})
.fail((err) => {
.networkFail((err) => {
console.error('保存OTA固件信息失败:', err);
RequestService.reAjaxFun(() => {
this.saveOta(entity, callback);
@@ -62,7 +62,7 @@ export default {
RequestService.clearRequestTime();
callback(res);
})
.fail((err) => {
.networkFail((err) => {
console.error('更新OTA固件信息失败:', err);
RequestService.reAjaxFun(() => {
this.updateOta(id, entity, callback);
@@ -78,7 +78,7 @@ export default {
RequestService.clearRequestTime();
callback(res);
})
.fail((err) => {
.networkFail((err) => {
console.error('删除OTA固件失败:', err);
RequestService.reAjaxFun(() => {
this.deleteOta(id, callback);
@@ -97,7 +97,7 @@ export default {
RequestService.clearRequestTime();
callback(res);
})
.fail((err) => {
.networkFail((err) => {
console.error('上传固件文件失败:', err);
RequestService.reAjaxFun(() => {
this.uploadFirmware(file, callback);
@@ -113,7 +113,7 @@ export default {
RequestService.clearRequestTime();
callback(res);
})
.fail((err) => {
.networkFail((err) => {
console.error('获取下载链接失败:', err);
RequestService.reAjaxFun(() => {
this.getDownloadUrl(id, callback);
+5 -5
View File
@@ -1,4 +1,4 @@
import {getServiceUrl} from '../api';
import { getServiceUrl } from '../api';
import RequestService from '../httpRequest';
export default {
@@ -18,7 +18,7 @@ export default {
RequestService.clearRequestTime();
callback(res.data || []);
})
.fail((err) => {
.networkFail((err) => {
console.error('获取音色列表失败:', err);
RequestService.reAjaxFun(() => {
this.getVoiceList(params, callback);
@@ -42,7 +42,7 @@ export default {
.success((res) => {
callback(res.data);
})
.fail((err) => {
.networkFail((err) => {
console.error('保存音色失败:', err);
RequestService.reAjaxFun(() => {
this.saveVoice(params, callback);
@@ -59,7 +59,7 @@ export default {
RequestService.clearRequestTime()
callback(res);
})
.fail((err) => {
.networkFail((err) => {
console.error('删除音色失败:', err);
RequestService.reAjaxFun(() => {
this.deleteVoice(ids, callback);
@@ -82,7 +82,7 @@ export default {
.success((res) => {
callback(res.data);
})
.fail((err) => {
.networkFail((err) => {
console.error('修改音色失败:', err);
RequestService.reAjaxFun(() => {
this.updateVoice(params, callback);
+41 -10
View File
@@ -4,7 +4,7 @@ import RequestService from '../httpRequest'
export default {
// 登录
login(loginForm, callback) {
login(loginForm, callback, failCallback) {
RequestService.sendRequest()
.url(`${getServiceUrl()}/user/login`)
.method('POST')
@@ -13,7 +13,11 @@ export default {
RequestService.clearRequestTime()
callback(res)
})
.fail(() => {
.fail((err) => {
RequestService.clearRequestTime()
failCallback(err)
})
.networkFail(() => {
RequestService.reAjaxFun(() => {
this.login(loginForm, callback)
})
@@ -34,12 +38,32 @@ export default {
RequestService.clearRequestTime();
callback(res);
})
.fail((err) => { // 添加错误参数
.networkFail((err) => { // 添加错误参数
}).send()
},
// 发送短信验证码
sendSmsVerification(data, callback, failCallback) {
RequestService.sendRequest()
.url(`${getServiceUrl()}/user/smsVerification`)
.method('POST')
.data(data)
.success((res) => {
RequestService.clearRequestTime()
callback(res)
})
.fail((err) => {
RequestService.clearRequestTime()
failCallback(err)
})
.networkFail(() => {
RequestService.reAjaxFun(() => {
this.sendSmsVerification(data, callback, failCallback)
})
}).send()
},
// 注册账号
register(registerForm, callback) {
register(registerForm, callback, failCallback) {
RequestService.sendRequest()
.url(`${getServiceUrl()}/user/register`)
.method('POST')
@@ -48,7 +72,14 @@ export default {
RequestService.clearRequestTime()
callback(res)
})
.fail(() => {
.fail((err) => {
RequestService.clearRequestTime()
failCallback(err)
})
.networkFail(() => {
RequestService.reAjaxFun(() => {
this.register(registerForm, callback, failCallback)
})
}).send()
},
// 保存设备配置
@@ -61,7 +92,7 @@ export default {
RequestService.clearRequestTime();
callback(res);
})
.fail((err) => {
.networkFail((err) => {
console.error('保存配置失败:', err);
RequestService.reAjaxFun(() => {
this.saveDeviceConfig(device_id, configData, callback);
@@ -77,7 +108,7 @@ export default {
RequestService.clearRequestTime()
callback(res)
})
.fail((err) => {
.networkFail((err) => {
console.error('接口请求失败:', err)
RequestService.reAjaxFun(() => {
this.getUserInfo(callback)
@@ -97,7 +128,7 @@ export default {
RequestService.clearRequestTime();
successCallback(res);
})
.fail((error) => {
.networkFail((error) => {
RequestService.reAjaxFun(() => {
this.changePassword(oldPassword, newPassword, successCallback, errorCallback);
});
@@ -115,7 +146,7 @@ export default {
RequestService.clearRequestTime()
successCallback(res);
})
.fail((err) => {
.networkFail((err) => {
console.error('修改用户状态失败:', err)
RequestService.reAjaxFun(() => {
this.changeUserStatus(status, userIds)
@@ -131,7 +162,7 @@ export default {
RequestService.clearRequestTime();
callback(res);
})
.fail((err) => {
.networkFail((err) => {
console.error('获取公共配置失败:', err);
RequestService.reAjaxFun(() => {
this.getPubConfig(callback);
+64
View File
@@ -136,3 +136,67 @@ export function getUUID() {
})
}
/**
* 验证手机号格式
* @param {string} mobile 手机号
* @param {string} areaCode 区号
* @returns {boolean}
*/
export function validateMobile(mobile, areaCode) {
// 移除所有非数字字符
const cleanMobile = mobile.replace(/\D/g, '');
// 根据不同区号使用不同的验证规则
switch (areaCode) {
case '+86': // 中国大陆
return /^1[3-9]\d{9}$/.test(cleanMobile);
case '+852': // 中国香港
return /^[569]\d{7}$/.test(cleanMobile);
case '+853': // 中国澳门
return /^6\d{7}$/.test(cleanMobile);
case '+886': // 中国台湾
return /^9\d{8}$/.test(cleanMobile);
case '+1': // 美国/加拿大
return /^[2-9]\d{9}$/.test(cleanMobile);
case '+44': // 英国
return /^7[1-9]\d{8}$/.test(cleanMobile);
case '+81': // 日本
return /^[7890]\d{8}$/.test(cleanMobile);
case '+82': // 韩国
return /^1[0-9]\d{7}$/.test(cleanMobile);
case '+65': // 新加坡
return /^[89]\d{7}$/.test(cleanMobile);
case '+61': // 澳大利亚
return /^[4578]\d{8}$/.test(cleanMobile);
case '+49': // 德国
return /^1[5-7]\d{8}$/.test(cleanMobile);
case '+33': // 法国
return /^[67]\d{8}$/.test(cleanMobile);
case '+39': // 意大利
return /^3[0-9]\d{8}$/.test(cleanMobile);
case '+34': // 西班牙
return /^[6-9]\d{8}$/.test(cleanMobile);
case '+55': // 巴西
return /^[1-9]\d{10}$/.test(cleanMobile);
case '+91': // 印度
return /^[6-9]\d{9}$/.test(cleanMobile);
case '+971': // 阿联酋
return /^[5]\d{8}$/.test(cleanMobile);
case '+966': // 沙特阿拉伯
return /^[5]\d{8}$/.test(cleanMobile);
case '+880': // 孟加拉国
return /^1[3-9]\d{8}$/.test(cleanMobile);
case '+234': // 尼日利亚
return /^[789]\d{9}$/.test(cleanMobile);
case '+254': // 肯尼亚
return /^[17]\d{8}$/.test(cleanMobile);
case '+255': // 坦桑尼亚
return /^[67]\d{8}$/.test(cleanMobile);
case '+7': // 哈萨克斯坦
return /^[67]\d{9}$/.test(cleanMobile);
default:
// 其他国际号码:至少5位,最多15位
return /^\d{5,15}$/.test(cleanMobile);
}
}
@@ -48,8 +48,7 @@
<el-table ref="dictDataTable" :data="dictDataList" style="width: 100%"
v-loading="dictDataLoading" element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(255, 255, 255, 0.7)"
class="data-table"
element-loading-background="rgba(255, 255, 255, 0.7)" class="data-table"
header-row-class-name="table-header">
<el-table-column label="选择" align="center" width="55">
<template slot-scope="scope">
@@ -546,6 +545,7 @@ export default {
:deep(.el-table__body-wrapper) {
max-height: calc(var(--table-max-height) - 40px);
overflow-y: auto;
}
:deep(.el-table__body) {
+1 -14
View File
@@ -66,20 +66,7 @@
cursor: pointer;
color: #fff;
line-height: 35px;
margin: 35px 15px 15px;
}
.code-send {
width: 70px;
height: 32px;
border-radius: 10px;
background: #e6ebff;
line-height: 32px;
font-weight: 400;
font-size: 14px;
color: #5778ff;
flex-shrink: 0;
cursor: pointer;
margin: 15px 30px 15px 30px;
}
.input-box {
+100 -19
View File
@@ -20,10 +20,27 @@
</div>
</div>
<div style="padding: 0 30px;">
<div class="input-box">
<img loading="lazy" alt="" class="input-icon" src="@/assets/login/username.png" />
<el-input v-model="form.username" placeholder="请输入用户名" />
</div>
<!-- 用户名登录 -->
<template v-if="!isMobileLogin">
<div class="input-box">
<img loading="lazy" alt="" class="input-icon" src="@/assets/login/username.png" />
<el-input v-model="form.username" placeholder="请输入用户名" />
</div>
</template>
<!-- 手机号登录 -->
<template v-else>
<div class="input-box">
<div style="display: flex; align-items: center; width: 100%;">
<el-select v-model="form.areaCode" style="width: 220px; margin-right: 10px;">
<el-option v-for="item in mobileAreaList" :key="item.key" :label="`${item.name} (${item.key})`"
:value="item.key" />
</el-select>
<el-input v-model="form.mobile" placeholder="请输入手机号码" />
</div>
</div>
</template>
<div class="input-box">
<img loading="lazy" alt="" class="input-icon" src="@/assets/login/password.png" />
<el-input v-model="form.password" placeholder="请输入密码" type="password" />
@@ -42,6 +59,19 @@
</div>
</div>
<div class="login-btn" @click="login">登录</div>
<!-- 登录方式切换按钮 -->
<div class="login-type-container">
<el-tooltip content="手机号码登录" placement="bottom">
<el-button :type="isMobileLogin ? 'primary' : 'default'" icon="el-icon-mobile" circle
@click="switchLoginType('mobile')"></el-button>
</el-tooltip>
<el-tooltip content="用户名登录" placement="bottom">
<el-button :type="!isMobileLogin ? 'primary' : 'default'" icon="el-icon-user" circle
@click="switchLoginType('username')"></el-button>
</el-tooltip>
</div>
<div style="font-size: 14px;color: #979db1;">
登录即同意
<div style="display: inline-block;color: #5778FF;cursor: pointer;">用户协议</div>
@@ -60,7 +90,7 @@
<script>
import Api from '@/apis/api';
import VersionFooter from '@/components/VersionFooter.vue';
import { getUUID, goToPage, showDanger, showSuccess } from '@/utils';
import { getUUID, goToPage, showDanger, showSuccess, validateMobile } from '@/utils';
import { mapState } from 'vuex';
export default {
@@ -70,7 +100,9 @@ export default {
},
computed: {
...mapState({
allowUserRegister: state => state.pubConfig.allowUserRegister
allowUserRegister: state => state.pubConfig.allowUserRegister,
enableMobileRegister: state => state.pubConfig.enableMobileRegister,
mobileAreaList: state => state.pubConfig.mobileAreaList
})
},
data() {
@@ -80,15 +112,21 @@ export default {
username: '',
password: '',
captcha: '',
captchaId: ''
captchaId: '',
areaCode: '+86',
mobile: ''
},
captchaUuid: '',
captchaUrl: ''
captchaUrl: '',
isMobileLogin: false
}
},
mounted() {
this.fetchCaptcha();
this.$store.dispatch('fetchPubConfig');
this.$store.dispatch('fetchPubConfig').then(() => {
// 根据配置决定默认登录方式
this.isMobileLogin = this.enableMobileRegister;
});
},
methods: {
fetchCaptcha() {
@@ -110,6 +148,17 @@ export default {
}
},
// 切换登录方式
switchLoginType(type) {
this.isMobileLogin = type === 'mobile';
// 清空表单
this.form.username = '';
this.form.mobile = '';
this.form.password = '';
this.form.captcha = '';
this.fetchCaptcha();
},
// 封装输入验证逻辑
validateInput(input, message) {
if (!input.trim()) {
@@ -120,10 +169,21 @@ export default {
},
async login() {
// 验证用户名
if (!this.validateInput(this.form.username, '用户名不能为空')) {
return;
if (this.isMobileLogin) {
// 手机号登录验证
if (!validateMobile(this.form.mobile, this.form.areaCode)) {
showDanger('请输入正确的手机号码');
return;
}
// 拼接手机号作为用户名
this.form.username = this.form.areaCode + this.form.mobile;
} else {
// 用户名登录验证
if (!this.validateInput(this.form.username, '用户名不能为空')) {
return;
}
}
// 验证密码
if (!this.validateInput(this.form.password, '密码不能为空')) {
return;
@@ -135,12 +195,12 @@ export default {
this.form.captchaId = this.captchaUuid
Api.user.login(this.form, ({ data }) => {
if (data.code === 0) {
showSuccess('登录成功!');
this.$store.commit('setToken', JSON.stringify(data.data));
goToPage('/home');
} else {
showDanger(data.msg || '登录失败');
showSuccess('登录成功!');
this.$store.commit('setToken', JSON.stringify(data.data));
goToPage('/home');
}, (err) => {
if (err.data != null && err.data.msg != null && err.data.msg.indexOf('图形验证码') > -1) {
this.fetchCaptcha()
}
})
@@ -157,4 +217,25 @@ export default {
}
</script>
<style lang="scss" scoped>
@import './auth.scss'; // 添加这行引用</style>
@import './auth.scss';
.login-type-container {
margin: 10px 20px;
}
:deep(.el-button--primary) {
background-color: #5778ff;
border-color: #5778ff;
&:hover,
&:focus {
background-color: #4a6ae8;
border-color: #4a6ae8;
}
&:active {
background-color: #3d5cd6;
border-color: #3d5cd6;
}
}
</style>
+179 -48
View File
@@ -23,38 +23,78 @@
</div>
<div style="padding: 0 30px;">
<!-- 用户名输入框 -->
<div class="input-box">
<img loading="lazy" alt="" class="input-icon" src="@/assets/login/username.png" />
<el-input v-model="form.username" placeholder="请输入用户名" />
</div>
<!-- 密码输入框 -->
<div class="input-box">
<img loading="lazy" alt="" class="input-icon" src="@/assets/login/password.png" />
<el-input v-model="form.password" placeholder="请输入密码" type="password" />
</div>
<!-- 新增确认密码 -->
<div class="input-box">
<img loading="lazy" alt="" class="input-icon" src="@/assets/login/password.png" />
<el-input v-model="form.confirmPassword" placeholder="请确认密码" type="password" />
</div>
<!-- 验证码部分保持相同 -->
<div style="display: flex; align-items: center; margin-top: 20px; width: 100%; gap: 10px;">
<div class="input-box" style="width: calc(100% - 130px); margin-top: 0;">
<img loading="lazy" alt="" class="input-icon" src="@/assets/login/shield.png" />
<el-input v-model="form.captcha" placeholder="请输入验证码" style="flex: 1;" />
<form @submit.prevent="register">
<!-- 用户名/手机号输入框 -->
<div class="input-box" v-if="!enableMobileRegister">
<img loading="lazy" alt="" class="input-icon" src="@/assets/login/username.png" />
<el-input v-model="form.username" placeholder="请输入用户名" />
</div>
<img loading="lazy" v-if="captchaUrl" :src="captchaUrl" alt="验证码"
style="width: 150px; height: 40px; cursor: pointer;" @click="fetchCaptcha" />
</div>
<!-- 修改底部链接 -->
<div style="font-weight: 400;font-size: 14px;text-align: left;color: #5778ff;margin-top: 20px;">
<div style="cursor: pointer;" @click="goToLogin">已有账号立即登录</div>
</div>
<!-- 手机号注册部分 -->
<template v-if="enableMobileRegister">
<div class="input-box">
<div style="display: flex; align-items: center; width: 100%;">
<el-select v-model="form.areaCode" style="width: 220px; margin-right: 10px;">
<el-option v-for="item in mobileAreaList" :key="item.key" :label="`${item.name} (${item.key})`"
:value="item.key" />
</el-select>
<el-input v-model="form.mobile" placeholder="请输入手机号码" />
</div>
</div>
<div style="display: flex; align-items: center; margin-top: 20px; width: 100%; gap: 10px;">
<div class="input-box" style="width: calc(100% - 130px); margin-top: 0;">
<img loading="lazy" alt="" class="input-icon" src="@/assets/login/shield.png" />
<el-input v-model="form.captcha" placeholder="请输入验证码" style="flex: 1;" />
</div>
<img loading="lazy" v-if="captchaUrl" :src="captchaUrl" alt="验证码"
style="width: 150px; height: 40px; cursor: pointer;" @click="fetchCaptcha" />
</div>
<!-- 手机验证码 -->
<div style="display: flex; align-items: center; margin-top: 20px; width: 100%; gap: 10px;">
<div class="input-box" style="width: calc(100% - 130px); margin-top: 0;">
<img loading="lazy" alt="" class="input-icon" src="@/assets/login/phone.png" />
<el-input v-model="form.mobileCaptcha" placeholder="请输入手机验证码" style="flex: 1;" maxlength="6" />
</div>
<el-button type="primary" class="send-captcha-btn" :disabled="!canSendMobileCaptcha"
@click="sendMobileCaptcha">
<span>
{{ countdown > 0 ? `${countdown}秒后重试` : '发送验证码' }}
</span>
</el-button>
</div>
</template>
<!-- 密码输入框 -->
<div class="input-box">
<img loading="lazy" alt="" class="input-icon" src="@/assets/login/password.png" />
<el-input v-model="form.password" placeholder="请输入密码" type="password" />
</div>
<!-- 新增确认密码 -->
<div class="input-box">
<img loading="lazy" alt="" class="input-icon" src="@/assets/login/password.png" />
<el-input v-model="form.confirmPassword" placeholder="请确认密码" type="password" />
</div>
<!-- 验证码部分保持相同 -->
<div v-if="!enableMobileRegister"
style="display: flex; align-items: center; margin-top: 20px; width: 100%; gap: 10px;">
<div class="input-box" style="width: calc(100% - 130px); margin-top: 0;">
<img loading="lazy" alt="" class="input-icon" src="@/assets/login/shield.png" />
<el-input v-model="form.captcha" placeholder="请输入验证码" style="flex: 1;" />
</div>
<img loading="lazy" v-if="captchaUrl" :src="captchaUrl" alt="验证码"
style="width: 150px; height: 40px; cursor: pointer;" @click="fetchCaptcha" />
</div>
<!-- 修改底部链接 -->
<div style="font-weight: 400;font-size: 14px;text-align: left;color: #5778ff;margin-top: 20px;">
<div style="cursor: pointer;" @click="goToLogin">已有账号立即登录</div>
</div>
</form>
</div>
<!-- 修改按钮文本 -->
@@ -81,7 +121,7 @@
<script>
import Api from '@/apis/api';
import VersionFooter from '@/components/VersionFooter.vue';
import { getUUID, goToPage, showDanger, showSuccess } from '@/utils';
import { getUUID, goToPage, showDanger, showSuccess, validateMobile } from '@/utils';
import { mapState } from 'vuex';
export default {
@@ -91,8 +131,13 @@ export default {
},
computed: {
...mapState({
allowUserRegister: state => state.pubConfig.allowUserRegister
})
allowUserRegister: state => state.pubConfig.allowUserRegister,
enableMobileRegister: state => state.pubConfig.enableMobileRegister,
mobileAreaList: state => state.pubConfig.mobileAreaList
}),
canSendMobileCaptcha() {
return this.countdown === 0 && validateMobile(this.form.mobile, this.form.areaCode);
}
},
data() {
return {
@@ -101,9 +146,14 @@ export default {
password: '',
confirmPassword: '',
captcha: '',
captchaId: ''
captchaId: '',
areaCode: '+86',
mobile: '',
mobileCaptcha: ''
},
captchaUrl: ''
captchaUrl: '',
countdown: 0,
timer: null
}
},
mounted() {
@@ -141,12 +191,69 @@ export default {
}
return true;
},
// 注册逻辑
register() {
// 验证用户名
if (!this.validateInput(this.form.username, '用户名不能为空')) {
// 发送手机验证码
sendMobileCaptcha() {
if (!validateMobile(this.form.mobile, this.form.areaCode)) {
showDanger('请输入正确的手机号码');
return;
}
// 验证图形验证码
if (!this.validateInput(this.form.captcha, '请输入图形验证码')) {
return;
}
// 清除可能存在的旧定时器
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
// 开始倒计时
this.countdown = 60;
this.timer = setInterval(() => {
if (this.countdown > 0) {
this.countdown--;
} else {
clearInterval(this.timer);
this.timer = null;
}
}, 1000);
// 调用发送验证码接口
Api.user.sendSmsVerification({
phone: this.form.areaCode + this.form.mobile,
captcha: this.form.captcha,
captchaId: this.form.captchaId
}, (res) => {
showSuccess('验证码发送成功');
}, (err) => {
showDanger(err.data.msg || '验证码发送失败');
this.countdown = 0;
this.fetchCaptcha();
});
},
// 注册逻辑
register() {
if (this.enableMobileRegister) {
// 手机号注册验证
if (!validateMobile(this.form.mobile, this.form.areaCode)) {
showDanger('请输入正确的手机号码');
return;
}
if (!this.form.mobileCaptcha) {
showDanger('请输入手机验证码');
return;
}
} else {
// 用户名注册验证
if (!this.validateInput(this.form.username, '用户名不能为空')) {
return;
}
}
// 验证密码
if (!this.validateInput(this.form.password, '密码不能为空')) {
return;
@@ -160,26 +267,50 @@ export default {
return;
}
if (this.enableMobileRegister) {
this.form.username = this.form.areaCode + this.form.mobile
}
Api.user.register(this.form, ({ data }) => {
if (data.code === 0) {
showSuccess('注册成功!')
goToPage('/login')
} else {
showDanger(data.msg || '注册失败')
showSuccess('注册成功!')
goToPage('/login')
}, (err) => {
showDanger(err.data.msg || '注册失败')
if (err.data != null && err.data.msg != null && err.data.msg.indexOf('图形验证码') > -1) {
this.fetchCaptcha()
}
})
setTimeout(() => {
this.fetchCaptcha()
}, 1000)
},
goToLogin() {
goToPage('/login')
}
},
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer);
}
}
}
</script>
<style lang="scss" scoped>
@import './auth.scss'; // 修改为导入新建的SCSS文件</style>
@import './auth.scss';
.send-captcha-btn {
margin-right: -5px;
min-width: 100px;
height: 40px;
line-height: 40px;
border-radius: 4px;
font-size: 14px;
background: rgb(87, 120, 255);
border: none;
padding: 0px;
&:disabled {
background: #c0c4cc;
cursor: not-allowed;
}
}
</style>