feats

package.json

@@ -12,6 +12,7 @@
     "@splidejs/splide": "^4.1.4",
     "@zjxpcyc/vue-tiny-store": "^1.0.1",
     "animate.css": "^4.1.1",
+    "axios": "^1.2.1",
     "html2canvas": "^1.4.1",
     "v-viewer": "^3.0.10",
     "viewerjs": "1.9.0",

src/App.vue

@@ -1,10 +1,39 @@
 <script setup>
   import { ref } from 'vue';
   import { useModel } from '@zjxpcyc/vue-tiny-store';
+  import wxsdk from '@/utils/wx'
+  import track from '@/utils/track'
   import Loading from './pages/Loading.vue';
 
   const { el } = useModel('audio');
+  const { setUser } = useModel('user');
   const show = ref(false);
+  
+  const { share, getCode, redirect } = wxsdk();
+
+  const initUser = () => {
+    const code = getCode();
+    if (!code) {
+      return redirect();
+    } else {
+      track(code).then(res => {
+        const { user, num } = res;
+        setUser({
+          ...(user || {}),
+          num: num || 0,
+        });
+      }).catch(err => {
+        console.error(err);
+
+        // 重来一次
+        redirect();
+      });
+    }
+  }
+
+  initUser();
+  
+  share();
 
 </script>
 

src/main.js

@@ -3,13 +3,10 @@ import 'animate.css'
 
 import App from './App.vue'
 import store from './store'
-import wxsdk from './utils/wx'
 import router from './router'
 import i18n from './i18n'
 
-
 import './style.less'
-// const { share } = wxsdk(location.href)
 
 const app = createApp(App);
 app.use(store);
@@ -17,4 +14,12 @@ app.use(router);
 app.use(i18n);
 app.mount('#app');
 
-// share();
+// 播放第一个视频
+document.addEventListener('WeixinJSBridgeReady', () => {
+  const t = setTimeout(() => {
+    const vid = document.querySelector('#firstVideo');
+    if (vid) {
+      vid.play();
+    }
+  }, 500);
+});

src/store/index.js

@@ -32,6 +32,18 @@ const useAudio = () => {
   }
 };
 
-const store = createStore({ 'audio': useAudio });
+
+const useUser = () => {
+  const user = ref();
+
+  const setUser = v => user.value = v;
+
+  return {
+    user,
+    setUser,
+  }
+}
+
+const store = createStore({ user: useUser, audio: useAudio });
 
 export default store;

src/utils/request.js

@@ -0,0 +1,97 @@
+import axios from "axios";
+
+const instance = axios.create({
+  timeout: 10000,
+  withCredentials: true, // 跨域
+});
+
+
+// 添加请求拦截器
+instance.interceptors.request.use(function (config) {
+  const { headers = {}, method = 'get', responseType = 'json', download = false, silent } = config;
+  const token = localStorage.getItem('token') || '';
+
+  // debugger
+  let noTip = silent;
+  if (noTip === undefined) {
+    noTip = method.toLocaleLowerCase() === 'get' ? true : false;
+  }
+
+  // 在发送请求之前做些什么
+  return {
+    ...config,
+    silent: noTip,
+    headers: {
+      ...headers,
+      Authorization: token,
+    },
+    responseType: download ? 'blob' : responseType,
+  };
+}, function (error) {
+  // 对请求错误做些什么
+  return Promise.reject(error);
+});
+
+// 添加响应拦截器
+instance.interceptors.response.use(function (response) {
+  // 2xx 范围内的状态码都会触发该函数。
+  // 对响应数据做点什么
+
+  const { data, config } = response;
+
+  if (config.download && !data.code) {
+    return downloadBlob(response, '下载文件');
+  }
+
+  if (data.code === 1000) {
+    // if (data.data.token) {
+    //   localStorage.setItem('token', data.data.token);
+    // }
+
+    // if (!config.silent) {
+    //   message.success('操作成功');
+    // }
+
+    return data.data;
+  } else if (data.code === 1001) {
+    // if (!config.silent) {
+    //   message.error('未登录或者超时, 请重新登录');
+    // }
+  } else {
+    console.log(config)
+    // if (!config.silent) {
+    //   const errMsg = data.message || '系统错误';
+    //   message.error(errMsg.indexOf('exception') > -1 ? '服务异常' : errMsg);
+    // }
+  }
+
+  return Promise.reject(response);
+}, function (error) {
+  // 超出 2xx 范围的状态码都会触发该函数。
+  // 对响应错误做点什么
+
+  console.error(error);
+
+  return Promise.reject("网络异常, 请重试...");
+});
+
+export default instance;
+
+function downloadBlob (response) {
+  let fileName = '未知文件';
+  const contentType = response.headers['content-type'];
+  const contentDisposition = response.headers['content-disposition'];
+  if (contentDisposition) {
+    const parts = contentDisposition.split(';filename=');
+    if (parts[1]) {
+      fileName = decodeURIComponent(parts[1]);
+    }
+  }
+
+  const url = window.URL.createObjectURL(new Blob([response.data], { type: contentType }));
+  const link = document.createElement('a');
+  link.href = url;
+  link.setAttribute('download', fileName);
+  link.click();
+  window.URL.revokeObjectURL(url);
+}

