coding...

src/api/apiConfig/index.js

@@ -76,7 +76,7 @@ axiosInstance.interceptors.response.use(
     if (error && error.response) {
       switch (error.response.status) {
         case 400:
-          error.message = "请求错误(400)";
+          error.message = "请求参数错误(400)";
           break;
         case 401:
           error.message = "请重新登录(401)";
@@ -104,7 +104,7 @@ axiosInstance.interceptors.response.use(
           error.message = "网络错误(502)";
           break;
         case 503:
-          error.message = "网络超时(504)(503)";
+          error.message = "网络超时(503)";
           break;
         case 504:
           error.message = "网络超时(504)";

src/api/user.js

@@ -43,6 +43,9 @@ export function getReservationList(data) {
     method: "post",
     data,
     loading: true,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded",
+    },
   });
 }
 //保存考生预约结果

src/components/applyItem.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="location-info">
+    <p>{{ item.categoryName }}</p>
+    <p>{{ item.examSiteName }}</p>
+    <p>{{ item.examSiteAddress }}</p>
+  </div>
+  <div class="time-info">
+    <div class="time-box flex-h-between">
+      <span>{{ $filters.dateFormat(item.timePeriodStart, "MM月dd日") }}</span>
+      <span
+        >{{ $filters.dateFormat(item.timePeriodStart, "HH:mm") }}-{{
+          $filters.dateFormat(item.timePeriodEnd, "HH:mm")
+        }}</span
+      >
+    </div>
+    <div class="flex-h-end">
+      <van-button
+        plain
+        type="primary"
+        size="small"
+        v-if="item.showTicket"
+        @click="seeTicket(item)"
+        >电子准考证</van-button
+      >
+      <van-button
+        plain
+        type="danger"
+        size="small"
+        v-if="!item.cancel && item.allowCancel"
+        @click="cancel(item)"
+        >取消预约</van-button
+      >
+    </div>
+  </div>
+</template>
+<script name="ApplyItem" setup>
+import { reservationCancel } from "@/api/user";
+import { useRouter } from "vue-router";
+const router = useRouter();
+
+defineProps({ item: Object });
+const emit = defineEmits(["update"]);
+function cancel(item) {
+  showConfirmDialog({
+    // title: '标题',
+    message: "确定取消该预约吗？",
+  }).then(() => {
+    reservationCancel({ applyId: item.applyId }).then(() => {
+      showSuccessToast("取消成功");
+      emit("update");
+    });
+  });
+}
+function seeTicket(item) {
+  router.push({ name: "AdmissionCard", params: { applyId: item.applyId } });
+}
+</script>
+<style lang="less" scoped></style>

src/components/index.js

@@ -0,0 +1,7 @@
+import ApplyItem from "./applyItem.vue";
+
+export default {
+  install(Vue) {
+    Vue.component("ApplyItem", ApplyItem);
+  },
+};

src/main.js

@@ -5,7 +5,9 @@ import store from "./store";
 import directives from "./directives";
 import filters from "@/filters";
 import vconsole from "vconsole";
-import "amfe-flexible";
+import globalComponents from "@/components";
+// import "amfe-flexible";
+import "@/utils/rem";
 import "@/assets/styles/index.less";
 
 if (import.meta.env.VITE_ENV !== "prod") {
@@ -13,7 +15,7 @@ if (import.meta.env.VITE_ENV !== "prod") {
 }
 
 const app = createApp(App);
-app.use(router).use(store).use(directives);
+app.use(router).use(store).use(directives).use(globalComponents);
 //配置全局属性，访问：在setup函数中通过ctx访问，如：ctx.$filters
 app.config.globalProperties.$filters = filters;
 app.mount("#app");

src/pages/admissionCard.vue

@@ -1,5 +1,23 @@
 <template>
-  <div class="admission-card"></div>
+  <div class="admission-card">
+    <div class="text-center title">准考证</div>
+    <div>姓名：{{ info.studentName }}</div>
+    <div>性别：{{ info.gender }}</div>
+    <div>身份证号：{{ info.identityNumber }}</div>
+    <div>考点名称：{{ info.examSiteName }}</div>
+    <div>
+      考试时间：{{
+        $filters.dateFormat(info.timePeriodStart, "yyyy年MM月dd日")
+      }}
+      （星期{{ getWeek(info.timePeriodStart) }}）
+      {{ $filters.dateFormat(info.timePeriodStart, "HH:mm") }}至{{
+        $filters.dateFormat(info.timePeriodEnd, "HH:mm")
+      }}
+    </div>
+    <div>考场代码：{{ info.examRoomCode }}</div>
+    <div>座位号：{{ info.seatNumber }}</div>
+    <div>准考证号：{{ info.ticketNumber }}</div>
+  </div>
 </template>
 <script name="AdmissionCard" setup>
 import { ref } from "vue";
@@ -9,17 +27,24 @@ const route = useRoute();
 const applyId = route.params.applyId;
 const info = ref({
   applyId: "",
+  applyTaskId: "",
   examRoomAddress: "",
   examRoomCode: "",
+  examRoomId: "",
+  examRoomName: "",
+  examSiteAddress: "",
+  examSiteId: "",
+  examSiteName: "",
   gender: "",
   identityNumber: "",
-  name: "",
   photoPath: "",
   seatNumber: "",
   studentCode: "",
+  studentId: "",
+  studentName: "",
   ticketNumber: "",
-  ticketTitle: "",
   timePeriodEnd: "",
+  timePeriodId: "",
   timePeriodStart: "",
 });
 
@@ -32,11 +57,24 @@ _getAdmissionInfo();
 
 //获取考试须知
 function _getExamNotice() {
-  getExamNotice({ applyId }).then((res) => {});
+  getExamNotice({ applyTaskId: applyId }).then((res) => {});
 }
 //获取考场引导
 function _getRoomGuide() {
-  getRoomGuide({ applyId }).then((res) => {});
+  getRoomGuide({ examRoomId: info.value.examRoomId }).then((res) => {});
+}
+
+function getWeek(time) {
+  if (!time) return "";
+  const arr = ["日", "一", "二", "三", "四", "五", "六"];
+  return arr[new Date(time).getDay()];
 }
 </script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.admission-card {
+  .title {
+    font-weight: bold;
+    font-size: 20px;
+  }
+}
+</style>

src/pages/tab-pages/index.vue

@@ -1,35 +1,25 @@
 <template>
   <div class="index tab-page">
-    <div class="card">
-      <div class="location-info"></div>
-      <div class="time-info"></div>
+    <div class="card" v-for="item in list" :key="item.applyId">
+      <ApplyItem :item="item" @update="_getIndexList"></ApplyItem>
     </div>
   </div>
 </template>
 <script name="Index" setup>
 import { ref } from "vue";
+
 import { useUserStore } from "@/store";
-import { getIndexList, reservationCancel } from "@/api/user";
+import { getIndexList } from "@/api/user";
+
 const userStore = useUserStore();
 userStore.requestStuInfo();
-const resultList = ref([]);
+const list = ref([]);
 function _getIndexList() {
   getIndexList().then((res) => {
-    resultList.value = res || [];
+    list.value = res || [];
   });
 }
 _getIndexList();
-function cancel(item) {
-  showConfirmDialog({
-    // title: '标题',
-    message: "确定取消该预约吗？",
-  }).then(() => {
-    reservationCancel({ applyId: item.applyId }).then(() => {
-      showSuccessToast("取消成功");
-      _getIndexList();
-    });
-  });
-}
 </script>
 <style lang="less" scoped>
 .index {
@@ -37,6 +27,7 @@ function cancel(item) {
   .card {
     background-color: #fff;
     border-radius: 6px;
+    margin-bottom: 10px;
   }
 }
 </style>

src/pages/tab-pages/mine.vue

@@ -1,13 +1,28 @@
 <template>
-  <div class="tab-page mine">我的</div>
+  <div class="tab-page mine">
+    <div class="card" v-for="item in list" :key="item.applyId">
+      <ApplyItem :item="item" @update="_getMyHistory"></ApplyItem>
+    </div>
+  </div>
 </template>
 <script name="Mine" setup>
 import { ref } from "vue";
 import { getMyHistory } from "@/api/user";
 const list = ref([]);
 function _getMyHistory() {
-  getMyHistory().then((res) => {});
+  getMyHistory().then((res) => {
+    list.value = res || [];
+  });
 }
 _getMyHistory();
 </script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.mine {
+  padding: 15px;
+  .card {
+    background-color: #fff;
+    border-radius: 6px;
+    margin-bottom: 10px;
+  }
+}
+</style>

src/pages/tab-pages/reservation.vue

@@ -80,8 +80,8 @@
         <div v-for="item in resultList" :key="item.timePeriodId">
           <div class="flex-h-between">
             <div>
-              {{ $filters.dateFormat(item.timePeriodStart, "mm:ss") }}-{{
-                $filters.dateFormat(item.timePeriodEnd, "mm:ss")
+              {{ $filters.dateFormat(item.timePeriodStart, "HH:mm") }}-{{
+                $filters.dateFormat(item.timePeriodEnd, "HH:mm")
               }}
             </div>
             <div>剩余{{ item.availableCount }}</div>
@@ -141,6 +141,7 @@ const cityStates = reactive({
         .subNodes.map((item) => ({ text: item.name, value: item.id }));
     }
     cityStates.show = false;
+    params.examSiteId = { value: "", text: "" };
   },
 });
 const teachStates = reactive({
@@ -163,7 +164,7 @@ const dateStates = reactive({
   columns: [],
   onConfirm({ selectedOptions }) {
     let option = selectedOptions[0];
-    if (option.value != params.date.value) {
+    if (option?.value != params.date.value) {
       params.date = { ...option };
     }
     dateStates.show = false;
@@ -184,11 +185,11 @@ function _getCategoryList() {
     }));
   });
 }
-getCategoryList();
+_getCategoryList();
 
 function _getDateList() {
   getDateList().then((res) => {
-    dateStates.columns = res.map((item) => ({
+    dateStates.columns = (res || []).map((item) => ({
       value: item,
       text: `${item.slice(0, 4)}-${item.slice(4, 6)}-${item.slice(6)}`,
     }));

src/utils/rem.js

@@ -0,0 +1,10 @@
+const baseSize = 37.5;
+function setRem() {
+  const scale = document.documentElement.clientWidth / 375;
+  const fontSize = baseSize * Math.min(scale, 2) + "px";
+  document.documentElement.style.fontSize = fontSize;
+}
+setRem();
+window.onresize = function () {
+  setRem();
+};