|
|
<template> <div> <Swiper class="swiper tw-mb-[15px] md:tw-mb-[30px]" :options="swiperOption" @click="slideClicked"> <SwiperSlide v-for="(item, index) in bookingType" :key="index" :class="['tw-transition-all tw-delay-75 tw-ease-in-out', currentType === item ? 'tw-flex tw-justify-center tw-py-[13px] tw-border-b-2 tw-border-solid tw-border-0 tw-border-primary-1 tw-text-primary-1 tw-cursor-pointer' : 'tw-flex tw-justify-center tw-py-[13px] tw-border-b tw-border-base-disable hover:tw-border-b-2 tw-border-solid tw-border-0 tw-border-transparent hover:tw-text-primary-1 tw-cursor-pointer']"> {{ item }} </SwiperSlide> </Swiper> <h4 class="t14 tw-font-bold md:t16 tw-mb-[10px]">{{ $t("Filter") }}</h4> <div class="element tw-w-fit md:tw-w-fit tw-mb-[15px] md:tw-mb-[30px]"> <ElementSelect :select="{ required: false, }" :selectList="categoryList" :default="0" @change="categorySelected" :defaultOptionMsg="$t('All Categories')"> </ElementSelect> </div> <UserServiceItem v-for="(item, index) in bookingList" :key="index" :info="item" @contact-us="activeContactUs" @upload-remittance-slip="activeUploadSlip"></UserServiceItem> <!-- <div v-if="bookingList.length < 1" class="tw-mt-[5px] tw-mb-[60px]"> <div class="tw-flex tw-justify-center tw-mt-[60px] tw-mb-[30px]"> <img :src="emptyImg" alt="" class="tw-h-[142px] tw-w-[160px]" /> </div> <div class="tw-text-center tw-body-3 tw-text-neutrals-800 tw-mb-[30px]"> {{ currentType === "全部" ? $t(`No Bookings yet ...`) : $t(`You don't have any ${currentType} bookings`) }} </div> <div class="tw-flex tw-justify-center tw-mb-[30px]"> <button class="tw-transition tw-justify-center tw-items-center tw-btn-md tw-text-white tw-bg-primary-1 tw-px-[30px] tw-py-[8.5px] tw-rounded-xl tw-w-fit tw-h-fit"> {{ $t("Explore with ShowEasy") }} </button> </div> </div> --> <!-- <div v-if="bookingList.length < 1" class="tw-mb-[60px] tw-py-[60px] tw-pl-[10px] md:tw-body-2"> {{ $t("Sorry, we couldn't find anything for ") + searchQuery }} {{ $t("Sorry, we couldn't find anything for ") }}
</div> -->
<div class="tw-flex tw-justify-end"> <pagination :pageLength="pageLength" @update="updatePage"></pagination> </div>
<ContactUsModal :ContactUs="contactUs"></ContactUsModal> <UploadRemittanceSlipModal :uploadBookingID="uploadBookingID"></UploadRemittanceSlipModal> </div></template><script>import ElementSelect from "@/components/user/userSelect.vue";import UserServiceItem from "./userServiceItem.vue";import pagination from "@/components/newComponent/pagination/pagination.vue";import ContactUsModal from "@/components/booking/Modal/ContactUsModal.vue";import UploadRemittanceSlipModal from "@/components/booking/Modal/UploadRemittanceSlipModal.vue";import { Swiper, SwiperSlide } from "vue-awesome-swiper";export default { components: { ElementSelect, UserServiceItem, Swiper, SwiperSlide, pagination, ContactUsModal, UploadRemittanceSlipModal, }, props: { searchQuery: { type: String, }, width: { type: Number }, userData: { type: Object }, searchValue: { type: String } }, data() { return {
bookingType: [ this.$t("booking.All"), this.$t("booking.Awaiting Confirmation"), this.$t("booking.Processing"), this.$t("booking.Completed"), this.$t("booking.Cancelled"), ], currentType: "All",
emptyImg: require("~/assets/img/companyEmpty.png"), contactUs: { Phone: "info@showeasy.com", Mail: "+886-2-2725-5000", }, swiperOption: { slidesPerView: 3, breakpoints: { 768: { slidesPerView: 5, }, }, },
currentPage: 1, itemsPerPage: 6, total: 0, categoryValue: "", bookingList: [], bookingStatus: [], subCategoryIDs: [], uploadBookingID: "", categoryList: [], query: "",
}; }, mounted() { this.fetchCategory(); }, watch: { searchValue: { handler: function () { this.query = this.searchValue; this.fetchNewBookingList(); }, },
}, async created() {
await this.fetchNewBookingList();
}, computed: {
result() { return this.total; },
pageLength() { return Math.ceil(this.result / this.itemsPerPage); },
},
methods: {
categorySelected(value) { this.subCategoryIDs = [];
if (this.categoryValue != 0) { this.subCategoryIDs.push(value); }
this.fetchNewBookingList();
}, slideClicked(swiper) { this.currentType = this.bookingType[swiper.clickedIndex]; if (this.currentType == "0") { this.bookingStatus = []; } else if (this.currentType == "訂單確認中") { this.bookingStatus = ["01"]; } else if (this.currentType == "訂單處理中") { this.bookingStatus = ["02"]; } else if (this.currentType == "訂單完成") { this.bookingStatus = ["03"]; } else if (this.currentType == "訂單取消") { this.bookingStatus = ["04"]; } else { this.bookingStatus = []; }
this.fetchNewBookingList();
}, activeContactUs() { this.$modal.show("ContactUs"); }, activeUploadSlip(bookingid) { this.uploadBookingID = bookingid; this.$modal.show("UploadRemittanceSlip"); }, fetchCategory() { this.$axios .get(`/trending/api/BookingOnline/BookingCategoryList?Lang=${this.$i18n.localeProperties["langQuery"]}`) .then((response) => { //console.log(JSON.stringify(response));
if (response && response.data && response.data.DATA && response.data.DATA.rel) { let data = response.data.DATA.rel if (data) { this.categoryList = data; this.categoryList = this.categoryList.map((item) => { return { id: item.CategoryID, name: item.CategoryName, }; });
} } }) .catch((error) => { console.log(error); }); },
async getBookingList() {
await this.$axios
.get(`/trending/api/BookingOnline/BookingCardList?` + `&PageIndex=${this.currentPage}` + `&PageSize=${this.itemsPerPage}` + `&SubCategoryIDs=${JSON.stringify(this.subCategoryIDs)}` + `&BookingStatuses=${JSON.stringify(this.bookingStatus)}` + `&PaymentStatuses` + `&Query=${this.query}` + `&Lang=${this.$i18n.localeProperties["langQuery"]}`)
.then((response) => { if (response && response.data && response.data.DATA && response.data.DATA.rel) { let data = response.data.DATA.rel;
if (data.DataList) { this.total = data.Total; this.bookingList = data.DataList; } } }) .catch((error) => { console.log(error); }); },
async fetchNewBookingList() {
this.currentPage = 1;
await this.getBookingList();
},
updatePage(value) {
this.currentPage = value; window.scrollTo(0, 0);
this.getBookingList();
},
},};</script><style lang="scss" scoped>::-webkit-scrollbar { display: none;}
:deep() {
// .v-pagination__navigation{
// background-color: #e5e5e5;
// }
.v-pagination>li>.v-pagination__item { background-color: inherit; }
.v-pagination__navigation { background-color: inherit !important; }
.v-pagination__navigation--disabled { opacity: 0; }}</style>
|
