|
|
@@ -79,11 +79,19 @@
|
|
|
<div class="list-box">
|
|
|
<div v-for="item in resultList" :key="item.timePeriodId">
|
|
|
<div class="flex-h-between">
|
|
|
- <div>{{ $filters.dateFormat(item.timePeriodStart, "mm:ss") }}</div>
|
|
|
+ <div>
|
|
|
+ {{ $filters.dateFormat(item.timePeriodStart, "mm:ss") }}-{{
|
|
|
+ $filters.dateFormat(item.timePeriodEnd, "mm:ss")
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
<div>剩余{{ item.availableCount }}</div>
|
|
|
- <van-button type="primary" size="small">{{
|
|
|
- item.status
|
|
|
- }}</van-button>
|
|
|
+ <van-button
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ :disabled="item.status != '可约'"
|
|
|
+ @click="reservation(item)"
|
|
|
+ >{{ item.status }}</van-button
|
|
|
+ >
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -98,43 +106,18 @@
|
|
|
<script name="Reservation" setup>
|
|
|
import { ref, reactive, computed, watch } from "vue";
|
|
|
import { isJson } from "@/utils";
|
|
|
-import { getCategoryList, getDateList, getReservationList } from "@/api/user";
|
|
|
+import filters from "@/filters";
|
|
|
+import {
|
|
|
+ getCategoryList,
|
|
|
+ getDateList,
|
|
|
+ getReservationList,
|
|
|
+ reservationSave,
|
|
|
+} from "@/api/user";
|
|
|
import { useRouter } from "vue-router";
|
|
|
import bus from "@/utils/bus";
|
|
|
|
|
|
const router = useRouter();
|
|
|
-const data = [
|
|
|
- {
|
|
|
- parentId: "0",
|
|
|
- id: "1",
|
|
|
- name: "广州",
|
|
|
- level: "1",
|
|
|
- subNodes: [
|
|
|
- {
|
|
|
- parentId: "1",
|
|
|
- id: "2",
|
|
|
- name: "广州教学点A",
|
|
|
- level: "2",
|
|
|
- subNodes: [],
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- parentId: "0",
|
|
|
- id: "3",
|
|
|
- name: "武汉",
|
|
|
- level: "1",
|
|
|
- subNodes: [
|
|
|
- {
|
|
|
- parentId: "3",
|
|
|
- id: "4",
|
|
|
- name: "武汉教学点A",
|
|
|
- level: "2",
|
|
|
- subNodes: [],
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
-];
|
|
|
+
|
|
|
const resultList = ref([]);
|
|
|
const params = reactive({
|
|
|
aaa: { value: "", text: "" },
|
|
|
@@ -142,6 +125,7 @@ const params = reactive({
|
|
|
examSiteId: { value: "", text: "" },
|
|
|
date: { value: "", text: "" },
|
|
|
});
|
|
|
+const treeData = ref([]);
|
|
|
const cityStates = reactive({
|
|
|
show: false,
|
|
|
value: [],
|
|
|
@@ -152,7 +136,7 @@ const cityStates = reactive({
|
|
|
params.aaa = { ...option };
|
|
|
teachStates.value = [];
|
|
|
params.bbb = { value: "", text: "" };
|
|
|
- teachStates.columns = data
|
|
|
+ teachStates.columns = treeData.value
|
|
|
.find((item) => item.id == option.value)
|
|
|
.subNodes.map((item) => ({ text: item.name, value: item.id }));
|
|
|
}
|
|
|
@@ -191,33 +175,24 @@ const toChooseSite = () => {
|
|
|
};
|
|
|
|
|
|
function getLocation() {
|
|
|
- getCategoryList()
|
|
|
- .then((res) => {
|
|
|
- cityStates.columns = res.map((item) => ({
|
|
|
- text: item.name,
|
|
|
- value: item.id,
|
|
|
- }));
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- //借用catch使用假数据先
|
|
|
- cityStates.columns = data.map((item) => ({
|
|
|
- text: item.name,
|
|
|
- value: item.id,
|
|
|
- }));
|
|
|
- });
|
|
|
+ getCategoryList().then((res) => {
|
|
|
+ res = res || [];
|
|
|
+ treeData.value = res;
|
|
|
+ cityStates.columns = res.map((item) => ({
|
|
|
+ text: item.name,
|
|
|
+ value: item.id,
|
|
|
+ }));
|
|
|
+ });
|
|
|
}
|
|
|
getLocation();
|
|
|
|
|
|
function getDateOptions() {
|
|
|
- getDateList()
|
|
|
- .then((res) => {})
|
|
|
- .catch(() => {
|
|
|
- let res = ["20240403"];
|
|
|
- dateStates.columns = res.map((item) => ({
|
|
|
- value: item,
|
|
|
- text: `${item.slice(0, 4)}-${item.slice(4, 6)}-${item.slice(6)}`,
|
|
|
- }));
|
|
|
- });
|
|
|
+ getDateList().then((res) => {
|
|
|
+ dateStates.columns = res.map((item) => ({
|
|
|
+ value: item,
|
|
|
+ text: `${item.slice(0, 4)}-${item.slice(4, 6)}-${item.slice(6)}`,
|
|
|
+ }));
|
|
|
+ });
|
|
|
}
|
|
|
getDateOptions();
|
|
|
|
|
|
@@ -226,27 +201,25 @@ function getResultList() {
|
|
|
getReservationList({
|
|
|
examSiteId: params.examSiteId.value,
|
|
|
date: params.date.value,
|
|
|
- })
|
|
|
- .then((res) => {
|
|
|
- unApplyNumber.value = res.unApplyNumber;
|
|
|
- resultList.value = res.periodList || [];
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- let res = {
|
|
|
- unApplyNumber: 1,
|
|
|
- periodList: [
|
|
|
- {
|
|
|
- timePeriodId: "1",
|
|
|
- timePeriodStart: 1712134122545,
|
|
|
- timePeriodEnd: 1714435200000,
|
|
|
- availableCount: 1,
|
|
|
- status: "可约",
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
- unApplyNumber.value = res.unApplyNumber;
|
|
|
- resultList.value = res.periodList || [];
|
|
|
- });
|
|
|
+ }).then((res) => {
|
|
|
+ unApplyNumber.value = res.unApplyNumber;
|
|
|
+ resultList.value = res.periodList || [];
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function reservation(item) {
|
|
|
+ showConfirmDialog({
|
|
|
+ // title: '标题',
|
|
|
+ message: `${params.date.text} ${filters.dateFormat(
|
|
|
+ item.timePeriodStart,
|
|
|
+ "mm:ss"
|
|
|
+ )}-${filters.dateFormat(item.timePeriodEnd, "mm:ss")}`,
|
|
|
+ }).then(() => {
|
|
|
+ reservationSave({
|
|
|
+ examSiteId: params.examSiteId.value,
|
|
|
+ timePeriodId: item.timePeriodId,
|
|
|
+ }).then(() => {});
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
watch([() => params.examSiteId, () => params.date], ([examSiteId, date]) => {
|
刘洋