Customer-Service-Web/service_exe/src/renderer/pages/login.vue

<template>
  <div>
    <form action>
      <div class="login">
        <div class="loginBg">
          <img src="@/assets/img/loginBg.png" />
        </div>
        <div class="loginBox">
          <div class="row center" style="height:48px;">
            <img :src="img_http + logo" alt style="width: 30px; height: 30px;" />
          </div>
          <div class="row center">
            <span style="font-size:16px;color:#666;">客服系统客服登录</span>
          </div>
          <div class="box row center">
            <div class="boxData" :class="0?'errBd':''">
              <input type="text" v-model="account" placeholder="账号" />
              <img src="@/assets/img/account.png" />
              <p v-if="0" style="color:#f60;font-size:14px;margin-top:5px;margin-left:3px;">账号不存在</p>
            </div>
          </div>
          <div class="box row center">
            <div class="boxData" :class="0?'errBd':''">
              <input type="password" v-model="password" placeholder="密码" />
              <img src="@/assets/img/password.png" />
              <p
                v-if="0"
                style="color:#f60;font-size:14px;margin-top:5px;margin-left:3px;"
              >密码错误，请重新输入</p>
            </div>
          </div>
          <div class="box row center" v-if="showSecurityCode">
            <div class="boxData" :class="0?'errBd':''">
              <input
                maxlength="6"
                @keyup.enter="loginBtn()"
                @blur="testCode()"
                type="text"
                v-model="securityCode"
                placeholder="验证码"
              />
              <img src="@/assets/img/password.png" />
              <p
                v-if="0"
                style="color:#f60;font-size:14px;margin-top:5px;margin-left:3px;"
              >验证码错误，请重新输入</p>
            </div>
          </div>
          <div class="box row center">
            <div class="btn row center" @click="loginBtn()">登录</div>
          </div>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
import "@/css/index.css";
import Vue from "vue";
export default {
  name: "login",
  data() {
    return {
      account: "", //账号
      password: "", //密码
      securityCode: "", // 验证码
      time: "",
      loading: false,
      showSecurityCode: false,
      logo: "",
      verifySystem: "",
      verifySystemId: "",
      img_http: "http://manage.281570.com" //图片路径域
      // img_http: 'http://192.168.2.187:8090',//图片路径域
    };
  },
  methods: {
    testCode() {
      if (this.showSecurityCode) {
        if (!/^[0-9]+$/.test(this.securityCode)) {
          this.$message.error("验证码错误！");
          this.securityCode = "";
        }
      }
    },
    loginBtn() {
      this.time = sessionStorage.getItem("time");
      if (this.$store.getters.get_socket_open) {
        let apiToken = this.$md5("customer-service" + window.location.origin);
        if (this.account && this.password) {
          //进程加载条
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
          });

          // console.log(this.verifySystemId)
          // console.log(this.verifySystem)
          // console.log(this.securityCode)
          let parmas;
          if (this.showSecurityCode) {
            parmas = {
              username: this.account,
              password: this.password,
              securityCode: this.securityCode
            };
          } else {
            parmas = {
              username: this.account,
              password: this.password,
              verifySystemId: this.verifySystemId,
              verifySystem: this.verifySystem
            };
          }
          this.$http.post(this.$ports.login, parmas).then(res => {
            if (res.data.code == 1) {
              this.$store.dispatch("SET_USER", res.data.data.user);
              this.$store.dispatch("SET_IS_INIT", true);
              this.$websocket.send(
                JSON.stringify({
                  type: "init",
                  data: {
                    uid: "KF" + res.data.data.user.id,
                    group: res.data.data.user.group_id,
                    token: res.data.data.user.token,
                    name: res.data.data.user.user_name,
                    avatar: res.data.data.user.user_avatar
                  }
                })
              );
              this.$router.push({
                path: "/",
                query: { pid: escape("这就是一个编码没有什么用啊") }
              });
            } else if (res.data.code == 100) {
              this.$message.success(res.data.msg);
              loading.close();
            } else {
              this.$notify({
                title: "错误",
                message: res.data.msg,
                type: "error",
                duration: 2000
              });
            }

            loading.close();
          });
        } else {
          this.$notify({
            title: "错误提示!",
            message: "请输入您的账号和密码",
            type: "error",
            duration: 2000
          });
        }
      } else {
        this.$notify({
          title: "错误提示!",
          message: "网路链接错误",
          type: "error",
          duration: 2000
        });
      }
    },
    /**************************************/
    //连接建立
    websocketonopen() {
      this.$websocket.onopen();
      //console.log('已经链接')
    }
  },
  mounted() {
    // 判断验证码参数
    let SystemId = this.$public.getQueryString("id");
    let System = this.$public.getQueryString("code");
    let checkVcode=true;
 
    if (!SystemId && !System) {
      this.showSecurityCode = true;
    } else {
      this.showSecurityCode = false;
      this.verifySystemId = SystemId;
      this.verifySystem = System;
      localStorage.clear();
      sessionStorage.clear();
      checkVcode=false;

      
    }
    this.$comm.checkValidCodeEnabled((data)=> {
      if (data == 0) {
        this.showSecurityCode = false;
      } else {
        this.showSecurityCode = true;
        if(!checkVcode){
            this.showSecurityCode = false;
        }
      }
    });

    this.$http.get(this.$ports.TIME).then(res => {
      if (res.data.code == 1) {
        let time = res.data.data.time.split(" ");
        time[0] = new Date(time[0].replace(/-/g, "/")).getTime() / 1000;
        sessionStorage.setItem("time", JSON.stringify(time));
        this.logo = res.data.data.logo;
        sessionStorage.setItem("logo", res.data.data.logo);
      }
    });
   
  }
};
</script>

<style scoped>
p {
  display: inline;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

.login {
  width: 100%;
  height: 100%;
}
.loginBg {
  height: 50%;
}
.loginBg img {
  width: 100%;
  height: 100%;
}
.loginBox {
  position: fixed;
  top: 27%;
  left: 0px;
  right: 0px;
  margin: auto;
  width: 300px;
  height: 280px;
  background: #fff;
  border-radius: 2%;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}
.box {
  /* margin-top: 40px; */
  height: 50px;
}
.boxData {
  width: 200px;
  /* height: 70px; */
  /*border: 1px solid #C6DCFF;*/
  background: #f6f8ff;
  position: relative;
}
.boxData img {
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  height: 55%;
}
.boxData input {
  width: 100%;
  height: 30px;
  outline: none;
  padding-left: 30px;
  font-size: 14px;
  color: #999;
}
.boxData input:focus {
  color: #666;
}
.errBd {
  border: 1px solid #f60;
}
.btn {
  width: 240px;
  height: 40px;
  background: #5399f5;
  font-size: 18px;
  color: #fff;
  border: none;
}
.btn:hover {
}

.btn:active {
  background: #1d57dd;
}
</style>