yiyunjianzhuBeta/src/views/login.vue

<!--
 * @Description: 登录页面组件
 * @version: V1.0
 * @Author: xzx
 * @Date: 2019-11-04 17:22:44
 * @LastEditors  : xzx
 * @LastEditTime : 2019-12-29 10:50:35
 -->
<template>
  <div class="loginbox_warp" id="app">
    <!-- 登录背景动画 -->
    <iframe
      src="../../static/img/bgAnimate/bganimat.html"
      frameborder="0"
      style="width:100%;height:98%;width:calc(100vw);height:calc(100vh);position: absolute;top:0"
      class="login_bg"
    ></iframe>
    <div class="LoginTitleWel">
      <div class="logintitlefirst">
        <span>欢迎使用</span>
        <span>探索者协同</span>
      </div>
    </div>
    <!-- <div class="logoarea">
      <div class="loginimgboxa">
        <img src="/static/img/loginBox.svg" class="loginimgbordera" />
        <img src="/static/img/Logo/logoA.png" alt="" class="loginimgboxImga" />
      </div>
    </div>-->
    <div class="loginbox">
      <div>
        <!-- 第一次登录 -->
        <div v-show="loginShow == 0">
          <div class="login_formBox">
            <label class="loginlabel">验证身份</label>
            <label class="loginlabel">
              <i class="icon font_family icon-icon_fanhui combackreturn" v-on:click="returnLoign"></i>设置密码
            </label>
            <form class="formlogin">
              <div class="formlogin_item">
                <input type="text" name placeholder="请输入企业预留手机号或邮箱" class="login_input" />
              </div>
              <div class="formlogin_item">
                <input type="password" name placeholder="设置登入密码" class="login_input" />
              </div>
              <div class="formlogin_item">
                <input type="password" name placeholder="确认登入密码" class="login_input" />
              </div>
            </form>
          </div>
          <div>
            <button class="login_btn">下一步</button>
            <button class="login_btn">完成并登入</button>
          </div>
        </div>
        <!-- 以后登录 -->
        <div v-if="loginShow == 1">
          <div class="login_formBox">
            <label class="loginlabel">登入</label>
            <form class="formlogin">
              <div class="formlogin_item">
                <input
                  type="text"
                  name="username"
                  placeholder="请输入企业预留手机号或邮箱"
                  class="login_input"
                  v-model="account"
                />
              </div>
              <div class="formlogin_item">
                <input
                  type="password"
                  name
                  placeholder="输入登入密码"
                  class="login_input"
                  v-model="pwd"
                  @keyup.enter="ToMain"
                />
                <a
                  href="javascript:;"
                  class="loginlabel_resit"
                  v-on:click="backPassword"
                  v-if="account != ''"
                >忘记密码</a>
              </div>
              <div class="worningalert" v-if="errTips == true">{{tipmgs}}</div>
            </form>
          </div>
          <el-checkbox v-model="isRemember" class="login_checkBox mt-10">记住密码</el-checkbox>
          <div>
            <button class="login_btn" @click="ToMain" @keyup.enter.native="ToMain">登入</button>
            <a class="login_btn_defualt" v-on:click="loginBackManage">切换至后台登入</a>
          </div>
        </div>
        <!--登录后台 -->
        <div v-if="loginShow == 2">
          <div class="login_formBox">
            <label class="loginlabel">登入后台</label>
            <form name="formName" class="formlogin">
              <div class="formlogin_item">
                <input
                  type="text"
                  name="inputName"
                  value
                  placeholder="请输入企业预留手机号或邮箱"
                  class="login_input"
                  v-model="account"
                />
              </div>
              <div class="formlogin_item">
                <input
                  type="password"
                  name
                  placeholder="请输入登入密码"
                  class="login_input"
                  v-model="pwd"
                  @keyup.enter="ToMain"
                />
                <a
                  href="javascript:;"
                  class="loginlabel_resit"
                  v-on:click="backPassword"
                  v-if="account != ''"
                >忘记密码</a>
              </div>
              <div class="worningalert" v-if="errTips == true">{{tipmgs}}</div>
            </form>
          </div>
          <el-checkbox v-model="isRemember" class="login_checkBox mt-10">记住密码</el-checkbox>
          <div>
            <button class="login_btn" @click="ToMain" @keyup.enter.native="ToMain">登入</button>
            <a class="login_btn_defualt" v-on:click="loginPage">切换至平台登入</a>
          </div>
        </div>
        <!-- 找回密码 -->
        <div v-if="loginShow == 3">
          <div class="login_formBox">
            <label class="loginlabel">
              <i class="icon font_family icon-icon_fanhui combackreturn" v-on:click="loginPage"></i>输入账号
            </label>
            <form class="formlogin">
              <input
                type="text"
                name
                placeholder="请输入企业预留手机号或邮箱"
                v-model="phoneNumber"
                class="login_input"
              />
            </form>
          </div>
          <div>
            <button class="login_btn" v-on:click="next">下一步</button>
          </div>
        </div>
        <!-- 找回密码第二步 -->
        <div v-if="loginShow == 4">
          <div class="login_formBox">
            <label class="loginlabel">
              <i class="icon font_family icon-icon_fanhui combackreturn" v-on:click="prev"></i>验证身份
            </label>
            <form class="formlogin">
              <div class="formlogin_item rightBtn_input">
                <input type="text" name placeholder="输入验证码" class="login_input" v-model="phoneCode" />
                <BtnSmsCode :phoneNum="phoneNumber" :checkPhoneNum="phoneNumber"></BtnSmsCode>
              </div>
            </form>
          </div>
          <div>
            <button class="login_btn" v-on:click="loginShow = 5">下一步</button>
          </div>
        </div>
        <!-- 找回密码第三步 -->
        <div v-if="loginShow == 5">
          <div class="login_formBox">
            <label class="loginlabel">
              <i class="icon font_family icon-icon_fanhui combackreturn" v-on:click="prev"></i>重制密码
            </label>
            <form class="formlogin">
              <div class="formlogin_item">
                <input
                  type="text"
                  name
                  placeholder="输入新密码"
                  class="login_input"
                  v-model="firstNewPwd"
                />
              </div>
              <div class="formlogin_item">
                <input
                  type="password"
                  name
                  placeholder="确认新密码"
                  class="login_input"
                  v-model="enterNewPwd"
                  @input="checkPwd()"
                />
                <span class="yyerrtip">{{ checkPwdTip }}</span>
                <!-- //dhj 也可以内置在input里面,方法二选一吧 -->
              </div>
            </form>
          </div>
          <div>
            <button class="login_btn" v-on:click="returnLoign">重新登入</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
