wms / wms4_lecangwcs · Files

<template>
  <div class="dv">
    <div class="login-left">
      <img src="~@/assets/leCangHead.png" alt="" />
    </div>
    <div class="main">
      <div class="timeBox padding-xl" style="color:#606266">
        <div>
          <p class="text-24 text-white" style="margin:-180px 0px 120px 285px;" v-html="formateTime(date)"></p>
        </div>
        <div>
          <p class="text-24 text-white" style="margin:-165px 0px 130px 205px;" v-html="formateDate(date)"></p>
        </div>
      </div>
      <div class="desc" style="text-align: center; font-size:4vw;color:#606266">WCS</div>
      <a-form-model class="user-layout-login" @keyup.enter.native="handleSubmit">
        <a-tabs
          :activeKey="customActiveKey"
          :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
          @change="handleTabClick"
        >
          <a-tab-pane key="tab1" :tab="$t('system.accountLoginWithPassword')">
            <login-account
              ref="alogin"
              @validateFail="validateFail"
              @success="requestSuccess"
              @fail="requestFailed"
            ></login-account>
          </a-tab-pane>
        </a-tabs>
        <a-form-item style="margin-top:24px">
        <div class='btn-style'>
          <a-button
            size="large"
            type="primary"
            htmlType="submit"
            class="login-button"
            :loading="loginBtn"
            @click.stop.prevent="handleSubmit"
            :disabled="loginBtn"
            >{{ $t('button.ok') }}</a-button
          >
          <div class="select">
            <a-select v-model="language" @change="handleLanguageChange">
              <a-select-option value="zh-CN">中文</a-select-option>
              <a-select-option value="en-US">English</a-select-option>
            </a-select>
          </div>
        </div>

        </a-form-item>
      </a-form-model>
      <two-step-captcha
        v-if="requiredTwoStepCaptcha"
        :visible="stepCaptchaVisible"
        @success="stepCaptchaSuccess"
        @cancel="stepCaptchaCancel"
      ></two-step-captcha>
      <login-select-tenant ref="loginSelect" @success="loginSelectOk"></login-select-tenant>
    </div>
  </div>

  <!-- 登录框 -->
</template>

<script>
import Vue from 'vue'
import { ACCESS_TOKEN, ENCRYPTED_STRING } from '@/store/mutation-types'
import ThirdLogin from './third/ThirdLogin'
import LoginSelectTenant from './LoginSelectTenant'
import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha'
import { getEncryptedString } from '@/utils/encryption/aesEncrypt'
import { timeFix } from '@/utils/util'
import LoginAccount from './LoginAccount'
import LoginPhone from './LoginPhone'
import { languageChange } from '@/api/api'

