refactor(free-room): rewrite in hooks

src/components/RoomPicker/index.vue

@@ -15,24 +15,27 @@
 <script setup lang="ts">
 import WButton from "../Button/index.vue";
 import { onMounted, reactive, ref } from "vue";
-import { systemStore } from "@/store";
 import { dayScheduleStartTime } from "@/constants/dayScheduleStartTime";
 
 const props = defineProps<{ week: number }>();
-const emit = defineEmits(["changed"]);
+const emit = defineEmits<{
+  changed: [args: {
+    campus: string,
+    week: number,
+    weekday: number,
+    sections: number
+  }]
+}>();
 
 const campus = ["朝晖", "屏峰", "莫干山"];
 
 const selectorData = [
   campus,
-  [],
+  Array(20).fill(0).map((_, i) => `第${i + 1}周`),
   ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
-  []
+  Array(12).fill(0).map((_, i) => `第${i + 1}节`)
 ];
 
-for (let i = 1; i <= 20; i++) selectorData[1].push("第" + i + "周");
-for (let i = 1; i <= 12; i++) selectorData[3].push("第" + i + "节");
-
 const getCurrentSection = () => {
   const date = new Date();
   const tmp = date.getHours() * 60 + date.getMinutes();
@@ -53,37 +56,33 @@ const selectorChecked = ref([
   selectorData[2][new Date().getDay() - 1],
   `第${getCurrentSection()}节`
 ]);
-const selectorValue = reactive([
+const selectorValue = ref([
   0,
   props.week < 20 && props.week > 0 ? props.week - 1 : 0,
   new Date().getDay() - 1,
   getCurrentSection() - 1
-]);
+] as const);
 
 const onChange = (e) => {
   selectorChecked.value = selector.map(
     (item, index) => item[e.detail.value[index]]
   );
-  selectorValue.values = e.detail.value;
+  selectorValue.value = e.detail.value;
 
   emit("changed", {
-    year: systemStore.generalInfo.termYear,
-    term: systemStore.generalInfo.term,
     campus: campus[e.detail.value[0]],
-    week: Math.pow(2, e.detail.value[1]).toString(),
-    weekday: (selectorValue.values[2] + 1).toString(),
-    sections: Math.pow(2, e.detail.value[3]).toString()
+    week: e.detail.value[1],
+    weekday: e.detail.value[2] + 1,
+    sections: e.detail.value[3]
   });
 };
 
 onMounted(() => {
   emit("changed", {
-    year: systemStore.generalInfo.termYear,
-    term: systemStore.generalInfo.term,
-    campus: campus[selectorValue[0]],
-    week: Math.pow(2, selectorValue[1]).toString(),
-    weekday: (selectorValue[2] + 1).toString(),
-    sections: Math.pow(2, getCurrentSection()).toString()
+    campus: campus[selectorValue.value[0]],
+    week: selectorValue.value[1],
+    weekday: selectorValue.value[2] + 1,
+    sections: selectorValue.value[3]
   });
 });
 

src/pages/freeroom/index.vue

@@ -3,9 +3,10 @@
     <title-bar title="空教室" back-button />
     <scroll-view :scroll-y="true">
       <view class="flex-column">
-        <card v-if="!building" title="无记录" style="text-align: center" />
+        <card v-if="!building || freeRoomStore.error" title="无记录" style="text-align: center" />
         <card
           v-for="(item, index) in building"
+          v-else
           :key="index"
           class="building-card"
           :title="item.buildName"
@@ -28,39 +29,38 @@
       </view>
     </scroll-view>
     <bottom-panel>
-      <room-picker class="picker" :week="selectWeek" @changed="roomChanged" />
+      <room-picker class="picker" :week="generalInfo.week" @changed="handleSelectRoom" />
     </bottom-panel>
   </theme-config>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
-import { serviceStore, systemStore } from "@/store";
+import { computed } from "vue";
 import { BottomPanel, Card, RoomPicker, ThemeConfig, TitleBar } from "@/components";
-import { ZFService } from "@/services";
 import { freeroomMap } from "@/constants/freeroomMap";
+import useGeneralInfoStore from "@/store/system/generalInfo";
 import { Room } from "@/types/Room";
 import "./index.scss";
+import useFreeRoomStore from "@/store/service/freeRoom";
 
-type freeRoomQueryType = {
-  campus: string;
-  sections: string; // 可扩展区间选择
-  term: string;
-  week: string;
-  weekday: string;
-  year: string;
-};
+const { info: generalInfo } = useGeneralInfoStore();
+const freeRoomStore = useFreeRoomStore();
 
-function roomChanged(e: freeRoomQueryType) {
-  ZFService.getFreeRoomInfo(e);
+function handleSelectRoom(params: {
+  campus: string, week: number, weekday: number, sections: number
+}) {
+  freeRoomStore.fetchFreeRoom({
+    year: generalInfo.termYear,
+    term: generalInfo.term,
+    ...params
+  });
 }
 
 const building = computed(() => {
-  // comment: 数组，每个元素存放一幢教学楼的空教室
   const buildingList: Array<{ buildName: string; roomList: Room[]; }> = [];
   const tmp: Record<string, Room[]> = {};
 
-  serviceStore.zf.roomInfo.data?.forEach((item: Room) => {
+  freeRoomStore.list.forEach(item => {
     if (!tmp[freeroomMap[item.buildName[0]]])
       tmp[freeroomMap[item.buildName[0]]] = [];
     tmp[freeroomMap[item.buildName[0]]].push(item);
@@ -73,9 +73,8 @@ const building = computed(() => {
       })
     });
   });
+
   return buildingList;
 });
 
-const selectWeek = ref(systemStore.generalInfo.week);
-
 </script>

src/pages/score/index.vue

@@ -116,7 +116,7 @@ import {
 import { helpText } from "@/constants/copywriting";
 import "./index.scss";
 import useScoreStore from "@/store/service/score";
-import useScoreQueryOptionStore from "@/store/service/electricity/score/query";
+import useScoreQueryOptionStore from "@/store/service/score/query";
 import { FinalTermScore, MidTermScore } from "@/types/Score";
 import useUserStore from "@/store/service/user";
 import { storeToRefs } from "pinia";

src/services/services/zfService.ts

@@ -3,6 +3,7 @@ import { Lesson } from "@/types/Lesson";
 import { Exam } from "@/types/Exam";
 import { FinalTermScore, MidTermScore } from "@/types/Score";
 import { request } from "@/utils";
+import { Room } from "@/types/Room";
 
 export default class ZFService {
   static getExamInfo(params: { year: string; term: string }) {
@@ -40,7 +41,7 @@ export default class ZFService {
     sections: string;
     week: string;
   }) {
-    return request(
+    return request<Room[]>(
       api.zf.freeroom, {
         method: "POST",
         params

src/store/service/freeRoom.ts

@@ -0,0 +1,58 @@
+import { useRequestNext } from "@/hooks";
+import { ZFService } from "@/services";
+import { MPErrorCode, persistedStorage, RequestError } from "@/utils";
+import Taro from "@tarojs/taro";
+import { defineStore } from "pinia";
+
+async function freeRoomFetcher(params: {
+  year: string;
+  term: string;
+  campus: string;
+  weekday: number;
+  sections: number;
+  week: number;
+}) {
+  Taro.showLoading({ title: "加载中" });
+  const res = await ZFService.getFreeRoomInfo({
+    year: params.year,
+    term: params.term,
+    campus: params.campus,
+    week: Math.pow(2, params.week).toString(),
+    weekday: (params.weekday + 1).toString(),
+    sections: Math.pow(2, params.sections).toString()
+  });
+  Taro.hideLoading();
+  if (!Array.isArray(res)) {
+    const e = new RequestError("数据异常", MPErrorCode.MP_INVALID_DATA_VALUE);
+    console.error(e);
+    throw e;
+  }
+  return res;
+}
+
+const useFreeRoomStore = defineStore("freeRoom", () => {
+  const { loading, data: list, run: fetchFreeRoom, error } = useRequestNext(
+    freeRoomFetcher, {
+      manual: true,
+      initialData: [],
+      onError: (e) => {
+        if (e instanceof RequestError)
+          Taro.showToast({ title: `查询空教室失败: ${e.message}`, icon: "none" });
+      }
+    }
+  );
+
+  return {
+    list,
+    fetchFreeRoom,
+    loading,
+    error
+  };
+}, {
+  persist: {
+    storage: persistedStorage,
+    pick: ["list"]
+  }
+});
+
+export default useFreeRoomStore;

src/store/service/library.ts

@@ -4,27 +4,6 @@ import { persistedStorage } from "@/utils";
 import { defineStore } from "pinia";
 import { ref } from "vue";
 
-export const LibraryServiceStore = {
-  state: () => ({
-    history: [],
-    current: [],
-    updateTime: {
-      history: undefined,
-      current: undefined
-    }
-  }),
-  mutations: {
-    setLibraryHistory(state: any, value: Array<object>) {
-      state.history = value;
-      state.updateTime.history = new Date();
-    },
-    setLibraryCurrent(state: any, value: Array<object>) {
-      state.current = value;
-      state.updateTime.current = new Date();
-    }
-  }
-};
-
 const useLibraryStore = defineStore("library", () => {
   const updateTime = ref<string>();
 

src/utils/request/requestError.ts

@@ -3,6 +3,8 @@ export const MPErrorCode = {
   MP_NETWORK_ERROR: Symbol("MP_NETWORK_ERROR"),
   /** 服务端响应体异常 */
   MP_INVALID_RESPONSE_BODY: Symbol("MP_INVALID_RESPONSE_BODY"),
+  /** 响应数据中 data 字段非法 */
+  MP_INVALID_DATA_VALUE: Symbol("MP_INVALID_DATA_VALUE"),
   /** 微信登录流程中缺失 code */
   MP_LOGIN_ERROR_MISSING_WX_CODE: Symbol("MP_LOGIN_ERROR_MISSING_WX_CODE"),
   /** 服务端激活流程中缺失 Cookie */