training-wx/src/components/UserCenter.vue

<template>
  <div class="User-box">
    <!-- <h1>UserCenter 个人中心</h1> -->
    <div class="user-info">
      <img src="../assets/userImag/user.png" />
      <div class="info-name">
        <div>
          <span>旺旺旺</span>
        </div>
        <div>
          <span>18888888888</span>
        </div>
      </div>
    </div>

    <div class="button-box">
      <van-cell-group>
        <van-cell class="user-button" title="注册" @click="handLogin()" />
      </van-cell-group>
      <!-- <button type="primary" @click="handLogin()">微信授权登录</button> -->
      <!-- <van-button class="user-button" type="info" @click="handLogin()">注册</van-button> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      code: '' // 前端获取 code 传给后端调用相应接口
    }
  },
  created() {
    // 从 window.location.href 中截取 code 并且赋值
    if (window.location.href.indexOf('CSDN_state') !== -1) {
      // 此方法仅供参考！！！
      this.code = window.location.href.split('?')[1].split('=')[1].split('&')[0]
      this.$store.commit('SET_USER_INFO', { code: this.code })
    }

    if (this.$store.state.user.code) {
      // 存在 code 直接调用接口
      this.handGetUserInfo(this.code)
    }
  },
  methods: {
    handLogin() {
      this.$store.commit('SET_USER_INFO', { code: this.code })

      // 重定向地址重定到当前页面，在路径获取 code
      if (process.env.NODE_ENV === 'development') {
        console.log(222)
        return
      }
      /**
       * 获取 code
       * @returns
       */
      // function getCode() {
      //   const matched = /[?&]*code=([^&]+)/.exec(location.search)
      //   if (matched) {
      //     return decodeURIComponent(matched[1])
      //   }
      // }

      const hrefUrl = window.location.href

      // const originCode = localStorage.getItem('wxcode')
      // const queryCode = getCode()
      // localStorage.setItem('wxcode', queryCode)
      // const local = encodeURIComponent(location.origin + location.pathname)

      if (this.code === '') {
        window.location.href = `
						https://open.weixin.qq.com/connect/oauth2/authorize
						?appid=${this.$store.state.user.appid}
						&redirect_uri=${encodeURIComponent(hrefUrl)}
						&response_type=code
						&scope=snsapi_userinfo
						&state=Code_state#wechat_redirect
					`
      }
    },
    handGetUserInfo(code) {
      console.log(
        '🚀 ~ file: UserCenter.vue ~ line 44 ~ handGetUserInfo ~ code',
        code
      )
      // 调用后端接口，参数为 code 剩下工作量交给后端即可
      // wxLogin({
      //   data: {
      //     code: code
      //   },
      //   method: 'GET'
      // }).then((res) => {
      //   console.log(
      //     '🚀 ~ file: UserCenter.vue ~ line 47 ~ handGetUserInfo ~ res',
      //     res
      //   )
      //   // res => 登陆成功！
      // })
    }
  }
}
</script>

<style lang="less" scoped>
.User-box {
  width: 100%;
  height: 100%;
  .user-info {
    display: flex;
    height: 20%;
    padding-left: 24px;
    > img {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      position: relative;
      top: 5vh;
    }
    .info-name {
      position: relative;
      font-size: 17px;
      height: 20%;
      font-weight: 700;
      top: 5vh;
      left: 6vw;
      > div {
        margin-top: 10px;
      }
    }
  }
  .button-box {
    width: 97%;
    margin: 0 auto;
    // box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
    .user-button {
      height: 50px;
      line-height: 30px;

      // box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
    }
  }
}
</style>