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

<template>
  <div class="login">
    <div class="bg">
      <!-- <img :src="loginBG" alt="" /> -->
    </div>
    <div class="login-main">
      <div class="logo-header">
        <div class="login-img">
          <img src="@/assets/img/login.png" alt="" />
        </div>
        <p class="logo-header-title">Hello</p>
        <p class="logo-header-tips">欢迎登录藏金·1745平台</p>
      </div>
      <van-form validate-first class="login-form">
        <div class="loginBox">
          <img src="@/assets/img/loginBox.png" alt="" />
        </div>
        <ul class="clear oUl" style="width: 83vw">
          <!-- <li class="label">
            卡号:
           
          </li> -->
          <li class="van-field-input">
            <van-row style="width: 83vw">
              <van-col span="3" style="width: 14px">
                <div class="cardNo">
                  <img src="@/assets/img/cardNo.png" alt="" />
                </div>
              </van-col>
              <van-col span="5" style="width: 42px">
                <div class="myCard">CJ1745</div>
              </van-col>
              <van-col span="16" style="width: calc(100% - 86px)">
                <van-field
                  style="margin: 0 0 0 30px; background: transParent"
                  size="large"
                  v-model="form.mobile"
                  name="mobile"
                  placeholder="XXXXXX"
                  type="text"
                  maxlength="6"
                  :rules="[{ validator: asyncmobileValidator }]"
                >
                </van-field>
              </van-col>
            </van-row>
          </li>
        </ul>
        <ul class="clear" style="width: 83vw; border-radius: 10px">
          <!-- <li class="label">
            密码:
            <img src="@/assets/img/password.png" alt="" />
          </li> -->
          <van-row style="width: 84vw">
            <van-col span="3" style="width: 14px">
              <div class="cardPwd">
                <img src="@/assets/img/password.png" alt="" />
              </div>
            </van-col>
            <van-col :span="21" style="width: calc(100% - 50px)">
              <li class="van-field-input">
                <van-field
                  style="background: transparent; margin: 0 0 0 28px"
                  size="large"
                  v-model="form.code"
                  name="code"
                  maxlength="6"
                  placeholder="请输入密码"
                  :rules="[{ validator: asyncpwodValidator }]"
                  :type="!passwordStatus ? 'password' : 'text'"
                  :right-icon="!passwordStatus ? 'eye-o' : 'closed-eye'"
                  @click-right-icon="showPassword"
                >
                </van-field>
              </li> </van-col
          ></van-row>
        </ul>

        <van-button
          class="login-form-button"
          block
          type="info"
          :disabled="loadding"
          :loadding="loadding"
          loadding-text="加载中..."
          native-type="submit"
          @click="onSubmit()"
        >
          登&nbsp;录
        </van-button>
      </van-form>
      <div class="footerP">
        <div class="footer">
          <img src="@/assets/img/footer.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

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

      loadding: false,
      form: {
        mobile: "",
        code: "",
      },
    };
  },

  methods: {
    // 点击 登陆按钮 后执行提交
    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) => {
                        this.loadding = false;
                        if (res.code === 0) {
                          this.loginSuccess();
                        } 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(data) {
      window.vm.$router.push({
        path: "/home/paddy",
      });
    },

    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;
          }
          if (!isnumber(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 {
  //最外层的登陆盒子
  position: relative;
  width: 100%;
  height: 100%;
  .bg {
    //背景图的盒子
    position: relative;
    width: 100%;
    height: 100%;
    img {
      //背景图
      display: inline-block;
      width: 100%;
      height: 100%;
    }
  }
  .login-main {
    //详情登陆页面
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; //继承最外层login的宽高
    height: 100%;
    // background-color: #fff;
    background-color: #e6e6dc;
    .logo-header {
      //上半部分登陆盒子，用来展示一张图片
      // padding: 50% 0 10% 0;
      width: 100%;
      height: 355px;
      .login-img {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        img {
          width: 100%;
          // height: 209px;
          height: 232px; //新版
        }
      }
      position: relative;
      top: -12px;
      .logo-header-title {
        //登陆字体的盒子
        // margin: 0px 0 0 0;
        // font-weight: bold;
        padding: 0px 211px 0px 55px;
        // width: 81px;
        // height: 37px;
        // font-size: 20px;
        // font-weight: bold;
        // color: #ffffff;
        // line-height: 20px;
        position: absolute;
        // 新版
        width: 62.5px;
        height: 18.5px;
        font-size: 25px;
        font-family: DIN;
        font-weight: bold;
        color: #daad70;
        line-height: 159.5px;
      }
      .logo-header-tips {
        //登陆文字下提示内容
        position: absolute;
        // left: 0;
        // top: 0;
        // padding-top: 0;
        padding: 40px 211px 0px 55px;
        // width: 97px;
        // height: 12px;
        // font-size: 12px;
        // font-weight: 150;
        // color: #ffffff;
        // line-height: 3px;
        // 新版
        width: 136.5px;
        height: 12.5px;
        font-size: 13px;
        font-family: Source Han Sans CN;
        font-weight: 200;
        color: #daad70;
        line-height: 159.5px;
      }
    }
    .loginBox {
      width: 84vw;
      background: rgba(0, 0, 0, 0);
      // border: 1px solid red;
      border-radius: 10px;
      position: absolute;
      margin: 0 30.5px 0 28.5px;

      top: -59px;
      // z-index: 99999;
      img {
        width: 100%;
      }
    }
    .login-form.van-form {
      //登陆框
      // padding: 10% 18%;
      // background-color: #fff;
      // background-color: #e6e6dc; //新版

      background: #e6e6dc;
      // border-top-left-radius: 20px;
      // border-top-right-radius: 20px;
      position: relative;
      // top: -145px;
      top: -135.5px; //新版
      left: 0;
      // border: 1px solid green;
      ul {
        position: relative;
        left: 0;
        top: 0;
        // border-radius: 20px;
        overflow: hidden;
        margin: 0 0 11.5px 30px;
        // border-bottom: 1px solid #f0f0f0;
        z-index: 9999;
        li {
          float: left;
          &.label {
            width: 100%;
            color: #333333;
            font-size: 16px;
            font-weight: bolder;
          }
          &.van-field-input {
            float: left;
            box-sizing: border-box;
            width: 100%;
            margin: 0 0 0 0;
            .van-cell {
              height: 42px;
              line-height: 42px;
            }
          }
        }
      }
      .van-cell--large {
        padding: 0;
        input {
          height: 42px;
          line-height: 42px;
          font-size: 15px;
        }
        .van-field__label {
          line-height: 42px;
          text-align: center;
          font-size: 15px;
        }
      }
    }
    .van-button--small.van-button--plain {
      border: 0;
    }
    .login-form-button.van-button,
    .login-form-button.van-button--disabled {
      border: 0;
      margin: 98px auto 10px auto;
      color: #333;
      // background: #f4d022;
      background: linear-gradient(0deg, #f2c482, #a07947);
      border-radius: 34px;
      // width: 334px;
      width: 90vw;
      height: 45px;
      background: linear-gradient(0deg, #a67e4b, #efc180);
      border-radius: 8px;
    }
  }

  .myCard {
    position: relative;
    padding: 0 0 0 26px;
    height: 42px;
    line-height: 42px;
    z-index: 99999;
    width: 45px;
    height: 41px;
    font-size: 13px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #111111;
    line-height: 41px;
  }
  .cardNo {
    width: 14px;
    height: 11px;
    vertical-align: 10px;
    padding: 15.5px 0 0 21px;
    position: relative;
    img {
      width: 14px;
      height: 11px;
    }
  }
  .cardPwd {
    width: 14px;
    height: 11px;
    vertical-align: 10px;
    padding: 15.5px 0 0 21px;
    position: relative;
    img {
      width: 12px;
      height: 14px;
    }
  }
  .footerP {
    width: 100vw;
    display: flex;
    justify-content: center;
    position: absolute;
    left: 0;
    bottom: 20px;
  }
  .footer {
    width: 90vw;
    height: 57.5px;

    img {
      width: 100%;
      height: 57.5px;

      // border-radius: 10px;
    }
  }
  @media screen and (min-width: 320px) {
    .login-main .login-form.van-form ul {
      top: -25px;
    }
  }
  @media screen and (min-width: 414px) {
    .login-main .login-form.van-form ul {
      top: -10px;
    }
  }
  @media screen and (min-height: 812px) {
    .login-main .login-form.van-form ul {
      top: -18px;
    }
  }
}
</style>