js-wlg-app/src/views/venue-reservation/index.vue

<template>
  <div v-loading="loading" class="venue-reservation">
    <BackBtn />

    <div class="venue-reservation-container">
      <div class="venue-reservation__title">
        {{ step === 0 ? "身份核验" : "场馆预约" }}
      </div>

      <div v-if="step === 1 && form1" class="ticket">
        <p>{{ form1.organ }} - {{ form1.division }}</p>
        <p>{{ form1.leader.name }} - {{ form1.leader.phone }}</p>
      </div>

      <Form1 v-if="step === 0" ref="form1Ref" :form-data="form1" />
      <Form2 v-else-if="step === 1" ref="form2Ref" :form1-data="form1" />

      <div class="venue-reservation__btns">
        <div
          v-if="step === 0"
          class="venue-reservation__btns__next"
          @click="next"
        >
          下一步
        </div>
        <template v-else>
          <div class="venue-reservation__btns__pre" @click="previous">
            上一步
          </div>
          <div
            :class="[
              'venue-reservation__btns__next',
              form2Ref?.maxVisitorNum === 0 && 'disabled',
            ]"
            @click="next"
            style="color: #fff3c9"
          >
            提交
          </div>
        </template>
      </div>
    </div>

    <Dialog v-model:visible="dialogVisible">
      <p v-if="dialogErrType">请准确填写</p>
      <p v-html="dialogText"></p>
    </Dialog>

    <Dialog v-if="form1" v-model:visible="checkVisible" class="check-dialog">
      <p class="title">请确认预约信息</p>
      <div class="check-dialog__info">
        <p>{{ form1.organ }} - {{ form1.division }}</p>
        <p v-for="(item, index) in visitList" :key="index">
          {{ item.name }} - {{ item.phone }} - {{ item.idcard }}
        </p>
      </div>

      <div class="venue-reservation__btns">
        <div class="venue-reservation__btns__pre" @click="checkVisible = false">
          取消
        </div>
        <div
          class="venue-reservation__btns__next"
          style="color: #fff3c9"
          @click="submit2"
        >
          确认
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script lang="ts" setup>
import { BackBtn } from "@/components";
import Dialog from "./components/dialog.vue";
import { onActivated, ref } from "vue";
import "./index.scss";
import Form1 from "./form-1.vue";
import Form2 from "./form-2.vue";
import { reservationVenueApi } from "@/api";
import { DEFAULT_FORM1 } from "./constants";
import encodeStr from "@/utils/pass";
import { cloneDeep } from "lodash";

let saveParams: any = null;
const step = ref(0);
const checkVisible = ref(false);
const dialogVisible = ref(false);
const dialogText = ref("");
const dialogErrType = ref(false);
const loading = ref(false);
const form1 = ref<typeof DEFAULT_FORM1 | null>(null);
const visitList = ref<(typeof DEFAULT_FORM1)["leader"][]>([]);
const form1Ref = ref();
const form2Ref = ref();

onActivated(() => {
  clear();
});

const next = async () => {
  try {
    if (step.value === 0) {
      const params = await form1Ref.value.next();
      form1.value = params;
      step.value += 1;
    } else if (form2Ref.value?.maxVisitorNum > 0) {
      const { visitorList, ...form2Rest } = await form2Ref.value.submit();
      const { leader, ...form1Rest } = form1.value || {};
      const list = [leader, ...visitorList];
      visitList.value = visitorList;

      saveParams = {
        ...form1Rest,
        ...form2Rest,
        contact: list
          .map(
            (item: any) =>
              `${item.name}-${item.phone}${
                item.idcard ? "-" + encodeStr(item.idcard) : ""
              }`
          )
          .join(","),
        pcs: visitorList.length,
      };

      checkVisible.value = true;
    }
  } catch (err: any) {
    if (typeof err === "object" && err.msg) {
      dialogErrType.value = true;
      dialogText.value = err.msg;
      dialogVisible.value = true;
    }
  }
};

const clear = () => {
  step.value = 0;
  saveParams = null;
  form1.value = cloneDeep(DEFAULT_FORM1);
  visitList.value = [];
};

const submit2 = async () => {
  try {
    loading.value = true;
    checkVisible.value = false;
    await reservationVenueApi(saveParams);
    dialogErrType.value = false;
    dialogText.value = "预约已被接受<br/>请按照预约时间刷身份证原件入馆";
    dialogVisible.value = true;

    clear();
  } catch (err: any) {
    dialogText.value = err.msg;
    dialogVisible.value = true;
  } finally {
    loading.value = false;
  }
};

const previous = () => {
  step.value -= 1;
};
</script>