flyLong/app2/src/pages/login.vue

<template>
  <div id="pages">
    <div class="main bg bg01" :style="{ height: bodyHeight + 'px' }">
      <h5><img id="logo" src="../../static/images/login/logo.png" alt=""></h5>
      <p><img id="title" src="../../static/images/login/title.png" alt=""></p>
        <ul class="white_cube" >
          <li class="form-group">
            <input type="text" class="form-control" id="sms_username" placeholder="请输入手机号"
                   ref="sms_username"
                   style="border: 1px solid rgb(221, 221, 221);">
          </li>
          <li class="form-group">
            <input type="text" class="form-control" id="uservalid_sms" placeholder="请输入右侧图形码"
                   ref="imgValid"
                   style="border: 1px solid rgb(221, 221, 221);">
            <img id="imgValidcode2"
                 :src="valImgSrc"
                 title="看不清？刷一下试试！" @click="changeValImg"/>
          </li>
          <li class="form-group item">
            <input type="text" class="form-control" id="userValid" placeholder="请输入验证码"
                   ref="sms_valid"
                   @keyup.13="smsLoginBtn"
                   style="border: 1px solid rgb(221, 221, 221);">
            <mu-button color="success" id="valid_btn" @click.navtive="valid_btn">获取验证码</mu-button>
          </li>
        </ul>

      <mt-button type="primary" class="pwd_login_confirm" @click.navtive="smsLoginBtn">登录</mt-button>

    </div>


    <div class="version" :style="{ top: bodyHeight - 30 + 'px' }">
      V {{version}}
    </div>
  </div>
</template>

