From 09da100729793848bc01b51f7b05ca3f1e7ec64f Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期四, 20 六月 2024 14:05:35 +0800
Subject: [PATCH] 提交一把
---
company/src/views/login.vue | 419 +++++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 291 insertions(+), 128 deletions(-)
diff --git a/company/src/views/login.vue b/company/src/views/login.vue
index 03d6539..9faf637 100644
--- a/company/src/views/login.vue
+++ b/company/src/views/login.vue
@@ -1,35 +1,85 @@
<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>{{systemTitle}}</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" @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>
+ <div style="text-align: left;margin-bottom: 15px;font-size: 14px">
+ <el-checkbox :true-label="1" :false-label="0" v-model="readed"/>
+ 鎴戝凡闃呰鍜屽悓鎰忋��<span @click="agreeType=0;title1='鏈嶅姟鍗忚';visible1=true" style="color: dodgerblue;cursor: pointer">鏈嶅姟鍗忚</span>銆嬪拰
+ 銆�<span @click="agreeType=1;title1='闅愮鍗忚';visible1=true" style="color: dodgerblue;cursor: pointer">闅愮鍗忚</span>銆�
+ </div>
+ <el-button :loading="loading" @click="login">鐧� 褰�</el-button>
+ </div>
+ <el-dialog
+ class="center-title"
+ :title="title1"
+ width="70%"
+ height="70%"
+ text="鐢ㄦ埛鍗忚"
+ :visible.sync="visible1"
+ >
+ <div class="agree-list" v-if="agreeType==0" v-html="agreement0">
+ </div>
+ <div class="agree-list" v-else v-html="agreement1">
+ </div>
+ <template v-slot:footer>
+ <el-button type="primary" @click="readed=1;visible1=false">鍚屾剰</el-button>
+ <el-button @click="visible1=false">杩斿洖</el-button>
+ </template>
+ </el-dialog>
</div>
- </div>
-</template>
+</template>
<script>
import { mapMutations } from 'vuex'
-import { getCaptcha, loginByPassword } from '@/api/system/common'
+import { getCaptcha, loginByPassword, loginByPhone } from '@/api/system/common'
+import { sendSms } from '@/api/business/smsEmail'
+import { getAgreement } from '@/api/system/dict'
export default {
name: 'Login',
data () {
return {
+ title1:'鏈嶅姟鍗忚',
+ systemTitle: process.env.VUE_APP_SYSTEM_TITLE,
loading: false,
username: '',
password: '',
+ phone: '',
+ visible1:false,
+ code: '',
+ readed: 0,
+ agreeType:'',
+ active: 1,
+ num: 0,
+ timer: null,
+ agreement0: '杩欐槸鏈嶅姟鍗忚',
+ agreement1: '杩欐槸闅愮鍗忚',
// 楠岃瘉鐮�
captcha: {
loading: false,
@@ -41,31 +91,103 @@
},
methods: {
...mapMutations(['setUserInfo']),
+ handleClick (e) {
+ this.active = e
+ this.username = ''
+ this.password = ''
+ this.phone = ''
+ this.code = ''
+ },
+ getAgree () {
+ getAgreement({}).then(res => {
+ if (res && res.length >= 2) {
+ this.agreement0 = res[0]
+ this.agreement1 = res[1]
+ }
+ })
+ },
+ 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.__check()) {
+ if (this.readed != 1) {
+ this.$message.error('璇峰厛闃呰鍜屽悓鎰忋�婃湇鍔″崗璁�嬪拰銆婇殣绉佸崗璁��')
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
+ 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
})
- .catch(e => {
- this.refreshCaptcha()
- this.$tip.apiFailed(e)
+ .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()
})
- .finally(() => {
- this.loading = false
- })
+ .then(() => {
+ window.location.href = process.env.VUE_APP_CONTEXT_PATH
+ })
+ .catch(e => {
+ this.$tip.apiFailed(e)
+ })
+ .finally(() => {
+ this.loading = false
+ })
+ }
},
// 鍒锋柊楠岃瘉鐮�
refreshCaptcha () {
@@ -103,108 +225,149 @@
},
created () {
this.refreshCaptcha()
+ this.getAgree()
+ document.title = this.systemTitle
}
}
</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;
+ @import "@/assets/style/variables.scss";
+ .agree-list{
+ height: 550px;
+ //max-height: 50%;
+ overflow: auto;
}
- 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 {
+ $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: 15px;
+ /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;
+ ::v-deep .center-title .el-dialog__title {
+ text-align: center;
width: 100%;
- color: #fff;
- font-size: 16px;
- background: linear-gradient(130deg, $primary-color + 20 0%, $primary-color - 20 100%);
+ font-size: 18px;
+ font-weight: bold;
+
}
- }
-}
+ ::v-deep .el-dialog__header{
+ text-align: center;
+ }
</style>
--
Gitblit v1.9.3