ceres-pc-v2.0/src/views/login/login.vue

<template>
  <div class="showTheLogin">
    <div class="loginCent">
      <nav>
        <div class="hiddenLoginBtn">
          <a class="el-icon-close" @click="hiddenLoginBtn" />
        </div>
      </nav>
      <div class="loginForm">
        <!-- <div class="loginTit" v-text="isRegistered == '1' ? '注册' : '登录'"></div> -->
        <div class="loginTitle">
          <div class="title" v-text="isRegistered !== '1' ? vm.$t('page.login') : '用户注册'"></div>
          <div class="content">
            <span v-text="isRegistered === '1' ? '已有账户？' : '第一次使用Thee商城？'"></span>
            <u @click="registered" v-text="isRegistered === '1' ? '立即登录' : '用户注册'"></u>
          </div>
        </div>
        <div class="loginFormBox">
          <div class="inputBox">
            <el-input v-model="userName" placeholder="$t('common.entermobilephone')">
              <template slot="prepend"><span class="icon iconfont">&#xe62f;</span></template>
            </el-input>
          </div>
          <div>
            <div class="inputBox">
              <el-input v-model="verificationCode" :placeholder="vm.$t('common.enterverificationcode')" @keyup.enter.native="login">
                <template slot="prepend">
                  <span class="icon iconfont">&#xe62e;</span>
                </template>
              </el-input>
              <div>
              </div>

              <span v-show="codeShow" class="codeBtn" @click="getCode">{{vm.$t('common.verificationcodetip')}}</span>
              <span v-show="!codeShow" class="codeBtn codeCount">{{ vm.$t('common.verificationcodetip3') }}({{ codeCountNum }}s)</span>
            </div>
          </div>
          <div class="noLogin" :class="{ registered: isRegistered === '1' }">
            <el-checkbox v-show="isRegistered === '2'" v-model="isNoLogin">七天免登录</el-checkbox>
            <span></span>
          </div>
          <el-button class="loginBtn" @click="login" 
            :loading="loadingLogin">{{isRegistered === '1' ? vm.$t('page.register') : vm.$t('page.login')}}</el-button>
        </div>
        <div class="loginProtocol" v-if="isRegistered === '1'">
          <el-checkbox v-model="haveRead"></el-checkbox>
          <span>阅读并同意</span>
          <span @click="readAgreement">《Thee 服务协议》</span>
        </div>
      </div>
    </div>
    <el-dialog title="服务协议" :visible.sync="dialogAgreement" width="50%">
      这是服务协议
    </el-dialog>
  </div>
</template>

<script>
import Cookie from 'js-cookie'
import store from '@/store/index.js'
import {
  getTheCode,
  login
} from '@/api/login.js'
import {
  getUserInfo
} from '@/api/user/user.js'
export default {
  name: 'login',
  data() {
    const vm =window.vm;
    return {
      vm:vm,
      userName: '',
      verificationCode: '',
      isNoLogin: false,
      haveRead: false,
      codeShow: true,
      codeCountNum: '',
      dialogAgreement: false,
      isRegistered: '2',
      loadingLogin: false
    }
  },
  methods: {
    async getUserInfoData() {
      const response = await getUserInfo()
      const res = response.data
      if (res.code === '200') {
        store.commit('SET_USERINFO', res.data)
        this.userInfoData = res.data
      }
    },
    async getCode() {
      const TIME_COUNT = 120
      let reg = /^1[13456789]\d{9}$/
      if (!reg.test(this.userName)) {
        this.$message({
          message: '手机号格式错误',
          type: 'error',
          customClass: 'messageZindex',
        })
        return
      }
      const response = await getTheCode({ phone: this.userName })
      const res = response.data
      if (res.code === '200') {
        if (!this.timer) {
          this.codeCountNum = TIME_COUNT
          this.codeShow = false
          this.timer = setInterval(() => {
            if (this.codeCountNum > 0 && this.codeCountNum <= TIME_COUNT) {
              this.codeCountNum--
            } else {
              this.codeShow = true
              clearInterval(this.timer)
              this.timer = null
            }
          }, 1000)
        }
        this.$message({
          message: '验证码获取成功',
          type: 'success',
          customClass: 'messageZindex'
        })
      } else {
        this.$message({
          message: res.message,
          type: 'warning',
          customClass: 'messageZindex'
        })
      }
    },
    // 阅读协议
    readAgreement() {
      this.dialogAgreement = true
    },
    login() {
      let that = this
      let reg = /^1[13456789]\d{9}$/
      if (!reg.test(this.userName)) {
        this.$message({
          message: '手机号码格式错误',
          type: 'error',
          customClass: 'messageZindex'
        })
        return
      }
      if (this.verificationCode === '') {
        this.$message({
          message: that.$t('common.enterverificationcode'),
          type: 'warning',
          customClass: 'messageZindex'
        })
        return
      }
      if (this.isRegistered === '2') {
        this.getLogin()
      } else if (this.haveRead) {
        this.getLogin()
      } else {
        this.$message({
          message: '请阅读并同意服务协议',
          type: 'warning',
          customClass: 'messageZindex'
        })
      }
    },
    async getLogin() {
      this.loadingLogin = true
      const response = await login({
        phone: this.userName,
        verificationCode: this.verificationCode,
        type: this.isRegistered,
        terminal: 5
      })
      const res = response.data
      if (res.code === '200') {
        if (this.isNoLogin) {
          Cookie.set('token', res.data.token, { expires: 7 })
        } else {
          Cookie.set('token', res.data.token, { expires: 1 })
        }
        this.getUserInfoData()
        this.$message({
          message: '登录成功',
          type: 'success',
          customClass: 'messageZindex'
        })
        store.commit('SHOW_LOGIN')
        store.commit('IS_LOGIN', true)
        location.reload()
      } else {
        this.$message({
          message: res.message,
          type: 'warning',
          customClass: 'messageZindex'
        })
      }
      this.loadingLogin = false
    },
    registered() {
      this.codeShow = true
      clearInterval(this.timer)
      this.timer = null
      this.userName = ''
      this.verificationCode = ''
      if (this.isRegistered === '1') {
        this.isRegistered = '2'
      } else {
        this.isRegistered = '1'
      }
    },
    // 关闭登录
    hiddenLoginBtn() {
      store.commit('SHOW_LOGIN')
    }
  }
}
</script>

