diff --git a/FrontEnd/components/user/bookingListContent.vue b/FrontEnd/components/user/bookingListContent.vue index 93352b2..0f5c9e6 100644 --- a/FrontEnd/components/user/bookingListContent.vue +++ b/FrontEnd/components/user/bookingListContent.vue @@ -2,9 +2,9 @@
+ :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 }} @@ -12,7 +12,7 @@
+ }" :selectList="categoryList" :default="0" @change="categorySelected" :defaultOptionMsg="$t('All Categories')">
--> - + +
+ +
+
@@ -66,9 +68,9 @@ export default { UploadRemittanceSlipModal, }, props: { - // searchQuery: { - // type: String, - // }, + searchQuery: { + type: String, + }, width: { type: Number }, @@ -78,7 +80,7 @@ export default { }, data() { return { - apiUrl: process.env.SERVICE_CONSOLE, + bookingType: [ this.$t("booking.All"), this.$t("booking.Awaiting Confirmation"), @@ -86,11 +88,8 @@ export default { this.$t("booking.Completed"), this.$t("booking.Cancelled"), ], - previewImage:[], currentType: "All", - filterList: ["All categories"], - categoryList: [], - categories: [], + emptyImg: require("~/assets/img/companyEmpty.png"), contactUs: { Phone: "info@showeasy.com", @@ -104,81 +103,73 @@ export default { }, }, }, - apiEndPoint: process.env.SERVICE_CONSOLE, - perPageItems: 6, + currentPage: 1, - selectedCategory: 0, + itemsPerPage: 6, + total: 0, + categoryValue: "", bookingList: [], bookingStatus: [], - subCategoryIDs:[], - categoryValue: "", + subCategoryIDs: [], uploadBookingID: "", + categoryList: [], + }; }, mounted() { this.fetchCategory(); }, - // watch: { - // searchQuery: { - // handler: function () { - // this. - // }, - // }, - // }, - created(){ - this.getUserOrderList(); - + watch: { + + }, + async created() { + + await this.fetchNewBookingList(); + }, computed: { - // bookingFilter() { - // const categoryList = this.filterByCategory( - // this.bookingList, - // this.selectedCategory - // ); - // const tabList = this.filterByTab(categoryList, this.currentType); - // //const searchList = this.filterByQuery(tabList, this.searchQuery); - // //return searchList; - // }, - renderList() { - // for (let i in this.bookingList) { - // this.getServiceData(this.bookingList[i], i); - // } - //return this.sliceRenderList(this.bookingFilter); + + result() { + return this.total; + }, + + pageLength() { + return Math.ceil(this.result / this.itemsPerPage); }, - // result() { - // return this.bookingFilter.length; - // }, - // pageLength() { - // return Math.ceil(this.result / this.perPageItems); - // }, + }, methods: { - getCategory(value){ - console.log("value:" + value); - this.categoryValue = value; - if(this.categoryValue == 0){ - this.subCategoryIDs = []; - }else{ + + 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"){ + if (this.currentType == "0") { this.bookingStatus = []; - }else if(this.currentType == "訂單確認中"){ + } else if (this.currentType == "訂單確認中") { this.bookingStatus = ["01"]; console.log("Unpaid"); - }else if(this.currentType == "訂單處理中"){ + } else if (this.currentType == "訂單處理中") { this.bookingStatus = ["02"]; - }else if(this.currentType == "訂單完成"){ + } else if (this.currentType == "訂單完成") { this.bookingStatus = ["03"]; - }else if(this.currentType == "訂單取消"){ + } else if (this.currentType == "訂單取消") { this.bookingStatus = ["04"]; - }else{ + } else { this.bookingStatus = []; } - this.getUserOrderList(); + + this.fetchNewBookingList(); + }, activeContactUs() { this.$modal.show("ContactUs"); @@ -189,130 +180,78 @@ export default { }, fetchCategory() { this.$axios - .get(`/trending/api/BookingOnline/GetBookingCategory?LangType=${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.categories = data; - this.categories = this.categories.map((item) => { - return { - id: item.CategoryID, - name: item.CategoryName, - }; - }); - - // const initial = { - // id: "999", - // name: this.$t("userProfile.allCategory"), - // }; - - // this.categories.splice(0, 0, initial); - - //this.getCategoryList(); + .get(`/trending/api/BookingOnline/GetBookingCategory?LangType=${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); - }); + }) + .catch((error) => { + console.log(error); + }); }, - // getCategoryList() { - // const userCategory = [ - // ...new Set( - // this.bookingList.map((item) => { - // return item.categoryId; - // }) - // ), - // ]; - // this.bookingList = this.bookingList.map((item) => { - // item.categoryName =(this.categories[item.categoryId] && this.categories[item.categoryId].name ) ? this.categories[item.categoryId].name : ""; - // return item; - // }); - // for (const index of userCategory) { - // this.categoryList.push(this.categories[index]); - // } - // }, - // updateCategory(categoryId) { - // this.selectedCategory = Number(categoryId); - // }, - filterByCategory(data, categoryId) { - if (categoryId === 0) return data; - return data.filter((item) => item.categoryId === categoryId); - }, - // filterByTab(data, type) { - // switch (type) { - // case "All": - // this.currentPage = 1; - // return data; - // case "Unpaid": - // this.currentPage = 1; - // return data.filter((item) => item.order_payment[item.order_payment.length-1].payment_status === 0); - // case "Completed": - // this.currentPage = 1; - // return data.filter((item) => item.order_payment[item.order_payment.length-1].payment_status === 2); - // case "Cancelled": - // this.currentPage = 1; - // return data.filter((item) => item.order_payment[item.order_payment.length-1].payment_status === -1); - // case "Processing": - // this.currentPage = 1; - // return data.filter( - // (item) => - // item.order_payment[item.order_payment.length-1].payment_status !== -1 && - // item.order_payment[item.order_payment.length-1].payment_status !== 2 && - // item.order_payment[item.order_payment.length-1].payment_status !== 0 - // ); - // default: - // return data; - // } - // }, - // updateCurrentPage(value) { - // this.currentPage = value; - // }, - // sliceRenderList(data) { - // return data.slice( - // (this.currentPage - 1) * this.perPageItems, - // this.currentPage * this.perPageItems - // ); - // }, - // filterByQuery(data, query) { - // if (query.length < 1) return data; - // return data.filter((item) => { - // return ( - // item.service_name.toLowerCase().includes(query.toLowerCase()) || - // item.order_display_id.toLowerCase().includes(query.toLowerCase()) || - // item.partnerName.toLowerCase().includes(query.toLowerCase()) || - // item.categoryName.toLowerCase().includes(query.toLowerCase()) - // ); - // }); - // }, - async getUserOrderList() { - this.$axios - .get(`/trending/api/BookingOnline/BookingCardList?SubCategoryIDs=${JSON.stringify(this.subCategoryIDs)}&BookingStatuses=${JSON.stringify(this.bookingStatus)}&PaymentStatuses&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){ - this.bookingList = data; + + async getBookingList() { + + console.log("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` + + `&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) { + + // console.table(data.DataList); + console.log(data.DataList); + + this.total = data.Total; + this.bookingList = data.DataList; + } } - } - }) - .catch((error) => { - console.log(error); - }); + }) + .catch((error) => { + console.log(error); + }); + }, + + async fetchNewBookingList() { + + this.currentPage = 1; + + await this.getBookingList(); + }, - // async getServiceData(object,i) { - // this.$axios - // .get( - // `${this.apiUrl}/user-services/content?service_id=${object.service_id}&lang_code=${this.$i18n.localeProperties["langQuery"]}¤cy=${object.currency}` - // ) - // .then((res) => { - // this.bookingList[i].preview_image = res.data.preview_image - // }) - // .catch((error) => console.log(error)); - // }, + + updatePage(value) { + + this.currentPage = value; + window.scrollTo(0, 0); + + this.getBookingList(); + + }, + }, };