yiliangyiyun-pc-jj/src/views/login/index.vue

<template>
  <div class="signin-container register-container" style="height: calc(100%)">
    <top-color v-show="false"></top-color>
    <div class="signin-box register-box">
      <!--注册-->
      <div v-if="!loginFlag" class="register-center">
        <div class="register-title">
          <span style="
              font-size: 18px;
              font-weight: bold;
              color: rgba(51, 51, 51, 1);
            ">{{ $t('login.zhuc') }}</span>
          <span v-if="registerFlag">{{ $t('login.existingAccounts') + '？'
            }}<span @click="returnLogin"
              style="cursor: pointer; color: #1d6ced; font-weight: 400">{{ $t('login.clickLogin') }}</span></span>
        </div>
        <el-form v-if="registerFlag" label-position="top" class="register-form" ref="registerForm" :model="registerForm"
          :rules="registerFormRules" auto-complete="on">
          <!-- 联系人/手机号 -->
          <div style="display: flex; justify-content: center">
            <el-form-item prop="linkmanName" :label="$t('login.register04')">
              <el-input v-model="registerForm.linkmanName" maxlength="20" :placeholder="$t('login.registerVerif04')" />
            </el-form-item>
            <el-form-item prop="linkmanPhone" :label="$t('login.register05')" style="margin-left: 20px">
              <el-input v-model="registerForm.linkmanPhone" maxlength="20" :placeholder="$t('login.registerVerif05')" />
            </el-form-item>
          </div>
          <!-- 密码 -->
          <el-form-item prop="password" :label="$t('login.register06')">
            <el-input v-model="registerForm.password" type="password" :placeholder="$t('login.verification01')" />
          </el-form-item>
          <!-- 确认密码 -->
          <el-form-item prop="confirmPassword" :label="$t('login.register07')">
            <el-input v-model="registerForm.confirmPassword" type="password"
              :placeholder="$t('login.verification01')" />
          </el-form-item>
          <!-- 验证码 -->
          <el-form-item prop="veriCode" :label="$t('login.register08')">
            <div style="display: flex; justify-content: space-between">
              <el-input v-model="registerForm.veriCode" :disabled="disabledFlag" class="code_style"
                :placeholder="$t('login.registerVerif08')" />
              <div>
                <ws-button v-show="verification" type="primary" @click="toSend">{{ $t('login.sendVerification') }}
                </ws-button>
                <ws-button v-show="!verification" class="retry" disabled>{{ $t('login.retry') }}({{ count }})s
                </ws-button>
              </div>
            </div>
          </el-form-item>
          <!-- 注册/取消按钮 -->
          <div style="display: flex; justify-content: space-between">
            <div style="width: 30%">
              <el-button :loading="loading" style="width: 100%" @click.native.prevent="handleCancel">
                {{ $t('button.cancel') }}
              </el-button>
            </div>
            <div style="width: 67%">
              <el-button :loading="registerLoading" type="primary" style="width: 100%"
                @click.native.prevent="handleRegister">{{ $t('login.register') }}</el-button>
            </div>
          </div>
          <!-- 描述 -->
          <div class="form-tip">
            {{ $t('login.registerTip') }}
          </div>
        </el-form>
        <!-- 注册完成的页面 -->
        <div v-if="!registerFlag" class="register-form">
          <div style="
              display: flex;
              justify-content: center;
              align-items: center;
              margin: 80px 0 40px;
            ">
            <i class="iconfont iconregisterOky" style="color: #1d6ced; font-size: 40px" />
            <span class="registerSuccess">
              {{ $t('login.registerSuccess') }}</span>
          </div>
          <p>{{ $t('login.PromptSuccessfulRegistration') }}</p>
          <el-button :loading="loading" class="registration-completed" @click.native.prevent="returnToLogin">
            {{ $t('login.complete') }}
          </el-button>
        </div>
      </div>
      <!--登录-->
      <div class="flex" v-if="loginFlag">
        <div>
          <img style="width: 591px" src="../../../public/img/transport.png" alt="" />
        </div>
        <!-- 登录框主体 -->
        <div class="login-box">
          <div class="login-head">
            <div class="logo" />
          </div>
          <div class="login-body">
            <!-- 快捷登录
            <el-form
                     ref="loginForm2"
                     class="fastLoginForm"
                     :model="queryLoginForm"
                     :rules="queryRules"
                     auto-complete="on"
                     hide-required-asterisk=true
                     label-position="left"
                     size="medium">
              <el-form-item prop="mobilePhone"
                            class="userCellPhone" label='+86'>
                <el-input v-model="queryLoginForm.mobilePhone"
                          :placeholder="$t('login.select03')" />
              </el-form-item>
              <el-form-item prop="veriCode"
                            class="veriCode">
                <div>
                  <el-input v-model="queryLoginForm.veriCode"
                            :placeholder="$t('login.select04')" />
                </div>
                <div>
                  <el-button style="width: 30%;border-radius: 20px;"
                             v-if="showVerification"
                             type="primary"
                             @click="fastSendVerification">{{ $t('login.sendVerification') }}</el-button>
                  <el-button style="width: 30%;border-radius: 20px;"
                             v-if="!showVerification"
                             disabled>{{ $t('login.retry') }}({{ count }})s</el-button>
                </div>
              </el-form-item>
              <el-button :loading="loading"
                         type="primary"
                         class="phone-signIn"
                         @click.native.prevent="handleFastLogin">{{ $t('login.login') }}</el-button>
            </el-form> -->
            <ul>
              <!-- <li @click="
                  tabsOne = false
                  $refs['loginForm2'].resetFields()
                " :class="{ selected: !tabsOne }">
                {{ $t('login.fastLogin') }}
              </li>
              <li @click="
                  tabsOne = true
                  $refs['loginForm'].resetFields()
                " :class="{ selected: tabsOne }">
                {{ $t('login.noLogin') }}
              </li> -->
            </ul>
            <el-form v-show="tabsOne" ref="loginForm" :model="loginForm" :rules="getFormRules" auto-complete="on"
              label-position="left">
              <el-form-item prop="companyName">
                <!-- <el-input v-model="loginForm.companyName" :placeholder="$t('login.verification08')" /> -->
                <el-select v-model="loginForm.companyName" filterable placeholder="请选择" class="comp-select">
                  <el-option v-for="item in compOptionList" :key="item.compName" :label="item.compName" :value="item.compName">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="username">
                <el-input ref="username" v-model="loginForm.username" :placeholder="$t('login.select01')"
                  name="username" type="text" auto-complete="on" />
              </el-form-item>
              <el-form-item prop="password" style="margin-bottom: 20px">
                <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType"
                  :placeholder="$t('login.select02')" name="password" auto-complete="on"
                  @keyup.enter.native="handleLogin" />
                <span class="show-pwd" @click="showPwd">
                  <i class="iconfont" :class="
                      passwordType === 'password'
                        ? 'iconbukejian'
                        : 'iconkejian'
                    " />
                </span>
              </el-form-item>
              <el-row>
                <div class="remember-information">
                  <el-checkbox v-model="rememberMe" class="fl">
                    <span>{{
                      $t('login.rememberPwd')
                    }}</span>
                  </el-checkbox>
                  <!-- <div class="fr pointer forget-pwd">
                    <LangSelectText />
                    <span style="margin: 0 5px">|</span>
                    <span @click="forgetPassword">{{
                      $t('login.forgetPwd')
                    }}</span>
                  </div> -->
                </div>
              </el-row>
              <div class="sign_up">
                <el-button :loading="loading" type="primary" class="signIn-buttom" @click.native.prevent="handleLogin">
                  {{ $t('login.login') }}
                </el-button>
                <!-- <span class="register-buttom" @click="toRegister">{{
                  $t('login.register')
                }}</span> -->
              </div>
            </el-form>
            <!-- 快捷登录 -->
            <el-form v-show="!tabsOne" ref="loginForm2" class="fastLoginForm" :model="queryLoginForm"
              :rules="queryRules" auto-complete="on" label-position="left">
              <el-form-item prop="mobilePhone" class="userCellPhone">
                <el-input v-model="queryLoginForm.mobilePhone" :placeholder="$t('login.select03')" />
              </el-form-item>
              <el-form-item prop="veriCode" class="veriCode">
                <div>
                  <el-input v-model="queryLoginForm.veriCode" :placeholder="$t('login.select04')" />
                </div>
                <div>
                  <el-button style="width: 30%; border-radius: 20px" v-if="showVerification" type="primary"
                    @click="fastSendVerification">{{ $t('login.sendVerification') }}</el-button>
                  <el-button style="width: 30%; border-radius: 20px" v-if="!showVerification" disabled>
                    {{ $t('login.retry') }}({{ count }})s
                  </el-button>
                </div>
              </el-form-item>
              <el-button :loading="loading" type="primary" class="phone-signIn" @click.native.prevent="handleFastLogin">
                {{ $t('login.login') }}
              </el-button>
            </el-form>
            <div class="make-easier">
              <!-- <p>{{ $t('common.makeEasier') }}</p> -->
              <!-- <BaseLink @click="goBackstage" :underline="false" type="primary">
                &nbsp;&nbsp;{{ $t('common.goBackstage') }}
              </BaseLink> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--忘记密码消息弹框盒子-->
    <el-dialog class="dialog" :title="$t('login.retrievePassword')" @close="resetForm" :visible.sync="messageBox"
      width="30%" center>
      <!--弹框主体-->
      <el-form ref="forgetDate" :model="forgetDate" :rules="getforgetRules" label-width="100px">
        <el-form-item :label="$t('login.phoneNumber') + $t('common.colon')" prop="userCellPhone" class="userCellPhone">
          <div style="display: flex">
            <el-input v-model="forgetDate.userCellPhone" :placeholder="$t('login.select03')" />
            <div class="time-button ml10">
              <el-button v-show="showVerification" type="primary" @click="sendVerification">
                {{ $t('login.sendVerification') }}
              </el-button>
              <el-button v-show="!showVerification" class="retry" disabled>{{ $t('login.retry') }}({{ count }})s
              </el-button>
            </div>
          </div>
        </el-form-item>
        <el-form-item :label="$t('login.verificationCode') + $t('common.colon')" prop="veriCode">
          <el-input v-model="forgetDate.veriCode" :placeholder="$t('login.select04')" />
        </el-form-item>
        <el-form-item :label="$t('login.newPassword') + $t('common.colon')" prop="password">
          <el-input v-model="forgetDate.password" :placeholder="$t('login.select05')" />
        </el-form-item>
        <el-form-item :label="$t('login.confirmPassword') + $t('common.colon')" prop="againPassword">
          <el-input v-model="forgetDate.againPassword" :placeholder="$t('login.select06')" />
        </el-form-item>
      </el-form>

      <!--弹框底部-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm">{{ $t('showMessage.cancel') }}</el-button>
        <el-button type="primary" @click="submitForm">{{
          $t('showMessage.saveButton')
        }}</el-button>
      </span>
    </el-dialog>
    <!-- 试用到期/停用 -->
    <trialDialog v-if="trialDialog" :phone="phone" :trialDialog="trialDialog" @close="trialDialogClose"></trialDialog>
    <stopDialog v-if="stopDialog" :phone="phone" :stopDialog="stopDialog" @close="stopDialogClose"></stopDialog>
    <verifyDialog v-if="verifyDialog" :phone="phone" :verifyDialog="verifyDialog" @close="verifyDialogClose">
    </verifyDialog>
    <agreementDialog v-if="dialogAgreement" @close="agreementClose">
    </agreementDialog>
    <!-- 服务协议 -->
    <el-dialog :visible.sync="dialogService" width="35%" custom-class="service" :showClose="true"
      :before-close="serviceClose" :closeOnClickModal="true" :appendToBody="true">
      <serviceDialog @close="serviceClose"></serviceDialog>
    </el-dialog>
  </div>
