kmt/src/pages/Login.vue

<!-- <div class="bodyImg">
<div class="container">
    <div class="log-paper">
      <img src="../assets/img/Land_sbg.png">
    </div>
    <div class="log-container">
      <img class="log-icon" src="../assets/img/log.png">
      <div class="log-text">欢迎登陆私塾家在线人员管理后台</div>
      <div @click="WxLoginCtl" class="log-qrcode">
        <div id="login_container"></div>
      </div>
    </div>
  </div>
</div> -->
<template>
  <div class="login" style=" min-width: 650px!important;">
    <div class="login-paper">
      <img src="../assets/img/Land_bg.png">
    </div>
    <div class="login-content">
      <div class="img">
        <img src="../assets/img/Land_sbg.png">
      </div>
      <div class="section">
        <img class="section-icon" src="../assets/img/log.png">
        <div class="log-text section-text">欢迎登陆私塾家在线人员管理后台</div>
        <div @click="WxLoginCtl" class="log-qrcode">
          <div class="section-qrcode" id="login_container"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { mapActions } from "vuex";
// import wx from 'weixin-js-sdk'
// import $ from 'jquery'

export default {
  name: "login",
  data() {
    return {};
  },
 //监听器
	watch: {
		'$route' (to, from) { //监听路由是否变化
			     console.log(999)
				location.reload()
		},
	},
  created() {
     localStorage.removeItem("accessToken")
    this.getTKByUnionid();
  },
  methods: {
    WxLoginCtl() {
      // this.$router.push({
      //   path: "/aikmt/Redirect_uri",
      //   query: {
      //     unionid: "oPHg8wXraekgH5YKVHvD3H7Ujynw"
      //   }
      // });
    },
    async getTKByUnionid() {
      if (window.location.href.indexOf("unionid") >= 0) {
        // 如果url中包含unionid,则保存到store中
        let unionid = window.location.href.split("?")[1];
        unionid = unionid.substring(8);
        let WxCode = unionid;
        this.WxCode = WxCode;
        localStorage.setItem("unionid", this.WxCode);
        console.log("获取unionid" + this.WxCode);
        this.$store.dispatch("UnionidLogin", {
          unionid: this.WxCode
        });
      }
      if (window.location.href.indexOf("code") >= 0) {
        // 如果url中包含code,则保存到store中
          console.log(window.location.href)
        let code = window.location.href.split("#/?")[1];
         console.log("code开始打印")
        console.log(code)
        code = code.substring(5, code.indexOf("&"));
        let WxCode = code;
        this.WxCode = WxCode;
        console.log("获取Code" + this.WxCode);
        this.$store.dispatch("GET_TOKEN", {
          code: this.WxCode
        });
        // 清除重定向url中参数ocde,
        window.history.replaceState({}, "", `${location.pathname}`);
        console.log(location.pathname);
      }
      return;
    }
  },
  mounted() {
    var obj = new WxLogin({
      self_redirect: false,
      id: "login_container",
      appid: "wxd18ca9555a939281", //正式环境
        //  appid: "wx7fe760dc3c45794d", //实训环境
      scope: "snsapi_login",
      redirect_uri: encodeURIComponent(
        "https://kmt.sharingschool.com/aijia/manager/index.html#/" //正式环境
          // "https://sxkmt.sharingschool.com/manager/index.html#/" //实训环境
      ),
      state: "",
      style: "width: 250px",
      href: ""
    });
  }
};
</script>
<style lang="stylus" scoped>
@import '../style/index.styl';
.login-content{
  display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.login
    position fixed
    top 0
    left 0
    width 100%
    height 100%
    min-width 650px
    &-paper
        position absolute
        top 0
        left 0
        width 100%
        height 100%
        img 
            width 100%
            height 100%
            object-fit cover
    &-content
        position absolute
        top 10%
        left 15%
        width 70%
        height 80%
        background $color-bg-white
        border-radius 4px
        box-shadow()
        flex-row-between()
        .img
            margin 10% 0% 10% 10%
            flex 6
            img 
                width 100%
                height 100%
                object-fit cover
        .section
            margin 10%
            flex 4
            text-align center
            &-icon
                width 50%
                object-fit cover
            &-text
                color $color-text-green
                font-size $font-size-l
                margin 5%
            &-qrcode
                box-shadow()
                padding 10px
@media (min-width: 0px) and (max-width: 960px) {
  .img {
      display none
  }
}
</style>