From 8d7bb4ac830444afde480a588e99952105ea8ede Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期四, 22 二月 2024 09:19:58 +0800
Subject: [PATCH] mrshi
---
platform/src/views/login.vue | 496 +++++++++++++++++++++++++++++++++---------------------
1 files changed, 300 insertions(+), 196 deletions(-)
diff --git a/platform/src/views/login.vue b/platform/src/views/login.vue
index 765944c..b459972 100644
--- a/platform/src/views/login.vue
+++ b/platform/src/views/login.vue
@@ -1,210 +1,314 @@
<template>
- <div class="wrap">
- <div class="introduce">
- <h2>浜戞槗淇濆鎴锋湇鍔＄郴缁�</h2>
- </div>
- <div class="login">
- <h1>绯荤粺鐧诲綍 / LOGIN IN</h1>
- <div class="info-input">
- <el-input v-model="username" placeholder="璇疯緭鍏ョ敤鎴峰悕" prefix-icon="el-icon-user-solid" maxlength="50" v-trim/>
- <el-input v-model="password" placeholder="璇疯緭鍏ュ瘑鐮�" type="password" prefix-icon="eva-icon-password" maxlength="30" show-password/>
- <div class="captcha-input">
- <el-input v-model="captcha.value" placeholder="鍥剧墖楠岃瘉鐮�" prefix-icon="eva-icon-shield" maxlength="4" @keypress.enter.native="login"/>
- <img v-if="!captcha.loading" :src="captcha.uri" @click="refreshCaptcha">
- <span v-else><i class="el-icon-loading"></i></span>
+ <div class="wrap">
+ <div class="introduce">
+ <h2>棰勯�夋竻鍗曟煡璇㈢郴缁�</h2>
</div>
- </div>
- <el-button :loading="loading" @click="login">鐧� 褰�</el-button>
+ <div class="login">
+ <h1>绯荤粺鐧诲綍 / LOGIN IN</h1>
+ <div class="login_type">
+ <div :class="active === 1 ? 'login_type_item active' : 'login_type_item'" @click="handleClick(1)">璐﹀彿鐧诲綍</div>
+ <div :class="active === 2 ? 'login_type_item active' : 'login_type_item'" @click="handleClick(2)">鎵嬫満鐧诲綍</div>
+ </div>
+ <div class="info-input">
+ <template v-if="active === 1">
+ <el-input v-model="username" placeholder="璇疯緭鍏ョ敤鎴峰悕" prefix-icon="el-icon-user-solid" maxlength="50" v-trim/>
+ <el-input v-model="password" placeholder="璇疯緭鍏ュ瘑鐮�" type="password" prefix-icon="eva-icon-password" maxlength="30" show-password/>
+ <div class="captcha-input">
+ <el-input v-model="captcha.value" placeholder="鍥剧墖楠岃瘉鐮�" prefix-icon="eva-icon-shield" maxlength="4" @keypress.enter.native="login"/>
+ <img v-if="!captcha.loading" :src="captcha.uri" @click="refreshCaptcha">
+ <span v-else><i class="el-icon-loading"></i></span>
+ </div>
+ </template>
+ <template v-else>
+ <el-input v-model="phone" placeholder="璇疯緭鍏ユ墜鏈哄彿" prefix-icon="el-icon-phone" maxlength="11" v-trim/>
+ <div class="captcha-input">
+ <el-input v-model="code" placeholder="璇疯緭鍏ラ獙璇佺爜" prefix-icon="eva-icon-shield" maxlength="4" @keypress.enter.native="login" v-trim/>
+ <el-button type="primary" style="width: 120px; margin-left: 20px;" @click="send" v-if="num === 0">鍙戦�侀獙璇佺爜</el-button>
+ <el-button type="primary" style="width: 120px; margin-left: 20px;" v-else>{{num}}</el-button>
+ </div>
+ </template>
+ </div>
+ <el-button :loading="loading" @click="login">鐧� 褰�</el-button>
+ </div>
</div>
- </div>
</template>
<script>
-import { mapMutations } from 'vuex'
-import { getCaptcha, loginByPassword } from '@/api/system/common'
+ import { mapMutations } from 'vuex'
+ import { getCaptcha, loginByPassword, loginByPhone } from '@/api/system/common'
+ import { sendSms } from '@/api/business/smsEmail'
-export default {
- name: 'Login',
- data () {
- return {
- loading: false,
- username: '',
- password: '',
- // 楠岃瘉鐮�
- captcha: {
- loading: false,
- value: '',
- uuid: '',
- uri: ''
- }
+ export default {
+ name: 'Login',
+ data () {
+ return {
+ loading: false,
+ username: '',
+ password: '',
+ phone: '',
+ code: '',
+ active: 1,
+ num: 0,
+ timer: null,
+ // 楠岃瘉鐮�
+ captcha: {
+ loading: false,
+ value: '',
+ uuid: '',
+ uri: ''
+ }
+ }
+ },
+ methods: {
+ ...mapMutations(['setUserInfo']),
+ handleClick(e) {
+ this.active = e
+ this.username = ''
+ this.password = ''
+ this.phone = ''
+ this.code = ''
+ },
+ send() {
+ if (!this.phone) {
+ this.$message.warning('璇峰厛杈撳叆鎵嬫満鍙�')
+ return
+ }
+ var reg = /^1[3456789]\d{9}$/;
+ if (!reg.test(this.phone)) {
+ this.$message.warning('鎵嬫満鍙蜂笉鍚堟硶')
+ return
+ }
+ sendSms({
+ phone: this.phone
+ }).then(res => {
+ this.num = 60
+ this.setTimer()
+ })
+ },
+ setTimer () {
+ this.timer = setInterval(() => {
+ if (this.num === 0) {
+ this.num = 0
+ clearInterval(this.timer)
+ this.timer = null
+ return
+ }
+ this.num -= 1
+ }, 1000)
+ },
+ // 鐧诲綍
+ login () {
+ if (this.loading) {
+ return
+ }
+ if (this.active === 1) {
+ if (!this.__check()) {
+ return
+ }
+ this.loading = true
+ loginByPassword({
+ username: this.username.trim(),
+ password: this.password,
+ code: this.captcha.value.trim(),
+ uuid: this.captcha.uuid
+ })
+ .then(() => {
+ window.location.href = process.env.VUE_APP_CONTEXT_PATH
+ })
+ .catch(e => {
+ this.refreshCaptcha()
+ this.$tip.apiFailed(e)
+ })
+ .finally(() => {
+ this.loading = false
+ })
+ } else {
+ if (!this.phone) {
+ this.$tip.error('璇疯緭鍏ユ墜鏈哄彿')
+ return
+ }
+ if (!this.code) {
+ this.$tip.error('璇疯緭鍏ラ獙璇佺爜')
+ return
+ }
+ this.loading = true
+ loginByPhone({
+ phone: this.phone,
+ code: this.code.trim()
+ })
+ .then(() => {
+ window.location.href = process.env.VUE_APP_CONTEXT_PATH
+ })
+ .catch(e => {
+ this.$tip.apiFailed(e)
+ })
+ .finally(() => {
+ this.loading = false
+ })
+ }
+ },
+ // 鍒锋柊楠岃瘉鐮�
+ refreshCaptcha () {
+ this.captcha.loading = true
+ getCaptcha()
+ .then(data => {
+ this.captcha.uri = data.image
+ this.captcha.uuid = data.uuid
+ })
+ .catch(e => {
+ this.$tip.apiFailed(e)
+ })
+ .finally(() => {
+ setTimeout(() => {
+ this.captcha.loading = false
+ }, 150)
+ })
+ },
+ // 鐧诲綍鍓嶉獙璇�
+ __check () {
+ if (this.username.trim() === '') {
+ this.$tip.error('璇疯緭鍏ョ敤鎴峰悕')
+ return false
+ }
+ if (this.password === '') {
+ this.$tip.error('璇疯緭鍏ュ瘑鐮�')
+ return false
+ }
+ if (this.captcha.value.trim() === '') {
+ this.$tip.error('璇疯緭鍏ュ浘鐗囬獙璇佺爜')
+ return false
+ }
+ return true
+ }
+ },
+ created () {
+ this.refreshCaptcha()
+ }
}
- },
- methods: {
- ...mapMutations(['setUserInfo']),
- // 鐧诲綍
- login () {
- if (this.loading) {
- return
- }
- if (!this.__check()) {
- return
- }
- this.loading = true
- loginByPassword({
- username: this.username.trim(),
- password: this.password,
- code: this.captcha.value.trim(),
- uuid: this.captcha.uuid
- })
- .then(() => {
- window.location.href = process.env.VUE_APP_CONTEXT_PATH
- })
- .catch(e => {
- this.refreshCaptcha()
- this.$tip.apiFailed(e)
- })
- .finally(() => {
- this.loading = false
- })
- },
- // 鍒锋柊楠岃瘉鐮�
- refreshCaptcha () {
- this.captcha.loading = true
- getCaptcha()
- .then(data => {
- this.captcha.uri = data.image
- this.captcha.uuid = data.uuid
- })
- .catch(e => {
- this.$tip.apiFailed(e)
- })
- .finally(() => {
- setTimeout(() => {
- this.captcha.loading = false
- }, 150)
- })
- },
- // 鐧诲綍鍓嶉獙璇�
- __check () {
- if (this.username.trim() === '') {
- this.$tip.error('璇疯緭鍏ョ敤鎴峰悕')
- return false
- }
- if (this.password === '') {
- this.$tip.error('璇疯緭鍏ュ瘑鐮�')
- return false
- }
- if (this.captcha.value.trim() === '') {
- this.$tip.error('璇疯緭鍏ュ浘鐗囬獙璇佺爜')
- return false
- }
- return true
- }
- },
- created () {
- this.refreshCaptcha()
- }
-}
</script>
<style scoped lang="scss">
-@import "@/assets/style/variables.scss";
-$input-gap: 30px;
-.wrap {
- display: flex;
- width: 100%;
- height: 100vh;
- background-image: url("../assets/images/login.jpg");
- background-repeat: no-repeat;
- background-size: auto 180%;
- background-clip: content-box;
- background-position: center;
- // 宸﹁竟浠嬬粛
- .introduce {
- padding-left: 10%;
- width: 100%;
- height: 100%;
- box-sizing: border-box;
- color: #fff;
- background: rgba(0, 0, 0, 0.4);
- display: flex;
- flex-direction: column;
- justify-content: center;
- h2 {
- font-size:34px;
- font-style: italic;
- font-weight: 900;
- margin-top: 50px;
- }
- h3 {
- font-size: 49px;
- font-weight: 300;
- margin: 25px 0;
- }
- }
- // 鍙宠竟鐧诲綍
- .login {
- height: 100%;
- width: 38%;
- max-width: 560px;
- min-width: 460px;
- flex-shrink: 0;
- text-align: center;
- background: #fff;
- padding: 0 80px;
- display: flex;
- flex-direction: column;
- justify-content: center;
- box-sizing: border-box;
- h1 {
- font-size: 28px;
- font-weight: 500;
- }
- .info-input {
- margin-top: $input-gap;
- margin-bottom: 60px;
- /deep/ .el-input {
- margin-top: 30px;
- .el-input__inner {
- height: 50px;
- background: #F9F9F9;
- border: 1px solid transparent;
- &:focus {
- border: 1px solid $primary-color;
- }
- }
- }
- }
- // 楠岃瘉鐮佽緭鍏�
- .captcha-input {
- display: flex;
- margin-top: $input-gap;
- height: 50px;
- .el-input {
- width: 100%;
- margin-top: 0;
- }
- span, img {
- width: 45%;
- height: 100%;
- flex-shrink: 0;
- margin-left: 16px;
- }
- span {
+ @import "@/assets/style/variables.scss";
+ $input-gap: 30px;
+ .wrap {
display: flex;
- align-items: center;
- justify-content: center;
- background: #f7f7f7;
- border-radius: 8px;
- }
+ width: 100%;
+ height: 100vh;
+ background-image: url("../assets/images/login.jpg");
+ background-repeat: no-repeat;
+ background-size: auto 180%;
+ background-clip: content-box;
+ background-position: center;
+ // 宸﹁竟浠嬬粛
+ .introduce {
+ padding-left: 10%;
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ color: #fff;
+ background: rgba(0, 0, 0, 0.4);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ h2 {
+ font-size:34px;
+ font-style: italic;
+ font-weight: 900;
+ margin-top: 50px;
+ }
+ h3 {
+ font-size: 49px;
+ font-weight: 300;
+ margin: 25px 0;
+ }
+ }
+ // 鍙宠竟鐧诲綍
+ .login {
+ height: 100%;
+ width: 38%;
+ max-width: 560px;
+ min-width: 460px;
+ flex-shrink: 0;
+ text-align: center;
+ background: #fff;
+ padding: 0 80px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-sizing: border-box;
+ h1 {
+ font-size: 28px;
+ font-weight: 500;
+ }
+ .login_type {
+ width: 100%;
+ height: 50px;
+ display: flex;
+ align-items: center;
+ margin: 20px 0;
+ .active {
+ box-sizing: border-box;
+ color: rgba(64, 106, 255, 0.996) !important;
+ border-bottom: 1px solid rgba(64, 106, 255, 0.996) !important;
+ }
+ .login_type_item {
+ flex: 1;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: black;
+ font-size: 14px;
+ cursor: pointer;
+ }
+ }
+ .info-input {
+ margin-bottom: 60px;
+ /deep/ .el-input {
+ margin-top: 30px;
+ &:first-child {
+ margin-top: 0 !important;
+ }
+ .el-input__inner {
+ height: 50px;
+ background: #F9F9F9;
+ border: 1px solid transparent;
+ &:focus {
+ border: 1px solid $primary-color;
+ }
+ }
+ }
+ }
+ // 楠岃瘉鐮佽緭鍏�
+ .captcha-input {
+ display: flex;
+ margin-top: $input-gap;
+ height: 50px;
+ .el-input {
+ width: 100%;
+ margin-top: 0;
+ }
+ span, img {
+ width: 45%;
+ height: 100%;
+ flex-shrink: 0;
+ margin-left: 16px;
+ }
+ span {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: #f7f7f7;
+ border-radius: 8px;
+ }
+ }
+ .el-button {
+ height: 50px;
+ width: 100%;
+ color: #fff;
+ font-size: 16px;
+ background: linear-gradient(130deg, $primary-color + 20 0%, $primary-color - 20 100%);
+ }
+ }
}
- .el-button {
- height: 50px;
- width: 100%;
- color: #fff;
- font-size: 16px;
- background: linear-gradient(130deg, $primary-color + 20 0%, $primary-color - 20 100%);
- }
- }
-}
</style>
--
Gitblit v1.9.3