export default {
  components: {
    LoginSelectTenant,
    TwoStepCaptcha,
    ThirdLogin,
    LoginAccount,
    LoginPhone
  },
  data() {
    return {
      customActiveKey: 'tab1',
      rememberMe: true,
      loginBtn: false,
      requiredTwoStepCaptcha: false,
      stepCaptchaVisible: false,
      querySource: {},
      language:'en-US',
      encryptedString: {
        key: '',
        iv: ''
      },
      date: new Date().getTime()
    }
  },
  created() {
    Vue.ls.remove(ACCESS_TOKEN)
    this.getRouterData()
    this.rememberMe = true
    this.loadTime()
    this.language = this.$ls.get('language')
  },
  methods: {
    handleLanguageChange(lang) {
      this.$ls.set('language', lang)
      window.location.reload()
      // languageChange(lang).then(res => {
      //   if (res.success) {
      //   }
      // })
    },
    loadTime() {
      var _this = this;
      setInterval(() => {
        _this.date += 1000;
      }, 1000);

      // this.$api.serveTime({}).then(res => {
      //   console.log("服务器时间", res);
      //   var _this = this;
      //   _this.servertime = res;
      //   setInterval(() => {
      //     _this.date += 1000;
      //     console.log(_this.date, '**');
      //   }, 1000);
      // });
    },
    // 转换时间戳
    formateTime(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minute =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var second =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      var week = ["日", "一", "二", "三", "四", "五", "六"][date.getDay()];
      // return year + "年" + month + "月" + day + "日" + hour + ":" + minute + ":" + second;
      return (
        '<span style="font-size: 40px; text-shadow: 0px 2px 7px rgba(51, 51, 51, 0.6);">' +
        hour +
        ":" +
        minute + ":" + second +
        "</span>"
      );
    },
    formateDate(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minute =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var second =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      var week = [this.$t('system.sunday'), this.$t('system.monday'), this.$t('system.tuesday'),
        this.$t('system.wednesday'), this.$t('system.thursday'), this.$t('system.friday'), this.$t('system.saturday')][date.getDay()];
      // return year + "年" + month + "月" + day + "日" + hour + ":" + minute + ":" + second;
      return (
        "<div style='text-align:left;font-size: 12px;'>" +
        year +
        "/" +
        month +
        "/" +
        day +
        "" +
        "</div><div style='text-align:left;font-size: 12px;'>" + week + "</div>"
      );
    },
    handleTabClick(key) {
      this.customActiveKey = key
    },
    handleRememberMeChange(e) {
      this.rememberMe = e.target.checked
    },
    /**跳转到登录页面的参数-账号获取*/
    getRouterData() {
      this.$nextTick(() => {
        let temp = this.$route.params.username || this.$route.query.username || ''
        if (temp) {
          this.$refs.alogin.acceptUsername(temp)
        }
      })
    },
    timeFix() {
      const time = new Date()
      const hour = time.getHours()
      return hour < 9
        ? this.$t('system.goodMorning1')
        : hour <= 11
        ? this.$t('system.goodMorning2')
        : hour <= 13
        ? this.$t('system.goodAfternoon1')
        : hour < 20
        ? this.$t('system.goodAfternoon2')
        : this.$t('system.goodEvening')
    },
    //登录
    handleSubmit() {
      this.loginBtn = true
      if (this.customActiveKey === 'tab1') {
        // 使用账户密码登录
        this.$refs.alogin.handleLogin(this.rememberMe)
      } else {
        //手机号码登录
        this.$refs.plogin.handleLogin(this.rememberMe)
      }
    },
    // 校验失败
    validateFail() {
      this.loginBtn = false
    },
    // 登录后台成功
    requestSuccess(loginResult) {
      this.$refs.loginSelect.show(loginResult)
    },
    //登录后台失败
    requestFailed(err) {
      let description =
        ((err.response || {}).data || {}).message || err.message || this.$t('system.requestEncounteredError')
      this.$notification['error']({
        message: this.$t('system.loginFailed'),
        description: description,
        duration: 4
      })
      //账户密码登录错误后更新验证码
      if (this.customActiveKey === 'tab1' && description.indexOf('密码错误') > 0) {
        this.$refs.alogin.handleChangeCheckCode()
      }
      this.loginBtn = false
    },
    loginSelectOk() {
      this.loginSuccess()
    },
    //登录成功
    loginSuccess() {
      this.$router.push({ path: '/dashboard/analysis' })
      this.$notification.success({
        message: this.$t('system.welcome'),
        description: this.timeFix()
      })
    },

    stepCaptchaSuccess() {
      this.loginSuccess()
    },
    stepCaptchaCancel() {
      this.Logout().then(() => {
        this.loginBtn = false
        this.stepCaptchaVisible = false
      })
    },
    //获取密码加密规则
    getEncrypte() {
      var encryptedString = Vue.ls.get(ENCRYPTED_STRING)
      if (encryptedString == null) {
        getEncryptedString().then(data => {
          this.encryptedString = data
        })
      } else {
        this.encryptedString = encryptedString
      }
    }
  }
}
</script>
<style lang="less" scoped>
.dv {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100vh !important;
}
.user-layout-login {
  position: relative;
  label {
    font-size: 14px;
  }

  .getCaptcha {
    display: block;
    width: 100%;
    height: 40px;
  }

  .forge-password {
    font-size: 14px;
  }

  button.login-button {
    padding: 0 15px;
    font-size: 16px;
    height: 40px;
    width: 70%;
  }

  .user-login-other {
    text-align: left;
    margin-top: 24px;
    line-height: 22px;

    .item-icon {
      font-size: 24px;
      color: rgba(0, 0, 0, 0.2);
      margin-left: 16px;
      vertical-align: middle;
      cursor: pointer;
      transition: color 0.3s;

      &:hover {
        color: #1890ff;
      }
    }

    .register {
      float: right;
    }
  }

  .valid-error .ant-select-selection__placeholder {
    color: #f5222d;
  }
}
.main {
  width: 668px;
  // height: 100%;
  font-size: 20px;
  margin: 200px 100px 200px 100px;
  color: antiquewhite;
}
.login-left {
  width: inherit;
  height: 100%;
  // border: 1px solid yellowgreen;
  background: url('~@/assets/leCang.jpg') no-repeat;
  background-size: cover;
  // background-size: 100% 100%;
  img {
    width: 220px;
    position: relative;
    left: 19px;
    top: 27px;
  }
}
.btn-style {
  width: 100%;
  // border: 1px solid red;
  display: flex;
  justify-content: space-between;
}

.select {
  // display: inline-block;
  width: 95px;
  height: 40px;
  // position: relative;
  // left: 296px;
  // top: -66px;
  // vertical-align: middle;
  // padding: 0;
  // overflow: hidden;
  // background-color: #fff;
  // color: #555;
  // border: 1px solid #aaa;
  // text-shadow: none;
  // border-radius: 4px;
  // transition: box-shadow 0.25s ease;
  z-index: 2;
}

</style>