<script>
  import axios from 'axios';

  let qs = require('qs');
  import {Button} from 'mint-ui';
  import Vue from 'vue'
  import {Field} from 'mint-ui';
  import {Toast} from 'mint-ui';
  import Global from '../Global.js'

  Vue.component(Field.name, Field);
  Vue.component(Button.name, Button);

  export default {
    data() {
      return {
        version: globalVersion(),
        bodyHeight: 0,
        page: 0,
        step: 1,
        valImgSrc: 'data:image/png;base64,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',//测试用路径
        valid_btn: '获取验证码',
        button_state: false,
        register: {
          usercode: '',
          img_valid: '',
          valid: '',
          pwd: '',
        },
        pwd_login: {
          usercode: '',
          valid: '',
          pwd: '',
          img_valid: '',
        },
        phone_login: {
          usercode: '',
          valid: '',
          img_valid: '',
        },
        forget: {
          usercode: '',
          img_valid: '',
          valid: '',
          pwd: '',
        },
      }
    },
    watch: {
      '$route': function (val) {
        if (val.path == '/login') {
          this.bodyHeight = document.documentElement.clientHeight;
          console.log(this.bodyHeight);
        }
      }
    },
    created() {
      this.overtime = new Date();
      // 如果是手动退出用户
      if (this.$route.query.status == 1) {
        // 刷新验证图
        this.changeValImg();
        // 重置倒计时
        this.overtime = new Date();
      }
      this.bodyHeight = document.documentElement.clientHeight;
    },
    mounted() {
      this.overtime = new Date();
      // 如果是手动退出用户
      if (this.$route.query.status == 1) {
        // 刷新验证图
        this.changeValImg();
        // 重置倒计时
        this.overtime = new Date();
      }
      this.bodyHeight = document.documentElement.clientHeight;
      console.log(this.bodyHeight);
    },
    methods: {
      //            sms 登陆
      smsLoginBtn: function () {
        let sms_username = this.$refs.sms_username.value;
        let sms_valid = this.$refs.sms_valid.value;
        if (!globalValid(sms_username, 2, 17, '手机号', that)) return;
        if (!globalValid(sms_valid, 4, 6, '短信验证码', that)) return;
        this.pwd_login_confirm();
      },
      // 页内跳转
      goPage(e) {
        this.page = e;
        this.changeValImg();
      },
      // 点击验证码切换
      changeValImg() {
        let that = this;
        that.valImgSrc = that.valImgSrc + '?' + Math.random();
      },
      // 获取验证码
      get_phone_valid(usercode, this_valid, type) {
        let img_valid = this_valid;
        let tel = usercode;
        let that = this;
        if (!tel) {
          Toast('手机号码不能为空');
          return false
        }
        if (tel.length != 11) {
          Toast('手机号长度不正确');
          return false
        }
        if (!img_valid) {
          Toast('图形验证码不能为空');
          return false
        }
        if (img_valid.length != 4) {
          Toast('图形验证码位数不正确');
          return false
        }
        let url = headapi + 'getCode';
        let param = {
          NAME: tel,
          VALID: img_valid,
          TYPE: type,//（2）（1:注册，2:重置，3:登陆）
        };
        that.button_state = true;
        let postdata = qs.stringify(param);
        axios.post(url, postdata).then(function (data) {
          let json = data.data;
          let code = json.code;
          if (code == 0) {
            let countdown = 60;
            that.valid_btn = countdown + "秒";
            let timer = setInterval(() => {
              if (countdown == 0) {
                clearInterval(timer);//停止计时器
                that.valid_btn = "重新发送";
                that.button_state = false;
              } else {
                countdown--;
                that.valid_btn = countdown + "秒";
                that.button_state = true
              }
            }, 1000);
            Toast('短信已发送，请注意查收');
          } else {
            that.button_state = false;
            Toast(json.memo);
          }
        }, function (response) {
          console.info(response);
        })
      },
      // pwd 登陆
      pwd_login_confirm() {
        const that = this;
        let url = headapi + 'login';
        if (!that.pwd_login.usercode) {
          Toast('手机号码不能为空');
          return false
        }
        if (that.pwd_login.usercode.length != 11) {
          Toast('手机号长度不正确');
          return false
        }
        if (!that.pwd_login.pwd) {
          Toast('密码不能为空');
          return false
        }
        if (that.pwd_login.pwd.length >= 12 || that.pwd_login.pwd.length < 6) {
          Toast('密码长度不正确');
          return false
        }
        if (!that.pwd_login.img_valid && that.step > 0) {
          Toast('图形验证码不能为空');
          return false
        }
        if (that.pwd_login.img_valid.length != 4 && that.step > 0) {
          Toast('图形验证码');
          return false
        }
        let param = {
          VERIFY_NAME: that.pwd_login.usercode,
          VERIFY_CODE: that.pwd_login.pwd,
          LOGIN_TYPE: 1,//（3）（1：密码登陆，2：验证码登陆）
          VALID: that.pwd_login.img_valid,
          STEP: that.step,
        };
        let postdata = qs.stringify(param);
        axios.post(url, postdata).then(function (data) {
          let json = data.data;
          if (json.code == 0) {
            localStorage.usercode = that.pwd_login.usercode;
            that.$router.push({path: '/'});
          } else {
            that.step++
            that.changeValImg();
            Toast(json.memo);
          }
        }, function (response) {
          console.info(response);
        })
      },
      // phone login
      phone_login_confirm() {
        const that = this;
        let url = headapi + 'login';
        if (!that.phone_login.usercode) {
          Toast('手机号码不能为空');
          return false
        }
        if (that.phone_login.usercode.length != 11) {
          Toast('手机号长度不正确');
          return false
        }
        if (!that.phone_login.img_valid) {
          Toast('图形验证码不能为空');
          return false
        }
        if (that.phone_login.img_valid.length != 4) {
          Toast('图形验证码');
          return false
        }
        if (!that.phone_login.valid) {
          Toast('短信验证码不能为空');
          return false
        }
        if (that.phone_login.valid.length >= 12 || that.phone_login.valid.length < 6) {
          Toast('短信验证码长度不正确');
          return false
        }

        let param = {
          VERIFY_NAME: that.phone_login.usercode,
          VERIFY_CODE: that.phone_login.valid,
          LOGIN_TYPE: 2,//（3）（1：密码登陆，2：验证码登陆）
          VALID: that.phone_login.img_valid,
        };
        let postdata = qs.stringify(param);
        axios.post(url, postdata).then(function (data) {
          let json = data.data;
          if (json.code == 0) {
            localStorage.usercode = that.phone_login.usercode;
            that.$router.push({path: '/'});
          } else {
            Toast(json.memo);
          }
        }, function (response) {
          console.info(response);
        })
      },
      // 找回密码并登陆
      forget_confirm() {
        const that = this;
        let url = headapi + 'resetPassword';
        if (!that.forget.usercode) {
          Toast('手机号码不能为空');
          return false
        }
        if (that.forget.usercode.length != 11) {
          Toast('手机号长度不正确');
          return false
        }
        if (!that.forget.img_valid) {
          Toast('图形验证码不能为空');
          return false
        }
        if (that.forget.img_valid.length != 4) {
          Toast('图形验证码');
          return false
        }
        if (!that.forget.valid) {
          Toast('短信验证码不能为空');
          return false
        }
        if (that.forget.valid.length >= 12 || that.forget.valid.length < 6) {
          Toast('短信验证码长度不正确');
          return false
        }
        if (!that.forget.pwd) {
          Toast('密码不能为空');
          return false
        }
        if (that.forget.pwd.length >= 12 || that.forget.pwd.length < 6) {
          Toast('密码长度不正确');
          return false
        }
        let param = {
          VERIFY_NAME: that.forget.usercode,
          VERIFY_CODE: that.forget.valid,
          NEWPWD: that.forget.pwd,
        };
        let postdata = qs.stringify(param);
        axios.post(url, postdata).then(function (data) {
          let json = data.data;
          if (json.code == 0) {
            localStorage.usercode = that.forget.usercode;
            that.$router.push({path: '/'});
          } else {
            Toast(json.memo);
          }
        }, function (response) {
          console.info(response);
        })

      },
    },
    components: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import "../assets/css/comm.css";

  #pages {
    /*position: absolute;*/
    /*top: 0;*/
    /*left: 0;*/
    /*right: 0;*/
    /*bottom: 0;*/
    /*width: 100%;*/
    /*height: 100%;*/
    /*overflow: hidden;*/
    /*display: block;*/
    /*margin: 0 auto;*/
    /*background: url("../../static/images/login/bg.png") top center no-repeat;*/
    /*background-size: 100% 100%;*/
  }

  .main {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: block;
    margin: 0 auto;
    background: url("../../static/images/login/bg.png") top center no-repeat;
    background-size: 100% 100%;
  }

  #logo {
    width: 108px;
    overflow: hidden;
    display: block;
    margin: 0 auto;
    margin-top: 20%;
  }
  #title {
    width: 276px;
    overflow: hidden;
    display: block;
    margin: 0 auto;
    margin-top: 18px;
    margin-bottom: 18px;
  }

  .bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: block;
    margin: 0 auto;
    height: 100%;
    background: url('../assets/images/bg@2x.png') no-repeat left top;
    background-size: 100% 100%;
  }

  /deep/ .mint-cell {
    background: none;
  }

  /deep/ .mint-cell-wrapper {
    background: rgba(255, 255, 255, 0.4);
    color: #fff;
    border-radius: 0px;
    margin-bottom: 3px;
  }

  /deep/ .mint-field-core {
    height: 45px;
    line-height: 45px;
    background: none;
    color: #fff;
    text-indent: 20px;
  }

  /deep/ .mint-field-core::placeholder {
    color: #fff;
  }

  /deep/ .mint-field .mint-cell-title {
    width: 70px;
  }

  .valid_btn {
    background: #004B8D;
    width: 97px;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
  }


  .white_cube {
    width: 337px;
    overflow: hidden;
    display: block;
    margin: 0;
    border-radius: 5px;
    float: none;
    padding: 0 25px;
  }
  .form-control-short {
    width: 60% !important;
    float: left;
    border-right: none;
  }
  #sms_login {
    display: block;
  }
  #valid_btn {
    width: 40%;
    float: right;
    height: 45px;
    background: #25CC42;
    color: #fff;
    text-align: center;
    line-height: 45px;
    font-size: 16px;
    border: none;
    outline: none;
  }
  #valid_btn:hover {
    background: #24c240;
  }
  .form-group {
    width: 100%;
    height: 50px;
    overflow: hidden;
    display: block;
    margin: 0 auto;
    margin-bottom: 3px;
  }
  .form-group input {
    width: 100%;
    height: 50px;
    background: rgba(255,255,255,0.4);
    overflow: hidden;
    display: block;
    margin: 0 auto;
    border: none!important;
    outline: none;
    margin-bottom: 3px;
    font-size: 16px;
    text-indent: 27px;
  }
  .form-group input::placeholder {
    color:#000000;
    font-size: 16px;
  }
  .form-group #uservalid_sms {
    width: 60%;
    float: left;
  }
  .form-group #userValid {
    width: 60%;
    float: left;
  }
  .form-group #imgValidcode2 {
    width: 38%;
    height: 50px;
    background: #fff;
    float: right;
  }
  .form-group #valid_btn {
    width: 38%;
    height: 50px;
    background: rgba(255,255,255,0.4);
    float: right;
    text-align: center;
    line-height: 50px;
    color: #E75296;
  }
  .pwd_login_confirm {
    width: 337px;
    height: 50px;
    background: #e75296;
    overflow: hidden;
    display: block;
    margin: 0 auto;
    border-radius: 0;
    margin-top: 42px;
    font-family: "PingFang SC";
    font-weight: 500;
    font-size: 24px;
    text-align: center;
    color: #fff;
  }
  .pwd_login_confirm /deep/  label {
    word-spacing: 30px;
  }
</style>