chore: 简化登录页
This commit is contained in:
xiaoxian521
parent
60cdaf4697
commit
63e2ddc171
@ -33,40 +33,7 @@ status:
|
||||
login:
|
||||
username: Username
|
||||
password: Password
|
||||
verifyCode: VerifyCode
|
||||
remember: Remember Password
|
||||
sure: Sure Password
|
||||
forget: Forget Password?
|
||||
login: Login
|
||||
thirdLogin: Third Login
|
||||
phoneLogin: Phone Login
|
||||
qRCodeLogin: QRCode Login
|
||||
register: Register
|
||||
weChatLogin: WeChat Login
|
||||
alipayLogin: Alipay Login
|
||||
qqLogin: QQ Login
|
||||
weiboLogin: Weibo Login
|
||||
phone: Phone
|
||||
smsVerifyCode: SMS VerifyCode
|
||||
back: Back
|
||||
test: Mock Test
|
||||
tip: After scanning the code, click "Confirm" to complete the login
|
||||
definite: Definite
|
||||
loginSuccess: Login Success
|
||||
registerSuccess: Regist Success
|
||||
tickPrivacy: Please tick Privacy Policy
|
||||
readAccept: I have read it carefully and accept
|
||||
privacyPolicy: Privacy Policy
|
||||
getVerifyCode: Get VerifyCode
|
||||
info: Seconds
|
||||
usernameReg: Please enter username
|
||||
passwordReg: Please enter password
|
||||
verifyCodeReg: Please enter verify code
|
||||
verifyCodeCorrectReg: Please enter correct verify code
|
||||
verifyCodeSixReg: Please enter a 6-digit verify code
|
||||
phoneReg: Please enter the phone
|
||||
phoneCorrectReg: Please enter the correct phone number format
|
||||
passwordRuleReg: The password format should be any combination of 8-18 digits
|
||||
passwordSureReg: Please enter confirm password
|
||||
passwordDifferentReg: The two passwords do not match!
|
||||
passwordUpdateReg: Password has been updated
|
||||
|
||||
@ -33,40 +33,7 @@ status:
|
||||
login:
|
||||
username: 账号
|
||||
password: 密码
|
||||
verifyCode: 验证码
|
||||
remember: 记住密码
|
||||
sure: 确认密码
|
||||
forget: 忘记密码?
|
||||
login: 登录
|
||||
thirdLogin: 第三方登录
|
||||
phoneLogin: 手机登录
|
||||
qRCodeLogin: 二维码登录
|
||||
register: 注册
|
||||
weChatLogin: 微信登录
|
||||
alipayLogin: 支付宝登录
|
||||
qqLogin: QQ登录
|
||||
weiboLogin: 微博登录
|
||||
phone: 手机号码
|
||||
smsVerifyCode: 短信验证码
|
||||
back: 返回
|
||||
test: 模拟测试
|
||||
tip: 扫码后点击"确认"，即可完成登录
|
||||
definite: 确定
|
||||
loginSuccess: 登录成功
|
||||
registerSuccess: 注册成功
|
||||
tickPrivacy: 请勾选隐私政策
|
||||
readAccept: 我已仔细阅读并接受
|
||||
privacyPolicy: 《隐私政策》
|
||||
getVerifyCode: 获取验证码
|
||||
info: 秒后重新获取
|
||||
usernameReg: 请输入账号
|
||||
passwordReg: 请输入密码
|
||||
verifyCodeReg: 请输入验证码
|
||||
verifyCodeCorrectReg: 请输入正确的验证码
|
||||
verifyCodeSixReg: 请输入6位数字验证码
|
||||
phoneReg: 请输入手机号码
|
||||
phoneCorrectReg: 请输入正确的手机号码格式
|
||||
passwordRuleReg: 密码格式应为8-18位数字、字母、符号的任意两种组合
|
||||
passwordSureReg: 请输入确认密码
|
||||
passwordDifferentReg: 两次密码不一致!
|
||||
passwordUpdateReg: 修改密码成功
|
||||
|
||||
@ -51,11 +51,9 @@
|
||||
"nprogress": "^0.2.0",
|
||||
"path": "^0.12.7",
|
||||
"pinia": "^2.0.21",
|
||||
"qrcode": "^1.5.1",
|
||||
"qs": "^6.11.0",
|
||||
"resize-observer-polyfill": "^1.5.1",
|
||||
"responsive-storage": "^2.1.0",
|
||||
"rgb-hex": "^4.0.0",
|
||||
"vue": "^3.2.38",
|
||||
"vue-i18n": "^9.2.2",
|
||||
"vue-router": "^4.1.5",
|
||||
|
||||
137
pnpm-lock.yaml
generated
137
pnpm-lock.yaml
generated
@ -64,11 +64,9 @@ specifiers:
|
||||
postcss-scss: ^4.0.4
|
||||
prettier: ^2.5.1
|
||||
pretty-quick: 3.1.1
|
||||
qrcode: ^1.5.1
|
||||
qs: ^6.11.0
|
||||
resize-observer-polyfill: ^1.5.1
|
||||
responsive-storage: ^2.1.0
|
||||
rgb-hex: ^4.0.0
|
||||
rimraf: 3.0.2
|
||||
rollup-plugin-visualizer: ^5.8.1
|
||||
sass: ^1.53.0
|
||||
@ -120,11 +118,9 @@ dependencies:
|
||||
nprogress: 0.2.0
|
||||
path: 0.12.7
|
||||
pinia: 2.0.22_typescript@4.8.2+vue@3.2.38
|
||||
qrcode: 1.5.1
|
||||
qs: 6.11.0
|
||||
resize-observer-polyfill: 1.5.1
|
||||
responsive-storage: 2.1.0
|
||||
rgb-hex: 4.0.0
|
||||
vue: 3.2.38
|
||||
vue-i18n: 9.2.2_vue@3.2.38
|
||||
vue-router: 4.1.5_vue@3.2.38
|
||||
@ -2167,6 +2163,7 @@ packages:
|
||||
integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
|
||||
}
|
||||
engines: { node: ">=8" }
|
||||
dev: true
|
||||
|
||||
/ansi-styles/3.2.1:
|
||||
resolution:
|
||||
@ -2186,6 +2183,7 @@ packages:
|
||||
engines: { node: ">=8" }
|
||||
dependencies:
|
||||
color-convert: 2.0.1
|
||||
dev: true
|
||||
|
||||
/anymatch/3.1.2:
|
||||
resolution:
|
||||
@ -2445,6 +2443,7 @@ packages:
|
||||
integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
|
||||
}
|
||||
engines: { node: ">=6" }
|
||||
dev: true
|
||||
|
||||
/camelcase/6.3.0:
|
||||
resolution:
|
||||
@ -2554,17 +2553,6 @@ packages:
|
||||
string-width: 4.2.3
|
||||
dev: true
|
||||
|
||||
/cliui/6.0.0:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==
|
||||
}
|
||||
dependencies:
|
||||
string-width: 4.2.3
|
||||
strip-ansi: 6.0.1
|
||||
wrap-ansi: 6.2.0
|
||||
dev: false
|
||||
|
||||
/cliui/7.0.4:
|
||||
resolution:
|
||||
{
|
||||
@ -2601,6 +2589,7 @@ packages:
|
||||
engines: { node: ">=7.0.0" }
|
||||
dependencies:
|
||||
color-name: 1.1.4
|
||||
dev: true
|
||||
|
||||
/color-name/1.1.3:
|
||||
resolution:
|
||||
@ -2614,6 +2603,7 @@ packages:
|
||||
{
|
||||
integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
|
||||
}
|
||||
dev: true
|
||||
|
||||
/color-string/1.9.1:
|
||||
resolution:
|
||||
@ -3035,6 +3025,7 @@ packages:
|
||||
integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==
|
||||
}
|
||||
engines: { node: ">=0.10.0" }
|
||||
dev: true
|
||||
|
||||
/deep-is/0.1.4:
|
||||
resolution:
|
||||
@ -3102,13 +3093,6 @@ packages:
|
||||
engines: { node: ">=0.3.1" }
|
||||
dev: true
|
||||
|
||||
/dijkstrajs/1.0.2:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-QV6PMaHTCNmKSeP6QoXhVTw9snc9VD8MulTT0Bd99Pacp4SS1cjcrYPgBPmibqKVtMJJfqC6XvOXgPMEEPH/fg==
|
||||
}
|
||||
dev: false
|
||||
|
||||
/dir-glob/3.0.1:
|
||||
resolution:
|
||||
{
|
||||
@ -3283,13 +3267,7 @@ packages:
|
||||
{
|
||||
integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
|
||||
}
|
||||
|
||||
/encode-utf8/1.0.3:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw==
|
||||
}
|
||||
dev: false
|
||||
dev: true
|
||||
|
||||
/encodeurl/1.0.2:
|
||||
resolution:
|
||||
@ -4067,6 +4045,7 @@ packages:
|
||||
dependencies:
|
||||
locate-path: 5.0.0
|
||||
path-exists: 4.0.0
|
||||
dev: true
|
||||
|
||||
/find-up/5.0.0:
|
||||
resolution:
|
||||
@ -4203,6 +4182,7 @@ packages:
|
||||
integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
|
||||
}
|
||||
engines: { node: 6.* || 8.* || >= 10.* }
|
||||
dev: true
|
||||
|
||||
/get-intrinsic/1.1.2:
|
||||
resolution:
|
||||
@ -4632,6 +4612,7 @@ packages:
|
||||
integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
|
||||
}
|
||||
engines: { node: ">=8" }
|
||||
dev: true
|
||||
|
||||
/is-glob/4.0.3:
|
||||
resolution:
|
||||
@ -4956,6 +4937,7 @@ packages:
|
||||
engines: { node: ">=8" }
|
||||
dependencies:
|
||||
p-locate: 4.1.0
|
||||
dev: true
|
||||
|
||||
/locate-path/6.0.0:
|
||||
resolution:
|
||||
@ -5498,6 +5480,7 @@ packages:
|
||||
engines: { node: ">=6" }
|
||||
dependencies:
|
||||
p-try: 2.2.0
|
||||
dev: true
|
||||
|
||||
/p-limit/3.1.0:
|
||||
resolution:
|
||||
@ -5517,6 +5500,7 @@ packages:
|
||||
engines: { node: ">=8" }
|
||||
dependencies:
|
||||
p-limit: 2.3.0
|
||||
dev: true
|
||||
|
||||
/p-locate/5.0.0:
|
||||
resolution:
|
||||
@ -5544,6 +5528,7 @@ packages:
|
||||
integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
|
||||
}
|
||||
engines: { node: ">=6" }
|
||||
dev: true
|
||||
|
||||
/parent-module/1.0.1:
|
||||
resolution:
|
||||
@ -5582,6 +5567,7 @@ packages:
|
||||
integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
|
||||
}
|
||||
engines: { node: ">=8" }
|
||||
dev: true
|
||||
|
||||
/path-is-absolute/1.0.1:
|
||||
resolution:
|
||||
@ -5683,14 +5669,6 @@ packages:
|
||||
semver-compare: 1.0.0
|
||||
dev: true
|
||||
|
||||
/pngjs/5.0.0:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==
|
||||
}
|
||||
engines: { node: ">=10.13.0" }
|
||||
dev: false
|
||||
|
||||
/popmotion/11.0.5:
|
||||
resolution:
|
||||
{
|
||||
@ -6313,20 +6291,6 @@ packages:
|
||||
engines: { node: ">=0.6.0", teleport: ">=0.2.0" }
|
||||
dev: true
|
||||
|
||||
/qrcode/1.5.1:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-nS8NJ1Z3md8uTjKtP+SGGhfqmTCs5flU/xR623oI0JX+Wepz9R8UrRVCTBTJm3qGw3rH6jJ6MUHjkDx15cxSSg==
|
||||
}
|
||||
engines: { node: ">=10.13.0" }
|
||||
hasBin: true
|
||||
dependencies:
|
||||
dijkstrajs: 1.0.2
|
||||
encode-utf8: 1.0.3
|
||||
pngjs: 5.0.0
|
||||
yargs: 15.4.1
|
||||
dev: false
|
||||
|
||||
/qs/6.11.0:
|
||||
resolution:
|
||||
{
|
||||
@ -6448,6 +6412,7 @@ packages:
|
||||
integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==
|
||||
}
|
||||
engines: { node: ">=0.10.0" }
|
||||
dev: true
|
||||
|
||||
/require-from-string/2.0.2:
|
||||
resolution:
|
||||
@ -6457,13 +6422,6 @@ packages:
|
||||
engines: { node: ">=0.10.0" }
|
||||
dev: true
|
||||
|
||||
/require-main-filename/2.0.0:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
|
||||
}
|
||||
dev: false
|
||||
|
||||
/resize-observer-polyfill/1.5.1:
|
||||
resolution:
|
||||
{
|
||||
@ -6542,14 +6500,6 @@ packages:
|
||||
}
|
||||
dev: true
|
||||
|
||||
/rgb-hex/4.0.0:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-Eg2ev5CiMBnQ9Gpflmqbwbso0CCdISqtVIow7OpYSLN1ULUv2jTB9YieS1DSSn/17AD7KkPWDPzSFzI4GSuu/Q==
|
||||
}
|
||||
engines: { node: ">=12" }
|
||||
dev: false
|
||||
|
||||
/rimraf/3.0.2:
|
||||
resolution:
|
||||
{
|
||||
@ -6709,13 +6659,6 @@ packages:
|
||||
lru-cache: 6.0.0
|
||||
dev: true
|
||||
|
||||
/set-blocking/2.0.0:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==
|
||||
}
|
||||
dev: false
|
||||
|
||||
/shebang-command/2.0.0:
|
||||
resolution:
|
||||
{
|
||||
@ -6915,6 +6858,7 @@ packages:
|
||||
emoji-regex: 8.0.0
|
||||
is-fullwidth-code-point: 3.0.0
|
||||
strip-ansi: 6.0.1
|
||||
dev: true
|
||||
|
||||
/string_decoder/1.3.0:
|
||||
resolution:
|
||||
@ -6945,6 +6889,7 @@ packages:
|
||||
engines: { node: ">=8" }
|
||||
dependencies:
|
||||
ansi-regex: 5.0.1
|
||||
dev: true
|
||||
|
||||
/strip-final-newline/2.0.0:
|
||||
resolution:
|
||||
@ -7757,13 +7702,6 @@ packages:
|
||||
}
|
||||
dev: true
|
||||
|
||||
/which-module/2.0.0:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-B+enWhmw6cjfVC7kS8Pj9pCrKSc5txArRyaYGe088shv/FGWH+0Rjx/xPgtsWfsUtS27FkP697E4DDhgrgoc0Q==
|
||||
}
|
||||
dev: false
|
||||
|
||||
/which/1.3.1:
|
||||
resolution:
|
||||
{
|
||||
@ -7803,6 +7741,7 @@ packages:
|
||||
ansi-styles: 4.3.0
|
||||
string-width: 4.2.3
|
||||
strip-ansi: 6.0.1
|
||||
dev: true
|
||||
|
||||
/wrap-ansi/7.0.0:
|
||||
resolution:
|
||||
@ -7849,13 +7788,6 @@ packages:
|
||||
engines: { node: ">=0.4" }
|
||||
dev: true
|
||||
|
||||
/y18n/4.0.3:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==
|
||||
}
|
||||
dev: false
|
||||
|
||||
/y18n/5.0.8:
|
||||
resolution:
|
||||
{
|
||||
@ -7890,17 +7822,6 @@ packages:
|
||||
engines: { node: ">= 6" }
|
||||
dev: true
|
||||
|
||||
/yargs-parser/18.1.3:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==
|
||||
}
|
||||
engines: { node: ">=6" }
|
||||
dependencies:
|
||||
camelcase: 5.3.1
|
||||
decamelize: 1.2.0
|
||||
dev: false
|
||||
|
||||
/yargs-parser/20.2.9:
|
||||
resolution:
|
||||
{
|
||||
@ -7917,26 +7838,6 @@ packages:
|
||||
engines: { node: ">=12" }
|
||||
dev: true
|
||||
|
||||
/yargs/15.4.1:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==
|
||||
}
|
||||
engines: { node: ">=8" }
|
||||
dependencies:
|
||||
cliui: 6.0.0
|
||||
decamelize: 1.2.0
|
||||
find-up: 4.1.0
|
||||
get-caller-file: 2.0.5
|
||||
require-directory: 2.1.1
|
||||
require-main-filename: 2.0.0
|
||||
set-blocking: 2.0.0
|
||||
string-width: 4.2.3
|
||||
which-module: 2.0.0
|
||||
y18n: 4.0.3
|
||||
yargs-parser: 18.1.3
|
||||
dev: false
|
||||
|
||||
/yargs/17.5.1:
|
||||
resolution:
|
||||
{
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
import reImageVerify from "./src/index.vue";
|
||||
import { withInstall } from "@pureadmin/utils";
|
||||
|
||||
/** 图形验证码组件 */
|
||||
export const ReImageVerify = withInstall(reImageVerify);
|
||||
|
||||
export default ReImageVerify;
|
||||
@ -1,85 +0,0 @@
|
||||
import { ref, onMounted } from "vue";
|
||||
|
||||
/**
|
||||
* 绘制图形验证码
|
||||
* @param width - 图形宽度
|
||||
* @param height - 图形高度
|
||||
*/
|
||||
export const useImageVerify = (width = 120, height = 40) => {
|
||||
const domRef = ref<HTMLCanvasElement>();
|
||||
const imgCode = ref("");
|
||||
|
||||
function setImgCode(code: string) {
|
||||
imgCode.value = code;
|
||||
}
|
||||
|
||||
function getImgCode() {
|
||||
if (!domRef.value) return;
|
||||
imgCode.value = draw(domRef.value, width, height);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getImgCode();
|
||||
});
|
||||
|
||||
return {
|
||||
domRef,
|
||||
imgCode,
|
||||
setImgCode,
|
||||
getImgCode
|
||||
};
|
||||
};
|
||||
|
||||
function randomNum(min: number, max: number) {
|
||||
const num = Math.floor(Math.random() * (max - min) + min);
|
||||
return num;
|
||||
}
|
||||
|
||||
function randomColor(min: number, max: number) {
|
||||
const r = randomNum(min, max);
|
||||
const g = randomNum(min, max);
|
||||
const b = randomNum(min, max);
|
||||
return `rgb(${r},${g},${b})`;
|
||||
}
|
||||
|
||||
function draw(dom: HTMLCanvasElement, width: number, height: number) {
|
||||
let imgCode = "";
|
||||
|
||||
const NUMBER_STRING = "0123456789";
|
||||
|
||||
const ctx = dom.getContext("2d");
|
||||
if (!ctx) return imgCode;
|
||||
|
||||
ctx.fillStyle = randomColor(180, 230);
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
for (let i = 0; i < 4; i += 1) {
|
||||
const text = NUMBER_STRING[randomNum(0, NUMBER_STRING.length)];
|
||||
imgCode += text;
|
||||
const fontSize = randomNum(18, 41);
|
||||
const deg = randomNum(-30, 30);
|
||||
ctx.font = `${fontSize}px Simhei`;
|
||||
ctx.textBaseline = "top";
|
||||
ctx.fillStyle = randomColor(80, 150);
|
||||
ctx.save();
|
||||
ctx.translate(30 * i + 15, 15);
|
||||
ctx.rotate((deg * Math.PI) / 180);
|
||||
ctx.fillText(text, -15 + 5, -15);
|
||||
ctx.restore();
|
||||
}
|
||||
for (let i = 0; i < 5; i += 1) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(randomNum(0, width), randomNum(0, height));
|
||||
ctx.lineTo(randomNum(0, width), randomNum(0, height));
|
||||
ctx.strokeStyle = randomColor(180, 230);
|
||||
ctx.closePath();
|
||||
ctx.stroke();
|
||||
}
|
||||
for (let i = 0; i < 41; i += 1) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(randomNum(0, width), randomNum(0, height), 1, 0, 2 * Math.PI);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = randomColor(150, 200);
|
||||
ctx.fill();
|
||||
}
|
||||
return imgCode;
|
||||
}
|
||||
@ -1,46 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { watch } from "vue";
|
||||
import { useImageVerify } from "./hooks";
|
||||
|
||||
defineOptions({
|
||||
name: "ReImageVerify"
|
||||
});
|
||||
|
||||
interface Props {
|
||||
code?: string;
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: "update:code", code: string): void;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
code: ""
|
||||
});
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const { domRef, imgCode, setImgCode, getImgCode } = useImageVerify();
|
||||
|
||||
watch(
|
||||
() => props.code,
|
||||
newValue => {
|
||||
setImgCode(newValue);
|
||||
}
|
||||
);
|
||||
watch(imgCode, newValue => {
|
||||
emit("update:code", newValue);
|
||||
});
|
||||
|
||||
defineExpose({ getImgCode });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<canvas
|
||||
ref="domRef"
|
||||
width="120"
|
||||
height="40"
|
||||
class="cursor-pointer"
|
||||
@click="getImgCode"
|
||||
/>
|
||||
</template>
|
||||
@ -1,7 +0,0 @@
|
||||
import reQrcode from "./src/index";
|
||||
import { withInstall } from "@pureadmin/utils";
|
||||
|
||||
/** 二维码组件 */
|
||||
export const ReQrcode = withInstall(reQrcode);
|
||||
|
||||
export default ReQrcode;
|
||||
@ -1,8 +0,0 @@
|
||||
.qrcode {
|
||||
&--disabled {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
& > div {
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,262 +0,0 @@
|
||||
import {
|
||||
ref,
|
||||
unref,
|
||||
watch,
|
||||
nextTick,
|
||||
computed,
|
||||
PropType,
|
||||
defineComponent
|
||||
} from "vue";
|
||||
import "./index.scss";
|
||||
import { cloneDeep } from "lodash-unified";
|
||||
import { isString } from "@pureadmin/utils";
|
||||
import { propTypes } from "/@/utils/propTypes";
|
||||
import { IconifyIconOffline } from "../../ReIcon";
|
||||
import QRCode, { QRCodeRenderersOptions } from "qrcode";
|
||||
|
||||
interface QrcodeLogo {
|
||||
src?: string;
|
||||
logoSize?: number;
|
||||
bgColor?: string;
|
||||
borderSize?: number;
|
||||
crossOrigin?: string;
|
||||
borderRadius?: number;
|
||||
logoRadius?: number;
|
||||
}
|
||||
|
||||
const props = {
|
||||
// img 或者 canvas,img不支持logo嵌套
|
||||
tag: propTypes.string
|
||||
.validate((v: string) => ["canvas", "img"].includes(v))
|
||||
.def("canvas"),
|
||||
// 二维码内容
|
||||
text: {
|
||||
type: [String, Array] as PropType<string | Recordable[]>,
|
||||
default: null
|
||||
},
|
||||
// qrcode.js配置项
|
||||
options: {
|
||||
type: Object as PropType<QRCodeRenderersOptions>,
|
||||
default: (): QRCodeRenderersOptions => ({})
|
||||
},
|
||||
// 宽度
|
||||
width: propTypes.number.def(200),
|
||||
// logo
|
||||
logo: {
|
||||
type: [String, Object] as PropType<Partial<QrcodeLogo> | string>,
|
||||
default: (): QrcodeLogo | string => ""
|
||||
},
|
||||
// 是否过期
|
||||
disabled: propTypes.bool.def(false),
|
||||
// 过期提示内容
|
||||
disabledText: propTypes.string.def("")
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
name: "ReQrcode",
|
||||
props,
|
||||
emits: ["done", "click", "disabled-click"],
|
||||
setup(props, { emit }) {
|
||||
const { toCanvas, toDataURL } = QRCode;
|
||||
const loading = ref(true);
|
||||
const wrapRef = ref<Nullable<HTMLCanvasElement | HTMLImageElement>>(null);
|
||||
const renderText = computed(() => String(props.text));
|
||||
const wrapStyle = computed(() => {
|
||||
return {
|
||||
width: props.width + "px",
|
||||
height: props.width + "px"
|
||||
};
|
||||
});
|
||||
const initQrcode = async () => {
|
||||
await nextTick();
|
||||
const options = cloneDeep(props.options || {});
|
||||
if (props.tag === "canvas") {
|
||||
// 容错率，默认对内容少的二维码采用高容错率，内容多的二维码采用低容错率
|
||||
options.errorCorrectionLevel =
|
||||
options.errorCorrectionLevel ||
|
||||
getErrorCorrectionLevel(unref(renderText));
|
||||
const _width: number = await getOriginWidth(unref(renderText), options);
|
||||
options.scale =
|
||||
props.width === 0 ? undefined : (props.width / _width) * 4;
|
||||
const canvasRef: any = await toCanvas(
|
||||
unref(wrapRef) as HTMLCanvasElement,
|
||||
unref(renderText),
|
||||
options
|
||||
);
|
||||
if (props.logo) {
|
||||
const url = await createLogoCode(canvasRef);
|
||||
emit("done", url);
|
||||
loading.value = false;
|
||||
} else {
|
||||
emit("done", canvasRef.toDataURL());
|
||||
loading.value = false;
|
||||
}
|
||||
} else {
|
||||
const url = await toDataURL(renderText.value, {
|
||||
errorCorrectionLevel: "H",
|
||||
width: props.width,
|
||||
...options
|
||||
});
|
||||
(unref(wrapRef) as HTMLImageElement).src = url;
|
||||
emit("done", url);
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
watch(
|
||||
() => renderText.value,
|
||||
val => {
|
||||
if (!val) return;
|
||||
initQrcode();
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
const createLogoCode = (canvasRef: HTMLCanvasElement) => {
|
||||
const canvasWidth = canvasRef.width;
|
||||
const logoOptions: QrcodeLogo = Object.assign(
|
||||
{
|
||||
logoSize: 0.15,
|
||||
bgColor: "#ffffff",
|
||||
borderSize: 0.05,
|
||||
crossOrigin: "anonymous",
|
||||
borderRadius: 8,
|
||||
logoRadius: 0
|
||||
},
|
||||
isString(props.logo) ? {} : props.logo
|
||||
);
|
||||
const {
|
||||
logoSize = 0.15,
|
||||
bgColor = "#ffffff",
|
||||
borderSize = 0.05,
|
||||
crossOrigin = "anonymous",
|
||||
borderRadius = 8,
|
||||
logoRadius = 0
|
||||
} = logoOptions;
|
||||
const logoSrc = isString(props.logo) ? props.logo : props.logo.src;
|
||||
const logoWidth = canvasWidth * logoSize;
|
||||
const logoXY = (canvasWidth * (1 - logoSize)) / 2;
|
||||
const logoBgWidth = canvasWidth * (logoSize + borderSize);
|
||||
const logoBgXY = (canvasWidth * (1 - logoSize - borderSize)) / 2;
|
||||
const ctx = canvasRef.getContext("2d");
|
||||
if (!ctx) return;
|
||||
// logo 底色
|
||||
canvasRoundRect(ctx)(
|
||||
logoBgXY,
|
||||
logoBgXY,
|
||||
logoBgWidth,
|
||||
logoBgWidth,
|
||||
borderRadius
|
||||
);
|
||||
ctx.fillStyle = bgColor;
|
||||
ctx.fill();
|
||||
// logo
|
||||
const image = new Image();
|
||||
if (crossOrigin || logoRadius) {
|
||||
image.setAttribute("crossOrigin", crossOrigin);
|
||||
}
|
||||
(image as any).src = logoSrc;
|
||||
// 使用image绘制可以避免某些跨域情况
|
||||
const drawLogoWithImage = (image: HTMLImageElement) => {
|
||||
ctx.drawImage(image, logoXY, logoXY, logoWidth, logoWidth);
|
||||
};
|
||||
// 使用canvas绘制以获得更多的功能
|
||||
const drawLogoWithCanvas = (image: HTMLImageElement) => {
|
||||
const canvasImage = document.createElement("canvas");
|
||||
canvasImage.width = logoXY + logoWidth;
|
||||
canvasImage.height = logoXY + logoWidth;
|
||||
const imageCanvas = canvasImage.getContext("2d");
|
||||
if (!imageCanvas || !ctx) return;
|
||||
imageCanvas.drawImage(image, logoXY, logoXY, logoWidth, logoWidth);
|
||||
canvasRoundRect(ctx)(logoXY, logoXY, logoWidth, logoWidth, logoRadius);
|
||||
if (!ctx) return;
|
||||
const fillStyle = ctx.createPattern(canvasImage, "no-repeat");
|
||||
if (fillStyle) {
|
||||
ctx.fillStyle = fillStyle;
|
||||
ctx.fill();
|
||||
}
|
||||
};
|
||||
// 将 logo绘制到 canvas上
|
||||
return new Promise((resolve: any) => {
|
||||
image.onload = () => {
|
||||
logoRadius ? drawLogoWithCanvas(image) : drawLogoWithImage(image);
|
||||
resolve(canvasRef.toDataURL());
|
||||
};
|
||||
});
|
||||
};
|
||||
// 得到原QrCode的大小，以便缩放得到正确的QrCode大小
|
||||
const getOriginWidth = async (
|
||||
content: string,
|
||||
options: QRCodeRenderersOptions
|
||||
) => {
|
||||
const _canvas = document.createElement("canvas");
|
||||
await toCanvas(_canvas, content, options);
|
||||
return _canvas.width;
|
||||
};
|
||||
// 对于内容少的QrCode，增大容错率
|
||||
const getErrorCorrectionLevel = (content: string) => {
|
||||
if (content.length > 36) {
|
||||
return "M";
|
||||
} else if (content.length > 16) {
|
||||
return "Q";
|
||||
} else {
|
||||
return "H";
|
||||
}
|
||||
};
|
||||
// 用于绘制圆角
|
||||
const canvasRoundRect = (ctx: CanvasRenderingContext2D) => {
|
||||
return (x: number, y: number, w: number, h: number, r: number) => {
|
||||
const minSize = Math.min(w, h);
|
||||
if (r > minSize / 2) {
|
||||
r = minSize / 2;
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x + r, y);
|
||||
ctx.arcTo(x + w, y, x + w, y + h, r);
|
||||
ctx.arcTo(x + w, y + h, x, y + h, r);
|
||||
ctx.arcTo(x, y + h, x, y, r);
|
||||
ctx.arcTo(x, y, x + w, y, r);
|
||||
ctx.closePath();
|
||||
return ctx;
|
||||
};
|
||||
};
|
||||
const clickCode = () => {
|
||||
emit("click");
|
||||
};
|
||||
const disabledClick = () => {
|
||||
emit("disabled-click");
|
||||
};
|
||||
return () => (
|
||||
<>
|
||||
<div
|
||||
v-loading={unref(loading)}
|
||||
class="qrcode relative inline-block"
|
||||
style={unref(wrapStyle)}
|
||||
>
|
||||
{props.tag === "canvas" ? (
|
||||
<canvas ref={wrapRef} onClick={clickCode}></canvas>
|
||||
) : (
|
||||
<img ref={wrapRef} onClick={clickCode}></img>
|
||||
)}
|
||||
{props.disabled && (
|
||||
<div
|
||||
class="qrcode--disabled absolute top-0 left-0 flex w-full h-full items-center justify-center"
|
||||
onClick={disabledClick}
|
||||
>
|
||||
<div class="absolute top-[50%] left-[50%] font-bold">
|
||||
<IconifyIconOffline
|
||||
class="cursor-pointer"
|
||||
icon="refresh-right"
|
||||
width="30"
|
||||
color="var(--el-color-primary)"
|
||||
/>
|
||||
<div>{props.disabledText}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -23,11 +23,7 @@ export const useUserStore = defineStore({
|
||||
id: "pure-user",
|
||||
state: (): userType => ({
|
||||
token,
|
||||
name,
|
||||
// 前端生成的验证码（按实际需求替换）
|
||||
verifyCode: "",
|
||||
// 登录显示组件判断 0：登录 1：手机登录 2：二维码登录 3：注册 4：忘记密码，默认0：登录
|
||||
currentPage: 0
|
||||
name
|
||||
}),
|
||||
actions: {
|
||||
SET_TOKEN(token) {
|
||||
@ -36,12 +32,6 @@ export const useUserStore = defineStore({
|
||||
SET_NAME(name) {
|
||||
this.name = name;
|
||||
},
|
||||
SET_VERIFYCODE(verifyCode) {
|
||||
this.verifyCode = verifyCode;
|
||||
},
|
||||
SET_CURRENTPAGE(value) {
|
||||
this.currentPage = value;
|
||||
},
|
||||
// 登入
|
||||
async loginByUsername(data) {
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
|
||||
@ -229,7 +229,7 @@
|
||||
.screen-full,
|
||||
/* 国际化 */
|
||||
.globalization,
|
||||
/* 登陆名 */
|
||||
/* 登录名 */
|
||||
.el-dropdown-link,
|
||||
/* 设置 */
|
||||
.el-icon-setting {
|
||||
@ -592,7 +592,7 @@ body[layout="vertical"] {
|
||||
.screen-full,
|
||||
/* 国际化 */
|
||||
.globalization,
|
||||
/* 登陆名 */
|
||||
/* 登录名 */
|
||||
.el-dropdown-link,
|
||||
/* 设置 */
|
||||
.el-icon-setting {
|
||||
|
||||
@ -1,106 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { ref, reactive } from "vue";
|
||||
import Motion from "../utils/motion";
|
||||
import { phoneRules } from "../utils/rule";
|
||||
import { message } from "@pureadmin/components";
|
||||
import type { FormInstance } from "element-plus";
|
||||
import { $t, transformI18n } from "/@/plugins/i18n";
|
||||
import { useVerifyCode } from "../utils/verifyCode";
|
||||
import { useUserStoreHook } from "/@/store/modules/user";
|
||||
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
|
||||
|
||||
const { t } = useI18n();
|
||||
const loading = ref(false);
|
||||
const ruleForm = reactive({
|
||||
phone: "",
|
||||
verifyCode: ""
|
||||
});
|
||||
const ruleFormRef = ref<FormInstance>();
|
||||
const { isDisabled, text } = useVerifyCode();
|
||||
|
||||
const onLogin = async (formEl: FormInstance | undefined) => {
|
||||
loading.value = true;
|
||||
if (!formEl) return;
|
||||
await formEl.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
// 模拟登录请求，需根据实际开发进行修改
|
||||
setTimeout(() => {
|
||||
message.success(transformI18n($t("login.loginSuccess")));
|
||||
loading.value = false;
|
||||
}, 2000);
|
||||
} else {
|
||||
loading.value = false;
|
||||
return fields;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
function onBack() {
|
||||
useVerifyCode().end();
|
||||
useUserStoreHook().SET_CURRENTPAGE(0);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-form ref="ruleFormRef" :model="ruleForm" :rules="phoneRules" size="large">
|
||||
<Motion>
|
||||
<el-form-item prop="phone">
|
||||
<el-input
|
||||
clearable
|
||||
v-model="ruleForm.phone"
|
||||
:placeholder="t('login.phone')"
|
||||
:prefix-icon="useRenderIcon('iphone')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="100">
|
||||
<el-form-item prop="verifyCode">
|
||||
<div class="w-full flex justify-between">
|
||||
<el-input
|
||||
clearable
|
||||
v-model="ruleForm.verifyCode"
|
||||
:placeholder="t('login.smsVerifyCode')"
|
||||
:prefix-icon="
|
||||
useRenderIcon('ri:shield-keyhole-line', { online: true })
|
||||
"
|
||||
/>
|
||||
<el-button
|
||||
:disabled="isDisabled"
|
||||
class="ml-2"
|
||||
@click="useVerifyCode().start(ruleFormRef, 'phone')"
|
||||
>
|
||||
{{
|
||||
text.length > 0
|
||||
? text + t("login.info")
|
||||
: t("login.getVerifyCode")
|
||||
}}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="150">
|
||||
<el-form-item>
|
||||
<el-button
|
||||
class="w-full"
|
||||
size="default"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="onLogin(ruleFormRef)"
|
||||
>
|
||||
{{ t("login.login") }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="200">
|
||||
<el-form-item>
|
||||
<el-button class="w-full" size="default" @click="onBack">
|
||||
{{ t("login.back") }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
</el-form>
|
||||
</template>
|
||||
@ -1,25 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from "vue-i18n";
|
||||
import Motion from "../utils/motion";
|
||||
import ReQrcode from "/@/components/ReQrcode";
|
||||
import { useUserStoreHook } from "/@/store/modules/user";
|
||||
|
||||
const { t } = useI18n();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Motion class="-mt-2 -mb-2"> <ReQrcode :text="t('login.test')" /> </Motion>
|
||||
<Motion :delay="100">
|
||||
<el-divider>
|
||||
<p class="text-gray-500 text-xs">{{ t("login.tip") }}</p>
|
||||
</el-divider>
|
||||
</Motion>
|
||||
<Motion :delay="150">
|
||||
<el-button
|
||||
class="w-full mt-4"
|
||||
@click="useUserStoreHook().SET_CURRENTPAGE(0)"
|
||||
>
|
||||
{{ t("login.back") }}
|
||||
</el-button>
|
||||
</Motion>
|
||||
</template>
|
||||
@ -1,189 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { ref, reactive } from "vue";
|
||||
import Motion from "../utils/motion";
|
||||
import { updateRules } from "../utils/rule";
|
||||
import { message } from "@pureadmin/components";
|
||||
import type { FormInstance } from "element-plus";
|
||||
import { useVerifyCode } from "../utils/verifyCode";
|
||||
import { $t, transformI18n } from "/@/plugins/i18n";
|
||||
import { useUserStoreHook } from "/@/store/modules/user";
|
||||
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
|
||||
|
||||
const { t } = useI18n();
|
||||
const checked = ref(false);
|
||||
const loading = ref(false);
|
||||
const ruleForm = reactive({
|
||||
username: "",
|
||||
phone: "",
|
||||
verifyCode: "",
|
||||
password: "",
|
||||
repeatPassword: ""
|
||||
});
|
||||
const ruleFormRef = ref<FormInstance>();
|
||||
const { isDisabled, text } = useVerifyCode();
|
||||
const repeatPasswordRule = [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error(transformI18n($t("login.passwordSureReg"))));
|
||||
} else if (ruleForm.password !== value) {
|
||||
callback(new Error(transformI18n($t("login.passwordDifferentReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
];
|
||||
|
||||
const onUpdate = async (formEl: FormInstance | undefined) => {
|
||||
loading.value = true;
|
||||
if (!formEl) return;
|
||||
await formEl.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
if (checked.value) {
|
||||
// 模拟请求，需根据实际开发进行修改
|
||||
setTimeout(() => {
|
||||
message.success(transformI18n($t("login.registerSuccess")));
|
||||
loading.value = false;
|
||||
}, 2000);
|
||||
} else {
|
||||
loading.value = false;
|
||||
message.warning(transformI18n($t("login.tickPrivacy")));
|
||||
}
|
||||
} else {
|
||||
loading.value = false;
|
||||
return fields;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
function onBack() {
|
||||
useVerifyCode().end();
|
||||
useUserStoreHook().SET_CURRENTPAGE(0);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
:model="ruleForm"
|
||||
:rules="updateRules"
|
||||
size="large"
|
||||
>
|
||||
<Motion>
|
||||
<el-form-item
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: transformI18n($t('login.usernameReg')),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]"
|
||||
prop="username"
|
||||
>
|
||||
<el-input
|
||||
clearable
|
||||
v-model="ruleForm.username"
|
||||
:placeholder="t('login.username')"
|
||||
:prefix-icon="useRenderIcon('user')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="100">
|
||||
<el-form-item prop="phone">
|
||||
<el-input
|
||||
clearable
|
||||
v-model="ruleForm.phone"
|
||||
:placeholder="t('login.phone')"
|
||||
:prefix-icon="useRenderIcon('iphone')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="150">
|
||||
<el-form-item prop="verifyCode">
|
||||
<div class="w-full flex justify-between">
|
||||
<el-input
|
||||
clearable
|
||||
v-model="ruleForm.verifyCode"
|
||||
:placeholder="t('login.smsVerifyCode')"
|
||||
:prefix-icon="
|
||||
useRenderIcon('ri:shield-keyhole-line', { online: true })
|
||||
"
|
||||
/>
|
||||
<el-button
|
||||
:disabled="isDisabled"
|
||||
class="ml-2"
|
||||
@click="useVerifyCode().start(ruleFormRef, 'phone')"
|
||||
>
|
||||
{{
|
||||
text.length > 0
|
||||
? text + t("login.info")
|
||||
: t("login.getVerifyCode")
|
||||
}}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="200">
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
clearable
|
||||
show-password
|
||||
v-model="ruleForm.password"
|
||||
:placeholder="t('login.password')"
|
||||
:prefix-icon="useRenderIcon('lock')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="250">
|
||||
<el-form-item :rules="repeatPasswordRule" prop="repeatPassword">
|
||||
<el-input
|
||||
clearable
|
||||
show-password
|
||||
v-model="ruleForm.repeatPassword"
|
||||
:placeholder="t('login.sure')"
|
||||
:prefix-icon="useRenderIcon('lock')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="300">
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="checked">
|
||||
{{ t("login.readAccept") }}
|
||||
</el-checkbox>
|
||||
<el-button link type="primary">
|
||||
{{ t("login.privacyPolicy") }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="350">
|
||||
<el-form-item>
|
||||
<el-button
|
||||
class="w-full"
|
||||
size="default"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="onUpdate(ruleFormRef)"
|
||||
>
|
||||
{{ t("login.definite") }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="400">
|
||||
<el-form-item>
|
||||
<el-button class="w-full" size="default" @click="onBack">
|
||||
{{ t("login.back") }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
</el-form>
|
||||
</template>
|
||||
@ -1,151 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { ref, reactive } from "vue";
|
||||
import Motion from "../utils/motion";
|
||||
import { updateRules } from "../utils/rule";
|
||||
import { message } from "@pureadmin/components";
|
||||
import type { FormInstance } from "element-plus";
|
||||
import { useVerifyCode } from "../utils/verifyCode";
|
||||
import { $t, transformI18n } from "/@/plugins/i18n";
|
||||
import { useUserStoreHook } from "/@/store/modules/user";
|
||||
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
|
||||
|
||||
const { t } = useI18n();
|
||||
const loading = ref(false);
|
||||
const ruleForm = reactive({
|
||||
phone: "",
|
||||
verifyCode: "",
|
||||
password: "",
|
||||
repeatPassword: ""
|
||||
});
|
||||
const ruleFormRef = ref<FormInstance>();
|
||||
const { isDisabled, text } = useVerifyCode();
|
||||
const repeatPasswordRule = [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error(transformI18n($t("login.passwordSureReg"))));
|
||||
} else if (ruleForm.password !== value) {
|
||||
callback(new Error(transformI18n($t("login.passwordDifferentReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
];
|
||||
|
||||
const onUpdate = async (formEl: FormInstance | undefined) => {
|
||||
loading.value = true;
|
||||
if (!formEl) return;
|
||||
await formEl.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
// 模拟请求，需根据实际开发进行修改
|
||||
setTimeout(() => {
|
||||
message.success(transformI18n($t("login.passwordUpdateReg")));
|
||||
loading.value = false;
|
||||
}, 2000);
|
||||
} else {
|
||||
loading.value = false;
|
||||
return fields;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
function onBack() {
|
||||
useVerifyCode().end();
|
||||
useUserStoreHook().SET_CURRENTPAGE(0);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
:model="ruleForm"
|
||||
:rules="updateRules"
|
||||
size="large"
|
||||
>
|
||||
<Motion>
|
||||
<el-form-item prop="phone">
|
||||
<el-input
|
||||
clearable
|
||||
v-model="ruleForm.phone"
|
||||
:placeholder="t('login.phone')"
|
||||
:prefix-icon="useRenderIcon('iphone')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="100">
|
||||
<el-form-item prop="verifyCode">
|
||||
<div class="w-full flex justify-between">
|
||||
<el-input
|
||||
clearable
|
||||
v-model="ruleForm.verifyCode"
|
||||
:placeholder="t('login.smsVerifyCode')"
|
||||
:prefix-icon="
|
||||
useRenderIcon('ri:shield-keyhole-line', { online: true })
|
||||
"
|
||||
/>
|
||||
<el-button
|
||||
:disabled="isDisabled"
|
||||
class="ml-2"
|
||||
@click="useVerifyCode().start(ruleFormRef, 'phone')"
|
||||
>
|
||||
{{
|
||||
text.length > 0
|
||||
? text + t("login.info")
|
||||
: t("login.getVerifyCode")
|
||||
}}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="150">
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
clearable
|
||||
show-password
|
||||
v-model="ruleForm.password"
|
||||
:placeholder="t('login.password')"
|
||||
:prefix-icon="useRenderIcon('lock')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="200">
|
||||
<el-form-item :rules="repeatPasswordRule" prop="repeatPassword">
|
||||
<el-input
|
||||
clearable
|
||||
show-password
|
||||
v-model="ruleForm.repeatPassword"
|
||||
:placeholder="t('login.sure')"
|
||||
:prefix-icon="useRenderIcon('lock')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="250">
|
||||
<el-form-item>
|
||||
<el-button
|
||||
class="w-full"
|
||||
size="default"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="onUpdate(ruleFormRef)"
|
||||
>
|
||||
{{ t("login.definite") }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="300">
|
||||
<el-form-item>
|
||||
<el-button class="w-full" size="default" @click="onBack">
|
||||
{{ t("login.back") }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
</el-form>
|
||||
</template>
|
||||
@ -3,22 +3,15 @@ import { useI18n } from "vue-i18n";
|
||||
import Motion from "./utils/motion";
|
||||
import { useRouter } from "vue-router";
|
||||
import { loginRules } from "./utils/rule";
|
||||
import phone from "./components/phone.vue";
|
||||
import qrCode from "./components/qrCode.vue";
|
||||
import regist from "./components/regist.vue";
|
||||
import update from "./components/update.vue";
|
||||
import { ref, reactive, toRaw } from "vue";
|
||||
import { initRouter } from "/@/router/utils";
|
||||
import { useNav } from "/@/layout/hooks/useNav";
|
||||
import { message } from "@pureadmin/components";
|
||||
import type { FormInstance } from "element-plus";
|
||||
import { storageSession } from "@pureadmin/utils";
|
||||
import { $t, transformI18n } from "/@/plugins/i18n";
|
||||
import { operates, thirdParty } from "./utils/enums";
|
||||
import { useLayout } from "/@/layout/hooks/useLayout";
|
||||
import { useUserStoreHook } from "/@/store/modules/user";
|
||||
import { bg, avatar, illustration } from "./utils/static";
|
||||
import { ref, reactive, watch, computed, toRaw } from "vue";
|
||||
import { ReImageVerify } from "/@/components/ReImageVerify";
|
||||
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
|
||||
import { useTranslationLang } from "/@/layout/hooks/useTranslationLang";
|
||||
import { useDataThemeChange } from "/@/layout/hooks/useDataThemeChange";
|
||||
@ -30,14 +23,9 @@ import globalization from "/@/assets/svg/globalization.svg?component";
|
||||
defineOptions({
|
||||
name: "Login"
|
||||
});
|
||||
const imgCode = ref("");
|
||||
const router = useRouter();
|
||||
const loading = ref(false);
|
||||
const checked = ref(false);
|
||||
const ruleFormRef = ref<FormInstance>();
|
||||
const currentPage = computed(() => {
|
||||
return useUserStoreHook().currentPage;
|
||||
});
|
||||
|
||||
const { initStorage } = useLayout();
|
||||
initStorage();
|
||||
@ -49,8 +37,7 @@ const { locale, translationCh, translationEn } = useTranslationLang();
|
||||
|
||||
const ruleForm = reactive({
|
||||
username: "admin",
|
||||
password: "admin123",
|
||||
verifyCode: ""
|
||||
password: "admin123"
|
||||
});
|
||||
|
||||
const onLogin = async (formEl: FormInstance | undefined) => {
|
||||
@ -76,14 +63,6 @@ const onLogin = async (formEl: FormInstance | undefined) => {
|
||||
});
|
||||
};
|
||||
|
||||
function onHandle(value) {
|
||||
useUserStoreHook().SET_CURRENTPAGE(value);
|
||||
}
|
||||
|
||||
watch(imgCode, value => {
|
||||
useUserStoreHook().SET_VERIFYCODE(value);
|
||||
});
|
||||
|
||||
dataThemeChange();
|
||||
</script>
|
||||
|
||||
@ -144,7 +123,6 @@ dataThemeChange();
|
||||
</Motion>
|
||||
|
||||
<el-form
|
||||
v-if="currentPage === 0"
|
||||
ref="ruleFormRef"
|
||||
:model="ruleForm"
|
||||
:rules="loginRules"
|
||||
@ -183,37 +161,7 @@ dataThemeChange();
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="200">
|
||||
<el-form-item prop="verifyCode">
|
||||
<el-input
|
||||
clearable
|
||||
v-model="ruleForm.verifyCode"
|
||||
:placeholder="t('login.verifyCode')"
|
||||
:prefix-icon="
|
||||
useRenderIcon('ri:shield-keyhole-line', { online: true })
|
||||
"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<ReImageVerify v-model:code="imgCode" />
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="250">
|
||||
<el-form-item>
|
||||
<div class="w-full h-[20px] flex justify-between items-center">
|
||||
<el-checkbox v-model="checked">
|
||||
{{ t("login.remember") }}
|
||||
</el-checkbox>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
@click="useUserStoreHook().SET_CURRENTPAGE(4)"
|
||||
>
|
||||
{{ t("login.forget") }}
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button
|
||||
class="w-full mt-4"
|
||||
size="default"
|
||||
@ -223,54 +171,8 @@ dataThemeChange();
|
||||
>
|
||||
{{ t("login.login") }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
<Motion :delay="300">
|
||||
<el-form-item>
|
||||
<div class="w-full h-[20px] flex justify-between items-center">
|
||||
<el-button
|
||||
v-for="(item, index) in operates"
|
||||
:key="index"
|
||||
class="w-full mt-4"
|
||||
size="default"
|
||||
@click="onHandle(index + 1)"
|
||||
>
|
||||
{{ t(item.title) }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
</el-form>
|
||||
|
||||
<Motion v-if="currentPage === 0" :delay="350">
|
||||
<el-form-item>
|
||||
<el-divider>
|
||||
<p class="text-gray-500 text-xs">{{ t("login.thirdLogin") }}</p>
|
||||
</el-divider>
|
||||
<div class="w-full flex justify-evenly">
|
||||
<span
|
||||
v-for="(item, index) in thirdParty"
|
||||
:key="index"
|
||||
:title="t(item.title)"
|
||||
>
|
||||
<IconifyIconOnline
|
||||
:icon="`ri:${item.icon}-fill`"
|
||||
width="20"
|
||||
class="cursor-pointer text-gray-500 hover:text-blue-400"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
<!-- 手机号登录 -->
|
||||
<phone v-if="currentPage === 1" />
|
||||
<!-- 二维码登录 -->
|
||||
<qrCode v-if="currentPage === 2" />
|
||||
<!-- 注册 -->
|
||||
<regist v-if="currentPage === 3" />
|
||||
<!-- 忘记密码 -->
|
||||
<update v-if="currentPage === 4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,34 +0,0 @@
|
||||
import { $t } from "/@/plugins/i18n";
|
||||
|
||||
const operates = [
|
||||
{
|
||||
title: $t("login.phoneLogin")
|
||||
},
|
||||
{
|
||||
title: $t("login.qRCodeLogin")
|
||||
},
|
||||
{
|
||||
title: $t("login.register")
|
||||
}
|
||||
];
|
||||
|
||||
const thirdParty = [
|
||||
{
|
||||
title: $t("login.weChatLogin"),
|
||||
icon: "wechat"
|
||||
},
|
||||
{
|
||||
title: $t("login.alipayLogin"),
|
||||
icon: "alipay"
|
||||
},
|
||||
{
|
||||
title: $t("login.qqLogin"),
|
||||
icon: "qq"
|
||||
},
|
||||
{
|
||||
title: $t("login.weiboLogin"),
|
||||
icon: "weibo"
|
||||
}
|
||||
];
|
||||
|
||||
export { operates, thirdParty };
|
||||
@ -1,11 +1,6 @@
|
||||
import { reactive } from "vue";
|
||||
import { isPhone } from "@pureadmin/utils";
|
||||
import type { FormRules } from "element-plus";
|
||||
import { $t, transformI18n } from "/@/plugins/i18n";
|
||||
import { useUserStoreHook } from "/@/store/modules/user";
|
||||
|
||||
/** 6位数字验证码正则 */
|
||||
export const REGEXP_SIX = /^\d{6}$/;
|
||||
|
||||
/** 密码正则（密码格式应为8-18位数字、字母、符号的任意两种组合） */
|
||||
export const REGEXP_PWD =
|
||||
@ -26,99 +21,7 @@ const loginRules = reactive(<FormRules>{
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
verifyCode: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error(transformI18n($t("login.verifyCodeReg"))));
|
||||
} else if (useUserStoreHook().verifyCode !== value) {
|
||||
callback(new Error(transformI18n($t("login.verifyCodeCorrectReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/** 手机登录校验 */
|
||||
const phoneRules = reactive(<FormRules>{
|
||||
phone: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error(transformI18n($t("login.phoneReg"))));
|
||||
} else if (!isPhone(value)) {
|
||||
callback(new Error(transformI18n($t("login.phoneCorrectReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
verifyCode: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error(transformI18n($t("login.verifyCodeReg"))));
|
||||
} else if (!REGEXP_SIX.test(value)) {
|
||||
callback(new Error(transformI18n($t("login.verifyCodeSixReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/** 忘记密码校验 */
|
||||
const updateRules = reactive(<FormRules>{
|
||||
phone: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error(transformI18n($t("login.phoneReg"))));
|
||||
} else if (!isPhone(value)) {
|
||||
callback(new Error(transformI18n($t("login.phoneCorrectReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
verifyCode: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error(transformI18n($t("login.verifyCodeReg"))));
|
||||
} else if (!REGEXP_SIX.test(value)) {
|
||||
callback(new Error(transformI18n($t("login.verifyCodeSixReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
password: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error(transformI18n($t("login.passwordReg"))));
|
||||
} else if (!REGEXP_PWD.test(value)) {
|
||||
callback(new Error(transformI18n($t("login.passwordRuleReg"))));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
export { loginRules, phoneRules, updateRules };
|
||||
export { loginRules };
|
||||
|
||||
@ -1,49 +0,0 @@
|
||||
import type { FormInstance, FormItemProp } from "element-plus";
|
||||
import { cloneDeep } from "lodash-unified";
|
||||
import { ref } from "vue";
|
||||
|
||||
const isDisabled = ref(false);
|
||||
const timer = ref(null);
|
||||
const text = ref("");
|
||||
|
||||
export const useVerifyCode = () => {
|
||||
const start = async (
|
||||
formEl: FormInstance | undefined,
|
||||
props: FormItemProp,
|
||||
time = 60
|
||||
) => {
|
||||
if (!formEl) return;
|
||||
const initTime = cloneDeep(time);
|
||||
await formEl.validateField(props, isValid => {
|
||||
if (isValid) {
|
||||
clearInterval(timer.value);
|
||||
timer.value = setInterval(() => {
|
||||
if (time > 0) {
|
||||
text.value = `${time}`;
|
||||
isDisabled.value = true;
|
||||
time -= 1;
|
||||
} else {
|
||||
text.value = "";
|
||||
isDisabled.value = false;
|
||||
clearInterval(timer.value);
|
||||
time = initTime;
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const end = () => {
|
||||
text.value = "";
|
||||
isDisabled.value = false;
|
||||
clearInterval(timer.value);
|
||||
};
|
||||
|
||||
return {
|
||||
isDisabled,
|
||||
timer,
|
||||
text,
|
||||
start,
|
||||
end
|
||||
};
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user