jhprjv2/ruoyi-ui/src/views/wxsetting/wxAuth/index.vue

<template>
  <div class="app-content">
    <el-row style="margin-top: 40%" v-if="errorVisible || successVisible">
      <el-col :sm="24" :lg="24" v-if="successVisible">
        <el-result icon="success" title="公众号消息授权成功">
          <template slot="extra">
            <el-button type="primary" size="medium" round>返回小程序</el-button>
          </template>
        </el-result>
      </el-col>
      <el-col :sm="24" :lg="24" v-if="errorVisible">
        <el-result
          icon="error"
          title="公众号消息授权失败"
          subTitle="请关注公众号并进行网页授权"
        >
          <template slot="extra">
            <el-button type="primary" size="medium" round>返回小程序</el-button>
          </template>
        </el-result>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { wxBinding } from "@/api/wxsetting/wxAuth";

export default {
  name: "build",
  data() {
    return {
      uId: null,
      errorVisible: false,
      successVisible: false,
    };
  },
  created() {
    this.uId = this.getQueryString("userOpenId") || "";
    if (this.uId == "") {
      this.errorVisible = true;
    } else {
      this.wechatLogin();
    }
  },
  methods: {
    wechatLogin() {
      // 处理微信授权登录
      let rd = this.getQueryString("rd") || "";
      let openId = this.getQueryString("openId") || "";
      // token === '' && openId != '' 只要这种情况，未绑定账号
      if (openId != "" && rd != "") {
        // 绑定账号
        console.log("接口返回===>", openId, this.uId, rd);
        this.saveBinding(uId, openId);
      } else {
        // 如果绑定了，返回成功
        console.log("我要去登录了===>");
        let _baseUrl = "https://szgc.jhncidg.com";
        window.location =
          _baseUrl +
          "/jhapi/wxAuth/authorize?returnUrl=" +
          _baseUrl +
          "/#/wxAuth?uid=" +
          this.uId;
      }
    },
    saveBinding(uId, openId) {
      /**
       * uId 小程序openId
       * openId 公众号openId
       */
      wxBinding({ openId: uId, msgOpenId: openId }).then((response) => {
        if (response.code == 200) {
          this.successVisible = true;
        } else {
          this.errorVisible = true;
        }
      });
    },
    colse() {
      if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
          document.addEventListener("WeixinJSBridgeReady", weixin_ClosePage, false);
        } else if (document.attachEvent) {
          document.attachEvent("WeixinJSBridgeReady", weixin_ClosePage);
          document.attachEvent("onWeixinJSBridgeReady", weixin_ClosePage);
        }
      } else {
        WeixinJSBridge.call("closeWindow");
      }
    },
    weixin_ClosePage() {
      //关闭微信浏览器
      WeixinJSBridge.call("closeWindow");
    },
    getQueryString(paramName) {
      if (window.location.href.indexOf("?") == -1) return "";
      let searchString = window.location.href.split("?")[1];
      let i,
        val,
        params = searchString.split("&");
      for (i = 0; i < params.length; i++) {
        val = params[i].split("=");
        if (val[0] == paramName) {
          return val[1];
        }
      }
      return "";
    },
  },
};
</script>
<style scope>
.app-content {
  width: 100%;
  height: 100%;
  background: #191d28
    url("https://szgcwx.jhncidg.com/staticFiles/img/CORE_40247DD946964A15AA0D4000E1031E19.png")
    no-repeat bottom/100%;
}
.el-result__title p {
  color: #ffffff !important;
}
.el-result__subtitle p {
  color: red !important;
  font-weight: 800;
}
.el-result__extra {
  width: 100%;
}
.el-result__extra button {
  width: 100%;
}
</style>