comit

src/api/index.js

@@ -6,6 +6,9 @@ import { Toast } from 'tdesign-mobile-vue';
 // axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
 // axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
 // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
+// 请求数
+let LOADINGCOUNT = 0;
+let LOADING;
 
 let config = {
   baseURL: import.meta.env.VITE_APP_API_URL,
@@ -18,6 +21,19 @@ const _axios = axios.create(config);
 _axios.interceptors.request.use(
   function (config) {
     // Do something before request is sent
+
+    // 设置loading
+      if (LOADINGCOUNT === 0) {
+        LOADING = Toast({
+          message: "loading...",
+          duration: 0,
+          theme:'loading',
+          preventScrollThrough:true
+        });
+      }
+      LOADINGCOUNT++;
+    
+
     let auth = localStorage.getItem('token')
     if(auth) {
       config.headers.Authorization = auth;
@@ -35,6 +51,12 @@ _axios.interceptors.request.use(
 _axios.interceptors.response.use(
   function (response) {
     // Do something with response data
+    //关闭loading
+    LOADINGCOUNT--;
+    if (LOADINGCOUNT === 0) {
+      LOADING.clear();
+    }
+
     let data
     if(import.meta.env.MODE==='production'){
       data=JSON.parse(CryptoJS.Des3Decrypt(response.data,import.meta.env.VITE_APP_RESPONSE_DES_KEY));//解密

src/api/modules/user.js

@@ -4,6 +4,11 @@ export default{
   // 用户信息
   userInfo:()=>{
     return get('/user/info',{})
+  },
+
+  //用户绑定公众号
+  userBindWxOfficial:params=>{
+    return post('/wechat/subscribe',params)
   }
   
 }

src/router/index.js

@@ -11,6 +11,15 @@ importAllRoutes(import.meta.glob("./modules/*.js", { eager: true }));
 
 const routes = [
   ...appAllRoutes,
+  // 绑定公众号
+  {
+    path:'/bindWXofficial',
+    component:()=>import('@/views/BindWxOfficial.vue'),
+    name:'BindWxOfficial',
+    meta:{
+      title:''
+    },
+  },
 
   {
     path: "/:pathMatch(.*)",

src/views/BindWxOfficial.vue

@@ -0,0 +1,129 @@
+<script setup>
+import apiCommon from '@/api/modules/common'
+import apiUser from '@/api/modules/user'
+import { Message } from 'tdesign-mobile-vue';
+
+let urlParams
+
+const logo = ref('')
+
+async function getCode() {
+  //判断当前路由是否是有code
+  const url = location.search; //获取url携带的参数
+  urlParams = new Object();
+  if (url.indexOf("?") != -1) {
+    let str = url.substr(1);
+    let strs = str.split("&");
+    for (let i = 0; i < strs.length; i++) {
+      urlParams[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
+    }
+  }
+
+  // console.log(redirectUri);
+  const res = await apiCommon.systemConfig()
+  if (res.Ret === 200) {
+    let appid = ''
+    const arr = res.Data || []
+    arr.forEach(item => {
+      if (item.ConfKey === 'WxAppId') {
+        appid = item.ConfVal
+      }
+      if (item.ConfKey === 'BindImg') {
+        logo.value = item.ConfVal
+      }
+    });
+    if (!urlParams.code) {
+      const redirectUri = encodeURIComponent(window.location.href);
+      window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`;
+    }
+  }
+}
+getCode()
+
+const isBind = ref(false)
+function handleBind() {
+  apiUser.userBindWxOfficial({
+    Code: urlParams.code
+  }).then(res => {
+    if (res.Ret === 200) {
+      Message.success('绑定成功')
+      isBind.value = true
+    }
+  })
+}
+
+
+</script>
+
+<template>
+  <div class="bind-wxofficial-page">
+    <div class="bg-box left-box"></div>
+    <div class="bg-box right-box"></div>
+    <div class="content">
+      <img class="logo-icon" :src="logo" alt="" />
+      <h3 v-if="!isBind">点击按钮<br />绑定模板消息通知</h3>
+      <h3 v-else>您已成功绑定！</h3>
+      <t-button
+        class="btn"
+        theme="primary"
+        block
+        shape="round"
+        @click="handleBind"
+        v-if="!isBind"
+        >绑定</t-button
+      >
+      <p v-if="!isBind">绑定完成即可接收东吴小程序研报动态消息！</p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.bind-wxofficial-page {
+  width: 100vw;
+  min-height: 100vh;
+  overflow-x: hidden;
+  position: relative;
+  .content {
+    position: relative;
+    z-index: 99;
+    padding-top: 450px;
+    padding-left: 49px;
+    padding-right: 49px;
+    .logo-icon {
+      width: 208px;
+      margin-bottom: 80px;
+    }
+    h3 {
+      font-size: 38px;
+      padding-left: 28px;
+      line-height: 1.7;
+    }
+    .btn {
+      width: 90%;
+      margin: 180px auto 30px auto;
+    }
+    p {
+      color: #999999;
+      text-align: center;
+    }
+  }
+  .bg-box {
+    position: absolute;
+    width: 772px;
+    height: 219px;
+    border-radius: 140px;
+    transform: rotate(135deg);
+  }
+  .left-box {
+    top: 220px;
+    left: -303px;
+    background-color: #d3e1ff;
+    opacity: 0.22;
+  }
+  .right-box {
+    top: 110px;
+    right: -363px;
+    background-color: #053cc9;
+  }
+}
+</style>