</template>

<script>
  import Cookies from 'js-cookie'
  import zhJs from '../../lang/zh'
  import {
    validPassword,
    validUserCellPhone,
    validUserVeriCode,
  } from '@/utils/validate'
  // 客服
  import serviceDialog from './components/serviceDialog'
  // 服务协议
  import agreementDialog from './components/agreementDialog'
  // 试用到期
  import trialDialog from './components/trialDialog'
  // 停用
  import stopDialog from './components/stopDialog'
  //待核实
  import verifyDialog from './components/verifyDialog'
  import {
    register
  } from '@/model/signIn/index'
  import {
    retrievePassword,
    sendVeriCode,
    sendRegisterCode,
    getTenantInfoByUser,
    getcompList,
  } from '@/model/signIn/index'

  import {
    EventBus
  } from 'base-core-lib'
  import LangSelectText from '@/components/LangSelectText'
  import topColor from '@/layout/index/top/top-color'
  import {
    mapActions,
    mapGetters
  } from 'vuex'

  export default {
    name: 'Login',
    filters: {
      phoneFilter(val) {
        const reg = /^(.{3}).*(.{4})$/
        return val.replace(reg, '$1****$2')
      },
    },
    components: {
      LangSelectText,
      trialDialog,
      stopDialog,
      verifyDialog,
      agreementDialog,
      serviceDialog,
      topColor,
    },
    data() {
      const validPasswordRule = (rule, value, callback) => {
        if (!validPassword(value)) {
          callback(new Error(this.$t('login.verification01')))
        } else {
          callback()
        }
      }
      const validPasswordRule2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error(this.$t('login.verification02')))
        } else if (value !== this.forgetDate.password) {
          callback(new Error(this.$t('login.verification03')))
        } else {
          callback()
        }
      }
      const validUserVeriCodeRule = (rule, value, callback) => {
        if (!validUserVeriCode(value)) {
          callback(new Error(this.$t('login.verification04')))
        } else {
          callback()
        }
      }
      const validUserCellPhoneRule = (rule, value, callback) => {
        if (!validUserCellPhone(value)) {
          callback(new Error(this.$t('login.verification05')))
        } else {
          callback()
        }
      }
      return {
        compOptionList: [],
        compValue: '黑龙江中天昊元贸易有限公司',
        dialogService: false, //客服
        dialogAgreement: false, //服务协议
        phone: '',
        verifyDialog: false,
        stopDialog: false,
        trialDialog: false, //试用到期/试用未到期
        registerLoading: false,
        verification: true,
        disabledFlag: true,
        loginFlag: true,
        registerFlag: true,
        registerFormRules: {
          tenantName: [{
            required: true,
            message: this.$t('login.registerVerif01'),
            trigger: 'blur',
          }, ],
          tenantEnName: [{
            required: true,
            message: this.$t('login.registerVerif02'),
            trigger: 'blur',
          }, ],
          compSimpleNameEn: [{
            required: true,
            message: this.$t('login.registerVerif03'),
            trigger: 'blur',
          }, ],
          linkmanName: [{
            required: true,
            message: this.$t('login.registerVerif04'),
            trigger: 'blur',
          }, ],
          linkmanPhone: [{
            required: true,
            trigger: 'blur',
            validator: validUserCellPhoneRule.bind(this),
          }, ],
          password: [{
            required: true,
            trigger: 'blur',
            validator: validPasswordRule,
            // validator: validPasswordRule4.bind(this)
          }, ],
          confirmPassword: [{
            required: true,
            trigger: 'blur',
            validator: validPasswordRule,
            // validator: validPasswordRule3.bind(this)
          }, ],
          veriCode: [{
            required: true,
            trigger: 'blur',
            validator: validUserVeriCodeRule.bind(this),
          }, ],
        },
        // 注册表单
        registerForm: {
          tenantName: '',
          tenantEnName: '',
          compSimpleNameEn: '',
          tenantSource: '1',
          linkmanName: '',
          linkmanPhone: '',
          password: '',
          confirmPassword: '',
          veriCode: '',
        },
        tabsOne: true,
        zhArray: [], //国际化数组
        timer: null,
        loading: false,
        rememberMe: true,
        showDialog: false,
        showVerification: true,
        messageBox: false,
        passwordType: 'password',
        count: '',
        userCellPhone: '',
        userKind: '',
        forgetDate: {
          userCellPhone: '',
          password: '',
          againPassword: '',
          veriCode: '',
        },
        loginForm: {
          username: '',
          password: '',
          companyName: '', // 公司域名
        },
        queryLoginForm: {
          mobilePhone: '',
          veriCode: '',
        },
        queryRules: {
          mobilePhone: [{
            required: true,
            validator: validUserCellPhoneRule,
            trigger: 'change',
          }, ],
          veriCode: [{
            required: true,
            trigger: 'blur',
            validator: validUserVeriCodeRule,
          }, ],
        },
        companyLogoUrl: '',
        companyName: '',
        getforgetRules: {
          userCellPhone: [{
            required: true,
            trigger: 'blur',
            validator: validUserCellPhoneRule,
          }, ],
          veriCode: [{
            required: true,
            trigger: 'blur',
            validator: validUserVeriCodeRule,
          }, ],
          password: [{
            required: true,
            trigger: 'blur',
            validator: validPasswordRule,
          }, ],
          againPassword: [{
            required: true,
            trigger: 'blur',
            validator: validPasswordRule2,
          }, ],
        },
        getFormRules: {
          username: [{
            required: true,
            message: this.$t('login.verification06'),
            trigger: 'change',
          }, ],
          password: [{
            required: true,
            trigger: 'change',
            validator: validPasswordRule,
            // validator: validPasswordRule4.bind(this)
          }, ],
          companyName: {
            required: true,
            message: this.$t('login.verification08'),
            trigger: 'change',
          },
        },
      }
    },
    computed: {
      ...mapGetters(['systemVersion']),
    },
    mounted() {
      this.loginForm.companyName = Cookies.get('ws_login_companyShortName') ?
        Cookies.get('ws_login_companyShortName') :
        ''
      this.loginForm.username = Cookies.get('ws_login_account') ?
        Cookies.get('ws_login_account') :
        ''
      this.loginForm.password = Cookies.get('ws_login_pwd') ?
        Cookies.get('ws_login_pwd') :
        ''
      this.rememberMe = Cookies.get('ws_login_rememberMe') === '1'
      localStorage.setItem('ws_login_type', 2)
      const arr = JSON.parse(JSON.stringify(zhJs))
      this.loop(arr, null)
      if (this.loginForm.username === '') {
        this.$refs.username.focus()
      } else if (this.loginForm.password === '') {
        this.$refs.password.focus()
      }
      this.compList()
    },
    watch: {
      loginFlag(value) {
        if (value) {
          this.loginForm.domainName = Cookies.get('compSimpleName')
          this.loginForm.username = Cookies.get('phone')
        }
      },
    },
    methods: {
      ...mapActions('user', ['login', 'fastLogin']),
      async getTenantUser() {
        let newList = {
          companyName: this.loginForm.companyName,
          username: this.loginForm.username,
          password: this.loginForm.password,
        }
        const response = await getTenantInfoByUser(newList).toPromise()
        return response
      },
      compList() {
        getcompList()
          .toPromise()
          .then((res) => {
            console.log('公司下拉列表数据',res)
            this.compOptionList = res
            
          })
          .catch((err) => {})
      },
      serviceClose() {
        this.dialogService = false
      },
      agreementClose() {
        this.dialogAgreement = false
      },
      verifyDialogClose() {
        this.verifyDialog = false
      },
      // 停用
      stopDialogClose() {
        this.stopDialog = false
      },
      // 试用
      trialDialogClose() {
        this.trialDialog = false
      },
      goHome() {
        window.open('http://www.yinghaikeji.com', '_blank')
      },
      goRecordNum() {
        window.open('http://beian.miit.gov.cn', '_blank')
      },
      returnLogin() {
        this.$nextTick(function() {
          this.$refs.registerForm.resetFields()
        })
        clearInterval(this.timer)
        this.loginFlag = true
      },
      // 发送验证码
      toSend() {
        if (this.registerForm.linkmanPhone) {
          if (validUserCellPhone(this.registerForm.linkmanPhone)) {
            this.disabledFlag = false
            clearInterval(this.timer)
            this.timer = null
            const TIME_COUNT = 60
            if (!this.timer) {
              this.count = TIME_COUNT
              this.verification = false
              let data = {
                mobilePhone: this.registerForm.linkmanPhone,
              }
              sendRegisterCode(data)
                .toPromise()
                .then((res) => {
                  this.timer = setInterval(() => {
                    if (this.count > 0 && this.count <= TIME_COUNT) {
                      this.count--
                    } else {
                      this.verification = true
                      clearInterval(this.timer)
                      this.timer = null
                    }
                  }, 1000)
                })
                .catch((err) => {
                  this.verification = true
                })
            }
          } else {
            EventBus.$emit('error', this.$t('login.registerVerif09'))
          }
        } else {
          EventBus.$emit('error', this.$t('login.registerVerif05'))
        }
      },
      // 取消
      handleCancel() {
        clearInterval(this.timer)
        this.$nextTick(function() {
          this.$refs.registerForm.resetFields()
        })
        this.loginFlag = true
      },
      // 注册
      handleRegister() {
        this.$refs.registerForm.validate((valid) => {
          if (valid) {
            this.registerLoading = true
            register({
                ...this.registerForm,
                tenantName: this.registerForm.compSimpleNameEn,
                tenantEnName: this.registerForm.compSimpleNameEn,
              })
              .toPromise()
              .then((res) => {
                Cookies.set('compSimpleName', this.registerForm.compSimpleNameEn)
                Cookies.set('phone', this.registerForm.linkmanPhone)
                this.registerFlag = false
                this.registerLoading = false
              })
              .catch((error) => {
                this.registerLoading = false
              })
          } else {
            return false
          }
        })
      },
      toManage() {
        window.location.href = this.$store.getters.baseInfo.comanyMgrUrl
      },
      returnToLogin() {
        this.loginFlag = true
      },
      toRegister() {
        this.disabledFlag = true
        this.verification = true
        this.registerFlag = true
        this.$nextTick(function() {
          this.$refs.registerForm.resetFields()
        })
        clearInterval(this.timer)
        this.loginFlag = false
      },
      goBackstage() {
        // window.location.href = this.$store.getters.baseInfo.comanyMgrUrl
      },
      /* 忘记密码*/
      forgetPassword() {
        this.showVerification = true
        this.messageBox = true
      },
      /* 点击取消*/
      resetForm() {
        this.messageBox = false
        this.forgetDate.userCellPhone = ''
        this.forgetDate.veriCode = ''
        this.forgetDate.password = ''
        this.forgetDate.againPassword = ''
        this.$refs.forgetDate.resetFields()
      },
      /* 点击保存*/
      submitForm() {
        this.$refs.forgetDate.validate((valid) => {
          if (valid) {
            const data = {
              mobilePhone: this.forgetDate.userCellPhone,
              veriCode: this.forgetDate.veriCode,
              password: this.forgetDate.againPassword,
            }
            retrievePassword(data)
              .toPromise()
              .then((response) => {
                EventBus.$emit(
                  'success',
                  this.$t('showMessage.modifySuccessfully')
                )
                this.messageBox = false
              })
              .catch((error) => {
                if (error.code === 'AUTH_004') {
                  EventBus.$emit('error', this.$t('message.AUTH_004'))
                  this.forgetDate.veriCode = ''
                } else if (error.code === 'AUTH_006') {
                  EventBus.$emit('error', this.$t('message.AUTH_006'))
                  this.forgetDate.againPassword = ''
                  this.forgetDate.password = ''
                }
              })
          } else {
            EventBus.$emit('error', this.$t('showMessage.failToSave'))
            return false
          }
        })
      },
      /* 点击发送验证码*/
      sendVerification() {
        if (this.forgetDate.userCellPhone === '') {
          EventBus.$emit('error', this.$t('login.registerVerif05'))
        } else {
          clearInterval(this.timer)
          this.timer = null
          const TIME_COUNT = 60
          if (!this.timer) {
            this.count = TIME_COUNT
            this.showVerification = false
            this.postVerification()
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--
              } else {
                this.showVerification = true
                clearInterval(this.timer)

                this.timer = null
              }
            }, 1000)
          }
        }
      },
      /* 发送验证码*/
      postVerification() {
        sendVeriCode({
            mobilePhone: this.forgetDate.userCellPhone
          })
          .toPromise()
          .then((response) => {})
      },
      /* 点击发送验证码*/
      fastSendVerification() {
        if (!this.queryLoginForm.mobilePhone) {
          EventBus.$emit('error', this.$t('login.verification05'))
          return
        }
        clearInterval(this.timer)
        this.timer = null
        const TIME_COUNT = 60
        if (!this.timer) {
          this.count = TIME_COUNT
          this.showVerification = false
          this.fastPostVerification()
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--
            } else {
              this.showVerification = true
              clearInterval(this.timer)
              this.timer = null
            }
          }, 1000)
        }
      },
      /* 快捷登录发送验证码*/
      fastPostVerification() {
        sendVeriCode({
            mobilePhone: this.queryLoginForm.mobilePhone
          })
          .toPromise()
          .then((response) => {})
        // .catch(error => {
        //   if (error.code === 'AUTH_003') {
        //     EventBus.$emit('error', this.$t('message.AUTH_003'))
        //   }
        // })
      },
      showPwd() {
        if (this.passwordType === 'password') {
          this.passwordType = ''
        } else {
          this.passwordType = 'password'
        }
        this.$nextTick(() => {
          this.$refs.password.focus()
        })
      },
      handleLogin() {
        this.$refs.loginForm.validate(async (valid) => {
          if (valid) {
            const res = await this.login(this.loginForm)
            localStorage.setItem('ws_login_type', 2)
            Cookies.set('ws_login_companyShortName', this.loginForm.companyName, {
              expires: 365,
            })
            Cookies.set('ws_login_account', this.loginForm.username, {
              expires: 365,
            })
            if (this.rememberMe) {
              Cookies.set('ws_login_pwd', this.loginForm.password, {
                expires: 365,
              })
              Cookies.set('ws_login_rememberMe', 1, {
                expires: 365
              })
            } else {
              Cookies.remove('ws_login_companyShortName')
              Cookies.remove('ws_login_account')
              Cookies.remove('ws_login_pwd')
              Cookies.set('ws_login_rememberMe', 0, {
                expires: 365
              })
            }
            const redirect = this.$route.query.redirect
            if (redirect) {
              this.$router.push(redirect)
            } else {
              this.$router.push('/')
            }
            const data = await this.getTenantUser()
            localStorage.setItem(
              'ws_login_getTenantInfoByUser',
              JSON.stringify({
                ...data,
                loginInfo: res
              })
            )
            localStorage.setItem(
              'ws_login_accountId',
              JSON.stringify(res.accountId)
            )
          } else {
            return false
          }
        })
      },
      loop(arr, father) {
        for (let i in arr) {
          if (typeof arr[i] == 'object') {
            if (father) {
              this.loop(arr[i], father + '.' + i)
            } else {
              this.loop(arr[i], i)
            }
          } else {
            let obj = {
              key: father + '.' + i,
              value: arr[i],
            }
            this.zhArray.push(obj)
          }
        }
        localStorage.setItem(
          'InterNational_zh_array',
          JSON.stringify(this.zhArray)
        )
      },
      // 快捷登录
      handleFastLogin() {
        this.$refs['loginForm2'].validate(async (valid) => {
          if (valid) {
            const res = await this.fastLogin(this.queryLoginForm)
            localStorage.setItem('ws_login_type', 2)
            const redirect = this.$route.query.redirect
            if (redirect) {
              this.$router.push(redirect)
            } else {
              this.$router.push('/')
            }
            const {
              data
            } = await this.getTenantUser()
            localStorage.setItem(
              'ws_login_getTenantInfoByUser',
              JSON.stringify({
                ...data,
                loginInfo: res
              })
            )
            localStorage.setItem(
              'ws_login_accountId',
              JSON.stringify(res.accountId)
            )
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  $svg: #a7a8a9;
  $dark_gray: #889aa4;

  .signin-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    overflow: hidden;

    .register-center {
      .register-title {
        padding-bottom: 20px;
        border-bottom: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .register-form {
        padding: 20px 30px;

        .form-tip {
          margin-top: 20px;
          color: #999999;
          font-size: 12px;
        }

        p {
          font-size: 14px;
          color: #333333;
          padding-bottom: 100px;
          line-height: 24px;
        }

        .registration-completed {
          width: 100%;
          border: 1px solid #1e6ced;
          background-color: #edf4ff;
          color: #1e6ced;
        }
      }

      /deep/ .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before,
      .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before {
        content: '';
      }

      /deep/ .el-form-item__content {
        line-height: 32px;
      }

      /deep/ .el-form-item__error {
        padding: 2px;
      }

      /deep/ .el-form-item__label {
        line-height: 12px;
      }

      /deep/ .el-input__inner {
        height: 34px;
      }

      /deep/ .el-form-item {
        margin-bottom: 20px;
      }

      .code_style {
        /*/deep/ .el-input{*/
        width: 65% !important;
        /*}*/
      }

      max-width: 480px;
      margin: 0 auto;
      width: 100%;
      background-color: #fff;
      padding: 20px;
      border-radius: 8px;

      .login-title {
        font-size: 26px;
        text-align: center;
        padding: 2%;
        color: #666;
        margin-bottom: 10%;
        display: inline-block;
      }

      .remember-information {
        cursor: pointer;
        padding-bottom: 50px;

        .forget-pwd {
          display: inline-block;
          white-space: nowrap;
          color: #999;
          font-size: 12px;
          line-height: 19px;
        }
      }

      .svg-container {
        color: $svg;
        width: 30px;
        position: absolute;
        height: 32px;
        line-height: 32px;
        border-radius: 8px;
        top: 0;
        left: 0;
        z-index: 9;
      }

      .show-pwd {
        position: absolute;
        right: 14px;
        top: 0;
        font-size: 16px;
        color: $dark_gray;
        cursor: pointer;
        user-select: none;
      }
    }

    .login-box {
      width: 420px;
      display: flex;
      flex-direction: column;

      .login-head {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #fff;
        font-size: 16px;

        .logo {
          background-image: url('../../../public/img/logo.png');
          background-position: center center;
          background-repeat: no-repeat;
          width: 260px;
          height: 68px;
          background-size: 100% 100%;
        }

        &>span {
          text-align: center;
        }
      }

      .login-body {
        display: flex;
        padding: 5px 30px 15px;
        flex-direction: column;
        align-items: center;
        height: 410px;
        z-index: 1000;
        position: relative;

        &>ul {
          color: #fff;
          width: 100%;
          list-style: none;
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: center;
          padding: 0;
          margin: 0 0 32px 0;

          li {
            padding: 10px 0px;
            cursor: pointer;
            font-size: 18px;

            &:nth-child(1) {
              margin-right: 40px;
            }
          }

          .selected {
            border-bottom: 2px solid #fff;
            font-weight: 600;
          }
        }

        &>form {
          align-self: center;
          width: 100%;

          /deep/.el-input__inner {
            text-indent: 12px;
            background-color: transparent;
            border-left: none;
            border-top: none;
            border-right: none;
            border-radius: 0;
            border: 1px solid #e5e8ed!important;
            color: #000;
            padding: 0;
            padding: 5px 10px;
            border-radius: 30px;
          }

          /deep/ .el-input__inner::-webkit-input-placeholder {
            color: #e5e8ed;
            font-weight: bold;
          }

          /deep/.userCellPhone {
            position: relative;

            .el-form-item__label {
              position: absolute;
              top: 12px;
              left: 9px;
            }

            .el-input__inner {
              text-indent: 34px !important;
            }
          }
        }

        & .fastLoginForm {
          margin-top: 38px;
        }

        .qiye {
          background-image: url('../../assets/images/page/login/qiye.png');
          background-repeat: no-repeat;
          background-position: center center;
          background-size: 55%;
        }

        .veriCode {
          position: relative;

          & /deep/.el-form-item__content {
            display: flex;
            flex-direction: row;

            &>div:nth-child(1) {
              width: 100%;
            }

            &>div:nth-child(2) {
              width: 36%;
              margin-left: 15px;
              position: absolute;
              right: 1px;

              & .el-button {
                width: 100% !important;
                background: #fff;
                border: 1px solid #fff;
                color: #7cbe25;

                span {
                  border-left: 1px solid #e9ecf0;
                  padding: 0 20px;
                }
              }
            }
          }
        }

        .remember-information {
          cursor: pointer;
          padding-bottom: 50px;

          .forget-pwd {
            display: inline-block;
            white-space: nowrap;
            // color: #fff;
            font-size: 12px;
            line-height: 19px;
          }
        }

        .svg-container {
          color: #a7a8a9;
          width: 30px;
          position: absolute;
          height: 32px;
          line-height: 32px;
          border-radius: 8px;
          top: 0;
          left: 0;
          z-index: 9;
          text-align: center;
        }

        .show-pwd {
          position: absolute;
          right: 14px;
          top: 0;
          font-size: 16px;
          color: #889aa4;
          cursor: pointer;
          user-select: none;
        }

        .make-easier {
          display: flex;
          color: #fff;
          font-size: 12px;
          text-align: center;
          line-height: 32px;

          p {
            margin: 0;
          }

          span {
            display: block;
            color: #4489f9;
            cursor: pointer;
            font-weight: 600;
          }
        }
      }
    }

    .login-footer {
      text-align: center;
      color: #9a9a9a;
      padding: 2% 0;
      font-size: 12px;
      min-width: 456px;

      &>ul {
        display: flex;
        margin: 0;
        padding: 0;
        width: 100%;
        list-style: none;
        flex-direction: row;
        justify-content: center;
        padding: 0 120px;

        li {
          padding: 0px 20px;
          border-right: 1px solid #9a9a9a;
          // cursor: pointer;
        }

        // TODO:英文还没有设计好先不上
        // li:hover {
        //   color: #4489f9;
        // }
        &>li:last-child {
          border-right: none;
        }
      }

      .nav {
        display: flex;
        flex-direction: row;
        justify-content: center;
      }

      .copyright {
        padding: 5px 0;
      }

      .version {
        font-weight: bold;
        padding: 4% 0;
        display: block;
        color: #666;
        font-size: 15px;
      }

      .project-name {
        font-weight: 600;
        font-size: 16px;
      }
    }
  }

  .register-container {
    overflow: auto;

    .register-box {
      margin: 20px 0;
    }

    .signin-box {
      z-index: 100;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }

  .login-box {
    width: 420px;
    margin: 0 auto;
  }

  @-webkit-keyframes animate-cloud {
    from {
      background-position: 600px 100%;
    }

    to {
      background-position: 0 100%;
    }
  }

  @-moz-keyframes animate-cloud {
    from {
      background-position: 600px 100%;
    }

    to {
      background-position: 0 100%;
    }
  }

  @-ms-keyframes animate-cloud {
    from {
      background-position: 600px 100%;
    }

    to {
      background-position: 0 100%;
    }
  }

  @-o-keyframes animate-cloud {
    from {
      background-position: 600px 100%;
    }

    to {
      background-position: 0 100%;
    }
  }

  //新增
  .sign_up {
    text-align: center;
    width: 100%;

    .signIn-buttom {
      width: 75%;
      margin-bottom: 10px;
      border-radius: 20px;
    }

    .register-buttom {
      width: 15%;
      margin: 0 auto;
      // color: #fff;
      display: block;
      text-align: center;
      font-size: 12px;
      cursor: pointer;
    }
  }

  .phone-signIn {
    width: 100%;
    border-radius: 20px;
    display: block;
    margin: 0 auto;
    background: #7cbe25;
    color: #fff;
    border: 1px solid #7cbe25;
    padding: 20px !important;
    line-height: 2px;
  }

  .registerSuccess {
    font-size: 30px;
    height: 28px;
    margin-left: 9px;
    line-height: 24px;
    font-weight: bold;
    color: rgb(51, 51, 51);
  }

  /deep/ .service {
    border-radius: 7px !important;

    /deep/ .el-dialog__header {
      display: none;
    }

    /deep/ .el-dialog__body {
      padding: 0 !important;
    }
  }

  .signin-box {
    >>>.el-form-item__label {
      line-height: 12px !important;
    }
  }
  .comp-select{
    width: 100%;
        
  }
</style>