sports_wap/.svn/pristine/64/64a0167f68027b8363b7a4c781555daa64c215ef.svn-base

<template>
  <div>
    <yd-popup v-model="isshow" position="center" width="90%">
      <div class="Loginbox">
        <div class="Loginbox-top">
          <div class="loginbox-close">
            <img :src="img.url1" @click="LoginEsc()">
          </div>
          <div class="loginbox-logo">
            <span>
              <i style="color:#F76649">HX</i>699
            </span>
          </div>
        </div>
        <!-- 账号输入框 -->
        <div class="Loginbox-main">
          <div class="account-box">
            <div class="account-box-img">
              <img :src="img.url3">
            </div>
            <!-- 账号输入 -->
            <div class="account-box-input">
              <input
                @focus="clearacc('acc')"
                :style="account=='用户名不存在'?'color:red;':''"
                v-model="account"
                type="text"
                placeholder="账户名"
                onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"
              >
            </div>
            <div style="width:.8rem"></div>
          </div>
          <!-- 密码输入框 -->
          <div class="password-box">
            <div class="password-box-img">
              <img :src="img.url4">
            </div>
            <!-- 密码输入 -->
            <div class="password-box-input">
              <input
                @focus="clearacc('pwd')"
                v-model="password"
                :style="password=='密码错误'?'color:red;':''"
                :type="lockactive == true ? 'text' : 'password'"
                placeholder="密码"
                onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"
              >
            </div>
            <!-- 查看密码，密码可见 -->
            <div class="password-box-look">
              <img @click="lookclick(lockactive)" :src="lockactive == true ? img.url6 : img.url5">
            </div>
          </div>
          <div class="infomation">{{info}}</div>
          <div class="instrument-box">
            <div class="remember-acc" @click="instrumentclick()">
              <img :src="rememberacc == true ? img.url8 : img.url7">
              &nbsp;
              <span style="color: #AAAAAA;">记住账号</span>
            </div>
            <div class="forget-pwd" @click="forgetpwd(account)">
              <span style="color: #F76649;">忘记密码</span>
            </div>
          </div>
          <div class="login-btn" @click="login()">登录</div>
          <div class="login-footer">
            <p style="width: 100%;color: #AAAAAA;font-size: .22rem;text-align: center;">
              没有HX699账户？
              <br>
              <span style="color: #F76649;font-size: .23rem;" @click="register()">注册</span>
            </p>
          </div>
        </div>
      </div>
    </yd-popup>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      // 账号密码
      account: "",
      password: "",
      // 是否密码可见
      lockactive: false,
      // 是否记住账号
      rememberacc: false,
      // 是否退出登录界面
      isshow: this.$store.state.isShow,
      info: "",
      // 提示数据
      data: "",
      img: {
        url1: require("@/assets/st-imges/guanbi.png"),
        url2: require("@/assets/st-imges/loginlogo.png"),
        url3: require("@/assets/st-imges/zhanghao.png"),
        url4: require("@/assets/st-imges/mima.png"),
        url5: require("@/assets/st-imges/kan.png"),
        url6: require("@/assets/st-imges/kanactive.png"),
        url7: require("@/assets/st-imges/xuanzhong.png"),
        url8: require("@/assets/st-imges/xuanzhongactive.png")
      }
    };
  },
  methods: {
    // 错误刷新
    clearacc(val) {
      if (val == "acc") this.account = "";
      else if (val == "pwd") this.password = "";
    },
    // 点击密码可见
    lookclick(istrue) {
      this.lockactive = !istrue;
    },
    // 点击确认是否记住账号
    instrumentclick() {
      this.rememberacc = !this.rememberacc;
      console.log("123", this.rememberacc);
      if (this.rememberacc == true) {
        if (localStorage.getItem("token")) {
          localStorage.setItem("status", true);
        }
      } else {
        localStorage.setItem("status", false);
      }
    },
    // 点击忘记密码？
    forgetpwd(acc) {
      console.log("这是忘记密码");
    },
    login() {
      if (this.account.length > 0 && this.password.length > 0) {
        console.log(this.account.length);
        // 请在此处发送登录请求
        this.$http
          .post(this.$ports.login.login, {
            account: this.account,
            password: this.password
          })
          .then(res => {
            if (res.data.status == 1) {
              this.info = "";
              this.$public.setItem("token", res.data.data[0].token);
              this.$store.dispatch("SET_TOKEN", res.data.data[0].token);
              localStorage.setItem("name", res.data.data[0].name);
              this.$store.dispatch("GET_ISSHOW", false);
              this.$dialog.toast({mes: '登录成功！', timeout: 1500});
            } else {
              console.log('resstatus',res)
              this.info = res.data.msg;
            }
          });
        // 是否记住账号，记住账号是在登录成功后使用
        if (this.rememberacc == true) {
          localStorage.setItem("value", this.account);
        }
      } else {
        this.info = "账号或密码有误";
      }
    },
    // 关闭登录组件
    LoginEsc() {
      // 关闭登录
      this.isshow = false;
      this.$store.dispatch("GET_ISSHOW", this.isshow);
      this.$store.dispatch("SET_NOROLL", false);
    },
    register() {
      this.$store.dispatch("GET_ISSHOW", false);
      this.$store.dispatch("GETRGSHOW", true);
    }
  },
  computed: {
    Isshow: function() {
      // 根据登录框设置背景可否滚动
      this.$store.dispatch("SET_NOROLL", this.isshow);
      this.$store.dispatch("GET_ISSHOW", this.isshow);
      return {
        isshow_code: this.$store.getters.getIsShow
      };
    }
  },
  watch: {
    Isshow(obj) {}
  },
  mounted() {
    // console.log('status',localStorage.getItem('status'))
    if (localStorage.getItem("status")) {
      this.account = localStorage.getItem("value");
      this.rememberacc = true;
    } else {
      this.account = "";
      this.rememberacc = false;
    }
  }
};
</script>
<style scoped>
.Loginbox {
  background: #f8f8f8;
  border-radius: 0.52rem;
}
.loginbox-close {
  height: 1.2rem;
  position: relative;
}
.loginbox-close img {
  width: 0.26rem;
  height: 0.26rem;
  position: absolute;
  top: 0.92rem;
  right: 0.93rem;
}
.loginbox-logo {
  height: 1.5rem;
  display: flex;
  justify-content: center;
  font-size: 0.6rem;
  color: #ccc;
  align-items: center;
}
.Loginbox-main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.Loginbox-main .account-box,
.password-box {
  height: 0.9rem;
  width: 5rem;
  border-bottom: 1px solid #e4e4e4;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.password-box-img img {
  width: 0.53rem;
  height: 0.53rem;
}
.account-box-img img {
  width: 0.33rem;
  height: 0.32rem;
}
.password-box-look img {
  width: 0.4rem;
  height: 0.4rem;
}
.account-box-img {
  width: 0.8rem !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.password-box-img {
  width: 0.8rem !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.password-box-look {
  width: 0.8rem !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
input {
  border: none;
  width: 100%;
  height: 0.9rem;
  font-size: 0.26rem;
  color: #aaaaaa;
}
.instrument-box {
  height: 0.9rem;
  width: 5rem;
  display: flex;
  justify-content: space-between;
  padding: 0 0.5rem;
  align-items: center;
}
.remember-acc {
  display: flex;
  justify-content: flex-start;
}
.remember-acc img {
  width: 0.33rem;
  height: 0.33rem;
}
.login-btn {
  width: 5rem;
  height: 0.88rem;
  background: #f76649;
  color: #f8f8f8;
  display: flex;
  border-radius: 0.08rem;
  justify-content: center;
  align-items: center;
}
.login-footer {
  height: 1.96rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
}
.infomation {
  width: 100%;
  margin-left: 20%;
  margin-top: 0.2rem;
  color: #f76649;
}
</style>