nelson.kai
/
ShowEasyFrontEnd
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

[WHAT] 會員訂單增加分頁查詢

Dev
berlin-tzen 2 years ago
parent
183a6476e5
commit
fc3d52ad31
1 changed files with 122 additions and 183 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 305
      FrontEnd/components/user/bookingListContent.vue

305
FrontEnd/components/user/bookingListContent.vue
View File

@ -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/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"]}&currency=${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>

Write Preview
Loading…
Cancel
Save