live-telecast-tk-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="xxxxxxxxx"
                        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>

    <van-overlay :show="show">
        <div class="wrapper">
          <div class="block">
            <h3>系统公告:</h3>
            <div class="content">持卡人持有的2022年TK专享藏金大米金卡及TK专享藏金大米银卡已于2023年10月31日到期，现公司将产品兑换时间延期至2023年12月31日，请持卡人在以上时间内兑换，避免造成产品兑换不便事项，特此通知。</div>
            <div class="button__wrapper">
              <div>
                <div v-if="countdown !== 0">{{countdown}}s</div>
              </div>
              <van-button type="primary" @click.stop="show = false" :disabled="countdown !== 0">确定</van-button>
            </div>
          </div>
        </div>
      </van-overlay>
  </div>
</template>

<script>
import { isnumber, validAlphabets } from "@/utils/validate";
import asyncRequest from "@/apis/my/index";
import dayjs from "dayjs"
import resToken from "@/mixins/resToken";
import { Dialog } from "vant";

export default {
  mixins: [resToken],
  data() {
    return {
      showTime:"",
      passwordStatus: false, //默认隐藏密码
      BG: require("@/assets/images/login.png"),
      user: require("@/assets/images/cardNo.png"),
      pwod: require("@/assets/images/password.png"),
      loginBox: require("@/assets/images/loginBox.png"),
      footer: require("@/assets/images/footer.png"),
      loadding: false,
      countdown : 3,
      show: true,
      isRed:"",
      form: {
        mobile: "",
        code: ""
      }
    };
  },
  mounted() {
    // Dialog({
    //   title: "春节公告",
    //   message:
    //     "尊敬的藏金客户，因春节将至，目前五常物流已停止接单，恢复时间为1月30日。在此期间可正常下单，节后陆续发出，感谢大家理解，预祝新春快乐！",
    //   messageAlign: "left",
    //   theme: "round-button",
    //   className: "login-notice"
    // });

    this.startConfirmTime();
  },
  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(async (res) => {
                        const userinfo = await asyncRequest.detail();
                        const expireTime = userinfo.data.expiretime;
                        const expireTimeDay = dayjs(expireTime);
                        const alerttime = dayjs("2023-12-31 23:59:59")

                        const chunks = expireTime.split(" ")
                        const chunks1 = chunks[0].split("-")
                        this.showTime = chunks1[0] + "年" + chunks1[1] + "月" + chunks1[2] + "日";
                        this.expiretime = expireTime;

                        const reg = /TKR/
                        this.isRed = reg.test(userinfo.data.username);
                        // 获取用户信息
                        // if(expireTimeDay.isBefore(alerttime)){
                          //  if(isnumber(status)){
                          //    this.theme("active2")
                          //  }else{
                          //    this.theme("active1")
                          //  }

                          // this.loadding = false;
                          // this.startConfirmTime();
                        // } else {
                           // 获取用户信息
                           //登录成功后根据当前账号设置主题
                           //截取输入框账号第一位进行判断
                          //  let status = this.form.mobile.substr(0,1)
                          //  if(isnumber(status)){
                          //    this.theme("active2")
                          //  }else{
                          //    this.theme("active1")
                          //  }
                           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;
          });
      }
    },
    startConfirmTime(){
      this.show = true;
      this.countdown = 3;

      const timer = setInterval(() => {
        if(this.countdown === 0){
          timer && clearInterval(timer);
          return
        }
        this.countdown  = this.countdown - 1;
      }, 1000)
    },
    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 !== 9) {
            this.show_title("卡号不正确！");
            type = false;
          } else {
            let a = val.slice(0, 3);
            let b = val.slice(3, 9);
            if (a == "TKS" || a == "TKR") {
              if (!isnumber(b)) {
                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;
      }
    }
  }
}

  .wrapper {
      display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 85%;
    border-radius:10px;
    background-color: #fff;
    font-size:14px;
    padding: 10px;
    text-align: left;

    h3{
      text-align: center;
    }

    .content{
      text-align: justify;
      text-indent:30px;
      padding:10px;
      line-height: 28px;
    }

    .button__wrapper{
      display: flex;
      align-items: center;
      justify-content: space-between;
      white-space: inherit;

      padding:0 10px;
      margin-bottom: 10px;

      button{
        height:32px;
      }
    }
  }
</style>