<style lang="scss" scoped>
.showTheLogin {
  // height: 100vh;
  // min-height: 768px;
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);

  .loginCent {
    // background: url('../../assets/images/beijing.png') no-repeat;
    // flex-grow: 1;
    // background-size: cover;
    width: 500px;
    height: 100%;
    min-height: 768px;
    padding: 20px 50px;
    float: right;
    background-color: #ffffff;
    animation: showRight .5s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;

    nav {
      margin-bottom: 85px;

      .hiddenLoginBtn {
        a {
          float: right;
        }
      }
    }

    .loginForm {
      width: 500px;
      height: 100%;
      background: #ffffff;

      .loginTitle {
        font-family: Microsoft YaHei;
        color: #333333;

        .title {
          font-size: 36px;
        }

        .content {
          margin: 10px 0;
          font-size: 14px;

          u {
            color: $mainColor;
            cursor: pointer;
          }
        }
      }

      .loginFormBox {
        .inputBox {
          position: relative;

          .el-input {
            .iconfont {
              font-size: 32px;
              padding: 0 10px;
            }
          }

          >>>.el-input__inner {
            height: 70px;

            border-radius: 0px;
            font-size: 20px;
            padding-left: 5px;
          }

          &:nth-child(2) {
            margin: 60px 0 20px 0;
          }

          .codeBtn {
            width: 120px;
            height: 50px;
            background: #EEEEEE;
            border: #999999;
            border-radius: 0;
            display: block;
            line-height: 54px;
            text-align: center;
            position: absolute;
            right: 5px;
            color: #333333;
            bottom: 10px;
            cursor: pointer;
          }

          .codeCount {
            color: #999999;
          }
        }

        .noLogin {
          color: #333333;
          font-size: 18px;
          margin: 20px 0 60px 0;
          height: 30px;
          align-items: center;
          display: flex;
          justify-content: space-between;

          >>>.el-checkbox__label {
            font-size: 16px;
            color: #333333;
            font-weight: 400;
          }

          span {
            cursor: pointer;
            font-size: 16px;
            text-decoration: underline;
            color: #666666;
          }
        }

        .registered {
          justify-content: flex-end;
        }

        .loginBtn {
          width: 100%;
          height: 70px;
          background: $mainColor;
          border-radius: 0;
          border: 1px solid $mainColor;
          text-align: center;
          font-size: 20px;
          color: $mainBtnFontColor;
          cursor: pointer;

          &:hover {
            border: 1px solid $mainColor;
          }
        }
      }

      .loginProtocol {
        padding: 0 60px;
        display: flex;
        align-items: center;
        height: 80px;
        line-height: 80px;
        border-top: 1px solid #EEEEEE;

        span {
          margin-left: 10px;
        }

        span:nth-child(3) {
          color: #426BEA;
          cursor: pointer;
        }
      }

      >>>.el-checkbox__inner {
        width: 20px;
        height: 20px;

        &:after {
          height: 10px;
          left: 7px;
          width: 4px;
        }
      }
    }
  }

  >>>.el-dialog__body {
    max-height: 500px;
    min-height: 300px;
    overflow: auto;
  }
}

.hiddenLogin {
  display: none;
}

@keyframes showRight {
  from {
    width: 560px;
    opacity: 0;
  }

  to {
    width: 600px;
    opacity: 1;
    display: block;
  }
}</style>