yiliangyiyun-pc/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-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,
} 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 {
      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'
    sessionStorage.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()
    }
  },
  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
    },
    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)
          sessionStorage.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()
          sessionStorage.setItem(
            'ws_login_getTenantInfoByUser',
            JSON.stringify({ ...data, loginInfo: res })
          )
          sessionStorage.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)
        }
      }
      sessionStorage.setItem(
        'InterNational_zh_array',
        JSON.stringify(this.zhArray)
      )
    },
    // 快捷登录
    handleFastLogin() {
      this.$refs['loginForm2'].validate(async (valid) => {
        if (valid) {
          const res = await this.fastLogin(this.queryLoginForm)
          sessionStorage.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()
          sessionStorage.setItem(
            'ws_login_getTenantInfoByUser',
            JSON.stringify({ ...data, loginInfo: res })
          )
          sessionStorage.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;
          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;
  }
}
</style>