twong-h5/src/views/user/Login.vue

<template>
  <div class="register absolute">
    <div style="text-align: right; padding-right: 10px; padding-top: 0.66rem">
      <router-link to="/" style="font-size: 18px; color: white;"
        >跳过，看好货 ></router-link
      >
    </div>
    <div class="shading">
      <div class="pictrue acea-row row-center-wrapper">
        <img :src="logoUrl" v-if="logoUrl" />
        <img src="@assets/images/logo2.png" v-else />
      </div>
    </div>
    <div class="whiteBg" v-if="formItem === 1">
      <div class="title acea-row row-center-wrapper">
        <div
          class="item"
          :class="current === index ? 'on' : ''"
          v-for="(item, index) in navList"
          @click="navTap(index)"
          :key="index"
        >
          {{ item }}
        </div>
      </div>
      <div class="list" :hidden="current !== 0">
        <form @submit.prevent="submit">
          <div class="item">
            <div class="acea-row row-between-wrapper">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-phone_"></use>
              </svg>
              <input
                type="text"
                placeholder="输入手机号码"
                v-model="account"
                required
              />
            </div>
          </div>
          <div class="item">
            <div class="acea-row row-between-wrapper">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-code_"></use>
              </svg>
              <input
                type="password"
                placeholder="填写登录密码"
                v-model="password"
                required
              />
            </div>
          </div>
        </form>
        <div style="display: flex;">
          <div class="remeber">
            <img :src="check_img" @click="remeberClick" />
            <div class="text">记住密码</div>
          </div>
          <div
            class="forgetPwd"
            @click="$router.push({ name: 'RetrievePassword' })"
          >
            <span class="iconfont icon-wenti"></span>忘记密码
          </div>
        </div>
      </div>
      <div class="list" :hidden="current !== 1">
        <div class="item">
          <div class="acea-row row-between-wrapper">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-phone_"></use>
            </svg>
            <input type="text" placeholder="输入手机号码" v-model="account" />
          </div>
        </div>
        <div class="item">
          <div class="align-left">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-code_1"></use>
            </svg>
            <input
              type="text"
              placeholder="填写验证码"
              class="codeIput"
              v-model="captcha"
            />
            <button
              class="code"
              :disabled="disabled"
              :class="disabled === true ? 'on' : ''"
              @click="code"
            >
              {{ text }}
            </button>
          </div>
        </div>
        <div class="item" v-if="isShowCode">
          <div class="align-left">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-code_"></use>
            </svg>
            <input
              type="text"
              placeholder="填写验证码"
              class="codeIput"
              v-model="codeVal"
            />
            <div class="code" @click="again"><img :src="codeUrl" /></div>
          </div>
        </div>
      </div>
      <div class="logon" @click="loginMobile" :hidden="current !== 1">登录</div>
      <div class="logon" @click="submit" :hidden="current === 1">登录</div>
      <div class="tip">
        没有账号?
        <span @click="formItem = 2" class="font-color-red">立即注册</span>
      </div>
    </div>
    <div class="whiteBg" v-else>
      <div class="title">注册账号</div>
      <div class="list">
        <div class="item">
          <div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-phone_"></use>
            </svg>
            <input type="text" placeholder="输入手机号码" v-model="account" />
          </div>
        </div>
        <div class="item">
          <div class="align-left">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-code_1"></use>
            </svg>
            <input
              type="text"
              placeholder="填写验证码"
              class="codeIput"
              v-model="captcha"
            />
            <button
              class="code"
              :disabled="disabled"
              :class="disabled === true ? 'on' : ''"
              @click="code"
            >
              {{ text }}
            </button>
          </div>
        </div>
        <div class="item">
          <div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-code_"></use>
            </svg>
            <input
              type="password"
              placeholder="填写您的登录密码"
              v-model="password"
            />
          </div>
        </div>
        <div class="item" v-if="isShowCode">
          <div class="align-left">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-code_"></use>
            </svg>
            <input
              type="text"
              placeholder="填写验证码"
              class="codeIput"
              v-model="codeVal"
            />
            <div class="code" @click="again"><img :src="codeUrl" /></div>
          </div>
        </div>
      </div>
      <div class="logon" @click="register">注册</div>
      <div class="tip">
        已有账号?
        <span @click="formItem = 1" class="font-color-red">立即登录</span>
      </div>
    </div>
    <!-- <div class="bottom"></div> -->
  </div>
