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

Merge branch 'Dev' of http://www.origtek.com:2999/nelson.kai/ShowEasyFrontEnd into Dev

Dev
18300102974 2 years ago
parent
c15e9073ee 9aa5ed9a04
commit
6694ae4423
2 changed files with 179 additions and 204 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. 15
      FrontEnd/components/exhibition/ExhibitionListCard.vue
  2. 258
      FrontEnd/pages/user/saveExhibition.vue

15
FrontEnd/components/exhibition/ExhibitionListCard.vue
View File

@ -1,7 +1,8 @@
<template>
<div class="tw-mb-[20px]">
<nuxt-link class="tw-text-black" :to="localePath('/exhibition/' + item.ExhibitionID)">
<div
class="tw-grid xl:tw-grid-cols-[auto_28px] tw-bg-white tw-border-solid tw-border tw-border-neutrals-200 tw-rounded-[20px] md:tw-p-[20px]">
class="exhib-card tw-grid xl:tw-grid-cols-[auto_28px] tw-bg-white tw-border-solid tw-border tw-border-neutrals-200 tw-rounded-[20px] md:tw-p-[20px]">
<div class="tw-grid tw-grid-cols-[102px_auto] tw-gap-[10px] tw-p-[10px] md:tw-grid-cols-[160px_auto]">
<div class="tw-bg-primary-brigh">
<img src="~/assets/svg/bookmark_outline.svg" class="tw-mb-[30px] md:tw-hidden" alt="" />
@ -63,9 +64,9 @@
<div>
<div class="tw-body-4 tw-font-bold tw-mb-[10px] md:tw-text-[18px]">
<!-- {{ item.ExhibitionName }} -->
<nuxt-link class="tw-text-black" :to="localePath('/exhibition/' + item.ExhibitionID)">
<!-- <nuxt-link class="tw-text-black" :to="localePath('/exhibition/' + item.ExhibitionID)"> -->
{{ item.ExhibitionName }}
</nuxt-link>
<!-- </nuxt-link> -->
</div>
@ -133,7 +134,7 @@
</div>
<!-- 電腦版save exhibition -->
<div class="tw-hidden md:tw-cursor-pointer md:tw-block" @click="onToggleFavorite(item)">
<div class="tw-hidden md:tw-cursor-pointer md:tw-block" @click.prevent="onToggleFavorite(item)">
<div v-if="item.IsFavorite === 'Y'">
<img src="~/assets/svg/bookmark.svg" class="tw-w-[24px] md:tw-w-[28px]" alt="" />
</div>
@ -143,6 +144,7 @@
</div>
</div>
</nuxt-link>
</div>
</template>
@ -209,6 +211,11 @@ export default {
</script>
<style scoped lang="scss">
.exhib-card {
&:hover {
box-shadow: 10px 10px 10px rgba(155, 155, 155, 0.25);
}
}
.exhibit-card {
max-width: 836px;

258
FrontEnd/pages/user/saveExhibition.vue
View File

@ -2,67 +2,39 @@
<div class="saveExhibition xl:tw-max-w-[1246px] xl:tw-mx-auto">
<router-view v-if="isRouterAlive" />
<div class="xl:tw-flex xl:tw-justify-between xl:tw-items-start">
<userSidebar
:userData="userData"
:firstName="firstName"
:lastName="lastName"
class="tw-hidden xl:tw-block"
>
<userSidebar :userData="userData" :firstName="firstName" :lastName="lastName" class="tw-hidden xl:tw-block">
</userSidebar>
<!-- <div class="xl:tw-hidden"></div> -->
<div
class="tw-bg-white xl:tw-p-[30px] xl:tw-rounded-[20px] xl:tw-min-w-[900px] xl:tw-max-w-[900px]"
>
<div
class="tw-text-[20px] tw-font-bold tw-text-base-primary tw-mb-[20px] md:t24 md:tw-mb-[30px]"
>
<two-dots class="tw-mr-[30px]"></two-dots
>{{ $t("userProfile.savedExhibitions") }}
<div class="tw-bg-white xl:tw-p-[30px] xl:tw-rounded-[20px] xl:tw-min-w-[900px] xl:tw-max-w-[900px]">
<div class="tw-text-[20px] tw-font-bold tw-text-base-primary tw-mb-[20px] md:t24 md:tw-mb-[30px]">
<two-dots class="tw-mr-[30px]"></two-dots>{{ $t("userProfile.savedExhibitions") }}
</div>
<div class="tw-text-[14px] tw-text-base-primary tw-mb-[10px]">
{{ $t("userProfile.savedExhibitionsFilter") }}
</div>
<div>
<select
v-model="countrySelect"
class="tw-text-neutrals-500 tw-w-[196px] tw-border tw-border-solid tw-border-neutrals-200 tw-rounded-[10px] tw-px-[15px] tw-py-[9px] tw-head-body tw-outline-none tw-mr-[20px] focus:tw-border-primary-1 md:tw-text-[16px]"
>
<option
v-for="(item, index) in countryOptions"
:key="index"
:value="item.id"
>
<select v-model="countrySelect" @change="countryOptionSelected($event)"
class="tw-text-neutrals-500 tw-w-[196px] tw-border tw-border-solid tw-border-neutrals-200 tw-rounded-[10px] tw-px-[15px] tw-py-[9px] tw-head-body tw-outline-none tw-mr-[20px] focus:tw-border-primary-1 md:tw-text-[16px]">
<option value="" selected>{{ $t("userProfile.allCountries") }}</option>
<option v-for="(item, index) in countryOptions" :key="index" :value="item">
{{ item.name }}
</option>
</select>
<select
v-model="statusSelect"
class="tw-text-neutrals-500 tw-w-[196px] tw-border tw-border-solid tw-border-neutrals-200 tw-rounded-[10px] tw-px-[15px] tw-py-[9px] tw-head-body tw-outline-none focus:tw-border-primary-1 md:tw-text-[16px]"
>
<select v-model="statusSelect"
class="tw-text-neutrals-500 tw-w-[196px] tw-border tw-border-solid tw-border-neutrals-200 tw-rounded-[10px] tw-px-[15px] tw-py-[9px] tw-head-body tw-outline-none focus:tw-border-primary-1 md:tw-text-[16px]">
<option v-for="(item, index) in statusOptions" :key="index" :value="item.Key">
{{ item.Value }}
</option>
</select>
</div>
<div
v-if="exhibitionCardList.length == 0"
class="tw-mt-[80px] md:tw-mt-[90px]"
>
<img
class="tw-flex tw-mx-auto tw-w-[160px]"
src="~/assets/img/savedExhibitionEmpty.png"
alt=""
/>
<div
class="tw-text-[16px] tw-text-neutrals-800 tw-w-fit tw-mx-auto tw-mb-[50px] md:tw-mb-[60px]"
>
<div v-if="exhibitionCardList.length == 0" class="tw-mt-[80px] md:tw-mt-[90px]">
<img class="tw-flex tw-mx-auto tw-w-[160px]" src="~/assets/img/savedExhibitionEmpty.png" alt="" />
<div class="tw-text-[16px] tw-text-neutrals-800 tw-w-fit tw-mx-auto tw-mb-[50px] md:tw-mb-[60px]">
{{ $t("userProfile.noSavedExhibitions") }}
</div>
<nuxt-link
:to="localePath('/')"
class="tw-flex tw-text-[16px] tw-w-fit tw-bg-primary-1 tw-text-white tw-px-[16px] tw-py-[9px] tw-rounded-[12px] tw-mx-auto tw-mb-[37px] md:tw-mb-0"
>
<nuxt-link :to="localePath('/')"
class="tw-flex tw-text-[16px] tw-w-fit tw-bg-primary-1 tw-text-white tw-px-[16px] tw-py-[9px] tw-rounded-[12px] tw-mx-auto tw-mb-[37px] md:tw-mb-0">
{{ $t("Explore with ShowEasy") }}
</nuxt-link>
</div>
@ -78,8 +50,8 @@
>
</ExhibitionListCard> -->
<div v-for="list in exhibitionCardList" :key="list">
<ExhibitionListCard :item="list" @toggle-favorite="updateExhibitionListCard"></ExhibitionListCard>
<div v-for="exhib in exhibitionCardList" :key="exhib.ExhibitionID">
<ExhibitionListCard :item="exhib" @toggle-favorite="updateExhibitionCardList"></ExhibitionListCard>
</div>
<!-- <ExhibitionListCard
@ -152,27 +124,32 @@ export default {
zhtw: "",
},
phoneValid: false,
countryList:[],
countryOptions: [],
countrySelect: 999,
// countrySelect: 999,
statusList: [],
statusOptions: [],
statusSelect: 999,
page: 1,
filterList: [],
countryFilterList: [],
userSaveExhibitionList: [],
// userSaveExhibitionList: [],
exhibitionList: [],
showUserExhibitionList: [],
userSaveExhibition: [],
// userSaveExhibition: [],
CountryName: [],
test: "",
isRouterAlive: true,
currentPage: 1,
perPageItems: 600000,
countrySelect: "",
exhibitionMap: new Map(),
currentPage: 1,
itemsPerPage: 10,
total: 0,
selectedCountry: [],
selectedSubCategory: [],
selectedStatus: [],
countryOptions: [],
exhibitionCardList: [],
userFavoriateList: [],
@ -180,14 +157,11 @@ export default {
};
},
async created() {
this.fetchUserData();
// await this.fetchExhibition();
// await this.fetchUserFavoriateExhibition();
await this.fetchFavoriate();
await this.fetchAllExhibition();
this.setUserExhibitionCard();
this.fetchUserData();
await this.fetchExhibitionListCard();
await this.fetchCountryList();
this.fetchStatusList();
// await this.userSavedExhib();
@ -283,10 +257,15 @@ export default {
});
},
watch: {
// countrySelect: {
// handler: function () {
// handler: function (value) {
// console.log("countrySelected "+ value);
// if (this.countrySelect) {
// this.filterSavedExhibition(this.countrySelect,this.statusSelect);
// console.log(this.countrySelect);
// // this.filterSavedExhibition(this.countrySelect,this.statusSelect);
// //this.fetchSavedExhibition();
// //this.fetchExhibition();
// }
@ -303,36 +282,40 @@ export default {
// },
},
computed: {
result() {
return this.total;
},
pageLength() {
return Math.ceil(this.userSaveExhibition.length / this.perPageItems);
return Math.ceil(this.result / this.itemsPerPage);
},
},
methods: {
async updateExhibitionListCard() {
this.userFavoriateList = [];
this.exhibitionCardList = [];
await this.fetchFavoriate();
this.setUserExhibitionCard();
},
async fetchFavoriate() {
async fetchCountryList() {
await this.$axios
.get(
`/trending/api/Favorite/Favorites?Type=Exhibition`
`/trending/api/Favorite/ExhibitionCountryList?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.userFavoriateList = data;
const countryList = data;
this.countryOptions = countryList.map((item) => {
return {
id: item.CountryID,
name: item.CountryName,
};
});
}
}
})
.catch((error) => {
@ -341,25 +324,36 @@ export default {
},
async fetchAllExhibition() {
async fetchExhibitionListCard() {
await this.$axios
.get(
`/trending/api/Exhibition/Cards?PageIndex=${this.currentPage}&PageSize=${this.perPageItems}&RegionIDs&CountryIDs&CityIDs&MainCategoryIDs&SubCategoryIDs&Status&Date&Sort&Query&Lang=${this.$i18n.localeProperties["langQuery"]}`
`/trending/api/Favorite/ExhibitionList?Lang=${this.$i18n.localeProperties["langQuery"]}` +
`&PageIndex=${this.currentPage}` +
`&PageSize=${this.itemsPerPage}` +
`&CountryIDs=${JSON.stringify(this.selectedCountry)}` +
`&SubCategoryIDs=${JSON.stringify(this.selectedSubCategory)}` +
`&Status=${JSON.stringify(this.selectedStatus)}`
)
.then((response) => {
if (response && response.data && response.data.DATA && response.data.DATA.rel) {
let data = response.data.DATA.rel
if(data){
if (data.DataList) {
this.exhibitionCardList = [];
this.total = data.Total;
data.DataList.forEach(exhib => {
this.exhibitionMap.set(exhib.ExhibitionID, exhib);
exhib.IsFavorite = "Y";
this.exhibitionCardList.push(exhib);
});
};
};
}
}
})
.catch((error) => {
console.log(error);
@ -367,25 +361,54 @@ export default {
},
setUserExhibitionCard() {
countryOptionSelected() {
this.currentPage = 1;
this.selectedCountry = [];
this.userFavoriateList.forEach( fav => {
if (this.countrySelect) {
this.selectedCountry.push(this.countrySelect.id);
}
if(this.exhibitionMap.has(fav.ParentID)) {
this.updateExhibitionCardList();
const exhibCard = this.exhibitionMap.get(fav.ParentID);
exhibCard.IsFavorite = "Y";
this.exhibitionCardList.push(exhibCard);
},
}
async fetchStatusList() {
await this.$axios
.get(
`/trending/api/Favorite/Favorites?Type=Exhibition`
)
.then((response) => {
if (response && response.data && response.data.DATA && response.data.DATA.rel) {
let data = response.data.DATA.rel
if (data) {
this.userFavoriateList = data;
}
}
})
.catch((error) => {
console.log(error);
});
},
async updateExhibitionCardList() {
await this.fetchExhibitionListCard();
},
updatePage(value) {
this.currentPage = value;
this.fetchExhibition();
window.scrollTo(0, 0);
this.fetchExhibitionListCard();
},
patchUserData() {
// if (this.width < 1366) {
@ -511,61 +534,6 @@ export default {
this.$auth.logout();
},
filterSavedExhibition(countryId, selectId) {
this.countryFilterList = [];
this.currentPage = 1;
//const country = countryId;
if (countryId == "999" && selectId == "999") {
this.countryFilterList = JSON.parse(
JSON.stringify(this.showUserExhibitionList)
);
} else if(countryId == "999" && selectId !== "999"){
this.showUserExhibitionList.forEach((item) => {
if(item.ExhibStatus == selectId){
this.countryFilterList.push(item);
}
});
}else if(countryId !== "999" && selectId == "999"){
this.showUserExhibitionList.forEach((item) => {
if(item.CountryID == countryId){
this.countryFilterList.push(item);
}
});
}else {
this.showUserExhibitionList.forEach((item) => {
if(item.CountryID == countryId && item.ExhibStatus == selectId){
this.countryFilterList.push(item);
}
});
// this.userSavedExhibitionPageLength = Math.ceil(
// this.countryFilterList.length / this.savedExhibitionPerPage
// );
};
},
async removeExhibitionRelation() {
this.countryFilterList = [];
this.exhibitionList = [];
this.userSaveExhibition = [];
this.page = 1;
this.fetchUserData();
await this.fetchSavedExhibition();
await this.fetchExhibition();
//this.countryFilterList = this.showUserExhibitionList;
if (this.countrySelect.toString() !== "999") {
this.countrySelect = 999;
}
if (this.statusSelect.toString() !== "999") {
this.statusSelect = 999;
}
this.$forceUpdate();
},
},
};
</script>

Write Preview
Loading…
Cancel
Save