.login_bg {
  width: 100%;
  height: 99%;
}
.login_checkBox .el-checkbox__inner {
  width: 16px;
  height: 16px;
  border-radius: 3px;
}
.login_checkBox .el-checkbox__inner::after {
  border: 1px solid #fff;
  border-top: 0;
  border-left: 0;
  height: 9px;
  left: 3px;
  top: 0px;
  width: 5px;
}
</style>
<script>
import BtnSmsCode from "./components/BtnSmsCode/BtnSmsCode.vue";
export default {
  components: {
    BtnSmsCode
  },
  data() {
    return {
      filelist: [],
      login: true,
      regist: false,
      errTips: false,
      tipmgs: "",
      account: "",
      pwd: "",
      loginShow: 1,
      isBackground: false,
      phoneNumber: "", //手机号码
      firstNewPwd: "", //初次输入密码
      enterNewPwd: "", //确认密码
      checkPwdTip: "", //检测提示
      phoneCode: "", //手机验证码
      isRemember: false, //记住密码
      isClient: process.env.IS_CLIENT //是否是客户端
    };
  },
  beforeRouteLeave(to, from, next) {
    sessionStorage.login = from.name;
    next();
  },
  created: function() {
    sessionStorage.login = "";
  },
  mounted: function() {
    this.loadRemember();
    window["tipMsg"] = msg => {
      this.tipMsg(msg);
    };
  },
  methods: {
    /**
     * 提示信息
     */
    tipMsg(msg){
      this.$notify({
        title: "温馨提示",
        message: msg,
        type: "warning",
        offset: 100,
        duration: 3500
      });
    },
    /**
     * @description: 获取记住密码
     * @param {type}
     * @return:
     */
    loadRemember() {
      if (this.$cookie.get("remember")) {
        this.account = this.$cookie.get("account");
        this.pwd = this.$cookie.get("pwd");
        var backgroundValue = this.$cookie.get("background");
        if (backgroundValue == "false") {
          this.isBackground = false;
        }
        this.isRemember = true;
      }
    },
    /**
     * @description: 找回密码
     * @param {type}
     * @return:
     */
    backPassword: function() {
      this.loginShow = 3;
    },
    /**
     * @description: 上一步
     * @param {type}
     * @return:
     */
    prev: function() {
      this.loginShow = 3;
    },
    /**
     * @description: 下一步
     * @param {type}
     * @return:
     */
    next: function() {
      if (!/^1[3456789]\d{9}$/.test(this.phoneNumber)) {
        this.$notify({
          title: "温馨提示",
          message: "请检查手机号是否填写正确",
          type: "warning",
          offset: 100,
          duration: 2500
        });
      } else {
        this.checkPhone();
      }
    },
    /**
     * @description: 检测手机是否可用
     * @param {type}
     * @return:
     */
    checkPhone: function() {
      var thisApp = this;
      this.$axios({
        method: "get",
        url: encodeURI(
          process.env.API_HOST + "account/check/phone/" + thisApp.phoneNum
        ),
        params: { phone: thisApp.phoneNum }
      })
        .then(response => {
          if (response.data.state == 1) {
            thisApp.$notify({
              title: "温馨提示",
              type: "warning",
              message: response.data.message,
              offset: 100,
              duration: 2500
            });
            thisApp.loginShow = 4;
          } else {
            thisApp.$notify.error({
              title: "温馨提示",
              message: response.data.message,
              offset: 100,
              duration: 2500
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    loginPage: function() {
      this.loginShow = 1;
      if(this.isBackground){
        this.isBackground = false;
      }else{
        this.isBackground = true;
      }
    },
    /**
     * @description:返回登录
     * @param {type}
     * @return:
     */
    returnLoign: function() {
      if (this.firstNewPwd != this.enterNewPwd) {
        this.$notify({
          title: "温馨提示",
          message: "您输入的两次密码不一致",
          type: "warning",
          offset: 100,
          duration: 2500
        });
        return;
      } else {
        var thisApp = this;
        this.$axios({
          method: "put",
          url: encodeURI(process.env.API_HOST + "account/pwd/phone"),
          data: {
            phone: thisApp.phoneNumber,
            code: thisApp.phoneCode,
            newPwd: thisApp.enterNewPwd
          }
        })
          .then(function(response) {
            if (response.data.state == 1) {
              thisApp.$notify({
                title: "温馨提示",
                type: "warning",
                message: response.data.message,
                offset: 100,
                duration: 2500
              });
              thisApp.firstNewPwd = "";
              thisApp.enterNewPwd = "";
              thisApp.phoneNumber = "";
              thisApp.phoneCode = "";
              thisApp.loginPage();
            } else {
              thisApp.$notify.error({
                title: "温馨提示",
                message: response.data.message,
                offset: 100,
                duration: 2500
              });
            }
          })
          .catch(function(error) {
            console.log(error);
          });
      }
    },
    /**
     * @description: 登录探索者后台
     * @param {type}
     * @return:
     */
    loginBackManage: function() {
      this.loginShow = 2;
      this.isBackground = true;
    },
    /**
     * @description: 系统登录
     * @param {type}
     * @return:
     */
    ToMain: function() {
      var thisApp = this;
      if (thisApp.account == "") {
        thisApp.errTips = true;
        thisApp.tipmgs = "请输入用户名！";
        return;
      }
      if (thisApp.pwd == "") {
        thisApp.errTips = true;
        thisApp.tipmgs = "请输入密码!";
        return;
      }
      var param = {
        userName: this.account,
        passWord: this.pwd,
        isBackground: this.isBackground
      };
      this.$axios({
        method: "post",
        url: encodeURI(process.env.API_HOST + "account/login"),
        data: param
      })
        .then(function(response) {
          var state = response.data.state;
          if (state === 1) {
            sessionStorage.userId = response.data.data.userID;
            sessionStorage.companyName = response.data.data.companyName;
            sessionStorage.companyId = response.data.data.companyID;
            sessionStorage.permission = response.data.data.permission;
            sessionStorage.backgroundPermission =
            response.data.data.backgroundPermission;
            sessionStorage.cnName = response.data.data.cnName;
            sessionStorage.userName = response.data.data.userName;
            sessionStorage.user = JSON.stringify(response.data.data);
            sessionStorage.token = response.data.data.token;
            sessionStorage.pageName = "index";
            if (thisApp.isRemember) {
              thisApp.$cookie.set("remember", true);
              thisApp.$cookie.set("account", thisApp.account);
              thisApp.$cookie.set("pwd", thisApp.pwd);
              thisApp.$cookie.set("background", thisApp.isBackground); 
            } else {
              thisApp.$cookie.remove("remember");
              thisApp.$cookie.remove("account");
              thisApp.$cookie.remove("pwd");
              thisApp.$cookie.remove("background");
            }
            // 客户端启动服务
            if (thisApp.isClient) {
              var userName = sessionStorage.userName;
              if (
                sessionStorage.userName == null ||
                sessionStorage.userName == undefined ||
                sessionStorage.userName == ""
              ) {
                userName = response.data.data.phone;
              }
             
              back.startService(
                sessionStorage.userId,
                sessionStorage.companyId,
                userName,
                response.data.data.passWord
              );
              if (thisApp.isRemember) {
                thisApp.$cookie.set("remember", true, {expires: 7});
                thisApp.$cookie.set("account", thisApp.account, {expires: 7});
                thisApp.$cookie.set("pwd", thisApp.pwd, {expires: 7});
                thisApp.$cookie.set("background", thisApp.isBackground, {expires: 7});
              } else {
                thisApp.$cookie.remove("remember");
                thisApp.$cookie.remove("account");
                thisApp.$cookie.remove("pwd");
                thisApp.$cookie.remove("background");
              }
            }
            if (!thisApp.isBackground) {
              thisApp.$router.push({
                path: "/index"
              });
            } else {
              if (sessionStorage.backgroundPermission == 3) {
                thisApp.$router.push({
                  path: "/system"
                });
              } else{
                thisApp.$router.push({
                  path: "/company"
                });
              }
            }
            thisApp.$notify({
              title: "恭喜您",
              message: "登录成功!开始愉快的体验吧",
              type: "success",
              offset: 100,
              duration: 2500
            });
          } else {
            thisApp.errTips = true;
            thisApp.tipmgs = response.data.message;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    /**
     * @description: 检测两次密码是否一致
     * @param {type}
     * @return:
     */
    checkPwd: function() {
      if (this.firstNewPwd != this.enterNewPwd) {
        this.checkPwdTip = "两次密码输入不一致";
      } else {
        this.checkPwdTip = "成功";
      }
    }
  }
};
</script>