live-telecast-ui-h5/src/views/login/index.vue

<template>
  <div class="login">
    <div class="login-bg">
      <img :src="BG" alt="" />
      <div class="footer">
        <img :src="footer" alt="" />
      </div>
    </div>
    <div class="login-main">
      <div class="logo-header">
        <p class="logo-header-title">Hello！</p>
        <p class="logo-header-tips">欢迎登录藏金·1745平台</p>
      </div>
      <div class="loginBox">
        <div class="loginBox-div">
          <div class="loginBox-bg">
            <img :src="loginBox" alt="" />
          </div>
          <van-form validate-first class="login-form">
            <ul class="ul">
              <li class="li-div">
                <ul class="clear">
                  <li><img :src="user" alt="" /></li>
                  <li>
                    <div class="zdyDiv">
                      <span class="zdyName">CJ1745</span>
                      <van-field
                        size="large"
                        v-model="form.mobile"
                        name="mobile"
                        placeholder="xxxxxx"
                        type="text"
                        style="background: transparent"
                        maxlength="9"
                        :rules="[{ validator: asyncmobileValidator }]"
                      >
                      </van-field>
                    </div>
                  </li>
                </ul>
              </li>
              <li class="li-div">
                <ul class="clear">
                  <li><img :src="pwod" alt="" /></li>

                  <li>
                    <van-field
                      size="large"
                      v-model="form.code"
                      name="code"
                      maxlength="6"
                      style="background: transparent"
                      placeholder="请输入密码"
                      :rules="[{ validator: asyncpwodValidator }]"
                      :type="!passwordStatus ? 'password' : 'text'"
                      @click-right-icon="showPassword"
                    ></van-field>
                    <!-- :right-icon="!passwordStatus ? 'eye-o' : 'closed-eye'" -->
                  </li>
                </ul>
              </li>
            </ul>
          </van-form>
        </div>
      </div>
      <div class="login-form-button clear">
        <van-button
          block
          type="info"
          :disabled="loadding"
          :loadding="loadding"
          loadding-text="加载中..."
          native-type="submit"
          @click="onSubmit()"
        >
          登&nbsp;录
        </van-button>
        <span class="fr reset-span" @click="loginSuccess('/reset')">修改密码</span>
      </div>
    </div>
  </div>
</template>

