refactor(webview): get target url from encoded url query (#150)

src/hooks/useWebview.ts

@@ -0,0 +1,14 @@
+import Taro from "@tarojs/taro";
+
+export default function useWebview() {
+  function open(url: string) {
+    const encoded = encodeURIComponent(url);
+    Taro.navigateTo({
+      url: `/pages/webview/index?target=${encoded}`
+    });
+  }
+
+  return {
+    open
+  };
+}

src/pages/announcement/InformationCard/index.vue

@@ -3,18 +3,16 @@ import Taro from "@tarojs/taro";
 import { Information } from "@/types/Information";
 import styles from "./index.module.scss";
 import { Card } from "@/components";
-import store from "@/store";
 import dayjs from "dayjs";
+import useWebview from "@/hooks/useWebview";
 
+const { open } = useWebview();
 const props = defineProps<{
   source: Information;
 }>();
 
 const handleClickLink = () => {
-  store.commit("setTempUrl", { url: props.source.link });
-  Taro.navigateTo({
-    url: "/pages/webview/index"
-  });
+  open(props.source.link);
 };
 
 const handleClick = () => {

src/pages/bind/YXY/index.vue

@@ -8,9 +8,11 @@ import { useRequestNext } from "@/hooks";
 import { RequestError } from "@/utils";
 import useUserStore from "@/store/service/user";
 import useHomeCardStore from "@/store/service/homecard";
+import useWebview from "@/hooks/useWebview";
 
 const { updateBindState } = useUserStore();
 const homeCardStore = useHomeCardStore();
+const { open } = useWebview();
 
 const phoneNumber = ref("");
 const graphCode = ref("");
@@ -83,13 +85,8 @@ const handleBind = async () => {
 };
 
 const handleClickTutorial = () => {
-  // TODO: encode url
-  // store.commit("setTempUrl", {
-  // url: "https://mp.weixin.qq.com/s/uFdF37XSznzPMOe_IfjrEQ"
-  // });
-  Taro.navigateTo({
-    url: "/pages/webview/index"
-  });
+  // TODO: 链接放到配置平台
+  open("https://mp.weixin.qq.com/s/uFdF37XSznzPMOe_IfjrEQ");
 };
 
 onMounted(() => {

src/pages/information/index.vue

@@ -12,7 +12,7 @@
           {{ information.content.replace(/\\n/g, '\n') }}
         </view>
         <view v-if="information.img1" class="img_container">
-          <image
+          <taro-image
             :src="information.img1"
             alt="Card Image"
             class="image"
@@ -22,7 +22,7 @@
           />
         </view>
         <view v-if="information.img2" class="img_container">
-          <image
+          <taro-image
             :src="information.img2"
             alt="Card Image"
             class="image"
@@ -32,7 +32,7 @@
           />
         </view>
         <view v-if="information.img3" class="img_container">
-          <image
+          <taro-image
             :src="information.img3"
             alt="Card Image"
             class="image"
@@ -46,7 +46,7 @@
         </view>
         <template #footer>
           <view class="logo_container">
-            <image
+            <taro-image
               src="https://api.cnpatrickstar.com/img/92a63e97-cd3e-411b-b4aa-8e6fad5fbd00.jpg"
               alt="logo_fy"
               class="logo_fy"
@@ -55,7 +55,7 @@
             <view class="x">
               X
             </view>
-            <image
+            <taro-image
               src="https://api.cnpatrickstar.com/img/15c05a4c-7c2d-4561-9536-80614b7b65b8.jpg"
               alt="logo_jh"
               class="logo_jh"
@@ -76,20 +76,21 @@
 
 <script setup lang="ts">
 import { Card, ThemeConfig, TitleBar } from "@/components";
-import { serviceStore } from "@/store";
 import { computed, ref } from "vue";
 import Taro from "@tarojs/taro";
 import dayjs from "dayjs";
+import { Image as TaroImage } from "@tarojs/components";
 import "./index.scss";
+import useNotificationStore from "@/store/service/notification";
 
+const notificationStore = useNotificationStore();
 const instance = Taro.getCurrentInstance();
-
 const needFixWidth = ref(false);
 
-const { informationId } = instance.router?.params as { informationId?: number };
+const id = instance.router?.params.informationId;
 
 const information = computed(() => {
-  return serviceStore.information.informationList.find((information) => information.id == informationId)!;
+  return notificationStore.information.find((item) => String(item.id) === id)!;
 });
 
 const imageList = computed(() => [

src/pages/schoolbus/index.vue

@@ -1,11 +1,12 @@
 <template>
-  <web-view :src="schoolBusUrl" />
+  <web-view :src="generalInfo.schoolBusUrl" />
 </template>
 
 <script setup lang="ts">
-import { systemStore } from "@/store";
 import "./index.scss";
+import useGeneralInfoStore from "@/store/system/generalInfo";
+import { storeToRefs } from "pinia";
 
-const schoolBusUrl = systemStore.generalInfo.schoolBusUrl;
+const { info: generalInfo } = storeToRefs(useGeneralInfoStore());
 
 </script>

src/pages/webview/index.vue

@@ -1,19 +1,15 @@
 <template>
-  <web-view :src="url" />
+  <web-view :src="target" />
 </template>
 
 <script setup lang="ts">
-import store, { serviceStore } from "@/store";
 import Taro from "@tarojs/taro";
 
-const url = serviceStore.webview.tempUrl;
-store.commit("clearTemp");
+const router = Taro.getCurrentInstance().router;
+const target = decodeURIComponent(router?.params["target"] ?? "");
 
-if (!url) {
-  Taro.showModal({
-    title: "未找到页面"
-  });
-  throw new Error("invalid access");
+if (!target) {
+  Taro.showModal({ title: "未找到页面" });
 }
 
 </script>