platformFront/src/components/login/Login.vue

<template>
    <div class="login-container">
        <banner></banner>
        <div class="login-img fl"><img src="../../images/loginImg.png"/></div>
        <div class="login-box">
            <!-- <div class="box-le"><img src="../../images/left.jpg"/></div> -->
            <div class="box-ri">
                <div class="title-box clearfix"> <h3 class="login-title fl">登录</h3> <h4 class="num fr" @click="toRegister">立即注册</h4></div>
               
                <div class="ri-center">
                    <el-form :model="ruleForm2" :rules="rules2" ref="ruleFormReg">
                        <el-form-item prop="tel">
                            <el-input v-model="ruleForm2.tel" name="username" autocomplete="off" maxlength="11"
                                      placeholder="请输入用户名或手机号"
                                      clearable class="ri-tel" @keyup.enter.native="submitForm('ruleForm2')"
                                      ref="username"></el-input>
                        </el-form-item>
                        <div style="height: 20px;"></div>
                        <el-form-item prop="pwd">
                            <el-input v-model="ruleForm2.pwd" name="password" autocomplete="off" maxlength="16"
                                      placeholder="请输入密码"
                                      clearable type="password" class="ri-pwd"
                                      @keyup.enter.native="submitForm('ruleForm2')" ref="password"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <!-- <span class="num" @click="toRegister">注册账号</span> -->
                            <span class="pwd" @click="toForgetPsw">忘记密码?</span>
                        </el-form-item>
                        <el-form-item>
                            <el-button plain v-if="otherCor" >登录</el-button>
                            <el-button ref="btn" v-else class="otherCor" plain @click="submitForm('ruleForm2')">登录
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
        <copy-right-info></copy-right-info>
    </div>
</template>

<script>
  import Vue from 'vue';
  import banner from '../common/Banner.vue';
  import copyRightInfo from '../common/CopyRightInfo.vue';
  import api from '../../api/index.js';
  import './login.less';
  import md5 from 'js-md5'
	
  export default {
    name: 'Login',
    data() {
      //手机号码验证
      var myreg = /^1[0-9]{10}$/;
      //密码验证 纯字母纯英文
      var numreg = /^(?![0-9]+$)(?![a-zA-Z]+$)/;
      //密码验证 密码长度
      var lengreg = /^[0-9A-Za-z]{6,16}$/;
      var validatePass = (rule, value, callback) => {
        // if(isNaN(value) == false){   //手机号
        // 正常情况

        if (value.trim() == '') {
          callback(new Error('用户名不能为空'));
          this.$refs.username.value = "";
        }
        // 手机号
        if (isNaN(value) == false) {
          if (value.length !== 11 || !myreg.test(value)) {
            callback(new Error('手机号格式有误'));
          } else {
            callback();
          }
        } else if (isNaN(value) == true) {
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value.trim() == '') {
          callback(new Error('密码不能为空'));
          this.$refs.password.value = "";
        } else if (value.length < 6) {
          callback(new Error('密码长度应为6位至16位之间'));
        } else if (!numreg.test(value)) {
          callback(new Error('密码不能为纯数字或纯英文'));
        } else {
          callback();
        }
      };
      return {
        otherCor: true,
        ruleForm2: {
          tel: '',
          pwd: ''
        },
        rules2: {
          tel: [{
            required: true,
            validator: validatePass,
            trigger: 'blur'
          }],
          pwd: [{
            required: true,
            validator: validatePass2,
            trigger: 'blur'
          }],
        }
      };
    },
    mounted() {
      if (window.history && window.history.pushState) {
        history.pushState(null, null, document.URL);
        window.addEventListener('popstate', function () {
            history.pushState(null, null, document.URL);
        });
      }
    },
    computed: {
      nextButton() {
        const {
          tel,
          pwd
        } = this.ruleForm2;
        return {
          tel,
          pwd
        }
      }
    },
    watch: {
      nextButton: {
        handler: function (val) {
          if (val.tel.trim() && val.pwd.trim()) {
            this.otherCor = false;
          } else {
            this.otherCor = true;
          }
        },
        deep: true
      }
    },
    methods: {
      CalcuMD5(password){
        // password = password.toUpperCase();
        password = md5(password);
        return password;
      },
      submitForm: function () {
        const username = this.ruleForm2.tel;
        const password = this.CalcuMD5(this.ruleForm2.pwd);
        let params = {
          "username": username,
          "password": password
        }
        //重新登录清空原有token;
        localStorage.removeItem('token');
        this.$refs.ruleFormReg.validate((valid) => {
          if (valid) {
            api.loginMess(params).then((res) => {
              if (res.status == 200) {
								// console.log(res)
                if (res.data.code == '10020000') { //未注册
                  // this.$message.error(res.data.msg);
									this.$message.error("该账号或手机号未注册！")
                } else if (res.data.code == '10020001') { //密码错误
                  this.$message.error(res.data.msg);
                } else if (res.data.code == '0') {
                  const token = JSON.stringify(res.data.data);
                  localStorage.setItem("token", token);
                  this.$message({
                    message: '登录成功！',
                    type: 'success',
                    duration: 1000,
                    onClose: function () {
                      const type = res.data.data.type;
                      if (type == 0) {
                        this.$router.push({
                          path: '/user'
                        });
                      } else if (type == 1) {
                        this.$router.push({
                          path: '/admin'
                        });
                      }
                    }.bind(this)
                  });
                }
              }
            }).catch((err) => {
              console.log(err);
            })
          } else {
            console.log('faild')
            return false;
          }
        });
      },
      toRegister() { //点击注册
        this.$router.push({
          path: '/register'
        });
      },
      toForgetPsw() {//忘记密码
        this.$router.push({
          path: '/forgetPassword'
        });
      }
    },
    components: {
      'banner': banner,
      'copyRightInfo': copyRightInfo
    },
  }
</script>