<script>
import { isnumber, validAlphabets } from "@/utils/validate";
import resToken from "@/mixins/resToken";
export default {
  mixins: [resToken],
  data() {
    return {
      passwordStatus: false, //默认隐藏密码
      BG: require("@/assets/images/active1/login.png"),
      user: require("@/assets/images/active1/cardNo.png"),
      pwod: require("@/assets/images/active1/password.png"),
      loginBox: require("@/assets/images/active1/loginBox.png"),
      footer: require("@/assets/images/active1/footer.png"),
      loadding: false,

      form: {
        mobile: "",
        code: "",
      },
    };
  },
  created(){
    // sessionStorage.setItem("type",'active1')
  },
  methods: {
    //主题
    theme(type) {
      
      sessionStorage.setItem("type",type)
      this.$store.commit('app/SET_TYPE', type);

      // document.querySelector("#app").setAttribute( "data-theme", type );
      window.document.documentElement.setAttribute( "data-theme", type );

    },
    // 点击 登陆按钮 后执行提交
    async onSubmit() {
      if (!this.loadding) {
        this.loadding = true;
        await this.asyncmobileValidator(this.form.mobile) //校验表单卡号
          .then(async (res) => {
            if (res === "ok") {
              let parmValue = {
                code: this.form.code,
                mobile: "CJ1745" + this.form.mobile,
              };
              await this.asyncpwodValidator(this.form.code)
                .then(async (res) => {
                  if (res === "ok") {
                    this.$store
                      .dispatch("user/login", parmValue)
                      .then((res) => {
                        //登录成功后根据当前账号设置主题
                        //截取输入框账号第一位进行判断
                        let status = this.form.mobile.substr(0,1)
                        if(isnumber(status)){
                          this.theme("active2")
                        }else{
                          this.theme("active1")
                        }
                        // return;
                        this.loadding = false;
                        if (res.code === 0) {
                          this.loginSuccess("/home/paddy");
                        } else {
                          this.show_title(res.msg);
                        }
                      })
                      .catch((err) => {
                        console.log(err);
                        this.loadding = false;
                      });
                  } else {
                    this.loadding = false;
                  }
                })
                .catch(() => {
                  this.loadding = false;
                });
            } else {
              this.loadding = false;
            }
            console.log(res);
          })
          .catch(() => {
            this.loadding = false;
          });
      }
    },
    async loginSuccess(path) {
      window.vm.$router.push({
        path: path,
      });
    },

    async asyncmobileValidator(val) {
      return new Promise((resolve) => {
        let type = true;
        if (val === "") {
          this.show_title("请输入卡号！");
          type = false;
        } else {
          if (val.length < 6) {
            this.show_title("卡号不正确！");
            type = false;
          }
          let patt = /[^\w\/]/ig
          if (patt.test(val)) {
            this.show_title("卡号不正确！");
            type = false;
          }
        }
        resolve(type ? "ok" : "error");
      });
    },
    async asyncpwodValidator(val) {
      return new Promise((resolve) => {
        let type = true;
        if (val === "") {
          this.show_title("请输入密码！");
          type = false;
        } else {
          if (val.length !== 6) {
            this.show_title("密码为2位字母+4位数字！");
            type = false;
          } else {
            let a = val.slice(0, 2);
            let b = val.slice(2, 4);
            if (!isnumber(b)) {
              this.show_title("密码为2位字母+4位数字！");
              type = false;
            }
            if (!validAlphabets(a)) {
              this.show_title("密码为2位字母+4位数字！");
              type = false;
            }
          }
        }
        resolve(type ? "ok" : "error");
      });
    },

    showPassword() {
      //展示/隐藏密码
      console.log(this.passwordStatus);
      this.passwordStatus = !this.passwordStatus;
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  box-sizing: border-box;
  // .van-field__control{
  //   font-size: 15px!important;
  // }
  .login-bg {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    background: #e6e6dc;
    img {
      display: inline-block;
      box-sizing: border-box;
      width: 100%;
    }
    .footer {
      position: absolute;
      box-sizing: border-box;

      z-index: 2;
      bottom: 0;
      left: 0;
      img {
        display: inline-block;
        width: 100%;
        padding: 0 30px 30px 30px;
      }
    }
  }
  .login-main {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9;
    top: 0;
    left: 0;
    .logo-header {
      //上半部分登陆盒子，用来展示一张图片
      width: 100%;
      padding: 8vh 30px 30px 30px;

      .logo-header-title {
        font-size: 30px;
        // font-family: DIN;
        font-weight: bold;
        color: #daad70;
        margin: 12px 0;
      }
      .logo-header-tips {
        font-size: 15px;
        font-weight: 200;
        color: #daad70;
        margin: 10px 0;
      }
    }
    .loginBox {
      padding: 0 30px;
      box-sizing: border-box;
      position: relative;
      .loginBox-bg {
        position: relative;
        width: 100%;
        // height: 100px;
        img {
          width: 100%;
          display: inline-block;
        }
      }
      .login-form {
        position: absolute;
        top: 0;
        left: 30px;
        width: calc(100% - 60px);
        padding: 5.5vh 20px 0 14px;
        box-sizing: border-box;
        ul.ul {
          width: 100%;
          li.li-div {
            width: 100%;
            height: 55px;
            padding: 0 0 0.5vh;
            ul {
              li {
                float: left;
                &:first-child {
                  width: 40px;
                  height: 48px;
                  line-height: 50px;
                  text-align: center;
                  img {
                    display: inline-block;
                    height: 18px;
                    margin: 14px 0 0 0;
                  }
                }
                &:last-child {
                  width: calc(100% - 40px);
                }
                .zdyDiv {
                  float: left;
                  width: 100%;
                  .zdyName {
                    width: 55px;
                    line-height: 48px;
                    float: left;
                    color: #000;
                    text-align: right;
                    font-size: 16px;
                  }
                }
                .van-cell {
                  float: left;
                  background: transparent !important;
                  padding-left: 1px;
                  .van-cell__value {
                    background: transparent !important;
                    > div {
                      background: transparent !important;
                      input {
                        background: transparent !important;
                      }
                    }
                  }
                  .van-field__control {
                    font-size: 15px !important;
                  }
                }
              }
            }
            &:first-child {
              ul {
                li {
                  &:last-child {
                    .van-cell {
                      width: calc(100% - 55px);
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    .login-form-button {
      padding: 10vh 30px 0 30px;
      .van-button {
        background: linear-gradient(0deg, #a67e4b, #efc180);
        border-radius: 8px;
        overflow: hidden;
        color: #111111;
        border: 0;
        font-weight: bolder;
      }
      .reset-span{
        padding:10px;
        color: #454545;
      }
    }
  }
}
</style>