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
5b669e27b9
commit
e298070e34
2 changed files with 57 additions and 309 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. 22
      FrontEnd/pages/exhibition/_id.vue
  2. 344
      FrontEnd/pages/exhibition/index.vue

22
FrontEnd/pages/exhibition/_id.vue
View File

@ -39,9 +39,17 @@
</div>
</div>
</section>
<section class="step section3 tw-px-[30px] md:tw-px-0 xl:tw-pr-[30px] xl:tw-col-start-1 xl:tw-row-start-3">
<!-- <section class="step section3 tw-px-[30px] md:tw-px-0 xl:tw-pr-[30px] xl:tw-col-start-1 xl:tw-row-start-3">
<ExhibitionIntro class="d-block" :exhibition="exhibition"></ExhibitionIntro>
</section> -->
<section >
<div ref="about" id="about" data-step="about" class="step section3 tw-px-[30px] md:tw-px-0 xl:tw-pr-[30px] xl:tw-col-start-1 xl:tw-row-start-3">
<ExhibitionIntro class="d-block" :exhibition="exhibition"></ExhibitionIntro>
</div>
</section>
<section class="section4 tw-ml-[12px] md:tw-ml-0 md:tw-px-0 xl:tw-col-start-1 xl:tw-row-start-4">
<ExhibitionAD v-if="ads" :items="ads"></ExhibitionAD>
</section>
@ -282,6 +290,14 @@ export default {
name: "Related Services",
isShow:false,
},*/
{
url: "#ExhibitionIntro",
name: "Intro",
isShow:
this.exhibition.about.length > 0
? true
: false,
},
{
url: "#ExhibitionPhotoVideoGallery",
name: "Photo & Video Gallery",
@ -448,6 +464,10 @@ export default {
this.fixBarList.push({ id: "relatedServices", title: "Related Services", show: true });
}
if (this.exhibition.about.length > 0 ) {
this.fixBarList.push({ id: "about", title: "Intro", show: true });
}
if (this.exhibition.videos.length > 0 || this.exhibition.gallery.length > 0) {
this.fixBarList.push({ id: "photoGallery", title: "Photo & Video Gallery", show: true });
}

344
FrontEnd/pages/exhibition/index.vue
View File

@ -2,7 +2,7 @@
<div
class="tw-px-[30px] tw-mb-[60px] md:tw-mb-[100px] xl:tw-px-[60px] xl:tw-max-w-screen-xl xl:tw-mx-auto xl:tw-grid xl:tw-grid-cols-[380px_auto] xl:tw-gap-[30px]">
<section class="xl:tw-col-span-2 tw-mb-5 md:tw-mb-0">
<centerMode :list="ads" v-if="ads.length"></centerMode>
<centerMode :list="adList" v-if="adList.length"></centerMode>
</section>
<section class="xl:tw-col-span-2 tw-mb-[40px] xl:tw-mb-[10px]">
<Breadcrumbs class="tw-py-[7px] md:tw-py-[10px] xl:tw-py-[13px] tw-mb-4 md:tw-mb-6 xl:tw-mb-0"></Breadcrumbs>
@ -14,27 +14,20 @@
<DateCard @update="updateDateFilter" :modalChecked="selectedDates" />
</div>
<div v-if="$vuetify.breakpoint.xl">
<oneLevel :label="'exhibition.Show Status'" :list="statuses" @update="updateStatusFilter"></oneLevel>
<oneLevel :label="'exhibition.Show Status'" :list="statusList" @update="updateStatusFilter"></oneLevel>
</div>
<div v-if="$vuetify.breakpoint.xl">
<multipleLevel :label="'Categories'" :placeholder="'Find Categories...'" :list="categories"
<multipleLevel :label="'Categories'" :placeholder="'Find Categories...'" :list="categoryList"
:queryItem="categoryQueryFilter" @update="updateCategoryFilter"></multipleLevel>
</div>
<div v-if="$vuetify.breakpoint.xl">
<multipleLevel :label="'Location'" :placeholder="'Find country/city ...'" :list="locations"
<multipleLevel :label="'Location'" :placeholder="'Find country/city ...'" :list="locationList"
:queryItem="locationQueryFilter" @update="updateLocationFilter"></multipleLevel>
</div>
<div v-if="$vuetify.breakpoint.xl">
<!-- <rating></rating> -->
</div>
</section>
<!-- <section class="">
<ExhibitionListCard v-for="(item, index) in renderList" :key="index" :item="item"
@toggle-favorite="onToggleFavorite"></ExhibitionListCard>
<div class="tw-mt-[34px] tw-flex tw-justify-end">
<pagination :pageLength="pageLength" @update="updatePage"></pagination>
</div>
</section> -->
<section class="">
<ExhibitionListCard v-for="(item, index) in exhibitionList" :key="index" :item="item"></ExhibitionListCard>
<div class="tw-mt-[34px] tw-flex tw-justify-end">
@ -42,11 +35,18 @@
</div>
</section>
<div v-if="!$vuetify.breakpoint.xl">
<ShowSidebarFilterModal :statusList="statuses" :locationList="locations" :categoryList="categories"
<!-- <ShowSidebarFilterModal :statusList="statuses" :locationList="locations" :categoryList="categories"
:statusChecked="selectedStatus" :locationChecked="locationChecked" :categoryChecked="categoryChecked"
:datesChecked="selectedDates" @updateCategoryFilter="updateCategoryFilter"
@updateLocationFilter="updateLocationFilter" @updateStatusFilter="updateStatusFilter"
@updateDateFilter="updateDateFilter"></ShowSidebarFilterModal>
@updateDateFilter="updateDateFilter">
</ShowSidebarFilterModal> -->
<ShowSidebarFilterModal :statusList="statusList" :locationList="locationList" :categoryList="categoryList"
:statusChecked="selectedStatus"
:datesChecked="selectedDates" @updateCategoryFilter="updateCategoryFilter"
@updateLocationFilter="updateLocationFilter" @updateStatusFilter="updateStatusFilter"
@updateDateFilter="updateDateFilter">
</ShowSidebarFilterModal>
</div>
<loading :isLoading="isPageLoading"></loading>
</div>
@ -86,143 +86,15 @@ export default {
ShowSidebarFilterModal,
loading,
},
async asyncData({ route, $auth, $axios, i18n }) {
// get URL link prarm
// created
let isPageLoading = true;
let langQuery = "?lang=" + i18n.localeProperties["langQuery"];
let keyword = route.query.q;
let data;
// ({ data } = await $axios.get("/exhibitions/filters" + langQuery));
let statuses;
if (data) {
statuses = data.filters.statuses.map((item) => {
return {
key: item.Key,
title: item.Value,
};
});
}
// ({ data } = await $axios.get(
// `/t/exhibitions/locations${langQuery}&sort=true`
// ));
let locations;
if (data) {
locations = data.sort_results.map((item) => {
item.country_list = item.country_list.map((country) => {
country.city_list = country.city_list.map((city) => {
return {
title: city.city_name,
key: city.city_name,
};
});
return {
title: country.country_name,
key: country.country_name,
children: country.city_list,
};
});
return {
title: item.region_name,
key: item.region_name,
children: item.country_list,
};
});
}
// ({ data } = await $axios.get(
// `/t/exhibitions/categories${langQuery}&sort=true`
// ));
let categories;
if (data) {
categories = data.sort_results.map((item) => {
item.subcategories_list = item.subcategories_list.map((children) => {
return {
title: children.subcategory_name,
key: children.subcategory_name,
};
});
return {
title: item.category_name,
key: item.category_name,
children: item.subcategories_list,
};
});
}
if (keyword) {
langQuery = langQuery + "&q=" + keyword;
}
try {
data = {
exhibitions: [],
ads: [],
};
// ({ data } = await $axios
// .get("/exhibitions" + langQuery)
// .then()
// .catch((err) => {
// console.log(err);
// }));
} catch (e) {
data = {
exhibitions: [],
ads: [],
};
console.log(e);
}
// console.log(data.exhibitions);
// let exhibitionList = data.exhibitions; // exhibitionApi2CardType();
let userSavedList = [];
if ($auth.loggedIn) {
// await $axios
// .get(
// `/member/users/${$auth.$storage.getUniversal("jwt").user_id}?jwt=${
// $auth.$storage.getUniversal("jwt").token
// }`
// )
// .then((res) => {
// userSavedList = res.data.UserExhibition; //.map(item=>item.exhibition_id)
// })
// .catch((err) => {
// console.log(err);
// });
}
// userSavedList = userSavedList.map((item) => item.exhibition_id);
// for (let i = 0; i < exhibitionList.length; i++) {
// if (userSavedList.includes(exhibitionList[i].id)) {
// exhibitionList[i].saved = true;
// } else {
// exhibitionList[i].saved = false;
// }
// }
let ads = data.ads;
return {
statuses: statuses,
// categories: categories,
// locations: locations,
// rating: rating,
isPageLoading: isPageLoading,
// exhibitionList: exhibitionList,
ads: ads,
langQuery: langQuery,
};
},
data: () => ({
page: 1,
perPageItems: 10,
currentPage: 1,
itemsPerPage: 10,
total: 0,
adList: [],
statusList: [],
exhibitionList: [],
categoryChecked: [],
locationChecked: [],
ratingChecked: [],
locations: [],
locationList: [],
selectedDates: [],
selectedStatus: [],
@ -245,7 +117,7 @@ export default {
favoriteSet: new Set(),
categories: [],
categoryList: [],
categoryQueryFilter: "",
locationQueryFilter: "",
width: undefined,
@ -263,56 +135,15 @@ export default {
async created() {
console.log("created");
// to Fred
// addjust async/sync orders
this.isPageLoading = true;
// this.getAdList();
await this.getStatusList();
await this.getLocationList();
await this.getCategoryList();
await this.getFavorite();
await this.getQuery();
// await this.getExhibitionCard();
// this.getQuery();
// await this.getUnsortLocationList();
// await this.getUnsortCategoryList();
// await this.getQuery();
// if (this.$route.query.hasOwnProperty("q")) {
// this.sortType.splice(0, 0, {
// name: "ShowEasy Recommended",
// value: "ShowEasy Recommended",
// });
// this.sortBy = "ShowEasy Recommended";
// }
// let userSavedList = [];
// if (this.$auth.loggedIn) {
// // await this.$axios
// // .get(
// // `/member/users/${this.$auth.$storage.getUniversal("jwt").user_id
// // }?jwt=${this.$auth.$storage.getUniversal("jwt").token}`
// // )
// // .then((res) => {
// // userSavedList = res.data.UserExhibition;
// // })
// // .catch((err) => {
// // console.log(err);
// // });
// // this.$store.dispatch("updatePicture");
// // this.$nextTick(() => {
// // this.$forceUpdate();
// // });
// }
// userSavedList = userSavedList.map((item) => item.exhibition_id);
// for (let i = 0; i < this.exhibitionList.length; i++) {
// if (userSavedList.includes(this.exhibitionList[i].id)) {
// this.exhibitionList[i].saved = true;
// } else {
// this.exhibitionList[i].saved = false;
// }
// }
if (process.client) {
this.width = window.innerWidth;
}
@ -324,39 +155,12 @@ export default {
console.log("mounted");
// let userSavedList = [];
// if (this.$auth.loggedIn) {
// // await this.$axios
// // .get(
// // `/member/users/${this.$auth.$storage.getUniversal("jwt").user_id
// // }?jwt=${this.$auth.$storage.getUniversal("jwt").token}`
// // )
// // .then((res) => {
// // userSavedList = res.data.UserExhibition;
// // })
// // .catch((err) => {
// // console.log(err);
// // });
// // this.$store.dispatch("updatePicture");
// // this.$nextTick(() => {
// // this.$forceUpdate();
// // });
// }
// userSavedList = userSavedList.map((item) => item.exhibition_id);
// for (let i = 0; i < this.exhibitionList.length; i++) {
// if (userSavedList.includes(this.exhibitionList[i].id)) {
// this.exhibitionList[i].saved = true;
// } else {
// this.exhibitionList[i].saved = false;
// }
// }
this.$nextTick(() => {
window.addEventListener("resize", this.onResize);
});
},
beforeDestroy() {
window.removeEventListener("resize", this.onResize);
this.fetchUser();
},
computed: {
@ -364,13 +168,11 @@ export default {
return this.total;
},
pageLength() {
return Math.ceil(this.result / this.perPageItems);
return Math.ceil(this.result / this.itemsPerPage);
},
},
watch: {
page() {
// window.scrollTo(0, 0);
},
$route() {
this.getQuery();
@ -383,33 +185,9 @@ export default {
this.width = window.innerWidth;
}
},
async fetchUser() {
let userSavedList = [];
if (this.$auth.loggedIn) {
// await this.$axios
// .get(
// `/member/users/${this.$auth.$storage.getUniversal("jwt").user_id
// }?jwt=${this.$auth.$storage.getUniversal("jwt").token}`
// )
// .then((res) => {
// userSavedList = res.data.UserExhibition;
// })
// .catch((err) => {
// console.log(err);
// });
}
userSavedList = userSavedList.map((item) => item.exhibition_id);
for (let i = 0; i < this.exhibitionList.length; i++) {
if (userSavedList.includes(this.exhibitionList[i].id)) {
this.exhibitionList[i].saved = true;
} else {
this.exhibitionList[i].saved = false;
}
}
},
getAdList() {
this.ads = [
this.adList = [
{
id: 'banner_1',
image: require('/assets/img/banner/banner_1.png'),
@ -445,8 +223,10 @@ export default {
)
.then((result) => {
if(result && result.data && result.data.DATA && result.data.DATA.rel){
this.statuses = result.data.DATA.rel;
this.statuses = this.statuses.map((item => {
this.statusList = result.data.DATA.rel;
this.statusList = this.statusList.map((item => {
this.statusMap.set(item.Key, item.Value);
@ -472,13 +252,13 @@ export default {
if(result && result.data && result.data.DATA && result.data.DATA.rel){
this.categories = result.data.DATA.rel;
this.categories = this.categories.map((item) => {
this.categoryList = result.data.DATA.rel;
this.categoryList = this.categoryList.map((item) => {
this.mainCategoryMap.set(item.CategoryID, item);
item.SubCategoryList = item.SubCategoryList.map(
(children) => {
this.subCategoryMap.set(children.CategoryID, children);
@ -512,9 +292,9 @@ export default {
if(result && result.data && result.data.DATA && result.data.DATA.rel){
var vm = this;
vm.locations = result.data.DATA.rel;
vm.locationList = result.data.DATA.rel;
vm.locations = vm.locations.map((region) => {
vm.locationList = vm.locationList.map((region) => {
this.regionMap.set(region.RegionID, region);
@ -555,13 +335,11 @@ export default {
},
async getExhibitionCard() {
// this.query = this.query + "工具機";
// console.log("getExhibitionCard"+": "+this.query)
await this.$axios
.get(
`/trending/api/Exhibition/Cards?Lang=${this.$i18n.localeProperties["langQuery"]}` +
`&PageIndex=${this.currentPage}` +
`&PageSize=${this.perPageItems}` +
`&PageSize=${this.itemsPerPage}` +
`&RegionIDs=${JSON.stringify(this.selectedRegion)}` +
`&CountryIDs=${JSON.stringify(this.selectedCountry)}` +
`&CityIDs=${JSON.stringify(this.selectedCity)}` +
@ -636,7 +414,6 @@ export default {
}
},
updateSortBy(data) {
@ -646,8 +423,12 @@ export default {
},
updatePage(value) {
this.currentPage = value;
window.scrollTo(0,0);
this.getExhibitionCard();
},
updateCategoryFilter(value) {
@ -756,59 +537,6 @@ export default {
},
sortServiceList(data) {
switch (this.sortBy) {
case "ShowEasy Recommended":
return data;
case "Exhibitor Numbers":
function Exhibitors(a, b) {
if (
Number(a.exhibitors ? a.exhibitors.replace(/[^0-9]/gi, "") : "") <
Number(b.exhibitors ? b.exhibitors.replace(/[^0-9]/gi, "") : "")
)
return 1;
if (
Number(a.exhibitors ? a.exhibitors.replace(/[^0-9]/gi, "") : "") >
Number(b.exhibitors ? b.exhibitors.replace(/[^0-9]/gi, "") : "")
)
return -1;
return 0;
}
return data.sort(Exhibitors);
case "Visitor Numbers":
function Visitor(a, b) {
if (
Number(a.visitors ? a.visitors.replace(/[^0-9]/gi, "") : "") <
Number(b.visitors ? b.visitors.replace(/[^0-9]/gi, "") : "")
)
return 1;
if (
Number(a.visitors ? a.visitors.replace(/[^0-9]/gi, "") : "") >
Number(b.visitors ? b.visitors.replace(/[^0-9]/gi, "") : "")
)
return -1;
return 0;
}
return data.sort(Visitor);
case "Show Dates":
function Date(a, b) {
if (a.startdate.replace(/-/g, "") < b.startdate.replace(/-/g, ""))
return 1;
if (a.startdate.replace(/-/g, "") > b.startdate.replace(/-/g, ""))
return -1;
return 0;
}
return data.sort(Date);
default:
return data;
}
},
sliceRenderList(data) {
return data.slice(
(this.page - 1) * this.perPage,
this.page * this.perPage
);
},
},
};
</script>

Write Preview
Loading…
Cancel
Save