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.
287 lines
9.2 KiB
287 lines
9.2 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] 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" :defaultOptionMsg="$t('All Categories')" @change="updateCategory">
|
|
</ElementSelect>
|
|
</div>
|
|
<UserServiceItem v-for="(item, index) in renderList" :key="index" :info="item" @contact-us="activeContactUs"
|
|
@upload-remittance-slip="activeUploadSlip"></UserServiceItem>
|
|
<div v-if="renderList.length < 1 && searchQuery.length < 0" 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 === "All"
|
|
? $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="renderList.length < 1 && searchQuery.length > 0"
|
|
class="tw-mb-[60px] tw-py-[60px] tw-pl-[10px] md:tw-body-2">
|
|
{{ $t("Sorry, we couldn't find anything for ") + searchQuery }}
|
|
</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></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
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
apiUrl: process.env.SERVICE_CONSOLE,
|
|
bookingType: [
|
|
this.$t("booking.All"),
|
|
this.$t("booking.Unpaid"),
|
|
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: [],
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getUserOrderList();
|
|
this.fetchCategory();
|
|
},
|
|
// watch: {
|
|
// searchQuery: {
|
|
// handler: function () {
|
|
// this.
|
|
// },
|
|
// },
|
|
// },
|
|
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: {
|
|
slideClicked(swiper) {
|
|
this.currentType = this.bookingType[swiper.clickedIndex];
|
|
},
|
|
activeContactUs() {
|
|
this.$modal.show("ContactUs");
|
|
},
|
|
activeUploadSlip() {
|
|
this.$modal.show("UploadRemittanceSlip");
|
|
},
|
|
fetchCategory() {
|
|
this.$axios
|
|
.get(
|
|
`${this.apiEndPoint}/services-category?lang_code=${this.$i18n.localeProperties["langQuery"]}`
|
|
)
|
|
.then((result) => {
|
|
this.categories = result.data;
|
|
this.categories = this.categories.map((item) => {
|
|
return {
|
|
id: item.ids["0"],
|
|
name: item.lang_text,
|
|
};
|
|
});
|
|
this.categories.splice(0, 0, null);
|
|
this.getCategoryList();
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
},
|
|
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(
|
|
`/order?jwt=${this.$auth.$storage.getUniversal("jwt").token}`
|
|
)
|
|
.then(async (response) => {
|
|
this.bookingList = response.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>
|