diff --git a/src/pages/suit/apply/index.module.scss b/src/pages/suit/apply/index.module.scss
index e380bcf6..429a1f69 100644
--- a/src/pages/suit/apply/index.module.scss
+++ b/src/pages/suit/apply/index.module.scss
@@ -35,6 +35,7 @@
   flex: 0 0 auto;
   margin-bottom: 6Px;
   padding: 6Px;
+  padding-bottom: 16Px;
   overflow-x: scroll;
   white-space: nowrap;
 
@@ -42,41 +43,49 @@
     @include shadow;
     position: relative;
     height: 178Px;
-    // height: 142Px;
     margin: 0 6Px;
     padding: 0Px 62Px;
     border-radius: 12Px;
     background-color: var(--wjh-color-week);
-    background-size:100% 100%;
+    background-size: 100% 100%;
+    border: solid 4Px var(--wjh-color-background-page);
+    width: 124Px;
 
     .suit-name {
-      height: 36Px;
-      width: 124Px;
-      line-height: 65px;
+      width: 100%;
+      line-height: 200%;
       position: absolute;
-      top: 142Px;
-      left: 0Px;
+      bottom: -4Px;
+      left: -4Px;
       text-align: center;
-      border-radius: 0 0 9Px 9Px;
+      border-radius: 0 0 12Px 12Px;
       background-color: var(--wjh-color-background-container);
+      border: solid 4Px var(--wjh-color-background-container);
+      border-top: none;
     }
   }
 
   .active {
-    border: solid 4Px var(--wjh-color-primary);
+    border-color: var(--wjh-color-primary) !important;
+
+    .suit-name {
+      border-color: var(--wjh-color-primary) !important;
+    }
   }
 }
 
 .suit-panel {
   background-color: var(--wjh-color-background-popup);
   height: 100%;
+  padding: 12Px 24Px;
+  box-sizing: border-box;
   width: 100%;
   margin: 0;
   border-top-right-radius: 20Px;
   border-top-left-radius: 20Px;
 
   .container {
-    padding: 12Px 33Px;
+    margin-bottom: 20Px;
 
     .title {
       margin: 24Px 0;
@@ -90,24 +99,25 @@
     .size-scroll {
       display: flex;
       overflow-x: auto;
+      padding-bottom: 12Px;
 
       .size-card {
         @include shadow;
-        display: flex;
-        flex: 0 0 auto;
-        height: 40Px;
-        padding: 0 25Px;
+        padding: 10Px 25Px;
         margin-right: 16Px;
         border: solid 2Px var(--wjh-color-week);
         border-radius: 10Px;
         color: var(--wjh-color-text-secondary);
         text-align: center;
-        line-height: 40Px;
-      }
 
-      .active {
-        border: solid 2Px var(--wjh-color-primary);
-        color: var(--wjh-color-primary);
+        &.active {
+          border: solid 2Px var(--wjh-color-primary);
+          color: var(--wjh-color-primary);
+        }
+
+        text {
+          white-space: nowrap;
+        }
       }
     }
 
@@ -135,7 +145,7 @@
     .rent-suit-number {
       transition: all 0.1s; //need test
 
-      .number-symbal {
+      .number-symbol {
         @include shadow;
         display: inline-block;
         height: 35Px;
@@ -147,12 +157,12 @@
         font-weight: var(--wjh-font-weight-medium);
         text-align: center;
         line-height: 35Px;
-      }
 
-      .number-symbal:hover {
-        color: var(--wjh-color-text-secondary);
-        background-color: var(--wjh-color-light);
-        border: solid 1Px var(--wjh-color-light);
+        &:active {
+          color: var(--wjh-color-text-secondary);
+          background-color: var(--wjh-color-light);
+          border: solid 1Px var(--wjh-color-light);
+        }
       }
 
       .number-num {
diff --git a/src/pages/suit/apply/index.vue b/src/pages/suit/apply/index.vue
index 0fbcca86..756070dd 100644
--- a/src/pages/suit/apply/index.vue
+++ b/src/pages/suit/apply/index.vue
@@ -1,6 +1,5 @@
 <template>
   <theme-config>
-    <!-- {{ serviceStore.suit.campusSuitInfo.name }} -->
     <view :class="styles['suit-title-bar']">
       <title-bar title="正装借用" back-button />
     </view>
@@ -9,7 +8,7 @@
         <view
           v-for="item in campusList"
           :key="item"
-          :class="[styles.campus, selectCampus === item ? styles.active : undefined]"
+          :class="[styles.campus, selectedCampus === item ? styles.active : undefined]"
           @tap="() => handleSelectCampus(item)"
         >
           <text>{{ item }}</text>
@@ -18,11 +17,11 @@
     </view>
     <view :class="styles['suit-selector']">
       <view
-        v-for="suit in suitsList"
+        v-for="suit in suitList"
         :key="suit.name"
-        :class="[styles.suits, rentSuitStyle === suit.name ? styles.active : undefined]"
+        :class="[styles.suits, selectedSuit?.name === suit.name ? styles.active : undefined]"
         :style="{ backgroundImage: 'url(' + (suit.img !== '' ? suit.img : 'https://api.cnpatrickstar.com/img/b57036a9-c17c-41af-9e5d-893af1aa7d9a.jpg') + ')' }"
-        @tap="() => {selectSuitStyle(suit)}"
+        @tap="() => {handleSelectSuit(suit)}"
       >
         <view :class="styles['suit-name']">
           {{ suit.name }}
@@ -30,30 +29,30 @@
       </view>
     </view>
     <view
-      v-if="suitsList.length !== 0 && selectCampus !== '朝晖'"
+      v-if="suitList.length !== 0 && selectedCampus !== '朝晖'"
       :class="styles['suit-panel']"
     >
-      <view v-if="rentSuitStyle !== ''" :class="styles.container">
+      <view v-if="selectedSuit" :class="styles.container">
         <view :class="styles.title">
           尺码
         </view>
         <view :class="styles['size-scroll']">
           <view
-            v-for="spec in suitSpecsList"
+            v-for="spec in selectedSuit.specs"
             :key="spec.id"
-            :class="[styles['size-card'], rentSuitSpec === spec.spec ? styles.active : undefined]"
-            @tap="() => selectSuitSize(spec)"
+            :class="[styles['size-card'], selectedSpec === spec ? styles.active : undefined]"
+            @tap="() => handleSelectSpec(spec)"
           >
-            {{ spec.spec }}
+            <text>{{ spec.spec }}</text>
           </view>
         </view>
         <view :class="styles.title">
           剩余数量
         </view>
         <view :class="styles['remain-suit-num']">
-          {{ suitStock === -1 ? "-" : suitStock }}
+          {{ selectedSpec?.stock ?? "-" }}
           <view
-            v-if="suitStock !== undefined && suitStock <= 1 && suitStock !== -1"
+            v-if="selectedSpec?.stock !== undefined && selectedSpec?.stock <= 1"
             :class="styles.warning"
           >
             <icon type="warn" color="#f0ad3e" />
@@ -66,30 +65,25 @@
           数量
         </view>
         <view :class="styles['rent-suit-number']">
-          <view :class="styles['number-symbal']" @tap="minusRentSuitNumber">
+          <view :class="styles['number-symbol']" @tap="minusRentSuitNumber">
             -
           </view>
           <view :class="styles['number-num']">
-            {{ rentSuitNumber }}
+            {{ selectedAmount }}
           </view>
-          <view :class="styles['number-symbal']" @tap="addRentSuitNumber">
+          <view :class="styles['number-symbol']" @tap="addRentSuitNumber">
             +
           </view>
         </view>
       </view>
-      <view
-        v-if="suitStock === 0"
-        :class="[styles.confirm, rentSuitStyle === '' ? styles.unactive : undefined]"
-      >
-        库存不足，无法申请
-      </view>
-      <view
-        v-else
-        :class="[styles.confirm, rentSuitStyle === '' ? styles.unactive : undefined]"
+      <w-button
+        block
+        size="large"
+        :disable="selectedSpec === undefined || selectedSpec?.stock === 0"
         @tap="onConfirm"
       >
-        提交申请
-      </view>
+        {{ selectedSpec?.stock !== 0 ? "提交申请" : "库存不足，无法申请" }}
+      </w-button>
       <w-modal
         v-model:show="isShowConfirm"
         title="提示"
@@ -101,15 +95,12 @@
           },
           confirm: {
             label: '确定',
-            callback: confirmRentSuit
+            callback: handleSubmit
           }
         }"
       />
     </view>
-    <card
-      v-else-if="selectCampus === '朝晖'"
-      :class="styles['card-alarmZhaoHui']"
-    >
+    <card v-else-if="selectedCampus === '朝晖'" :class="styles['card-alarmZhaoHui']">
       <view>朝晖校区线上办理暂不可用</view>
       <view>线下办理借用请前往学生事务大厅</view>
       <view :class="styles.footer">
@@ -124,9 +115,7 @@
 
 <script setup lang="ts">
 import Taro from "@tarojs/taro";
-import { computed, onMounted, ref } from "vue";
-import { useRequest } from "@/hooks";
-import store, { serviceStore } from "@/store";
+import { ref } from "vue";
 import { SuitService } from "@/services";
 import { helpText } from "@/constants/copywriting";
 import styles from "./index.module.scss";
@@ -134,134 +123,101 @@ import {
   Card,
   ThemeConfig,
   TitleBar,
+  WButton,
   WModal
 } from "@/components";
+import useSuitQueryOptions from "@/store/service/suit/queryOptions";
+import { useRequestNext } from "@/hooks";
+import { storeToRefs } from "pinia";
+import { RequestError } from "@/utils";
+import { Spec, Suit } from "@/types/Suit";
 
-type SpecItem = {
-  id: number,
-  spec: string,
-  stock: number
-};
-type SuitType = {
-  name: string;
-  img: string;
-  specs: SpecItem[];
-};
+const campusList = ["屏峰", "朝晖", "莫干山"] as const;
+const CampusCodeDict = { "朝晖": 1, "屏峰": 2, "莫干山": 3 } as const;
+
+const { campus: selectedCampus } = storeToRefs(useSuitQueryOptions());
+
+// form data
+const selectedSuit = ref<Suit>();
+const selectedSpec = ref<Spec>();
+const selectedAmount = ref(1);
 
-const campusList = ref<string[]>(["屏峰", "朝晖", "莫干山"]);
-const selectCampus = ref(serviceStore.suit.lastOpenCampus || "朝晖");
-const suitSpecsList = ref<SpecItem[]>([]);
-const suitStock = ref<number>(-1);
-const rentSuitNumber = ref(1);
-const rentSuitSpec = ref<string>();
-const rentSuitStyle = ref<string>();
-const rentSuitId = ref<number>();
-const cam = ref(1);
 const isShowConfirm = ref(false);
 const warnContent = ref(helpText.suit.warn);
 
-onMounted(() => {
-  readSuitInfo();
-});
-
-const readSuitInfo = () => {
-  switch (serviceStore.suit.lastOpenCampus) {
-    case "朝晖": cam.value = 1; break;
-    case "屏峰": cam.value = 2; break;
-    case "莫干山": cam.value = 3; break;
-  }
-  const { run: updateCampus } = useRequest(
-    SuitService.getSuitInfo, {
-      manual: true,
-      defaultParams: {
-        campus: cam.value
-      },
-      onSuccess: (res) => {
-        if (res.data.code !== 1) throw new Error(res.data.msg);
-        store.commit("setCampusSuitInfo", res.data.data);
-        if (serviceStore.suit.campusSuitInfo)
-          selectSuitStyle(suitsList.value[0]);
-      },
-      onError: (e: Error) => {
-        return `获取正装信息失败\r\n${e.message || "网络错误"}`;
-      }
+const { data: suitList, run: fetchSuitList } = useRequestNext(
+  async (params: { campus: keyof typeof CampusCodeDict }) => {
+    Taro.showLoading({ title: "加载中...", mask: true });
+    const list = await SuitService.getSuitInfo({ campus: CampusCodeDict[params.campus] });
+    list.sort((a, b) => a.name.localeCompare(b.name));
+    list.forEach(suit => suit.specs.sort((a, b) => +a.spec - +b.spec));
+    Taro.hideLoading();
+    return list;
+  }, {
+    defaultParams: { campus: selectedCampus.value },
+    initialData: [],
+    onSuccess: (list) => {
+      handleSelectSuit(list[0]);
+    },
+    onError: (e) => {
+      if (e instanceof RequestError)
+        Taro.showToast({ title: `获取正装信息失败\r\n${e.message}`, icon: "none" });
     }
-  );
-  updateCampus();
-};
-
-const suitsList = computed(() => {
-  return [
-    ...(serviceStore.suit.campusSuitInfo || [])
-  ].sort((a, b) => a.name.charCodeAt(0) - b.name.charCodeAt(0));
-});
+  }
+);
 
-const handleSelectCampus = (campus: string) => {
-  if (selectCampus.value === campus) return;
-  selectCampus.value = campus;
-  store.commit("setLastOpenCampus", campus);
-  readSuitInfo();
+const handleSelectCampus = (campus: "屏峰" | "朝晖" | "莫干山") => {
+  if (selectedCampus.value === campus) return;
+  selectedCampus.value = campus;
+  fetchSuitList({ campus });
 };
 
-const selectSuitStyle = (suit: SuitType) => {
-  if (suit.name === rentSuitStyle.value) return;
-  rentSuitStyle.value = suit.name;
-  suitSpecsList.value = suit.specs;
-  rentSuitNumber.value = 1;
-  rentSuitSpec.value = "";
-  rentSuitId.value = undefined;
-  suitStock.value = -1;
+function handleSelectSuit(suit: Suit) {
+  if (suit === selectedSuit.value) return;
+  selectedSuit.value = suit;
 
-  // 每次切换正装种类时，自动选择第一个认尺码并显示剩余数量
-  selectSuitSize(suitSpecsList.value[0]);
+  handleSelectSpec(suit.specs[0]);
 };
 
-const selectSuitSize = (spec: SpecItem) => {
-  if (spec.spec === rentSuitSpec.value) return;
-  rentSuitSpec.value = spec.spec;
-  rentSuitId.value = spec.id;
-  suitStock.value = spec.stock;
-  rentSuitNumber.value = 1;
+const handleSelectSpec = (spec: Spec) => {
+  if (spec === selectedSpec.value) return;
+  selectedSpec.value = spec;
+
+  selectedAmount.value = 1;
 };
 
 const addRentSuitNumber = () => {
-  if (suitStock.value !== undefined && rentSuitNumber.value < suitStock.value) {
-    rentSuitNumber.value++;
-    return;
-  }
+  if (selectedSpec.value === undefined) return;
+  if (selectedAmount.value < selectedSpec.value.stock)
+    selectedAmount.value++;
 };
 
 const minusRentSuitNumber = () => {
-  if (rentSuitNumber.value > 1) {
-    rentSuitNumber.value--;
+  if (selectedAmount.value > 1) {
+    selectedAmount.value--;
   }
 };
 
-const confirmRentSuit = () => {
-  if (rentSuitId.value === undefined ||
-    suitStock.value === undefined ||
-    rentSuitNumber.value <= 0 ||
-    rentSuitNumber.value > suitStock.value) {
+async function handleSubmit() {
+  if (selectedSpec.value === undefined
+   || selectedAmount.value <= 0
+   || selectedAmount.value > selectedSpec.value.stock
+  ) {
     Taro.showToast({ title: "请核对正装信息", icon: "none" });
     return;
   }
-  const { run } = useRequest(
-    SuitService.pushRentSuitInfo, {
-      manual: true,
-      defaultParams: {
-        supplies_id: rentSuitId.value,
-        count: rentSuitNumber.value
-      },
-      onSuccess: (res) => {
-        if (res.data.code !== 1) throw new Error(res.data.msg);
-        Taro.showToast({ title: "正装借用申请成功", icon: "none" });
-      },
-      onError: (e: Error) => {
-        return `${e.message || "网络错误"}`;
-      }
-    }
-  );
-  run();
+
+  try {
+    await SuitService.pushRentSuitInfo({
+      supplies_id: selectedSpec.value.id,
+      count: selectedAmount.value
+    });
+    Taro.showToast({ title: "正装借用申请成功", icon: "none" });
+  } catch (e) {
+    if (e instanceof RequestError)
+      Taro.showToast({ title: `申请失败: ${e.message}`, icon: "none" });
+  }
+
   isShowConfirm.value = false;
 };
 
diff --git a/src/pages/suit/faq/index.vue b/src/pages/suit/faq/index.vue
index fef5fbfd..691e28bb 100644
--- a/src/pages/suit/faq/index.vue
+++ b/src/pages/suit/faq/index.vue
@@ -22,7 +22,7 @@
             <text>{{ faq.publisher }} · {{ timeFormat(faq.publish_time) }}</text>
           </view>
         </card>
-        <card v-if="isEmpty">
+        <card v-if="!faqList.length">
           <text>当前暂无借用须知，敬请期待</text>
         </card>
       </view>
@@ -37,34 +37,26 @@ import {
   ThemeConfig,
   TitleBar
 } from "@/components";
-import { ref } from "vue";
-import { useRequest } from "@/hooks";
+import { useRequestNext } from "@/hooks";
 import { SuitService } from "@/services";
-import { SuitFaq } from "@/types/Suit";
 import dayjs from "dayjs";
 import { Image as TaroImage } from "@tarojs/components";
 import SuitFAQCoverImage from "@/assets/photos/faq.svg";
+import { RequestError } from "@/utils";
+import Taro from "@tarojs/taro";
 
-const faqList = ref<SuitFaq[]>([]);
-const isEmpty = ref(true);
-
-useRequest(SuitService.getFaq, {
-  defaultParams: {
-    publisher: "学生事务大厅"
-  },
-  loadingDelay: 300,
-  onSuccess: (res) => {
-    if (res.data.code === 1) {
-      faqList.value = res.data.data;
-      if (faqList.value.length > 0) isEmpty.value = false;
-    } else {
-      throw new Error(res.data.msg);
+const { data: faqList } = useRequestNext(
+  SuitService.getFaq, {
+    defaultParams: {
+      publisher: "学生事务大厅"
+    },
+    initialData: [],
+    onError: (e) => {
+      if (e instanceof RequestError)
+        Taro.showToast({ title: `获取信息失败：${e.message}`, icon: "none" });
     }
-  },
-  onError: (e: Error) => {
-    return `获取个人信息失败\r\n${e.message || "网络错误"}`;
   }
-});
+);
 
 const timeFormat = (time: string) => {
   return dayjs(time).format("YYYY年MM月DD日");
diff --git a/src/pages/suit/information/index.module.scss b/src/pages/suit/information/index.module.scss
index 951aab29..84019665 100644
--- a/src/pages/suit/information/index.module.scss
+++ b/src/pages/suit/information/index.module.scss
@@ -16,7 +16,6 @@
   padding: 0.3rem 0.5rem;
   margin: 0.5rem 0;
   border-radius: 0.2rem;
-  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
 }
 
 .button {
@@ -28,21 +27,23 @@
     color: var(--wjh-color-primary-dark);
     flex: 1;
   }
+
   .button_save {
     flex: 1;
   }
 
 }
 
-.line{
-    display: flex;
-    justify-content: space-around;
-    .name{
-      flex: 3;
-      padding-right: 10Px;
-    }
-    .sex{
-      flex: 2;
-    }
-}
+.line {
+  display: flex;
+  justify-content: space-around;
 
+  .name {
+    flex: 3;
+    padding-right: 10Px;
+  }
+
+  .sex {
+    flex: 2;
+  }
+}
\ No newline at end of file
diff --git a/src/pages/suit/information/index.vue b/src/pages/suit/information/index.vue
index ba7725dc..ebe7faac 100644
--- a/src/pages/suit/information/index.vue
+++ b/src/pages/suit/information/index.vue
@@ -1,6 +1,6 @@
 <template>
   <theme-config>
-    <title-bar title="我的信息" back-button />
+    <title-bar title="我的信息" :back-button="true" />
     <scroll-view :scroll-y="true">
       <view :class="style.header">
         <taro-image :src="SuitInformationCoverImage" />
@@ -21,8 +21,8 @@
           <text>学号</text>
           <view>
             <input
-              v-model="nowData.student_id"
-              disabled
+              v-model="initialData.student_id"
+              :disabled="true"
               :class="style.input"
             >
           </view>
@@ -33,7 +33,7 @@
               <view>
                 <input
                   v-model="inputData.name"
-                  :disabled="!change"
+                  :disabled="!isEditing"
                   :class="style.input"
                 >
               </view>
@@ -44,7 +44,7 @@
               <view>
                 <input
                   v-model="inputData.gender"
-                  :disabled="!change"
+                  :disabled="!isEditing"
                   :class="style.input"
                   placeholder="男 / 女"
                 >
@@ -55,7 +55,7 @@
           <view>
             <input
               v-model="inputData.college"
-              :disabled="!change"
+              :disabled="!isEditing"
               :class="style.input"
               placeholder="如：计算机学院"
             >
@@ -64,7 +64,7 @@
           <view>
             <input
               v-model="inputData.dormitory"
-              :disabled="!change"
+              :disabled="!isEditing"
               :class="style.input"
               placeholder="如：家和东苑1幢101室"
             >
@@ -73,21 +73,26 @@
           <view>
             <input
               v-model="inputData.contact"
-              :disabled="!change"
+              :disabled="!isEditing"
               :class="style.input"
             >
           </view>
           <template #footer>
-            <view v-if="change" :class="style.button">
-              <w-button :class="style.button_cancle" @tap="cancel">
+            <view v-if="isEditing" :class="style.button">
+              <w-button :class="style.button_cancle" @tap="handleCancel">
                 取消
               </w-button>
               <view>&ensp;</view>
-              <w-button :class="style.button_save" @tap="save">
+              <w-button :class="style.button_save" @tap="handleSubmit">
                 保存
               </w-button>
             </view>
-            <w-button v-else-if="!change" block @tap="editor">
+            <w-button
+              v-else-if="!isEditing"
+              :block="true"
+              :disable="loading || !!error"
+              @tap="handleStartEdit"
+            >
               编辑
             </w-button>
           </template>
@@ -102,17 +107,18 @@
 import style from "./index.module.scss";
 import { ref } from "vue";
 import { Card, ThemeConfig, TitleBar, WButton, WModal } from "@/components";
-import { useRequest } from "@/hooks";
 import { SuitService } from "@/services";
 import Taro from "@tarojs/taro";
 import { helpText } from "@/constants/copywriting";
 import { Image as TaroImage } from "@tarojs/components";
 import SuitInformationCoverImage from "@/assets/photos/suitapply-suitInformation.svg";
+import { useRequestNext } from "@/hooks";
+import { RequestError } from "@/utils";
+import { withTaroLoading } from "@/utils/promise";
 
 const helpContent = helpText.suit.information;
 const isShowHelp = ref(false);
-
-const change = ref(true);
+const isEditing = ref(false);
 const inputData = ref({
   student_id: "",
   name: "",
@@ -122,40 +128,26 @@ const inputData = ref({
   contact: ""
 });
 
-const editor = () => {
-  change.value = true;
+const handleStartEdit = () => {
+  isEditing.value = true;
 };
 
-useRequest(SuitService.getInformation, {
-  onBefore: () => {
-    Taro.showLoading({ title: "正在获取个人信息" });
-  },
-  loadingDelay: 300,
-  onSuccess: (res) => {
-    if (res.data.code === 1 && res.data.msg === "OK") {
-      const responseData = res.data.data;
-      Object.assign(nowData.value, responseData);
-      Object.assign(inputData.value, nowData.value);
-      Taro.showToast({ title: "获取成功" });
-      Taro.hideLoading();
-      change.value = responseData.id === 0;
-    } else throw new Error(res.data.msg);
-  },
-  onError: (e: Error) => {
-    return `获取个人信息失败\r\n${e.message || "网络错误"}`;
+const { error, data: initialData, loading } = useRequestNext(
+  withTaroLoading(SuitService.getInformation, { title: "正在获取个人信息", mask: true }),
+  {
+    initialData: { id: 0, name: "", gender: "", student_id: "", college: "", dormitory: "", contact: "" },
+    onSuccess: (data) => {
+      inputData.value = { ...data };
+      isEditing.value = data.id === 0;
+    },
+    onError: (e: Error) => {
+      if (e instanceof RequestError)
+        Taro.showToast({ title: `获取信息失败: ${e.message}`, icon: "none" });
+    }
   }
-});
-
-const nowData = ref({
-  student_id: "",
-  name: "",
-  gender: "",
-  college: "",
-  dormitory: "",
-  contact: ""
-});
+);
 
-const save = () => {
+async function handleSubmit() {
   const phoneRegex = /^1\d{10}$/;
   if (!phoneRegex.test(inputData.value.contact)) {
     Taro.showToast({ title: "请输入有效的手机号", icon: "none" });
@@ -173,25 +165,21 @@ const save = () => {
     Taro.showToast({ title: "请填写所有信息", icon: "none" });
     return;
   }
-  const { run } = useRequest(SuitService.changeInformation, {
-    loadingDelay: 300,
-    onSuccess: (res) => {
-      if (res.data.code === 1 && res.data.msg === "OK") {
-        Taro.showToast({ title: "保存成功" });
-      } else throw new Error(res.data.msg);
-      Taro.hideLoading();
-    },
-    onError: (e: Error) => {
-      return `编辑个人信息失败\r\n${e.message || "网络错误"}`;
-    }
-  });
-  run(inputData.value);
-  change.value = false;
-  Object.assign(nowData.value, inputData.value);
+
+  try {
+    Taro.showLoading({ title: "正在保存", mask: true });
+    await SuitService.changeInformation(inputData.value);
+    Taro.showToast({ title: "保存成功" });
+  } catch (e) {
+    Taro.showToast({ title: `编辑失败: ${e.message}`, icon: "none" });
+  }
+
+  isEditing.value = false;
+  Object.assign(initialData.value, inputData.value);
 };
 
-const cancel = () => {
-  change.value = false;
-  Object.assign(inputData.value, nowData.value);
+const handleCancel = () => {
+  isEditing.value = false;
+  Object.assign(inputData.value, initialData.value);
 };
 </script>
diff --git a/src/pages/suit/myapplication/PreviewCard/index.module.scss b/src/pages/suit/myapplication/PreviewCard/index.module.scss
index 67cb64aa..0b62d461 100644
--- a/src/pages/suit/myapplication/PreviewCard/index.module.scss
+++ b/src/pages/suit/myapplication/PreviewCard/index.module.scss
@@ -41,7 +41,6 @@
 }
 
 .body {
-  border-bottom: 2Px solid var(--wjh-color-border);
 
   .flex-container{
     padding: 50px 0;
diff --git a/src/pages/suit/myapplication/PreviewCard/index.vue b/src/pages/suit/myapplication/PreviewCard/index.vue
index c54711ab..13019b56 100644
--- a/src/pages/suit/myapplication/PreviewCard/index.vue
+++ b/src/pages/suit/myapplication/PreviewCard/index.vue
@@ -99,7 +99,7 @@
               },
               confirm: {
                 label: '确定',
-                callback: onConfirm
+                callback: handleConfirm
               }
             }"
           />
@@ -209,13 +209,13 @@
 import { SuitApplyRecord } from "@/types/Suit";
 import { computed, ref, toRefs } from "vue";
 import { Image as TaroImage } from "@tarojs/components";
-import { useRequest } from "@/hooks";
 import { SuitService } from "@/services";
 import { WButton } from "@/components";
 import Modal from "./Modal/index.vue";
 import Taro from "@tarojs/taro";
 import dayjs from "dayjs";
 import styles from "./index.module.scss";
+import { RequestError } from "@/utils";
 
 const props = defineProps<{
   source: SuitApplyRecord;
@@ -226,25 +226,10 @@ const imageList = computed(() => [
   source.value?.img || "https://api.cnpatrickstar.com/img/b57036a9-c17c-41af-9e5d-893af1aa7d9a.jpg"
 ].filter(item => !!item) as string[]);
 const { source } = toRefs(props);
-const emit = defineEmits(["isDelete"]);
 
-const { run } = useRequest(
-  SuitService.deleteRecords, {
-    defaultParams: {
-      borrow_id: source.value.id
-    },
-    loadingDelay: 60,
-    manual: true,
-    onSuccess: (res) => {
-      if (res.data.code === 1) {
-        emit("isDelete", "true");
-      } else throw new Error(res.data.msg);
-    },
-    onError: (e: Error) => {
-      return `加载申请信息失败\r\n${e.message || "网络错误"}`;
-    }
-  }
-);
+const emit = defineEmits<{
+  cancel: []
+}>();
 
 const isOverTime = computed(() => {
   const agotime = dayjs().subtract(7, "day");
@@ -266,9 +251,15 @@ const onCancel = () => {
   isShowConfirm.value = false;
 };
 
-const onConfirm = () => {
+async function handleConfirm() {
   isShowConfirm.value = false;
-  run();
+  try {
+    await SuitService.deleteRecords({ borrow_id: source.value.id });
+    emit("cancel");
+  } catch (e) {
+    if (e instanceof RequestError)
+      Taro.showToast({ title: `取消申请失败: ${e.message}`, icon: "none" });
+  }
 };
 
 const handleLoadFinish = ({ detail: { height, width } }) => {
diff --git a/src/pages/suit/myapplication/index.vue b/src/pages/suit/myapplication/index.vue
index a724abd7..0ce1e178 100644
--- a/src/pages/suit/myapplication/index.vue
+++ b/src/pages/suit/myapplication/index.vue
@@ -1,12 +1,12 @@
 <template>
   <theme-config>
-    <title-bar title="我的申请" back-button />
+    <title-bar title="我的申请" :back-button="true" />
     <view :class="styles['campus-selector']">
       <view :class="styles['container']">
         <view
-          v-for="item in campusList"
+          v-for="item in CampusList"
           :key="item"
-          :class="[styles['campus'], selectCampus === item ? styles['active'] : undefined]"
+          :class="[styles['campus'], queryOptions.campus === item ? styles['active'] : undefined]"
           @tap="() => handleSelectCampus(item)"
         >
           <text>{{ item }}</text>
@@ -19,9 +19,9 @@
           状态  |
         </text>
         <text
-          v-for="item in statusList"
+          v-for="item in StatusList"
           :key="item"
-          :class="selectStatus === item ? styles['active'] : undefined"
+          :class="queryOptions.applyStatus === item ? styles['active'] : undefined"
           @tap="() => handleSelectStatus(item)"
         >
           {{ item }}
@@ -38,10 +38,10 @@
           v-for="record in recordList"
           :key="record.id"
           :source="record"
-          @is-delete="needRefresh"
+          @cancel="handleDelete"
         />
         <w-skeleton v-if="loading" :style="{ borderRadius: '8Px' }" />
-        <card v-else-if="!recordList.length" is-empty>
+        <card v-else-if="!recordList.length" :is-empty="true">
           <text>该分类下暂无申请记录</text>
         </card>
       </view>
@@ -52,80 +52,51 @@
 <script setup lang="ts">
 import styles from "./index.module.scss";
 import { ThemeConfig, TitleBar, Card, WSkeleton } from "@/components";
-import { ref } from "vue";
-import { useRequest } from "@/hooks";
 import { SuitService } from "@/services";
-import { SuitApplyRecord } from "@/types/Suit";
 import PreviewCard from "./PreviewCard/index.vue";
-import { omit } from "lodash-es";
-import store, { serviceStore } from "@/store";
+import useSuitQueryOptions from "@/store/service/suit/queryOptions";
+import { useRequestNext } from "@/hooks";
 
-const recordList = ref<SuitApplyRecord[]>([]);
-const campusList = ref<string[]>(["屏峰", "朝晖", "莫干山"]);
-const statusList = ref<string[]>(["待处理", "借用中", "已完成"]);
-const selectCampus = ref(serviceStore.suit.lastOpenCampus || "朝晖");
-const selectStatus = ref(serviceStore.suit.lastOpenStatus || "待处理");
-const isEmpty = ref(false);
-const campusChange = { "朝晖": 1, "屏峰": 2, "莫干山": 3 }, statusChange = { "待处理": 1, "借用中": 3, "已完成": 4 };
+const CampusList = ["屏峰", "朝晖", "莫干山"] as const;
+const StatusList = ["待处理", "借用中", "已完成"] as const;
+const CampusCodeDict = { "朝晖": 1, "屏峰": 2, "莫干山": 3 } as const;
+const StatusCodeDict = { "待处理": 1, "借用中": 3, "已完成": 4 } as const;
 
-const { loading, run } = useRequest(
-  SuitService.getRecords, {
+const queryOptions = useSuitQueryOptions();
+
+const { loading, run: fetchRecords, data: recordList } = useRequestNext(
+  (params: { campus: keyof typeof CampusCodeDict, status: keyof typeof StatusCodeDict }) => {
+    const { campus, status } = params;
+    return SuitService.getRecords({ campus: CampusCodeDict[campus], status: StatusCodeDict[status] });
+  }, {
+    initialData: [],
+    resetOnRun: true,
     defaultParams: {
-      campus: campusChange[selectCampus.value],
-      status: statusChange[selectStatus.value]
-    },
-    loadingDelay: 600,
-    onSuccess: (res) => {
-      if (res.data.code === 1) {
-        recordList.value = recordList.value?.concat(
-          res.data.data
-        );
-        if (recordList.value.length === 0) isEmpty.value = true;
-      } else throw new Error(res.data.msg);
+      campus: queryOptions.campus,
+      status: queryOptions.applyStatus
     },
+    minLoadingTime: 300,
     onError: (e: Error) => {
       return `加载申请信息失败\r\n${e.message || "网络错误"}`;
     }
   }
 );
 
-const getRecords = (data: {
-  campus?: string;
-  status?: string;
-}) => {
-  isEmpty.value = false;
-  run(omit(data, [data.status === "待处理" ? "kind" : null]));
-};
+const handleSelectCampus = (campus: keyof typeof CampusCodeDict) => {
+  if (queryOptions.campus === campus) return;
+  queryOptions.setOptions({ campus });
 
-const handleSelectCampus = (campus: string) => {
-  if (selectCampus.value === campus) return;
-  selectCampus.value = campus;
-  store.commit("setLastOpenCampus", campus);
-  resetList();
-  getRecords({
-    campus: campusChange[campus],
-    status: statusChange[selectStatus.value]
-  });
+  fetchRecords({ campus, status: queryOptions.applyStatus });
 };
-const handleSelectStatus = (status: string) => {
-  if (selectStatus.value === status) return;
-  selectStatus.value = status;
-  store.commit("setLastOpenMain", status);
-  resetList();
-  getRecords({
-    campus: campusChange[selectCampus.value],
-    status: statusChange[selectStatus.value]
-  });
-};
-const resetList = () => {
-  recordList.value = [];
+
+const handleSelectStatus = (status: keyof typeof StatusCodeDict) => {
+  if (queryOptions.applyStatus === status) return;
+  queryOptions.setOptions({ applyStatus: status });
+
+  fetchRecords({ campus: queryOptions.campus, status });
 };
 
-const needRefresh = () => {
-  resetList();
-  getRecords({
-    campus: campusChange[selectCampus.value],
-    status: statusChange[selectStatus.value]
-  });
+const handleDelete = () => {
+  fetchRecords();
 };
 </script>
diff --git a/src/services/services/suitService.ts b/src/services/services/suitService.ts
index e4e9ac08..3f29992c 100644
--- a/src/services/services/suitService.ts
+++ b/src/services/services/suitService.ts
@@ -1,17 +1,14 @@
-import request from "../request";
+import { request } from "@/utils";
 import { api } from "../api/apiList";
-import { serviceStore } from "@/store";
 import { SuitFaq, SuitApplyRecord } from "@/types/Suit";
 
 export default class suitService {
-  static getFaq = (data: {
+  static getFaq = (params: {
     publisher: string
   }) => {
     return request<SuitFaq[]>(
       api.suit.getFaq, {
-        method: "GET",
-        header: { "Cookie": serviceStore.sessionID },
-        data
+        params
       }
     );
   };
@@ -25,35 +22,25 @@ export default class suitService {
       college: string,
       dormitory: string,
       contact: string;
-    }>(
-      api.suit.getInformation, {
-        method: "GET",
-        header: { "Cookie": serviceStore.sessionID }
-      }
-    );
+    }>(api.suit.getInformation);
   };
 
-  static changeInformation = (data: {
+  static changeInformation = (params: {
     name: string,
     gender: string,
     college: string,
     dormitory: string,
     contact: string;
   }) => {
-    return request<{
-      code: number,
-      msg: string,
-      data: null;
-    }>(
+    return request<null>(
       api.suit.changeInformation, {
         method: "POST",
-        header: { "Cookie": serviceStore.sessionID },
-        data
+        params
       }
     );
   };
 
-  static getSuitInfo = (data: {
+  static getSuitInfo = (params: {
     campus?: number
   }) => {
     return request<{
@@ -67,52 +54,40 @@ export default class suitService {
     }[]>(
       api.suit.check, {
         method: "GET",
-        header: { "Cookie": serviceStore.sessionID },
-        data
+        params
       }
     );
   };
 
-  static pushRentSuitInfo = (data: {
+  static pushRentSuitInfo = (params: {
     supplies_id: number,
     count: number,
   }) => {
-    return request<{
-      code: number,
-      msg: string,
-      data: null
-    }>(
+    return request<null>(
       api.suit.submit, {
         method: "POST",
-        header: { "Cookie": serviceStore.sessionID },
-        data
+        params
       }
     );
   };
 
-  static getRecords = (data: {
+  static getRecords = (params: {
     campus?: number,
     status?: number,
   }) => {
-    return request<{
-      data: SuitApplyRecord[],
-    }>(
+    return request<SuitApplyRecord[]>(
       api.suit.record, {
-        method: "GET",
-        header: { "Cookie": serviceStore.sessionID },
-        data
+        params
       }
     );
   };
-  static deleteRecords = (data: {
+  static deleteRecords = (params: {
     borrow_id?: number,
   }) => {
     return request(
-      `${api.suit.record}?borrow_id=${data.borrow_id}`,
+      `${api.suit.record}?borrow_id=${params.borrow_id}`,
       {
-        method: "DELETE",
-        header: { "Cookie": serviceStore.sessionID },
-        data
+        method: "DELETE"
       }
     );
   };
diff --git a/src/store/service/suit.ts b/src/store/service/suit.ts
deleted file mode 100644
index f3570ca4..00000000
--- a/src/store/service/suit.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-type suitItem = {
-  name: string;
-  img: string;
-  specs: {
-    id: number;
-    spec: string;
-    stock: number;
-  }[];
-}[];
-
-export interface SuitStoreType {
-  lastOpenCampus?: string;
-  campusSuitInfo?: suitItem;
-  lastOpenStatus?: string;
-}
-
-export const SuitStore = {
-  state: () => ({
-    lastOpenCampus: "屏峰",
-    campusSuitInfo: [],
-    lastOpenMain: "待处理"
-  }),
-  mutations: {
-    setLastOpenCampus(state: SuitStoreType, value: string) {
-      state.lastOpenCampus = value;
-    },
-    setCampusSuitInfo(state: SuitStoreType, value: suitItem) {
-      state.campusSuitInfo = value;
-    },
-    setLastOpenStatus(state: SuitStoreType, value: string) {
-      state.lastOpenStatus = value;
-    }
-  }
-};
diff --git a/src/store/service/suit/queryOptions.ts b/src/store/service/suit/queryOptions.ts
new file mode 100644
index 00000000..2758b5eb
--- /dev/null
+++ b/src/store/service/suit/queryOptions.ts
@@ -0,0 +1,28 @@
+import { persistedStorage } from "@/utils";
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+const useSuitQueryOptions = defineStore("suit/queryOptions", () => {
+  const campus = ref<"屏峰" | "朝晖" | "莫干山">("朝晖");
+  const applyStatus = ref<"待处理" | "借用中" | "已完成">("待处理");
+
+  function setOptions(partial: {
+    campus?: "屏峰" | "朝晖" | "莫干山";
+    applyStatus?: "待处理" | "借用中" | "已完成";
+  }) {
+    campus.value = partial.campus ?? campus.value;
+    applyStatus.value = partial.applyStatus ?? applyStatus.value;
+  }
+
+  return {
+    campus,
+    applyStatus,
+    setOptions
+  };
+}, {
+  persist: {
+    storage: persistedStorage
+  }
+});
+
+export default useSuitQueryOptions;
diff --git a/src/types/Suit.ts b/src/types/Suit.ts
index 4ec4b7f1..1c680853 100644
--- a/src/types/Suit.ts
+++ b/src/types/Suit.ts
@@ -14,6 +14,21 @@ export interface SuitFaq {
   publisher: string
 }
 
+export type Spec = {
+  id: number,
+  /** 尺码 */
+  spec: string,
+  /** 库存 */
+  stock: number
+};
+
+export type Suit = {
+  img: string;
+  name: string;
+  /** 尺码 */
+  specs: Spec[];
+};
+
 export interface SuitApplyRecord {
   id: number
   /* 状态 未审核 1 被驳回 2 借用中 3 已归还 4 */
diff --git a/src/utils/promise.ts b/src/utils/promise.ts
index 10bdd902..d4f86173 100644
--- a/src/utils/promise.ts
+++ b/src/utils/promise.ts
@@ -1,3 +1,4 @@
+import Taro from "@tarojs/taro";
 import RequestError, { MPErrorCode } from "./request/requestError";
 
 /**
@@ -21,3 +22,15 @@ export function withRespDataNeverNull<T, Args extends any[]>(
     return resp as T;
   };
 }
+
+export function withTaroLoading<T, Args extends any[]>(
+  fetcher: (...args: Args) => Promise<T>,
+  options?: Taro.showLoading.Option
+) {
+  return async (...args: Args) => {
+    Taro.showLoading(options);
+    const resp = await fetcher(...args);
+    Taro.hideLoading();
+    return resp as T;
+  };
+};