|
@@ -76,7 +76,9 @@
|
|
|
剩余可预约人数:{{ maxVisitorNum }}
|
|
剩余可预约人数:{{ maxVisitorNum }}
|
|
|
</p>
|
|
</p>
|
|
|
</template>
|
|
</template>
|
|
|
- <p v-else class="form-error-tips">该日期已被约满,请选择其他日期</p>
|
|
|
|
|
|
|
+ <p v-else-if="!configLoading" class="form-error-tips">
|
|
|
|
|
+ 该日期已被约满,请选择其他日期
|
|
|
|
|
+ </p>
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
|
|
|
|
|
<el-form-item v-if="form.bookDay && maxVisitorNum > 0" label="参观人员">
|
|
<el-form-item v-if="form.bookDay && maxVisitorNum > 0" label="参观人员">
|
|
@@ -175,9 +177,12 @@ const DEFAULT_FORM = {
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
const loading = ref(false);
|
|
const loading = ref(false);
|
|
|
|
|
+/** 展馆配置是否加载中 */
|
|
|
|
|
+const configLoading = ref(false);
|
|
|
const dateList = ref<DateType[]>([]);
|
|
const dateList = ref<DateType[]>([]);
|
|
|
const formRef = ref<FormInstance>();
|
|
const formRef = ref<FormInstance>();
|
|
|
const form = reactive({ ...DEFAULT_FORM });
|
|
const form = reactive({ ...DEFAULT_FORM });
|
|
|
|
|
+/** 最大参观人数 */
|
|
|
const maxVisitorNum = ref(0);
|
|
const maxVisitorNum = ref(0);
|
|
|
const rules = reactive<FormRules>({
|
|
const rules = reactive<FormRules>({
|
|
|
exhibitionName: [
|
|
exhibitionName: [
|
|
@@ -189,12 +194,16 @@ const rules = reactive<FormRules>({
|
|
|
{ required: true, message: "请选择预约时段", trigger: "blur" },
|
|
{ required: true, message: "请选择预约时段", trigger: "blur" },
|
|
|
],
|
|
],
|
|
|
});
|
|
});
|
|
|
|
|
+/** 当前展馆id */
|
|
|
const curExhibitionId = ref(0);
|
|
const curExhibitionId = ref(0);
|
|
|
|
|
+/** 展馆可预约日期配置 */
|
|
|
const exhibitionConfig = ref<null | GetExhibitionConfigApiResponse>(null);
|
|
const exhibitionConfig = ref<null | GetExhibitionConfigApiResponse>(null);
|
|
|
|
|
+/** 展馆列表 */
|
|
|
const venues = computed(() => {
|
|
const venues = computed(() => {
|
|
|
const str = window.museum[curExhibitionId.value];
|
|
const str = window.museum[curExhibitionId.value];
|
|
|
return str ? str.split(",") : [];
|
|
return str ? str.split(",") : [];
|
|
|
});
|
|
});
|
|
|
|
|
+/** 入馆时段列表 */
|
|
|
const timeAreaList = computed(() => {
|
|
const timeAreaList = computed(() => {
|
|
|
const date = dateList.value.find((i) => i.value === form.bookDay);
|
|
const date = dateList.value.find((i) => i.value === form.bookDay);
|
|
|
return exhibitionConfig.value && date
|
|
return exhibitionConfig.value && date
|
|
@@ -203,6 +212,7 @@ const timeAreaList = computed(() => {
|
|
|
.map((i) => i.timeScope)
|
|
.map((i) => i.timeScope)
|
|
|
: [];
|
|
: [];
|
|
|
});
|
|
});
|
|
|
|
|
+/** 存在时间段的日期 */
|
|
|
const hasTimeAreaWeeks = computed(() =>
|
|
const hasTimeAreaWeeks = computed(() =>
|
|
|
Array.from(
|
|
Array.from(
|
|
|
new Set(
|
|
new Set(
|
|
@@ -212,6 +222,7 @@ const hasTimeAreaWeeks = computed(() =>
|
|
|
)
|
|
)
|
|
|
)
|
|
)
|
|
|
);
|
|
);
|
|
|
|
|
+/** 参观人员 */
|
|
|
const visitorList = reactive<
|
|
const visitorList = reactive<
|
|
|
{
|
|
{
|
|
|
id: number;
|
|
id: number;
|
|
@@ -318,7 +329,7 @@ const handleFocus = () => {
|
|
|
OpenVirtualKeyBoard();
|
|
OpenVirtualKeyBoard();
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
-const handleDate = (item: DateType) => {
|
|
|
|
|
|
|
+const handleDate = async (item: DateType) => {
|
|
|
if (item.value === form.bookDay) return;
|
|
if (item.value === form.bookDay) return;
|
|
|
|
|
|
|
|
if (
|
|
if (
|
|
@@ -326,10 +337,15 @@ const handleDate = (item: DateType) => {
|
|
|
hasTimeAreaWeeks.value.includes(item.week + "") &&
|
|
hasTimeAreaWeeks.value.includes(item.week + "") &&
|
|
|
!exhibitionConfig.value?.unableDate.includes(item.value)
|
|
!exhibitionConfig.value?.unableDate.includes(item.value)
|
|
|
) {
|
|
) {
|
|
|
|
|
+ configLoading.value = true;
|
|
|
form.bookDay = item.value;
|
|
form.bookDay = item.value;
|
|
|
form.bootTimeScope = "";
|
|
form.bootTimeScope = "";
|
|
|
|
|
|
|
|
- getVenueNum();
|
|
|
|
|
|
|
+ try {
|
|
|
|
|
+ await getVenueNum();
|
|
|
|
|
+ } finally {
|
|
|
|
|
+ configLoading.value = false;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
|
|
|