</template>
<script>
import sendVerifyCode from "@mixins/SendVerifyCode";
import {
  login,
  loginMobile,
  registerVerify,
  register,
  getCodeApi
} from "@api/user";
import attrs, { required, alpha_num, chs_phone } from "@utils/validate";
import { validatorDefaultCatch } from "@utils/dialog";
import { getLogo } from "@api/public";
import cookie from "@utils/store/cookie";
import { VUE_APP_API_URL } from "@utils";
const BACK_URL = "login_back_url";
import check_on from "@assets/images/check_on.png";
import check_off from "@assets/images/check_off.png";
import router from "@/router";

export default {
  name: "Login",
  mixins: [sendVerifyCode],
  data: function() {
    return {
      navList: ["账号登录", "快速登录"],
      current: 0,
      account: "",
      password: "",
      captcha: "",
      formItem: 1,
      type: "login",
      logoUrl: "",
      keyCode: "",
      codeUrl: "",
      codeVal: "",
      isShowCode: false,
      remembed: true,
      check_img: check_on
    };
  },

  watch: {
    $route(n) {
      if (n.name === "Login") {
        this.loadSave();
      }
    }
  },
  mounted: function() {
    this.getCode();
    this.getLogoImage();
    this.loadSave();
  },
  methods: {
    loadSave() {
      const acc = window.localStorage.getItem("account");
      const pwd = window.localStorage.getItem("password");
      console.log(acc, pwd);
      this.account = acc ? acc : "";
      if (this.$store.state.app.autoLogin) {
        this.password = pwd ? pwd : "";
      }
    },
    again() {
      this.codeUrl =
        VUE_APP_API_URL +
        "/sms_captcha?" +
        "key=" +
        this.keyCode +
        Date.parse(new Date());
    },
    getCode() {
      getCodeApi()
        .then(res => {
          this.keyCode = res.data.key;
        })
        .catch(res => {
          this.$dialog.error(res.msg);
        });
    },
    async getLogoImage() {
      let that = this;
      getLogo(2).then(res => {
        that.logoUrl = res.data.logo_url;
      });
    },
    async loginMobile() {
      var that = this;
      const { account, captcha } = that;
      try {
        await that
          .$validator({
            account: [
              required(required.message("手机号码")),
              chs_phone(chs_phone.message())
            ],
            captcha: [
              required(required.message("验证码")),
              alpha_num(alpha_num.message("验证码"))
            ]
          })
          .validate({ account, captcha });
      } catch (e) {
        return validatorDefaultCatch(e);
      }
      loginMobile({
        phone: that.account,
        captcha: that.captcha,
        spread: cookie.get("spread")
      })
        .then(res => {
          let data = res.data;
          let expires_time = data.expires_time.substring(0, 19);
          expires_time = expires_time.replace(/-/g, "/");
          expires_time = new Date(expires_time).getTime() - 28800000;
          // const expires_time = new Date(data.expires_time).getTime() / 1000;
          const datas = {
            token: data.token,
            expires_time: expires_time
          };
          this.$store.commit("LOGIN", datas);
          this.$store.dispatch("USERINFO", true);
          const backUrl = cookie.get(BACK_URL) || "/";
          cookie.remove(BACK_URL);
          that.$router.replace({ path: backUrl });
        })
        .catch(res => {
          that.$dialog.error(res.msg);
        });
    },
    async register() {
      var that = this;
      const { account, captcha, password } = that;
      try {
        await that
          .$validator({
            account: [
              required(required.message("手机号码")),
              chs_phone(chs_phone.message())
            ],
            captcha: [
              required(required.message("验证码")),
              alpha_num(alpha_num.message("验证码"))
            ],
            password: [
              required(required.message("密码")),
              attrs.range([6, 16], attrs.range.message("密码")),
              alpha_num(alpha_num.message("密码"))
            ]
          })
          .validate({ account, captcha, password });
      } catch (e) {
        return validatorDefaultCatch(e);
      }
      register({
        account: that.account,
        captcha: that.captcha,
        password: that.password,
        spread: cookie.get("spread")
      })
        .then(res => {
          that.$dialog.success(res.msg);
          that.formItem = 1;
        })
        .catch(res => {
          that.$dialog.error(res.msg);
        });
    },
    async code() {
      var that = this;
      const { account } = that;
      try {
        await that
          .$validator({
            account: [
              required(required.message("手机号码")),
              chs_phone(chs_phone.message())
            ]
          })
          .validate({ account });
      } catch (e) {
        return validatorDefaultCatch(e);
      }
      if (that.formItem == 2) that.type = "register";
      await registerVerify({
        phone: that.account,
        type: that.type,
        key: that.keyCode,
        code: that.codeVal
      })
        .then(res => {
          that.$dialog.success(res.msg);
          that.sendCode();
        })
        .catch(res => {
          if (res.data.status === 402) {
            that.codeUrl = `${VUE_APP_API_URL}/sms_captcha?key=${that.keyCode}`;
            that.isShowCode = true;
          }
          that.$dialog.error(res.msg);
        });
    },
    navTap: function(index) {
      this.current = index;
    },
    async submit() {
      const { account, password, codeVal } = this;
      try {
        await this.$validator({
          account: [
            required(required.message("账号")),
            attrs.range([5, 16], attrs.range.message("账号")),
            alpha_num(alpha_num.message("账号"))
          ],
          password: [
            required(required.message("密码")),
            attrs.range([6, 16], attrs.range.message("密码")),
            alpha_num(alpha_num.message("密码"))
          ],
          codeVal: this.isShowCode
            ? [
                required(required.message("验证码")),
                attrs.length(4, attrs.length.message("验证码")),
                alpha_num(alpha_num.message("验证码"))
              ]
            : []
        }).validate({ account, password, codeVal });
      } catch (e) {
        return validatorDefaultCatch(e);
      }

      login({ account, password, code: codeVal })
        .then(({ data }) => {
          let expires_time = data.expires_time.substring(0, 19);
          expires_time = expires_time.replace(/-/g, "/");
          expires_time = new Date(expires_time).getTime() - 28800000;
          const datas = {
            token: data.token,
            expires_time: expires_time
          };
          this.$store.commit("LOGIN", datas);
          const backUrl = cookie.get(BACK_URL) || "/";
          cookie.remove(BACK_URL);
          this.$router.replace({ path: backUrl });
          //  let newTime = Math.round(new Date() / 1000);
          // this.$store.commit("LOGIN", data.token, dayjs(data.expires_time))

          window.localStorage.setItem("account", account);
          window.localStorage.setItem("password", password);
        })
        .catch(e => {
          this.$dialog.error(e.msg);
        });
    },

    remeberClick() {
      this.remembed = !this.remembed;
      this.check_img = this.remembed ? check_on : check_off;
      console.log(this.remembed);
      this.$store.commit("AUTOLOGIN", this.remembed);
    }
  }
};
</script>
<style scoped>
.code img {
  width: 100%;
  height: 100%;
}

.remeber {
  display: flex;
  margin-top: 0.2rem;
  margin-left: 0.2rem;
  margin-right: 2rem;
}

.remeber .text {
  text-align: center;
  /* font-size: 13px; */
  color: #666;
  line-height: 0.2rem;
  margin-top: 0.1rem;
}

.remeber img {
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 0.1rem;
}
</style>