xiaoxian521
2 years ago
20 changed files with 34 additions and 1375 deletions
-
33locales/en.yaml
-
33locales/zh-CN.yaml
-
2package.json
-
137pnpm-lock.yaml
-
7src/components/ReImageVerify/index.ts
-
85src/components/ReImageVerify/src/hooks.ts
-
46src/components/ReImageVerify/src/index.vue
-
7src/components/ReQrcode/index.ts
-
8src/components/ReQrcode/src/index.scss
-
262src/components/ReQrcode/src/index.tsx
-
12src/store/modules/user.ts
-
4src/style/sidebar.scss
-
106src/views/login/components/phone.vue
-
25src/views/login/components/qrCode.vue
-
189src/views/login/components/regist.vue
-
151src/views/login/components/update.vue
-
102src/views/login/index.vue
-
34src/views/login/utils/enums.ts
-
99src/views/login/utils/rule.ts
-
49src/views/login/utils/verifyCode.ts
@ -64,11 +64,9 @@ specifiers: |
|||||
postcss-scss: ^4.0.4 |
postcss-scss: ^4.0.4 |
||||
prettier: ^2.5.1 |
prettier: ^2.5.1 |
||||
pretty-quick: 3.1.1 |
pretty-quick: 3.1.1 |
||||
qrcode: ^1.5.1 |
|
||||
qs: ^6.11.0 |
qs: ^6.11.0 |
||||
resize-observer-polyfill: ^1.5.1 |
resize-observer-polyfill: ^1.5.1 |
||||
responsive-storage: ^2.1.0 |
responsive-storage: ^2.1.0 |
||||
rgb-hex: ^4.0.0 |
|
||||
rimraf: 3.0.2 |
rimraf: 3.0.2 |
||||
rollup-plugin-visualizer: ^5.8.1 |
rollup-plugin-visualizer: ^5.8.1 |
||||
sass: ^1.53.0 |
sass: ^1.53.0 |
||||
@ -120,11 +118,9 @@ dependencies: |
|||||
nprogress: 0.2.0 |
nprogress: 0.2.0 |
||||
path: 0.12.7 |
path: 0.12.7 |
||||
pinia: 2.0[email protected][email protected] |
pinia: 2.0[email protected][email protected] |
||||
qrcode: 1.5.1 |
|
||||
qs: 6.11.0 |
qs: 6.11.0 |
||||
resize-observer-polyfill: 1.5.1 |
resize-observer-polyfill: 1.5.1 |
||||
responsive-storage: 2.1.0 |
responsive-storage: 2.1.0 |
||||
rgb-hex: 4.0.0 |
|
||||
vue: 3.2.38 |
vue: 3.2.38 |
||||
vue-i18n: 9.2[email protected] |
vue-i18n: 9.2[email protected] |
||||
vue-router: 4.1[email protected] |
vue-router: 4.1[email protected] |
||||
@ -2167,6 +2163,7 @@ packages: |
|||||
integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ== |
integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ== |
||||
} |
} |
||||
engines: { node: ">=8" } |
engines: { node: ">=8" } |
||||
|
dev: true |
||||
|
|
||||
/ansi-styles/3.2.1: |
/ansi-styles/3.2.1: |
||||
resolution: |
resolution: |
||||
@ -2186,6 +2183,7 @@ packages: |
|||||
engines: { node: ">=8" } |
engines: { node: ">=8" } |
||||
dependencies: |
dependencies: |
||||
color-convert: 2.0.1 |
color-convert: 2.0.1 |
||||
|
dev: true |
||||
|
|
||||
/anymatch/3.1.2: |
/anymatch/3.1.2: |
||||
resolution: |
resolution: |
||||
@ -2445,6 +2443,7 @@ packages: |
|||||
integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg== |
integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg== |
||||
} |
} |
||||
engines: { node: ">=6" } |
engines: { node: ">=6" } |
||||
|
dev: true |
||||
|
|
||||
/camelcase/6.3.0: |
/camelcase/6.3.0: |
||||
resolution: |
resolution: |
||||
@ -2554,17 +2553,6 @@ packages: |
|||||
string-width: 4.2.3 |
string-width: 4.2.3 |
||||
dev: true |
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: |
/cliui/7.0.4: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
@ -2601,6 +2589,7 @@ packages: |
|||||
engines: { node: ">=7.0.0" } |
engines: { node: ">=7.0.0" } |
||||
dependencies: |
dependencies: |
||||
color-name: 1.1.4 |
color-name: 1.1.4 |
||||
|
dev: true |
||||
|
|
||||
/color-name/1.1.3: |
/color-name/1.1.3: |
||||
resolution: |
resolution: |
||||
@ -2614,6 +2603,7 @@ packages: |
|||||
{ |
{ |
||||
integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== |
integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== |
||||
} |
} |
||||
|
dev: true |
||||
|
|
||||
/color-string/1.9.1: |
/color-string/1.9.1: |
||||
resolution: |
resolution: |
||||
@ -3035,6 +3025,7 @@ packages: |
|||||
integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA== |
integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA== |
||||
} |
} |
||||
engines: { node: ">=0.10.0" } |
engines: { node: ">=0.10.0" } |
||||
|
dev: true |
||||
|
|
||||
/deep-is/0.1.4: |
/deep-is/0.1.4: |
||||
resolution: |
resolution: |
||||
@ -3102,13 +3093,6 @@ packages: |
|||||
engines: { node: ">=0.3.1" } |
engines: { node: ">=0.3.1" } |
||||
dev: true |
dev: true |
||||
|
|
||||
/dijkstrajs/1.0.2: |
|
||||
resolution: |
|
||||
{ |
|
||||
integrity: sha512-QV6PMaHTCNmKSeP6QoXhVTw9snc9VD8MulTT0Bd99Pacp4SS1cjcrYPgBPmibqKVtMJJfqC6XvOXgPMEEPH/fg== |
|
||||
} |
|
||||
dev: false |
|
||||
|
|
||||
/dir-glob/3.0.1: |
/dir-glob/3.0.1: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
@ -3283,13 +3267,7 @@ packages: |
|||||
{ |
{ |
||||
integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A== |
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: |
/encodeurl/1.0.2: |
||||
resolution: |
resolution: |
||||
@ -4067,6 +4045,7 @@ packages: |
|||||
dependencies: |
dependencies: |
||||
locate-path: 5.0.0 |
locate-path: 5.0.0 |
||||
path-exists: 4.0.0 |
path-exists: 4.0.0 |
||||
|
dev: true |
||||
|
|
||||
/find-up/5.0.0: |
/find-up/5.0.0: |
||||
resolution: |
resolution: |
||||
@ -4203,6 +4182,7 @@ packages: |
|||||
integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg== |
integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg== |
||||
} |
} |
||||
engines: { node: 6.* || 8.* || >= 10.* } |
engines: { node: 6.* || 8.* || >= 10.* } |
||||
|
dev: true |
||||
|
|
||||
/get-intrinsic/1.1.2: |
/get-intrinsic/1.1.2: |
||||
resolution: |
resolution: |
||||
@ -4632,6 +4612,7 @@ packages: |
|||||
integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg== |
integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg== |
||||
} |
} |
||||
engines: { node: ">=8" } |
engines: { node: ">=8" } |
||||
|
dev: true |
||||
|
|
||||
/is-glob/4.0.3: |
/is-glob/4.0.3: |
||||
resolution: |
resolution: |
||||
@ -4956,6 +4937,7 @@ packages: |
|||||
engines: { node: ">=8" } |
engines: { node: ">=8" } |
||||
dependencies: |
dependencies: |
||||
p-locate: 4.1.0 |
p-locate: 4.1.0 |
||||
|
dev: true |
||||
|
|
||||
/locate-path/6.0.0: |
/locate-path/6.0.0: |
||||
resolution: |
resolution: |
||||
@ -5498,6 +5480,7 @@ packages: |
|||||
engines: { node: ">=6" } |
engines: { node: ">=6" } |
||||
dependencies: |
dependencies: |
||||
p-try: 2.2.0 |
p-try: 2.2.0 |
||||
|
dev: true |
||||
|
|
||||
/p-limit/3.1.0: |
/p-limit/3.1.0: |
||||
resolution: |
resolution: |
||||
@ -5517,6 +5500,7 @@ packages: |
|||||
engines: { node: ">=8" } |
engines: { node: ">=8" } |
||||
dependencies: |
dependencies: |
||||
p-limit: 2.3.0 |
p-limit: 2.3.0 |
||||
|
dev: true |
||||
|
|
||||
/p-locate/5.0.0: |
/p-locate/5.0.0: |
||||
resolution: |
resolution: |
||||
@ -5544,6 +5528,7 @@ packages: |
|||||
integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ== |
integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ== |
||||
} |
} |
||||
engines: { node: ">=6" } |
engines: { node: ">=6" } |
||||
|
dev: true |
||||
|
|
||||
/parent-module/1.0.1: |
/parent-module/1.0.1: |
||||
resolution: |
resolution: |
||||
@ -5582,6 +5567,7 @@ packages: |
|||||
integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w== |
integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w== |
||||
} |
} |
||||
engines: { node: ">=8" } |
engines: { node: ">=8" } |
||||
|
dev: true |
||||
|
|
||||
/path-is-absolute/1.0.1: |
/path-is-absolute/1.0.1: |
||||
resolution: |
resolution: |
||||
@ -5683,14 +5669,6 @@ packages: |
|||||
semver-compare: 1.0.0 |
semver-compare: 1.0.0 |
||||
dev: true |
dev: true |
||||
|
|
||||
/pngjs/5.0.0: |
|
||||
resolution: |
|
||||
{ |
|
||||
integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw== |
|
||||
} |
|
||||
engines: { node: ">=10.13.0" } |
|
||||
dev: false |
|
||||
|
|
||||
/popmotion/11.0.5: |
/popmotion/11.0.5: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
@ -6313,20 +6291,6 @@ packages: |
|||||
engines: { node: ">=0.6.0", teleport: ">=0.2.0" } |
engines: { node: ">=0.6.0", teleport: ">=0.2.0" } |
||||
dev: true |
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: |
/qs/6.11.0: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
@ -6448,6 +6412,7 @@ packages: |
|||||
integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q== |
integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q== |
||||
} |
} |
||||
engines: { node: ">=0.10.0" } |
engines: { node: ">=0.10.0" } |
||||
|
dev: true |
||||
|
|
||||
/require-from-string/2.0.2: |
/require-from-string/2.0.2: |
||||
resolution: |
resolution: |
||||
@ -6457,13 +6422,6 @@ packages: |
|||||
engines: { node: ">=0.10.0" } |
engines: { node: ">=0.10.0" } |
||||
dev: true |
dev: true |
||||
|
|
||||
/require-main-filename/2.0.0: |
|
||||
resolution: |
|
||||
{ |
|
||||
integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg== |
|
||||
} |
|
||||
dev: false |
|
||||
|
|
||||
/resize-observer-polyfill/1.5.1: |
/resize-observer-polyfill/1.5.1: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
@ -6542,14 +6500,6 @@ packages: |
|||||
} |
} |
||||
dev: true |
dev: true |
||||
|
|
||||
/rgb-hex/4.0.0: |
|
||||
resolution: |
|
||||
{ |
|
||||
integrity: sha512-Eg2ev5CiMBnQ9Gpflmqbwbso0CCdISqtVIow7OpYSLN1ULUv2jTB9YieS1DSSn/17AD7KkPWDPzSFzI4GSuu/Q== |
|
||||
} |
|
||||
engines: { node: ">=12" } |
|
||||
dev: false |
|
||||
|
|
||||
/rimraf/3.0.2: |
/rimraf/3.0.2: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
@ -6709,13 +6659,6 @@ packages: |
|||||
lru-cache: 6.0.0 |
lru-cache: 6.0.0 |
||||
dev: true |
dev: true |
||||
|
|
||||
/set-blocking/2.0.0: |
|
||||
resolution: |
|
||||
{ |
|
||||
integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw== |
|
||||
} |
|
||||
dev: false |
|
||||
|
|
||||
/shebang-command/2.0.0: |
/shebang-command/2.0.0: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
@ -6915,6 +6858,7 @@ packages: |
|||||
emoji-regex: 8.0.0 |
emoji-regex: 8.0.0 |
||||
is-fullwidth-code-point: 3.0.0 |
is-fullwidth-code-point: 3.0.0 |
||||
strip-ansi: 6.0.1 |
strip-ansi: 6.0.1 |
||||
|
dev: true |
||||
|
|
||||
/string_decoder/1.3.0: |
/string_decoder/1.3.0: |
||||
resolution: |
resolution: |
||||
@ -6945,6 +6889,7 @@ packages: |
|||||
engines: { node: ">=8" } |
engines: { node: ">=8" } |
||||
dependencies: |
dependencies: |
||||
ansi-regex: 5.0.1 |
ansi-regex: 5.0.1 |
||||
|
dev: true |
||||
|
|
||||
/strip-final-newline/2.0.0: |
/strip-final-newline/2.0.0: |
||||
resolution: |
resolution: |
||||
@ -7757,13 +7702,6 @@ packages: |
|||||
} |
} |
||||
dev: true |
dev: true |
||||
|
|
||||
/which-module/2.0.0: |
|
||||
resolution: |
|
||||
{ |
|
||||
integrity: sha512-B+enWhmw6cjfVC7kS8Pj9pCrKSc5txArRyaYGe088shv/FGWH+0Rjx/xPgtsWfsUtS27FkP697E4DDhgrgoc0Q== |
|
||||
} |
|
||||
dev: false |
|
||||
|
|
||||
/which/1.3.1: |
/which/1.3.1: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
@ -7803,6 +7741,7 @@ packages: |
|||||
ansi-styles: 4.3.0 |
ansi-styles: 4.3.0 |
||||
string-width: 4.2.3 |
string-width: 4.2.3 |
||||
strip-ansi: 6.0.1 |
strip-ansi: 6.0.1 |
||||
|
dev: true |
||||
|
|
||||
/wrap-ansi/7.0.0: |
/wrap-ansi/7.0.0: |
||||
resolution: |
resolution: |
||||
@ -7849,13 +7788,6 @@ packages: |
|||||
engines: { node: ">=0.4" } |
engines: { node: ">=0.4" } |
||||
dev: true |
dev: true |
||||
|
|
||||
/y18n/4.0.3: |
|
||||
resolution: |
|
||||
{ |
|
||||
integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ== |
|
||||
} |
|
||||
dev: false |
|
||||
|
|
||||
/y18n/5.0.8: |
/y18n/5.0.8: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
@ -7890,17 +7822,6 @@ packages: |
|||||
engines: { node: ">= 6" } |
engines: { node: ">= 6" } |
||||
dev: true |
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: |
/yargs-parser/20.2.9: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
@ -7917,26 +7838,6 @@ packages: |
|||||
engines: { node: ">=12" } |
engines: { node: ">=12" } |
||||
dev: true |
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: |
/yargs/17.5.1: |
||||
resolution: |
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> |
|
||||
</> |
|
||||
); |
|
||||
} |
|
||||
}); |
|
@ -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> |
|
@ -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,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 |
|
||||
}; |
|
||||
}; |
|
Write
Preview
Loading…
Cancel
Save
Reference in new issue