|
@@ -8,9 +8,9 @@
|
|
</div>
|
|
</div>
|
|
<div v-if="signInType === 'ding'">
|
|
<div v-if="signInType === 'ding'">
|
|
<h3 class="title">趣程后台管理系统</h3>
|
|
<h3 class="title">趣程后台管理系统</h3>
|
|
- <div id='login_container'/>
|
|
|
|
|
|
+ <div id='login_container' />
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
|
|
+
|
|
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" v-if="signInType === 'pwd'">
|
|
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" v-if="signInType === 'pwd'">
|
|
<h3 class="title">趣程后台管理系统</h3>
|
|
<h3 class="title">趣程后台管理系统</h3>
|
|
<el-form-item prop="phone">
|
|
<el-form-item prop="phone">
|
|
@@ -19,34 +19,30 @@
|
|
</el-input>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item prop="code">
|
|
<el-form-item prop="code">
|
|
- <el-input
|
|
|
|
- v-model="loginForm.code"
|
|
|
|
- auto-complete="on"
|
|
|
|
- placeholder="验证码"
|
|
|
|
- :maxlength="4"
|
|
|
|
- style="width: 63%"
|
|
|
|
- @keyup.enter.native="handleLogin"
|
|
|
|
- >
|
|
|
|
|
|
+ <el-input v-model="loginForm.code" auto-complete="on" placeholder="验证码" :maxlength="4" style="width: 63%"
|
|
|
|
+ @keyup.enter.native="handleLogin">
|
|
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
|
|
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
|
|
</el-input>
|
|
</el-input>
|
|
<div class="login-code">
|
|
<div class="login-code">
|
|
- <el-button style="width: 115px" :disabled="!loginForm.phone || getCodeBtText !== '获取验证码'" @click="getCodeHandle(loginForm.phone)">{{getCodeBtText}}</el-button>
|
|
|
|
|
|
+ <el-button style="width: 115px" :disabled="!loginForm.phone || getCodeBtText !== '获取验证码'"
|
|
|
|
+ @click="getCodeHandle(loginForm.phone)">{{ getCodeBtText }}</el-button>
|
|
</div>
|
|
</div>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住手机号</el-checkbox>
|
|
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住手机号</el-checkbox>
|
|
|
|
+ <div style="display: flex;justify-content: center; margin-bottom: 18px;">
|
|
|
|
+ <el-radio-group v-model="msgType">
|
|
|
|
+ <el-radio label="ding">钉钉验证码</el-radio>
|
|
|
|
+ <el-radio label="phone">手机验证码</el-radio>
|
|
|
|
+ </el-radio-group>
|
|
|
|
+ </div>
|
|
<el-form-item style="width:100%;">
|
|
<el-form-item style="width:100%;">
|
|
- <el-button
|
|
|
|
- :loading="loading"
|
|
|
|
- size="medium"
|
|
|
|
- type="primary"
|
|
|
|
- style="width:100%;"
|
|
|
|
- @click.native.prevent="handleLogin"
|
|
|
|
- >
|
|
|
|
|
|
+ <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
|
|
|
|
+ @click.native.prevent="handleLogin">
|
|
<span v-if="!loading">登 录</span>
|
|
<span v-if="!loading">登 录</span>
|
|
<span v-else>登 录 中...</span>
|
|
<span v-else>登 录 中...</span>
|
|
</el-button>
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
-
|
|
|
|
|
|
+
|
|
</el-form>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="companyList.length > 1" style="margin-bottom: 160px">
|
|
<div v-else-if="companyList.length > 1" style="margin-bottom: 160px">
|
|
@@ -54,10 +50,12 @@
|
|
<div class="login-form company-account">
|
|
<div class="login-form company-account">
|
|
<h3>请选择公司账户登录</h3>
|
|
<h3>请选择公司账户登录</h3>
|
|
<div class="choose-tableBlock">
|
|
<div class="choose-tableBlock">
|
|
- <div class="ac-tableLine" v-for="item in companyList" :key="item.companyId" @click="setCompanyHandle(item.companyId)">
|
|
|
|
- <div class="actname">{{item.companyInfo.companyName}}</div>
|
|
|
|
|
|
+ <div class="ac-tableLine" v-for="item in companyList" :key="item.companyId"
|
|
|
|
+ @click="setCompanyHandle(item.companyId)">
|
|
|
|
+ <div class="actname">{{ item.companyInfo.companyName }}</div>
|
|
<div class="right">
|
|
<div class="right">
|
|
- <span>{{item.powerLevel === 999 ? '超级管理员' : item.powerLevel === 100 ? '公司超管' : item.powerLevel === 99 ? '管理员' : '普通用户'}}</span>
|
|
|
|
|
|
+ <span>{{ item.powerLevel === 999 ? '超级管理员' : item.powerLevel === 100 ? '公司超管' : item.powerLevel === 99 ?
|
|
|
|
+ '管理员' : '普通用户' }}</span>
|
|
<i class="el-icon-right"></i>
|
|
<i class="el-icon-right"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -73,7 +71,7 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-import { getCode, getDingKey } from "@/api/login";
|
|
|
|
|
|
+import { getNoteCode, getCode, getDingKey } from "@/api/login";
|
|
import Cookies from "js-cookie";
|
|
import Cookies from "js-cookie";
|
|
import { mapState } from 'vuex'
|
|
import { mapState } from 'vuex'
|
|
export default {
|
|
export default {
|
|
@@ -100,6 +98,7 @@ export default {
|
|
callback()
|
|
callback()
|
|
};
|
|
};
|
|
return {
|
|
return {
|
|
|
|
+ msgType: 'ding',
|
|
signInType: 'pwd', // 登录类型
|
|
signInType: 'pwd', // 登录类型
|
|
APPID: process.env.VUE_APP_DDAPPID, // dingdsfuoevmawlyyrjx
|
|
APPID: process.env.VUE_APP_DDAPPID, // dingdsfuoevmawlyyrjx
|
|
REDIRECT_URI: encodeURIComponent(process.env.VUE_APP_BASE_URL), //encodeURIComponent(location.href),
|
|
REDIRECT_URI: encodeURIComponent(process.env.VUE_APP_BASE_URL), //encodeURIComponent(location.href),
|
|
@@ -215,7 +214,7 @@ export default {
|
|
dingdingLogin(code, state) {
|
|
dingdingLogin(code, state) {
|
|
if (!this.token) {
|
|
if (!this.token) {
|
|
this.loading = true;
|
|
this.loading = true;
|
|
- this.$store.dispatch("DingDingLogin", {code, state, stateKey: sessionStorage.getItem('DDK')}).then(res => {
|
|
|
|
|
|
+ this.$store.dispatch("DingDingLogin", { code, state, stateKey: sessionStorage.getItem('DDK') }).then(res => {
|
|
if (res) {
|
|
if (res) {
|
|
this.setCompanyHandle(res)
|
|
this.setCompanyHandle(res)
|
|
} else {
|
|
} else {
|
|
@@ -247,20 +246,37 @@ export default {
|
|
// return
|
|
// return
|
|
// }
|
|
// }
|
|
this.getCodeBtText = 30
|
|
this.getCodeBtText = 30
|
|
- getCode(phone).then(res => {
|
|
|
|
- if(res.data) {
|
|
|
|
- this.$message.success('发送成功,请到钉钉查看')
|
|
|
|
- let time = 30
|
|
|
|
- this.timer = setInterval(() => {
|
|
|
|
- time--
|
|
|
|
- this.getCodeBtText = time
|
|
|
|
- if(time <= 0) {
|
|
|
|
|
|
+ if (this.msgType === 'ding') {
|
|
|
|
+ getCode(phone).then(res => {
|
|
|
|
+ if (res.data) {
|
|
|
|
+ this.$message.success('发送成功,请到钉钉查看')
|
|
|
|
+ let time = 30
|
|
|
|
+ this.timer = setInterval(() => {
|
|
|
|
+ time--
|
|
|
|
+ this.getCodeBtText = time
|
|
|
|
+ if (time <= 0) {
|
|
this.getCodeBtText = '获取验证码'
|
|
this.getCodeBtText = '获取验证码'
|
|
clearInterval(this.timer)
|
|
clearInterval(this.timer)
|
|
}
|
|
}
|
|
- }, 1000)
|
|
|
|
- }
|
|
|
|
- }).catch(() => this.getCodeBtText = '获取验证码');
|
|
|
|
|
|
+ }, 1000)
|
|
|
|
+ }
|
|
|
|
+ }).catch(() => this.getCodeBtText = '获取验证码');
|
|
|
|
+ } else {
|
|
|
|
+ getNoteCode(phone).then(res => {
|
|
|
|
+ if (res.data) {
|
|
|
|
+ this.$message.success('发送成功,请到手机查看')
|
|
|
|
+ let time = 30
|
|
|
|
+ this.timer = setInterval(() => {
|
|
|
|
+ time--
|
|
|
|
+ this.getCodeBtText = time
|
|
|
|
+ if (time <= 0) {
|
|
|
|
+ this.getCodeBtText = '获取验证码'
|
|
|
|
+ clearInterval(this.timer)
|
|
|
|
+ }
|
|
|
|
+ }, 1000)
|
|
|
|
+ }
|
|
|
|
+ }).catch(() => this.getCodeBtText = '获取验证码');
|
|
|
|
+ }
|
|
},
|
|
},
|
|
getCookie() {
|
|
getCookie() {
|
|
const rememberMe = Cookies.get('rememberMe')
|
|
const rememberMe = Cookies.get('rememberMe')
|
|
@@ -321,6 +337,7 @@ export default {
|
|
height: 100%;
|
|
height: 100%;
|
|
background-image: url("../assets/image/login-background.jpg");
|
|
background-image: url("../assets/image/login-background.jpg");
|
|
background-size: cover;
|
|
background-size: cover;
|
|
|
|
+
|
|
&>div {
|
|
&>div {
|
|
display: flex;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
@@ -328,6 +345,7 @@ export default {
|
|
align-items: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
.title {
|
|
.title {
|
|
margin: 0px auto 30px auto;
|
|
margin: 0px auto 30px auto;
|
|
text-align: center;
|
|
text-align: center;
|
|
@@ -340,37 +358,45 @@ export default {
|
|
width: 400px;
|
|
width: 400px;
|
|
padding: 25px 25px 5px 25px;
|
|
padding: 25px 25px 5px 25px;
|
|
margin-bottom: 80px;
|
|
margin-bottom: 80px;
|
|
|
|
+
|
|
.el-input {
|
|
.el-input {
|
|
height: 38px;
|
|
height: 38px;
|
|
|
|
+
|
|
input {
|
|
input {
|
|
- background: rgba(255,255,255, .2);
|
|
|
|
|
|
+ background: rgba(255, 255, 255, .2);
|
|
border-color: #5a5a5a;
|
|
border-color: #5a5a5a;
|
|
height: 38px;
|
|
height: 38px;
|
|
}
|
|
}
|
|
|
|
+
|
|
.el-input__prefix {
|
|
.el-input__prefix {
|
|
color: #5a5a5a;
|
|
color: #5a5a5a;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
.input-icon {
|
|
.input-icon {
|
|
height: 39px;
|
|
height: 39px;
|
|
width: 14px;
|
|
width: 14px;
|
|
margin-left: 2px;
|
|
margin-left: 2px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
.login-tip {
|
|
.login-tip {
|
|
font-size: 13px;
|
|
font-size: 13px;
|
|
text-align: center;
|
|
text-align: center;
|
|
color: #bfbfbf;
|
|
color: #bfbfbf;
|
|
}
|
|
}
|
|
|
|
+
|
|
.login-code {
|
|
.login-code {
|
|
width: 33%;
|
|
width: 33%;
|
|
height: 38px;
|
|
height: 38px;
|
|
float: right;
|
|
float: right;
|
|
|
|
+
|
|
img {
|
|
img {
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
vertical-align: middle;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
.el-login-footer {
|
|
.el-login-footer {
|
|
height: 40px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
line-height: 40px;
|
|
@@ -383,13 +409,16 @@ export default {
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
letter-spacing: 1px;
|
|
letter-spacing: 1px;
|
|
}
|
|
}
|
|
|
|
+
|
|
.login-code-img {
|
|
.login-code-img {
|
|
height: 38px;
|
|
height: 38px;
|
|
}
|
|
}
|
|
|
|
+
|
|
.tabs {
|
|
.tabs {
|
|
display: flex;
|
|
display: flex;
|
|
margin: 0 20px 30px;
|
|
margin: 0 20px 30px;
|
|
width: 300px;
|
|
width: 300px;
|
|
|
|
+
|
|
&>div {
|
|
&>div {
|
|
width: 50%;
|
|
width: 50%;
|
|
text-align: center;
|
|
text-align: center;
|
|
@@ -403,24 +432,27 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
.account-title {
|
|
.account-title {
|
|
color: #FFFFFF;
|
|
color: #FFFFFF;
|
|
margin-bottom: 40px;
|
|
margin-bottom: 40px;
|
|
}
|
|
}
|
|
|
|
+
|
|
.company-account {
|
|
.company-account {
|
|
box-shadow: 0 4px 20px 0 rgba(0, 60, 179, 0.12);
|
|
box-shadow: 0 4px 20px 0 rgba(0, 60, 179, 0.12);
|
|
margin-bottom: 10px;
|
|
margin-bottom: 10px;
|
|
width: 500px;
|
|
width: 500px;
|
|
padding: 48px 36px;
|
|
padding: 48px 36px;
|
|
|
|
|
|
- &>h3{
|
|
|
|
|
|
+ &>h3 {
|
|
margin: 0;
|
|
margin: 0;
|
|
font-size: 20px;
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
|
|
+
|
|
&>.choose-tableBlock {
|
|
&>.choose-tableBlock {
|
|
margin-top: 20px;
|
|
margin-top: 20px;
|
|
border-top: 1px solid rgba(181, 181, 181, .4);
|
|
border-top: 1px solid rgba(181, 181, 181, .4);
|
|
- font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei","Source Han Sans CN",sans-serif;
|
|
|
|
|
|
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif;
|
|
max-height: 250px;
|
|
max-height: 250px;
|
|
overflow-y: auto;
|
|
overflow-y: auto;
|
|
padding: 0 10px;
|
|
padding: 0 10px;
|
|
@@ -436,6 +468,7 @@ export default {
|
|
border: 2px solid transparent;
|
|
border: 2px solid transparent;
|
|
position: relative;
|
|
position: relative;
|
|
border-radius: 4px;
|
|
border-radius: 4px;
|
|
|
|
+
|
|
.actname {
|
|
.actname {
|
|
width: 250px;
|
|
width: 250px;
|
|
color: #0b1531;
|
|
color: #0b1531;
|
|
@@ -444,31 +477,38 @@ export default {
|
|
text-overflow: ellipsis;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
+
|
|
.right {
|
|
.right {
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
align-items: center;
|
|
font-size: 13px;
|
|
font-size: 13px;
|
|
- &>span{
|
|
|
|
|
|
+
|
|
|
|
+ &>span {
|
|
margin-right: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- i{
|
|
|
|
|
|
+
|
|
|
|
+ i {
|
|
color: #1890ff;
|
|
color: #1890ff;
|
|
font-size: 20px;
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
|
|
+
|
|
&:hover {
|
|
&:hover {
|
|
border: 2px solid #296aef;
|
|
border: 2px solid #296aef;
|
|
z-index: 5;
|
|
z-index: 5;
|
|
transition: all .2s;
|
|
transition: all .2s;
|
|
- box-shadow: 0 0 12px rgba(0, 60, 179 , 0.12);
|
|
|
|
|
|
+ box-shadow: 0 0 12px rgba(0, 60, 179, 0.12);
|
|
|
|
+
|
|
.right {
|
|
.right {
|
|
color: #296aef;
|
|
color: #296aef;
|
|
}
|
|
}
|
|
|
|
+
|
|
i {
|
|
i {
|
|
color: #296aef;
|
|
color: #296aef;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
&::after {
|
|
&::after {
|
|
content: '';
|
|
content: '';
|
|
position: absolute;
|
|
position: absolute;
|