101-aiv1/src/components/TicketPurchase.vue

<script setup>
import { ref, reactive, onMounted, watch } from "vue";
// FullCalendar
import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import zhTwLocale from "@fullcalendar/core/locales/zh-tw";

let dialog = ref(false);

// 日期選擇器設定
const calendarOptions = ref({
  editable: true,
  selectable: true,
  locale: zhTwLocale,
  plugins: [dayGridPlugin, interactionPlugin],
  initialView: "dayGridMonth",
  headerToolbar: {
    start: "prev",
    center: "title",
    end: "next",
  },
  selectAllow: function (info) {
    return info.start >= getDateWithoutTime(new Date()); // 過去日期設為禁用
  },
  dayCellContent: function (args) {
    const dayText = args.dayNumberText.trim();
    const cleanedText = dayText.replace("日", ""); // 移除 "日"
    return cleanedText;
  },
  datesSet: function (arg) {
    console.log("切換日期：", arg.startStr, arg.endStr);
    // 其他處理
  },
  // validRange: function (nowDate) {
  //   console.log("nowDate", nowDate);
  //   return {
  //     start: nowDate,
  //   };
  // },
});

function getDateWithoutTime(dt) {
  dt.setHours(0, 0, 0, 0);
  return dt;
}
</script>

<template>
  <v-btn class="mt-5 ms-5" @click="dialog = true"> 購票測試介面 </v-btn>

  <v-dialog v-model="dialog" width="600">
    <v-card class="py-5">
      <v-card-title>【台北101觀景台】2024快速通行門票 </v-card-title>

      <v-card-text>
        <img
          class="w-100 mb-7"
          src="https://cdn.fontrip.com/fontour/file/show/3m3RR/1024x684.jpg"
          alt=""
        />

        <p class="pt-5 mb-3 border-t-sm font-weight-bold">請選擇預約日期</p>

        <!-- 日期選擇器 -->
        <FullCalendar :options="calendarOptions" />

        <p class="mb-5 font-weight-bold">可預約時段 (尚餘數量)</p>

        <v-menu class="time-menu">
          <template v-slot:activator="{ props }">
            <v-btn v-bind="props">
              請選擇預約時段
              <v-icon icon="mdi-menu-down" size="x-large" class="ms-1"></v-icon
            ></v-btn>
          </template>
          <v-list>
            <v-list-item v-for="(item, index) in 6" :key="index" :value="index">
              <v-list-item-title class="d-flex justify-space-between">
                <span>
                  <p>平日</p>
                  <small class="time">0{{ item }}:30</small>
                </span>
                <p class="quota">393</p>
              </v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>

        <p class="mt-10 mb-5 font-weight-bold">請選擇商品規格數量或參與人數</p>
      </v-card-text>

      <v-card-actions>
        <v-btn class="ms-auto" text="Ok" @click="dialog = false"></v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<style lang="scss">
.time-menu {
  .time {
    display: block;
    margin-top: -5px;
    color: #969696;
  }

  .quota {
    font-size: 12px;
    color: #b28850;
  }
}
</style>