src/utils/track.js

@@ -0,0 +1,11 @@
+import request from './request'
+
+export default function(code) {
+  const data = {
+    code,
+    url: window.location.href,
+    ua: window.navigator.userAgent,
+  }
+
+  return request.post('/api/wx/taTrack', data);
+}

src/utils/wx.js

@@ -1,5 +1,5 @@
 
-function wxsdk(url) {
+function wxsdk() {
   const isDev = import.meta.env.DEV
 
   // API_BASE 来源 public/config.js
@@ -24,6 +24,9 @@ function wxsdk(url) {
   ]
 
   function init() {
+    if (isDev) return;
+    const url = window.location.href;
+
     // 请求后台接口
     fetch(`${apiBase}?url=${encodeURIComponent(url)}`).then(res => res.json()).then((res) => {
       if (res.code === 1000) {
@@ -62,8 +65,34 @@ function wxsdk(url) {
     });
   }
 
+  /**
+   * 获取 code
+   * @returns 
+   */
+  function getCode () {
+    if (isDev) return '123';
+
+    const matched = /[?&]*code=([^&]+)/.exec(location.search)
+    if (matched) {
+      return decodeURIComponent(matched[1])
+    }
+  }
+  
+  /**
+   * 跳转授权页面
+   */
+  function redirect () {
+    if (isDev) return;
+
+    const local = encodeURIComponent(location.origin + location.pathname)
+    const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd3bab568bc42d1de&redirect_uri=${local}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`
+    window.location.href = url;
+  }
+
   return {
-    share
+    share,
+    getCode,
+    redirect,
   }
 }
 

vite.config.js

@@ -9,7 +9,7 @@ export default defineConfig({
     host: '0.0.0.0',
     proxy: {
       '/api': {
-        target: 'http://127.0.0.1:7088',
+        target: 'http://127.0.0.1:7937',
       }
     }
   },

yarn.lock

@@ -170,11 +170,32 @@ animate.css@^4.1.1:
   resolved "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz#614ec5a81131d7e4dc362a58143f7406abd68075"
   integrity sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==
 
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
+axios@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmmirror.com/axios/-/axios-1.2.1.tgz#44cf04a3c9f0c2252ebd85975361c026cb9f864a"
+  integrity sha512-I88cFiGu9ryt/tfVEi4kX2SITsvDddTajXTOFmt2uK1ZVA8LytjtdeyefdQWEf5PU8w+4SSJDoYnggflB5tW4A==
+  dependencies:
+    follow-redirects "^1.15.0"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 base64-arraybuffer@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmmirror.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz#1c37589a7c4b0746e34bd1feb951da2df01c1bdc"
   integrity sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==
 
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
 copy-anything@^2.0.1:
   version "2.0.6"
   resolved "https://registry.npmmirror.com/copy-anything/-/copy-anything-2.0.6.tgz#092454ea9584a7b7ad5573062b2a87f5900fc480"
@@ -201,6 +222,11 @@ debug@^3.2.6:
   dependencies:
     ms "^2.1.1"
 
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
 errno@^0.1.1:
   version "0.1.8"
   resolved "https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
@@ -341,6 +367,20 @@ estree-walker@^2.0.2:
   resolved "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
   integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
 
+follow-redirects@^1.15.0:
+  version "1.15.2"
+  resolved "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
+  integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
+
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 fsevents@~2.3.2:
   version "2.3.2"
   resolved "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
@@ -432,6 +472,18 @@ make-dir@^2.1.0:
     pify "^4.0.1"
     semver "^5.6.0"
 
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@^2.1.12:
+  version "2.1.35"
+  resolved "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
 mime@^1.4.1:
   version "1.6.0"
   resolved "https://registry.npmmirror.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
@@ -485,6 +537,11 @@ postcss@^8.1.10, postcss@^8.4.18:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 prr@~1.0.1:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"