|
|
|
@ -2,9 +2,9 @@ |
|
|
|
<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']"> |
|
|
|
: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> |
|
|
|
@ -12,7 +12,7 @@ |
|
|
|
<div class="element tw-w-fit md:tw-w-fit tw-mb-[15px] md:tw-mb-[30px]"> |
|
|
|
<ElementSelect :select="{ |
|
|
|
required: false, |
|
|
|
}" :selectList="categories" :default="0" @change="getCategory" :defaultOptionMsg="$t('All Categories')"> |
|
|
|
}" :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" |
|
|
|
@ -41,9 +41,11 @@ |
|
|
|
{{ $t("Sorry, we couldn't find anything for ") }} |
|
|
|
|
|
|
|
</div> --> |
|
|
|
<!-- <div class="tw-flex tw-justify-end" v-if="renderList.length > 0"> |
|
|
|
<pagination :pageLength="pageLength" @update="updateCurrentPage"></pagination> |
|
|
|
</div> --> |
|
|
|
|
|
|
|
<div class="tw-flex tw-justify-end"> |
|
|
|
<pagination :pageLength="pageLength" @update="updatePage"></pagination> |
|
|
|
</div> |
|
|
|
|
|
|
|
<ContactUsModal :ContactUs="contactUs"></ContactUsModal> |
|
|
|
<UploadRemittanceSlipModal :uploadBookingID="uploadBookingID"></UploadRemittanceSlipModal> |
|
|
|
</div> |
|
|
|
@ -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/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); |
|
|
|
}); |
|
|
|
}) |
|
|
|
.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(); |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
xxxxxxxxxx