epx-frame 3.5.0-shpgy.1

package/src/frame/views/Login.vue

@@ -0,0 +1,1059 @@
+<script>
+import axios from '@/utils/axios'
+import { mapState } from 'vuex'
+import { CLEAR_ROUTER } from '@/store/actions'
+import { global } from '@/utils/mixins'
+import { JSEncrypt } from 'jsencrypt'
+export default {
+  name: 'login',
+  mixins: [global],
+  data () {
+    return {
+      type: 'PC',
+      activeName: 'first',
+      userInfo: '',
+      password: '',
+      phone: '',
+      code: '',
+      remberPassword: false,
+      loading: false,
+      wechatBound: false,
+      verificationCodeTime: 0,
+      loginPage: null,
+      load: false,
+      findPasswordModal: false,
+      resetPhone: '',
+      resetCode: '',
+      resetCodeTime: 0,
+      resetPassword: '',
+      resetConfirmPassword: '',
+      client: {}
+    }
+  },
+  computed: {
+    ...mapState({
+      user: state => state.user.user
+    }),
+    loginWay () {
+      const { LOGIN_WAY: clientLoginWay = '' } = this.clientConfig
+      let { LOGIN_WAY: appLoginWay } = this.appConfig
+      if (!appLoginWay) appLoginWay = clientLoginWay
+      return appLoginWay.split(',')
+    },
+    loginTips () {
+      const { LOGIN_TIPS: clientLoginTips = '' } = this.clientConfig
+      let { LOGIN_TIPS: appLoginTips } = this.appConfig
+      if (!appLoginTips) appLoginTips = clientLoginTips
+      return appLoginTips
+    },
+    loginLogo () {
+      const { LOGO: clientLogo } = this.clientConfig
+      const { 'SYSTEM|LOGIN_LOGO': systemLogo, LOGIN_LOGO: appLogo } = this.appConfig
+      if (appLogo) {
+        return this.$util.getFileUrl(appLogo)
+      } else if (systemLogo) {
+        return this.$util.getFileUrl(systemLogo)
+      } else {
+        return this.$util.getFileUrl(clientLogo)
+      }
+    },
+    loginBg () {
+      const { LOGIN_BG: clientLoginBg } = this.clientConfig
+      const { 'SYSTEM|BG_IMG': systemBg, LOGIN_BG: appLoginBg } = this.appConfig
+      if (appLoginBg) {
+        return this.$util.getFileUrl(appLoginBg)
+      } else if (systemBg) {
+        return this.$util.getFileUrl(systemBg)
+      } else if (clientLoginBg) {
+        return this.$util.getFileUrl(clientLoginBg)
+      } else {
+        return require('@/assets/login/bgimg.jpg')
+      }
+    },
+    languageFlag () {
+      const { LANGUAGE_FLAG: languageFlag } = this.clientConfig
+      return languageFlag
+    },
+    language () {
+      const { CODE: clientCode, LANGUAGES: languages = '', 'LANGUAGES#': languageNames = '', LANGUAGE_DEFAULT: defaultLanguage } = this.clientConfig
+      const currentLanguage = this.$cookie.get(`${clientCode}-language`) || defaultLanguage
+      let languageList = []
+      if (languages) {
+        const languageIdList = languages.split(',')
+        const languageNameList = languageNames.split(',')
+        languageList = languageIdList.map((item, index) => ({ id: item, name: languageNameList[index] }))
+      }
+      const language = languageList.find(item => item.id === currentLanguage)
+      return language || {}
+    },
+    languageList () {
+      const { CODE: clientCode, LANGUAGES: languages = '', 'LANGUAGES#': languageNames = '', LANGUAGE_DEFAULT: defaultLanguage } = this.clientConfig
+      // 获取当前语言
+      if (!languages) return []
+      const currentLanguage = this.$cookie.get(`${clientCode}-language`) || defaultLanguage
+      const languageIdList = languages.split(',')
+      const languageNameList = languageNames.split(',')
+      const languageList = languageIdList.map((item, index) => ({ id: item, name: languageNameList[index] }))
+      return languageList.filter(item => item.id !== currentLanguage)
+    }
+  },
+  methods: {
+    getPublickKey () {
+      axios.get('/epxing-frame/api/v1/rsa/public')
+        .then(data => {
+          this.publicKey = data
+        })
+    },
+    setCookiePassword () {
+      const encryptUserPassword = this.$cookie.get('user-password')
+      const encrypt = new JSEncrypt()
+      encrypt.setPrivateKey(`-----BEGIN PRIVATE KEY-----
+MIIBVQIBADANBgkqhkiG9w0BAQEFAASCAT8wggE7AgEAAkEAooKCsyT4l6L3izoB
+vPgRxqmmWnhiw80KW/fq7AJNFES/WUf+AnzPxwIuGEM4idjxY8Qtnkraa+ilDqrd
+AeHfXwIDAQABAkEAnIgFiLT11mmc8zhecDyqMqc6my4WQ+9+KPP2Dnpw8DF2wpqv
+QvTB7yLaO/jA6L6KGA7FWQ70CRzgOWpk6LeRQQIhANOq+6c8W1kacqx0m2Lkt/DL
+Ws4C8fD4APrgXmayXhiRAiEAxIvQQMEzBQ8WQMhDefzChENXqXbQsgHfPYk3wx1x
+8O8CIQCcq/mbXpyKxn3M0n7VY1AXRp4O0LU+VIN9LqgRQcNOUQIgb5TIV9rW8ipM
+gd6voBOFAr2QiN6xQD2b1T2PcK/IvfUCIHVZLT7of8gQrbCTpsTUy1BDFaxIXxn1
+WBAVvl1BgTyg
+-----END PRIVATE KEY-----
+`)
+      const userPassword = encrypt.decrypt(encryptUserPassword)
+      if (userPassword) {
+        const json = JSON.parse(userPassword)
+        this.userInfo = json.username
+        this.password = json.password
+      }
+    },
+    login () {
+      if (!this.userInfo) {
+        this.$message.error('请输入用户名')
+        return
+      }
+      if (!this.password) {
+        this.$message.error('请输入密码')
+        return
+      }
+      this.loading = true
+      if (this.$route.query.openId) {
+        this.qyWechatLogin()
+        return
+      }
+      this.loadingModal = this.$loading({
+        lock: true,
+        target: this.$el,
+        fullscreen: false,
+        text: '正在登录...'
+      })
+      const callback = (data) => {
+        this.isLogining = false
+        this.loading = false
+        this.loginCallback(data)
+      }
+      if (process.env.IP) {
+        this.authLogin(async data => {
+          if (this.remberPassword) {
+            const encrypt = new JSEncrypt()
+            encrypt.setPublicKey(`-----BEGIN PUBLIC KEY-----
+MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKKCgrMk+Jei94s6Abz4Ecapplp4YsPN
+Clv36uwCTRREv1lH/gJ8z8cCLhhDOInY8WPELZ5K2mvopQ6q3QHh318CAwEAAQ==
+-----END PUBLIC KEY-----
+`)
+            const userPassword = encrypt.encrypt(JSON.stringify({
+              username: this.userInfo,
+              password: this.password
+            }))
+            this.$cookie.set('user-password', userPassword, { expires: 365 })
+          }
+          callback(data)
+        })
+      } else {
+        this.systemLogin(async data => {
+          callback(data)
+        })
+      }
+    },
+    // 系统登陆
+    systemLogin (cb) {
+      const encrypt = new JSEncrypt()
+      encrypt.setPublicKey(this.publicKey)
+      this.$http.login({
+        ACCOUNT: this.userInfo,
+        PASSWORD: encrypt.encrypt(this.password)
+      })
+        .then(data => {
+          cb && cb(data)
+        })
+    },
+    // 统一身份认证
+    authLogin (cb) {
+      const { 'CLIENT|CODE': clientCode } = this.appConfig
+      const { client = clientCode } = this.$route.params
+      const encrypt = new JSEncrypt()
+      encrypt.setPublicKey(this.publicKey)
+      axios.post('epx-auth/authentication/username', {
+        username: this.userInfo,
+        password: encrypt.encrypt(this.password),
+        client
+      })
+        .then(data => {
+          cb && cb(data)
+        })
+        .catch(err => {
+          this.$message.error(err.message || err.msg || '处理失败')
+          this.isLogining = false
+          this.loading = false
+          if (this.loadingModal) this.loadingModal.close()
+        })
+    },
+    qyWechatLogin () {
+      const encrypt = new JSEncrypt()
+      encrypt.setPublicKey(this.publicKey)
+      this.$http.$request({
+        action: 'qyWechatLogin',
+        entityId: 'FM_USER',
+        ACCOUNT: this.userInfo,
+        PASSWORD: encrypt.encrypt(this.password),
+        USER_ID: this.$route.query.openId,
+        BOUND_FLAG: this.wechatBound ? '1' : '0'
+      })
+        .then(data => {
+          this.authLogin(() => {
+            this.isLogining = false
+            this.loading = false
+            this.$message.success({
+              message: '登录成功',
+              duration: 1000
+            })
+            if (this.loadingModal) this.loadingModal.close()
+            const { path = '/' } = this.$route.query
+            this.$router.push({
+              path
+            })
+          })
+        })
+    },
+    getVerificationCode () {
+      if (!this.phone) {
+        this.$message.error('请输入手机号')
+        return
+      }
+      if (this.verificationCodeTime > 0) {
+        this.$message.error('请1分钟后再次获取验证码')
+        return
+      }
+      axios.post('epx-auth/public/code/smsCode', {
+        mobile: this.phone
+      })
+        .then(data => {
+          this.verificationCodeTime = 60
+          const timer = setInterval(() => {
+            this.verificationCodeTime--
+            if (this.verificationCodeTime <= 0) {
+              clearInterval(timer)
+              this.verificationCodeTime = 0
+            }
+          }, 1000)
+        })
+        .catch(err => {
+          this.$message.error(err.message || '处理失败')
+        })
+    },
+    sendCode () {
+      if (!this.resetPhone) {
+        this.$message.error('请输入手机号')
+        return
+      }
+      if (this.resetCodeTime > 0) {
+        this.$message.error('请1分钟后再次获取验证码')
+        return
+      }
+
+      this.$http.$post({
+        action: 'sendCode',
+        entityId: 'FM_MESSAGE_SEND',
+        contact: this.resetPhone
+      })
+        .then(data => {
+          this.resetCodeTime = 60
+          const timer = setInterval(() => {
+            this.resetCodeTime--
+            if (this.resetCodeTime <= 0) {
+              clearInterval(timer)
+              this.resetCodeTime = 0
+            }
+          }, 1000)
+        })
+        .catch(err => {
+          this.$message.error(err.message || '处理失败')
+        })
+    },
+    loginByVerificationCode (cb) {
+      if (!this.phone) {
+        this.$message.error('请输入手机号')
+        return
+      }
+      if (!this.code) {
+        this.$message.error('请输入验证码')
+        return
+      }
+      axios.post('epx-auth/authentication/mobile', {
+        mobile: this.phone,
+        smsCode: this.code,
+        sysId: this.$util.getSysId()
+      })
+        .then(data => {
+          this.isLogining = false
+          this.loading = false
+          this.$message.success({
+            message: '登录成功',
+            duration: 1000
+          })
+          this.loginCallback(data)
+        })
+        .catch(err => {
+          if (this.loadingModal) this.loadingModal.close()
+          this.$message.error(err.message || '处理失败')
+          this.isLogining = false
+          this.loading = false
+        })
+    },
+    async loginCallback (data) {
+      const { 'CLIENT|CODE': clientCode, 'SYSTEM|CODE': systemCode, CODE } = this.appConfig
+      const { client = clientCode, system = systemCode, app = CODE } = this.$route.params
+      // 清空标签页
+      this.$store.commit(CLEAR_ROUTER)
+      if (data.ps === 'PS_EXP_WARN') {
+        this.$message.warning('您已经长时间没有修改密码，请修改密码')
+      } else if (data.ps === 'PS_EXP_ERR') {
+        this.$message.error('您已经长时间没有修改密码，需要修改密码')
+        this.findPasswordModal = true
+        if (this.loadingModal) this.loadingModal.close()
+        return
+      }
+      this.$cookie.set((client || '') + '-token', data.access_token)
+      try {
+        await this.$store.dispatch({ type: 'GET_USER' })
+        this.$message.success({
+          message: '登录成功',
+          duration: 1000
+        })
+        if (this.loadingModal) this.loadingModal.close()
+        const { path } = this.$route.query
+        if (path && path !== '/') {
+          this.$router.push(path)
+          return
+        }
+        this.$router.push(`/app/${client}/${system}/${app}`)
+      } catch (err) {
+        if (this.loadingModal) this.loadingModal.close()
+        this.$message.error(err.msg || '处理失败')
+      }
+      this.$router.push(`/app/${client}/${system}/${app}`)
+    },
+    isMobile () {
+      // 如果不能满足所有型号手机，可以尝试使用class="hidden-md-and-down"切换。。。
+      const flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
+      if (flag) {
+        this.type = 'Mobile'
+      } else {
+        this.type = 'PC'
+      }
+      // return flag
+    },
+    wechatLogin () {
+      const { 'CLIENT|CODE': clientCode, 'SYSTEM|CODE': systemCode, CODE } = this.appConfig
+
+      const callbackUri = encodeURIComponent(window.location.origin + window.location.pathname + `#/app/${clientCode}/${systemCode}/${CODE}`)
+      const url = process.env.IP + `epx-auth/auth/wechat?callbackUri=${callbackUri}&client=${clientCode}&system=${systemCode}`
+      window.location.href = url
+    },
+    qywechatLogin () {
+      const { 'CLIENT|CODE': clientCode, 'SYSTEM|CODE': systemCode, CODE } = this.appConfig
+      const callbackUri = encodeURIComponent(window.location.origin + window.location.pathname + `#/app/${clientCode}/${systemCode}/${CODE}`)
+      const url = process.env.IP + `epx-auth/auth/wechatMP?callbackUri=${callbackUri}&client=${clientCode}&system=${systemCode}`
+      window.location.href = url
+    },
+    dingLogin () {
+      const { 'CLIENT|CODE': clientCode, 'SYSTEM|CODE': systemCode, CODE } = this.appConfig
+      const callbackUri = encodeURIComponent(window.location.origin + window.location.pathname + `#/app/${clientCode}/${systemCode}/${CODE}`)
+      const url = process.env.IP + `epx-auth/auth/dingtalk?callbackUri=${callbackUri}&cient=${clientCode}&system=${systemCode}`
+      window.location.href = url
+    },
+    qqLogin () {
+      const { 'CLIENT|CODE': clientCode, 'SYSTEM|CODE': systemCode, CODE } = this.appConfig
+      const callbackUri = encodeURIComponent(window.location.origin + window.location.pathname + `#/app/${clientCode}/${systemCode}/${CODE}`)
+      const url = process.env.IP + `epx-auth/auth/qq?callbackUri=${callbackUri}&cient=${clientCode}&system=${systemCode}`
+      window.location.href = url
+    },
+    resetPassswordFn () {
+      if (!this.resetPhone) {
+        this.$message.error('请输入手机号')
+        return
+      }
+      if (!this.resetCode) {
+        this.$message.error('请输入验证码')
+        return
+      }
+      if (!this.resetPassword) {
+        this.$message.error('请输入密码')
+        return
+      }
+      if (this.resetPassword !== this.resetConfirmPassword) {
+        this.$message.error('两次密码输入不一致')
+        return
+      }
+      const encrypt = new JSEncrypt()
+      encrypt.setPublicKey(this.publicKey)
+      this.$http.$post({
+        action: 'restPassword',
+        entityId: 'FM_USER',
+        contact: this.resetPhone,
+        code: this.resetCode,
+        pw: encrypt.encrypt(this.resetPassword),
+        rePw: encrypt.encrypt(this.resetPassword)
+      })
+        .then(data => {
+          this.$message.success('重置密码成功')
+          this.findPasswordModal = false
+          this.resetPhone = ''
+          this.resetCode = ''
+          this.resetCodeTime = 0
+          this.resetPassword = ''
+          this.resetPassword = ''
+        })
+        .catch(err => {
+          this.$message.error(err.message || '处理失败')
+        })
+    },
+    async getAppConfig () {
+      const { appId } = this.$route.params
+      this.$store.dispatch({ type: 'GET_APP_CONFIG', id: appId })
+        .then(appConfig => {
+          if (appConfig) {
+            const { LOGIN_PAGE } = appConfig
+            this.loginPage = LOGIN_PAGE
+            this.load = true
+          }
+        })
+        .catch(() => {
+          this.load = true
+        })
+    },
+    switchLanguage (language) {
+      const { CODE: clientCode } = this.clientConfig
+      this.$cookie.set(`${clientCode}-language`, language.id)
+      location.reload()
+    },
+    renderPage () {
+      return (
+        <epx-page pageId={this.loginPage} inline></epx-page>
+      )
+    },
+    renderPcHeader () {
+      return (
+        <div class="header">
+          <div class="logo">
+            <img src={this.loginLogo} alt="" />
+          </div>
+          {
+            this.languageFlag === '1' && (
+              <el-dropdown class="language" >
+                <span class="language__current">
+                  <i class="epx-icon-diqiu"></i>
+                  {this.language.name}
+                  <i class="el-icon-arrow-down el-icon--right"></i>
+                </span>
+                <el-dropdown-menu slot="dropdown">
+                  {
+                    this.languageList.map(language => (
+                      <el-dropdown-item key={language.id} nativeOnClick={this.switchLanguage.bind(this, language)}>{language.name}</el-dropdown-item>
+                    ))
+                  }
+                </el-dropdown-menu>
+              </el-dropdown>
+            )
+          }
+        </div>
+      )
+    },
+    renderPcAccountLogin () {
+      return (
+        <el-tab-pane label={this.$t('account')} name="first">
+          <div class="cardcon">
+            <div class="inputcon">
+              <el-input
+                placeholder={this.$t('username')}
+                vModel={this.userInfo}
+                vOn:keyup_enter_native={this.login}
+              >
+                <i slot="prefix" class="el-input__icon el-icon-user"></i>
+              </el-input>
+            </div>
+            <div class="inputcon">
+              <el-input
+                type="password"
+                placeholder={this.$t('password')}
+                vModel={this.password}
+                vOn:keyup_enter_native={this.login}
+              >
+                <i slot="prefix" class="el-input__icon el-icon-lock"></i>
+              </el-input>
+            </div>
+            <div class="find-password" >
+              <el-button type="text" onClick={() => { this.findPasswordModal = true }}>忘记密码</el-button>
+              {
+                this.$route.query.openId ? (
+                  <el-checkbox vModel={this.wechatBound}>绑定企业微信登录</el-checkbox>
+                ) : (
+                  <el-checkbox vModel={this.remberPassword}>记住密码</el-checkbox>
+                )
+              }
+            </div>
+            <div class="button">
+              <el-button type="primary" loading={this.loading} onClick={this.login}>{this.$t('login')}</el-button>
+            </div>
+          </div>
+        </el-tab-pane>
+      )
+    },
+    renderPcCodeLogin () {
+      return (
+        <el-tab-pane label={this.$t('verification code')} name="second">
+          <div class="cardcon">
+            <div class="inputcon">
+              <el-input
+                placeholder={this.$t('please enter your mobile phone number')}
+                vModel={this.phone}>
+                <i slot="prefix" class="el-input__icon el-icon-user"></i>
+              </el-input>
+            </div>
+            <div class="inputcon">
+              <el-input
+                placeholder={this.$t('please enter the verification code')}
+                vModel={this.code}>
+                <i slot="prefix" class="el-input__icon el-icon-lock"></i>
+                <el-button class={['get-code-btn', { active: this.verificationCodeTime }]} type="text" slot="append" onClick={this.getVerificationCode}>
+                  {this.verificationCodeTime ? this.$t('get code') + this.verificationCodeTime + 's' : this.$t('get code')}
+                </el-button>
+              </el-input>
+            </div>
+            <div class="button">
+              <el-button size="medium" type="primary" onClick={this.loginByVerificationCode}>{this.$t('login')}</el-button>
+            </div>
+          </div>
+        </el-tab-pane>
+      )
+    },
+    renderFindPassword () {
+      return (
+        <div class="loginCon">
+          <div class="client-info">
+            <p class="client-name">重置密码</p>
+          </div>
+          <div class="cardcon">
+            <div class="inputcon">
+              <el-input
+                placeholder={this.$t('please enter your mobile phone number')}
+                vModel={this.resetPhone}>
+                <i slot="prefix" class="el-input__icon el-icon-user"></i>
+              </el-input>
+            </div>
+            <div class="inputcon">
+              <el-input
+                placeholder={this.$t('please enter the verification code')}
+                vModel={this.resetCode}>
+                <i slot="prefix" class="el-input__icon el-icon-lock"></i>
+                <el-button class={['get-code-btn', { active: this.resetCodeTime }]} type="text" slot="append" onClick={this.sendCode}>
+                  {this.resetCodeTime ? this.$t('get code') + this.resetCodeTime + 's' : this.$t('get code')}
+                </el-button>
+              </el-input>
+            </div>
+            <div class="inputcon">
+              <el-input
+                type="password"
+                placeholder={this.$t('password')}
+                vModel={this.resetPassword}
+                vOn:keyup_enter_native={this.resetPassswordFn}
+              >
+                <i slot="prefix" class="el-input__icon el-icon-lock"></i>
+              </el-input>
+              <span class="password-tip">密码长度为8-20且必须包含字母和数字，不能包含空格</span>
+            </div>
+            <div class="inputcon">
+              <el-input
+                type="password"
+                placeholder={this.$t('confirm password')}
+                vModel={this.resetConfirmPassword}
+                vOn:keyup_enter_native={this.resetPassswordFn}
+              >
+                <i slot="prefix" class="el-input__icon el-icon-lock"></i>
+              </el-input>
+            </div>
+            <div class="button">
+              <el-button size="medium" type="primary" onClick={this.resetPassswordFn}>{this.$t('confirm')}</el-button>
+              <el-button size="medium" type="text" onClick={() => { this.findPasswordModal = false }}>返回登录界面</el-button>
+            </div>
+          </div>
+        </div>
+      )
+    },
+    renderPcContent () {
+      return (
+        <div class="loginCon">
+          {
+            (this.loginWay.includes('account') || this.loginWay.includes('mobile')) && (
+              <el-tabs type="card" class={{ 'no-tabs': !this.loginWay.includes('account') || !this.loginWay.includes('mobile') }} vModel={this.activeName}>
+                { this.loginWay.includes('account') && this.renderPcAccountLogin() }
+                { this.loginWay.includes('mobile') && this.renderPcCodeLogin() }
+              </el-tabs>
+            )
+          }
+          <div class="other-login">
+            {/** <div class="login-other-icon login-qq" @click="qqLogin"><i class="epx-icon-qq"></i></div> **/}
+            { this.loginWay.includes('wechat') && <div class="login-other-icon login-wechat" onClick={this.wechatLogin} title="微信"><i class="epx-icon-wechat"></i></div> }
+            { this.loginWay.includes('qy_wechat') && <div class="login-other-icon login-qywechat" onClick={this.qywechatLogin} title="企业微信"><i class="epx-icon-qywechat"></i></div> }
+            { this.loginWay.includes('dingtalk') && <div class="login-other-icon login-dingding" onClick={this.dingLogin} title="钉钉"><i class="epx-icon-dingding"></i></div> }
+          </div>
+          <div class="login-tips">
+            <span>{ this.loginTips }</span>
+          </div>
+        </div>
+      )
+    },
+    renderPcLoginPage () {
+      return (
+        <div class="PCcontainer" style={{ 'background-image': `url(${this.loginBg})` }}>
+          {this.renderPcHeader()}
+          { this.findPasswordModal ? this.renderFindPassword() : this.renderPcContent() }
+          <div class="footer">
+            <div domPropsInnerHTML={this.appConfig['SYSTEM|LOGIN_REMARK']}></div>
+          </div>
+        </div>
+      )
+    },
+    renderMobileAccountLogin () {
+      return (
+        <el-tab-pane label={this.$t('account')} name="first">
+          <div class="mcardcon">
+            <van-cell-group border={false}>
+              <van-field size="large" vModel={this.userInfo} label="账号" placeholder="请输入" />
+              <van-field size="large" vModel={this.password} type="password" label="密码" placeholder="请输入" />
+            </van-cell-group>
+            {
+              this.$route.query.openId ? (
+                <div class="minputcon">
+                  <el-checkbox vModel={this.wechatBound}>绑定企业微信登录</el-checkbox>
+                </div>
+              ) : (
+                <div class="minputcon fr">
+                  <el-checkbox vModel={this.remberPassword}>记住密码</el-checkbox>
+                </div>
+              )
+            }
+            <div class="mbutton">
+              <el-button size="mideum" type="primary" onClick={this.login}>{this.$t('login')}</el-button>
+            </div>
+          </div>
+        </el-tab-pane>
+      )
+    },
+    renderMobileCodeLogin () {
+      return (
+        <el-tab-pane label={this.$t('verification code')} name="second">
+          <div class="mcardcon">
+            <van-cell-group border={false}>
+              <van-field size="large" vModel={this.phone} label="手机号" placeholder="请输入" />
+              <van-field size="large" vModel={this.code} label="验证码" placeholder="请输入" {...{
+                scopedSlots: {
+                  button: () => (
+                    <el-button class={['get-code-btn', { active: this.verificationCodeTime }]} type="text" slot="append" onClick={this.getVerificationCode}>
+                      {this.verificationCodeTime ? this.$t('get code') + this.verificationCodeTime + 's' : this.$t('get code')}
+                    </el-button>
+                  )
+                }
+              }}>
+              </van-field>
+            </van-cell-group>
+            <div class="mbutton">
+              <el-button size="medium" type="primary" onClick={this.login}>{this.$t('login')}</el-button>
+            </div>
+          </div>
+        </el-tab-pane>
+      )
+    },
+    renderMobileLoginPage () {
+      return (
+        <div class="mobile" >
+          <div class="title">
+            <img src={this.loginLogo} alt="" />
+          </div>
+          <div class="mlogin">
+            {
+              (this.loginWay.includes('account') || this.loginWay.includes('mobile')) && (
+                <el-tabs vModel={this.activeName} class={{ 'no-tabs': !this.loginWay.includes('account') || !this.loginWay.includes('mobile') }}>
+                  { this.loginWay.includes('account') && this.renderMobileAccountLogin() }
+                  { this.loginWay.includes('mobile') && this.renderMobileCodeLogin() }
+                </el-tabs>
+              )
+            }
+            <div class="login-tips">
+              <span>{ this.loginTips }</span>
+            </div>
+            <div class="mobile-footer">
+              {
+                (this.loginWay.includes('wechat') || this.loginWay.includes('qy_wechat') || this.loginWay.includes('dingtalk')) && (
+                  <div class="mshare">
+                    <span class="mshare-header">第三方登录</span>
+                    <div class="qq-and-wx">
+                      { this.loginWay.includes('wechat') && <div class="login-other-icon login-wechat" onClick={this.wechatLogin} title="微信"><i class="epx-icon-wechat"></i></div> }
+                      { this.loginWay.includes('qy_wechat') && <div class="login-other-icon login-qywechat" onClick={this.qywechatLogin} title="企业微信"><i class="epx-icon-qywechat"></i></div> }
+                      { this.loginWay.includes('dingtalk') && <div class="login-other-icon login-dingding" onClick={this.dingLogin} title="钉钉"><i class="epx-icon-dingding"></i></div>}
+                    </div>
+                  </div>
+                )
+              }
+              {
+                this.languageFlag === '1' && (
+                  <div class="language-container" >
+                    <el-dropdown class="language" trigger="click">
+                      <span class="language__current">
+                        <i class="epx-icon-diqiu" style={{ marginRight: '4px' }}></i>
+                        {this.language.name}<i class="el-icon-arrow-down el-icon--right"></i>
+                      </span>
+                      <el-dropdown-menu slot="dropdown">
+                        {
+                          this.languageList.map(language => (
+                            <el-dropdown-item key={language.id} nativeOnClick={this.switchLanguage.bind(this.language)}>{this.language.name}</el-dropdown-item>
+                          ))
+                        }
+                      </el-dropdown-menu>
+                    </el-dropdown>
+                  </div>
+                )
+              }
+            </div>
+            <div class="mfooter" domPropsInnerHTML={this.appConfig['SYSTEM|LOGIN_REMARK']}></div>
+          </div>
+        </div>
+      )
+    }
+  },
+  created () {
+    this.isMobile()
+    this.getPublickKey()
+    this.setCookiePassword()
+    if (this.appConfig) {
+      const { LOGIN_PAGE } = this.appConfig
+      this.loginPage = LOGIN_PAGE
+      this.load = true
+    }
+    // this.getAppConfig()
+  },
+  mounted () {
+    window.onresize = () => {
+      this.isMobile()
+    }
+  },
+  render () {
+    if (!this.load) return null
+    if (this.loginPage) return this.renderPage()
+    return (
+      <div class="container">
+        {
+          this.type === 'PC' ? this.renderPcLoginPage() : this.renderMobileLoginPage()
+        }
+      </div>
+    )
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.container{
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+}
+.PCcontainer{
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  background-image: url('~@/assets/images/login.jpg');
+  background-size: cover;
+  overflow: hidden;
+  position: relative;
+}
+.header {
+  height: 80px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #fff;
+  padding: 0 36px;
+  .logo img{
+    // margin-top: 8px;
+    height: 64px;
+  }
+}
+.footer {
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  height: 60px;
+  background: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.no-tabs {
+  &::v-deep {
+    .el-tabs__nav {
+      display: none;
+    }
+  }
+}
+.loginCon{
+  width: 357px;
+  padding-bottom: 20px;
+  box-sizing: border-box;
+  background-color: #fff;
+  border-radius: 6px;
+  border: solid 1px #e5e5e5;
+  position: absolute;
+  top: 50%;
+  right: 7%;
+  transform: translateY(-50%);
+}
+.loginCon::v-deep .el-tabs__nav{
+  width: 100%;
+}
+.loginCon::v-deep .el-tabs__item{
+  height: 46px;
+  line-height: 46px;
+  width: 50%;
+  text-align: center;
+}
+.login-tips {
+  padding: 0 25px;
+  font-size: 12px;
+  line-height: 20px;
+  color: #888;
+  white-space: pre-wrap;
+  overflow: hidden;
+  overflow-y: auto;
+  max-height: 240px;
+}
+.cardcon{
+  box-sizing: border-box;
+  padding: 0 25px;
+  padding-top: 21px;
+}
+.mcardcon{
+  box-sizing: border-box;
+  padding-top: 12px;
+  &::v-deep {
+    .van-cell::after {
+      display: block;
+    }
+  }
+}
+.inputcon{
+  // width: 291px;
+  margin-bottom: 25px;
+}
+.inputcon::v-deep .el-input__inner{
+  height: 40px;
+  line-height: 40px;
+}
+.minputcon::v-deep .el-input__inner{
+  height: 43px;
+  line-height: 43px;
+}
+.minputcon{
+  margin: 14px 0;
+}
+.button::v-deep .el-button{
+  width: 100%;
+  height: 40px;
+}
+.mbutton{
+  margin-top: 40px;
+  margin-bottom: 20px;
+}
+.mbutton::v-deep .el-button{
+  width: 100%;
+  height: 44px;
+}
+.gray{
+  margin-top: 20px;
+  color: #777;
+  line-height: 22px;
+  letter-spacing: 1px;
+}
+.mobile{
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background: url('~@/assets/images/mlogin.png') no-repeat bottom;
+  background-color: #fff;
+  background-size: 100%;
+  overflow: hidden;
+  position: relative;
+  padding: 0 36px;
+}
+.title{
+  margin-top: 40px;
+  text-align: center;
+  margin-bottom: 20px;
+  img{
+    height: 48px;
+  }
+}
+.mlogin{
+  margin-top: 40px;
+  &::v-deep {
+    .el-tabs__nav-scroll {
+      display: flex;
+      justify-content: center;
+    }
+  }
+}
+.mlogin{
+  &::v-deep {
+    .el-tabs__item {
+      font-size: 16px;
+      color: #999;
+      height: 44px;
+      line-height: 44px;
+      &.is-active {
+        color: #333;
+      }
+    }
+    .el-tabs__nav-wrap::after{
+      background: #fff;
+    }
+    .el-tabs__active-bar {
+      @include font_color_primary;
+    }
+  }
+}
+
+.mobile-footer {
+  position: absolute;
+  bottom: 0;
+  width: calc(100% - 72px);
+}
+.mfooter{
+  text-align: center;
+  margin-top: 40px;
+  font-size: 12px;
+  color: #333;
+}
+.mshare {
+  text-align: center;
+}
+
+.mshare-header {
+  color: #666;
+}
+.qq-and-wx{
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+  padding: 0 20px;
+  div{
+    width: 40px;
+    height: 40px;
+    font-size: 40px;
+    img{
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+.other-login {
+  margin-top: 16px;
+  display: flex;
+  justify-content: center;
+}
+.login-other-icon {
+  cursor: pointer;
+  margin-right: 8px;
+  line-height: 1;
+  i {
+   font-size: 28px;
+  }
+}
+.mobile {
+  .login-other-icon {
+    margin: 0 10px;
+    i {
+    font-size: 40px;
+    }
+  }
+
+}
+.login-qq {
+color: #17b6f3;
+}
+.login-wechat {
+  color: #43ba3a
+}
+.login-qywechat {
+  color: #366cb3;
+}
+.login-dingding {
+  color: #35acf6;
+}
+.login-ding {
+  color: #35acf6;
+}
+.get-code{
+  line-height:43px;
+  color:#1f82ef;
+  margin-right: 10px;
+}
+.get-code-btn {
+  padding: 0 12px;
+}
+.language-container {
+  text-align: center;
+  margin: 20px;
+}
+.language__current {
+  cursor: pointer;
+  &:hover {
+    @include font_color_primary
+  }
+}
+
+.client-info {
+  padding: 0 24px;
+}
+.m-client-info {
+  padding: 0 30px;
+  .user-type-select {
+    height: 42px;
+    line-height: 42px;
+  }
+}
+.client-name {
+  color: #444;
+  line-height: 48px;
+  font-weight: 600;
+}
+.find-password {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: -20px;
+  height: 40px;
+}
+.password-tip {
+  display: block;
+  font-size: 12px;
+  color: #999;
+  margin-bottom: -8px;
+}
+</style>