You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
341 lines
11 KiB
341 lines
11 KiB
<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="categories" :default="0" @change="getCategory" :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" v-if="renderList.length > 0">
|
|
<pagination :pageLength="pageLength" @update="updateCurrentPage"></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
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
apiUrl: process.env.SERVICE_CONSOLE,
|
|
bookingType: [
|
|
this.$t("booking.All"),
|
|
this.$t("booking.Awaiting Confirmation"),
|
|
this.$t("booking.Processing"),
|
|
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",
|
|
Mail: "+886-2-2725-5000",
|
|
},
|
|
swiperOption: {
|
|
slidesPerView: 3,
|
|
breakpoints: {
|
|
768: {
|
|
slidesPerView: 5,
|
|
},
|
|
},
|
|
},
|
|
apiEndPoint: process.env.SERVICE_CONSOLE,
|
|
perPageItems: 6,
|
|
currentPage: 1,
|
|
selectedCategory: 0,
|
|
bookingList: [],
|
|
bookingStatus: [],
|
|
subCategoryIDs:[],
|
|
categoryValue: "",
|
|
uploadBookingID: "",
|
|
};
|
|
},
|
|
mounted() {
|
|
this.fetchCategory();
|
|
},
|
|
// watch: {
|
|
// searchQuery: {
|
|
// handler: function () {
|
|
// this.
|
|
// },
|
|
// },
|
|
// },
|
|
created(){
|
|
this.getUserOrderList();
|
|
|
|
},
|
|
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.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{
|
|
this.subCategoryIDs.push(value);
|
|
}
|
|
},
|
|
slideClicked(swiper) {
|
|
this.currentType = this.bookingType[swiper.clickedIndex];
|
|
if(this.currentType == "0"){
|
|
this.bookingStatus = [];
|
|
}else if(this.currentType == "訂單確認中"){
|
|
this.bookingStatus = ["01"];
|
|
console.log("Unpaid");
|
|
}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.getUserOrderList();
|
|
},
|
|
activeContactUs() {
|
|
this.$modal.show("ContactUs");
|
|
},
|
|
activeUploadSlip(bookingid) {
|
|
this.uploadBookingID = bookingid;
|
|
this.$modal.show("UploadRemittanceSlip");
|
|
},
|
|
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();
|
|
|
|
}
|
|
}
|
|
})
|
|
.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;
|
|
}
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
});
|
|
},
|
|
// 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));
|
|
// },
|
|
},
|
|
};
|
|
</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>
|