[update]-企业管理员增加单独的登录页面

src/config/router.config.js

@@ -38,6 +38,11 @@ export const constantRouterMap = [
         name: 'login',
         component: () => import(/* webpackChunkName: "user" */ '@/views/user/Login')
       },
+      {
+        path: 'manageLogin',
+        name: 'manageLogin',
+        component: () => import(/* webpackChunkName: "user" */ '@/views/user/ManageLogin')
+      },
       {
         path: 'register',
         name: 'register',

src/permission.js

@@ -9,7 +9,7 @@ import { generateIndexRouter } from '@/utils/util'
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
-const whiteList = ['/user/login', '/user/register', '/user/register-result', '/user/member-register', '/user/member-register-result', '/user/alteration','/signupentrance','/signUpPage'] // no redirect whitelist
+const whiteList = ['/user/login', '/user/manageLogin', '/user/register', '/user/register-result', '/user/member-register', '/user/member-register-result', '/user/alteration','/signupentrance','/signUpPage'] // no redirect whitelist
 
 const ThirdLoginFunc = (token) => {
   return new Promise(resolve => {

src/views/user/ManageLogin.vue

@@ -0,0 +1,519 @@
+<!--企业管理员登录-->
+<template>
+  <div class="main">
+    <a-form :form="form" class="user-layout-login" ref="formLogin" id="formLogin">
+      <div class="user-box">
+        <span class="title">
+          <img src='../../assets/userLogin.png' alt=''>
+        </span>
+
+        <!--        账号密码登录-->
+        <template v-if="!isVerificationCodeLogin">
+          <a-row>
+            <a-col :span="6"></a-col>
+            <a-col :span="12">
+              <a-form-item>
+                <a-input
+                  size="large"
+                  v-decorator="['username',{initialValue:'', rules: validatorRules.username.rules,validateTrigger: 'blur'}]"
+                  type="text"
+                  placeholder="请输入手机号">
+                  <a-icon slot="prefix" type="user" :style="{ color: '#B3B7C2',fontSize:'20px' }"/>
+                </a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :span="6"></a-col>
+          </a-row>
+          <a-row>
+            <a-col :span="6"></a-col>
+            <a-col :span="12">
+              <a-form-item>
+                <a-input-password
+                  v-decorator="['password',{initialValue:'', rules: validatorRules.password.rules,validateTrigger: 'blur'}]"
+                  size="large"
+                  type="password"
+                  @paste.native.capture.prevent="handleOperate"
+                  placeholder="请输入密码"
+                >
+                  <a-icon slot="prefix" type="lock" :style="{ color: '#B3B7C2',fontSize:'20px' }"/>
+                </a-input-password>
+              </a-form-item>
+            </a-col>
+            <a-col :span="6"></a-col>
+          </a-row>
+          <a-row style="margin-bottom: 0%;">
+            <a-col :span="6"></a-col>
+            <a-col :span="7">
+              <a-form-item>
+                <a-input
+                  v-decorator="['inputCode',validatorRules.inputCode]"
+                  size="large"
+                  type="text"
+                  autocomplete="new-password"
+                  @change="inputCodeChange"
+                  @paste.native.capture.prevent="handleOperate"
+                  placeholder="请输入验证码">
+                  <a-icon slot="prefix" type="safety" :style="{ color: '#B3B7C2',fontSize:'20px'}"/>
+                </a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :span="5" class='code' style='text-align: right'>
+              <img v-if="requestCodeSuccess" :src="randCodeImage" @click="handleChangeCheckCode"/>
+              <img v-else style="margin-top: 2px;" src="../../assets/checkcode.png" @click="handleChangeCheckCode"/>
+            </a-col>
+            <a-col :span="4"></a-col>
+          </a-row>
+        </template>
+
+        <!--        手机号验证码登录-->
+        <template v-else>
+          <a-row>
+            <a-col :span="6"></a-col>
+            <a-col :span="12">
+              <a-form-item>
+                <a-input
+                  size="large"
+                  v-decorator="['username',{initialValue:'', rules: validatorRules.username.rules,validateTrigger: 'blur'}]"
+                  type="text"
+                  placeholder="请输入手机号">
+                  <a-icon slot="prefix" type="user" :style="{ color: '#B3B7C2',fontSize:'20px' }"/>
+                </a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :span="6"></a-col>
+          </a-row>
+          <a-row>
+            <a-col :span="6"></a-col>
+            <a-col :span="12">
+              <a-form-item class='captcha'>
+                <a-input
+                  size="large"
+                  v-decorator="['captcha', validatorRules.captcha]"
+                  type="text"
+                  autocomplete="new-password"
+                  placeholder="请输入验证码">
+                  <a-icon slot="prefix" type="safety" :style="{ color: '#B3B7C2',fontSize:'20px'}"/>
+                </a-input>
+                <a-button
+                  tabindex="-1"
+                  size="default"
+                  :disabled="state.smsSendBtn"
+                  @click.stop.prevent="getCaptcha"
+                  v-text="!state.smsSendBtn && '获取验证码' || (state.time+' s')"></a-button>
+              </a-form-item>
+            </a-col>
+            <a-col :span="6"></a-col>
+          </a-row>
+        </template>
+
+        <a-row class="login-btn">
+          <a-col :span="6"></a-col>
+          <a-col :span="12">
+            <a-form-item>
+              <a-button
+                block
+                size="large"
+                type="primary"
+                htmlType="submit"
+                :loading="loginBtn"
+                @click.stop.prevent="handleSubmit"
+                :disabled="loginBtn">
+                {{ loginBtn ? '登录中' : '登录' }}
+              </a-button>
+            </a-form-item>
+          </a-col>
+          <a-col :span="6"></a-col>
+        </a-row>
+        <a-row style="margin-bottom: 2%;">
+          <a-col :span="6"></a-col>
+          <!--          切换登录方式-->
+          <a-col :span="4">
+            <a-form-item>
+              <div @click="switchingLoginMode" class="forget-password" style="text-align: center;">
+                {{ isVerificationCodeLogin ? '账号密码登录' : '手机验证码登录' }}
+              </div>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+      </div>
+    </a-form>
+  </div>
+</template>
+
+<script>
+
+import {mapActions} from 'vuex'
+import {timeFix} from '@/utils/util'
+import Vue from 'vue'
+import {ACCESS_TOKEN} from '@/store/mutation-types'
+import {getAction} from '@/api/manage'
+import {getRSAPublicKey} from '@/api/login.js'
+import {JSEncrypt} from 'jsencrypt'
+import {phoneReg} from '@/utils/validate'
+
+export default {
+  name: 'ManageLogin',
+  data() {
+    return {
+      loginBtn: false,
+      loginType: 1, // 登录方式 0 普通用户登录 1企业管理员登录
+      form: this.$form.createForm(this),
+      state: {
+        time: 60,
+        smsSendBtn: false
+      },
+      validatorRules: {
+        username: {rules: [{required: true, message: '请输入手机号!'}, {validator: this.checkPhone}]},
+        password: {rules: [{required: true, message: '请输入密码!'}]},
+        mobile: {rules: [{validator: this.validateMobile}]},
+        captcha: {rules: [{required: true, message: '请输入验证码!'}]},
+        inputCode: {rules: [{required: true, message: '请输入验证码!'}]},
+        phone: {rules: [{required: true, message: '请输入手机号!'}, {validator: this.checkPhone}]}
+      },
+      inputCodeContent: '',
+      currdatetime: '', // 临时创建的时间戳
+      randCodeImage: '', // 存储验证码图片
+      requestCodeSuccess: false,
+      rsaPublicKey: '', // 加密的公钥
+      isVerificationCodeLogin: false, // 是否验证码登录，true--是；false--否；默认false，账号密码登录
+    }
+  },
+  created() {
+    document.title = '汽车标准化工作平台'
+    this.currdatetime = new Date().getTime()
+    Vue.ls.remove(ACCESS_TOKEN)
+    this.getRouterData()
+    this.handleChangeCheckCode()
+  },
+  methods: {
+    ...mapActions(['Login', 'Logout', 'PhoneLogin', 'CompanyAdminLogin', 'CompanyAdminPhoneLogin']),
+
+    /**
+     * 验证手机号
+     * @param rule
+     * @param value
+     * @param callback
+     */
+    checkPhone(rule, value, callback) {
+      if (value) {
+        if (phoneReg(value)) {
+          callback()
+        } else {
+          callback('请输入正确格式的手机号')
+        }
+      } else {
+        callback()
+      }
+    },
+    handleSubmit() {
+      let that = this
+      let loginParams = {}
+      that.loginBtn = true
+      that.form.validateFields(['username', 'password', 'inputCode', 'captcha', 'rememberMe'], {force: true}, (err, values) => {
+        if (!err) {
+          loginParams.remember_me = values.rememberMe
+          // 手机登录验证码
+          if (that.isVerificationCodeLogin) {
+            loginParams.captcha = values.captcha
+          } else {
+            loginParams.captcha = that.inputCodeContent
+          }
+          loginParams.checkKey = that.currdatetime
+          loginParams.rsaPublicKey = that.rsaPublicKey
+          // 新建JSEncrypt对象
+          let encrypt = new JSEncrypt()
+          encrypt.setPublicKey(loginParams.rsaPublicKey)
+          // 公钥加密
+          loginParams.username = encrypt.encrypt(values.username)
+          loginParams.password = encrypt.encrypt(values.password)
+          //登录
+          console.log(this.isVerificationCodeLogin)
+          let httpFunction = null
+
+          const actionCollect = {
+            commonLogin: [that.Login, that.CompanyAdminLogin],
+            phoneLogin: [that.PhoneLogin, that.CompanyAdminPhoneLogin]
+          }
+          // userType 用户类型 0 是普通用户 1是企业管理员 loginType true 是短信登录 false 是账号登录
+          let actionFunc = function (userType, loginType) {
+            return loginType ? actionCollect.phoneLogin[userType] : actionCollect.commonLogin[userType]
+          }
+
+          httpFunction = actionFunc(this.loginType, this.isVerificationCodeLogin)
+
+          httpFunction(loginParams).then((response) => {
+            if (response.message === 'updatePassword') {
+              this.$notification['error']({
+                message: '设置密码',
+                description: '初次登录需要设置密码',
+                duration: 4
+              })
+              Vue.ls.set('Enterprise_TemporaryUserInfo', response)
+              this.$router.push({
+                path: '/user/alteration',
+                query: {
+                  isFirstLogin: 'true'
+                }
+              })
+            } else {
+              this.loginSuccess()
+            }
+          }).catch((err) => {
+            if (err.code === 500) {
+              // 刷新验证码
+              this.handleChangeCheckCode()
+            }
+            that.requestFailed(err)
+          })
+        } else {
+          that.loginBtn = false
+        }
+      })
+    },
+    getCaptcha(e) {
+      e.preventDefault()
+      let that = this
+      this.form.validateFields(['username'], {force: true}, (err, values) => {
+          if (!values.username) {
+            that.cmsFailed('请输入手机号')
+          } else if (!err) {
+            const hide = this.$message.loading('验证码发送中..', 0)
+            let smsParams = {}
+            smsParams.phone = values.username
+            // 登录--1
+            smsParams.codeType = 1
+            let interval
+            let sendCodeUrl = {
+              0: '/company/sendVerificationCode',
+              1: '/companyManager/sendVerificationCode'
+            }
+            getAction(sendCodeUrl[this.loginType], smsParams)
+              .then(res => {
+                // 验证码获取不成功就不倒计时
+                if (!res.success) {
+                  setTimeout(hide, 0)
+                  this.cmsFailed(res.message)
+                } else {
+                  this.state.smsSendBtn = true
+                  interval = window.setInterval(() => {
+                    if (that.state.time-- <= 0) {
+                      that.state.time = 60
+                      that.state.smsSendBtn = false
+                      window.clearInterval(interval)
+                    }
+                  }, 1000)
+                }
+                setTimeout(hide, 500)
+              }).catch(err => {
+              setTimeout(hide, 1)
+              clearInterval(interval)
+              that.state.time = 60
+              that.state.smsSendBtn = false
+              this.requestFailed(err)
+            })
+          }
+        }
+      )
+    },
+    /**
+     * 切换登录方式
+     */
+    switchingLoginMode() {
+      this.isVerificationCodeLogin = !this.isVerificationCodeLogin
+    },
+    handleChangeCheckCode() {
+      this.currdatetime = new Date().getTime()
+      getAction(`/sys/randomImage/${this.currdatetime}`).then(res => {
+        if (res.success) {
+          this.randCodeImage = res.result
+          this.requestCodeSuccess = true
+        } else {
+          this.$message.error(res.message)
+          this.requestCodeSuccess = false
+        }
+      }).catch(() => {
+        this.requestCodeSuccess = false
+      })
+      this.getPublicKey()
+    },
+    //获取RSA公钥
+    getPublicKey() {
+      // 获取公钥
+      getRSAPublicKey().then(res => {
+        this.rsaPublicKey = res.result
+      })
+    },
+    loginSuccess() {
+      // 进入首页
+      this.$router.push({path: '/'}).catch(() => {
+      })
+      this.$notification.success({
+        message: '欢迎',
+        description: `${timeFix()}，欢迎回来`
+      })
+    },
+    cmsFailed(err) {
+      this.$notification['error']({
+        message: '登录失败',
+        description: err,
+        duration: 4
+      })
+    },
+    requestFailed(err) {
+      this.$notification['error']({
+        message: '登录失败',
+        description: ((err.response || {}).data || {}).message || err.message || '请求出现错误，请稍后再试',
+        duration: 4
+      })
+      this.loginBtn = false
+    },
+    validateMobile(rule, value, callback) {
+      if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value)) {
+        callback()
+      } else {
+        callback('您的手机号码格式不正确!')
+      }
+    },
+    validateInputCode(rule, value, callback) {
+      if (!value || this.verifiedCode == this.inputCodeContent) {
+        callback()
+      } else {
+        callback('您输入的验证码不正确!')
+      }
+    },
+    generateCode(value) {
+      this.verifiedCode = value.toLowerCase()
+    },
+    inputCodeChange(e) {
+      this.inputCodeContent = e.target.value
+    },
+    getRouterData() {
+      this.$nextTick(() => {
+        if (this.$route.params.username) {
+          this.form.setFieldsValue({
+            'username': this.$route.params.username
+          })
+        }
+      })
+    },
+    //  密码禁止粘贴
+    handleOperate() {
+      return false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.ant-input-affix-wrapper /deep/ .ant-input:not(:first-child) {
+  padding-left: 40px;
+}
+
+.ant-row {
+  margin-bottom: 4%;
+}
+
+.main {
+  height: 100%;
+
+  .user-layout-login {
+    z-index: 99;
+    width: 50%;
+    box-sizing: border-box;
+    height: 80%;
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+
+    .user-box {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+
+      .title {
+        display: flex;
+        justify-content: center;
+        margin-bottom: 10px;
+
+        img {
+          width: 395px;
+          height: 124px;
+        }
+      }
+
+      .code {
+        img {
+          height: 60px;
+          border-radius: 30px;
+        }
+      }
+
+      .login-btn {
+        margin-top: 20px;
+        margin-bottom: 0;
+        font-size: 10px;
+
+        /deep/ .ant-btn-primary {
+          height: 60px;
+          background: #069F99;
+          border: none;
+          border-radius: 30px;
+        }
+      }
+    }
+  }
+
+  /deep/ .ant-row {
+    margin-bottom: 5px !important;
+  }
+
+  /deep/ .ant-input-affix-wrapper .ant-input {
+    border-radius: 30px;
+    height: 60px;
+    border: 1px solid #E6E3E3;
+  }
+
+  .forget-password {
+    cursor: pointer;
+    color: #BFBFBF;
+  }
+}
+
+.captcha {
+  position: relative;
+
+  /deep/ button {
+    border: none;
+    color: #069F99;
+    position: absolute;
+    right: 10px;
+    top: -6px;
+    box-shadow: none;
+    background: none;
+  }
+}
+
+/deep/ .ant-input {
+  border-radius: 30px;
+  height: 60px;
+  border: 1px solid #E6E3E3;
+}
+
+// 企业管理员登录
+.center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.company-admin-login {
+  user-select: none;
+  cursor: pointer;
+  color: #BFBFBF;
+}
+</style>