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
8d597cf858
commit
9aa5ed9a04
1 changed files with 133 additions and 238 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. 371
      FrontEnd/pages/user/saveExhibition.vue

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

@ -2,68 +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"
@click="optionCountry(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>
@ -79,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
@ -95,8 +66,8 @@
<!-- <ExhibitionListCard v-for="item in exhibitionCardList" :key="item"></ExhibitionListCard> -->
<div class="tw-mt-[34px] tw-flex tw-justify-end">
<pagination :pageLength="pageLength" @update="updatePage"></pagination>
</div>
<pagination :pageLength="pageLength" @update="updatePage"></pagination>
</div>
@ -131,7 +102,7 @@ export default {
},
data() {
return {
test:false,
test: false,
firstName: "",
lastName: "",
userData: {},
@ -155,24 +126,30 @@ export default {
phoneValid: false,
// countrySelect: 999,
statusList:[],
statusList: [],
statusOptions: [],
statusSelect: 999,
page: 1,
filterList: [],
countryFilterList: [],
userSaveExhibitionList: [],
// userSaveExhibitionList: [],
exhibitionList: [],
showUserExhibitionList: [],
userSaveExhibition: [],
CountryName:[],
test:"",
// userSaveExhibition: [],
CountryName: [],
test: "",
isRouterAlive: true,
countrySelect: "",
currentPage: 1,
perPageItems: 600000,
itemsPerPage: 10,
total: 0,
selectedCountry: [],
selectedSubCategory: [],
selectedStatus: [],
countryOptions: [],
exhibitionMap: new Map(),
exhibitionCardList: [],
userFavoriateList: [],
@ -180,18 +157,12 @@ export default {
};
},
async created() {
this.fetchUserData();
// await this.fetchExhibition();
// await this.fetchUserFavoriateExhibition();
this.fetchUserData();
await this.fetchExhibitionListCard();
await this.fetchCountryList();
this.fetchStatusList();
await this.fetchFavoriate();
await this.fetchAllExhibition();
this.setUserExhibitionCard();
// await this.userSavedExhib();
@ -251,7 +222,7 @@ export default {
// };
// this.statusOptions.splice(0, 0, initial);
// }
// }
// })
@ -286,13 +257,14 @@ export default {
});
},
watch: {
// countrySelect: {
// handler: function () {
// handler: function (value) {
// console.log("countrySelected");
// console.log("countrySelected "+ value);
// if (this.countrySelect) {
// console.log("countrySelected");
// console.log(this.countrySelect);
// // this.filterSavedExhibition(this.countrySelect,this.statusSelect);
// //this.fetchSavedExhibition();
// //this.fetchExhibition();
@ -310,8 +282,13 @@ export default {
// },
},
computed: {
result() {
return this.total;
},
pageLength() {
return Math.ceil(this.userSaveExhibition.length / this.perPageItems);
return Math.ceil(this.result / this.itemsPerPage);
},
},
methods: {
@ -323,86 +300,91 @@ export default {
`/trending/api/Favorite/ExhibitionCountryList?Lang=${this.$i18n.localeProperties["langQuery"]}`
)
.then((response) => {
if(response && response.data && response.data.DATA && response.data.DATA.rel){
if (response && response.data && response.data.DATA && response.data.DATA.rel) {
let data = response.data.DATA.rel
if(data){
if (data) {
const countryList = data;
this.countryOptions = countryList.map((item) => {
return {
id: item.CountryID,
name: item.CountryName,
id: item.CountryID,
name: item.CountryName,
};
});
});
}
const initial = {
name: this.$t("userProfile.allCountries"),
id: 0,
};
this.countryOptions.splice(0, 0, initial);
}
})
.catch((error) => {
console.log(error);
});
},
countrySelect(value){
console.log("countrySelected");
});
},
async fetchStatusList() {
async fetchExhibitionListCard() {
await this.$axios
.get(
`/trending/api/Favorite/Favorites?Type=Exhibition`
`/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){
if (response && response.data && response.data.DATA && response.data.DATA.rel) {
let data = response.data.DATA.rel
if(data){
this.userFavoriateList = data;
if (data.DataList) {
this.exhibitionCardList = [];
this.total = data.Total;
data.DataList.forEach(exhib => {
exhib.IsFavorite = "Y";
this.exhibitionCardList.push(exhib);
});
}
}
})
.catch((error) => {
console.log(error);
});
});
},
async updateExhibitionListCard() {
countryOptionSelected() {
this.currentPage = 1;
this.selectedCountry = [];
this.userFavoriateList = [];
this.exhibitionCardList = [];
if (this.countrySelect) {
this.selectedCountry.push(this.countrySelect.id);
}
await this.fetchFavoriate();
this.setUserExhibitionCard();
this.updateExhibitionCardList();
},
async fetchFavoriate() {
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){
if (response && response.data && response.data.DATA && response.data.DATA.rel) {
let data = response.data.DATA.rel
if(data){
if (data) {
this.userFavoriateList = data;
}
@ -410,77 +392,45 @@ export default {
})
.catch((error) => {
console.log(error);
});
});
},
async fetchAllExhibition() {
async updateExhibitionCardList() {
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"]}`
)
.then((response) => {
if(response && response.data && response.data.DATA && response.data.DATA.rel){
let data = response.data.DATA.rel
if(data){
data.DataList.forEach(exhib => {
this.exhibitionMap.set(exhib.ExhibitionID, exhib);
});
};
};
})
.catch((error) => {
console.log(error);
});
await this.fetchExhibitionListCard();
},
setUserExhibitionCard() {
this.userFavoriateList.forEach( fav => {
if(this.exhibitionMap.has(fav.ParentID)) {
updatePage(value) {
const exhibCard = this.exhibitionMap.get(fav.ParentID);
exhibCard.IsFavorite = "Y";
this.exhibitionCardList.push(exhibCard);
}
this.currentPage = value;
window.scrollTo(0, 0);
});
this.fetchExhibitionListCard();
},
updatePage(value) {
this.currentPage = value;
this.fetchExhibition();
},
patchUserData() {
// if (this.width < 1366) {
// this.isEditInfoDialogActive = !this.isEditInfoDialogActive;
// }
if(this.$vuetify.breakpoint.name !== "xs"){
this.userData.BirthDate = this.yearSelect + "-" + this.monthSelect + "-" + this.daySelect;
if(this.userData.BirthDate.length < 10){
this.userData.BirthDate = null;
if (this.$vuetify.breakpoint.name !== "xs") {
this.userData.BirthDate = this.yearSelect + "-" + this.monthSelect + "-" + this.daySelect;
}
if (this.userData.BirthDate.length < 10) {
this.userData.BirthDate = null;
}
}
if(this.languageSelect.en == true){
if (this.languageSelect.en == true) {
this.userData.LanguageID = "en-US";
}else if(this.languageSelect.zhtw == true){
} else if (this.languageSelect.zhtw == true) {
this.userData.LanguageID = "zh-TW";
}else{
} else {
this.userData.LanguageID = "null";
}
@ -491,26 +441,26 @@ export default {
// delete patchData.UserSocialRelation;
// delete patchData.UserExhibition;
this.$axios
.post(
`/trending/api/Members/Member`, patchData
)
.then((response) => {
//console.log(JSON.stringify(response));
.post(
`/trending/api/Members/Member`, patchData
)
.then((response) => {
//console.log(JSON.stringify(response));
this.successUpdate = !this.successUpdate;
setTimeout(() => {
this.successUpdate = !this.successUpdate;
setTimeout(() => {
this.successUpdate = !this.successUpdate;
}, 1000);
this.fetchUserData();
//this.$auth.$storage.setUniversal("userPicture", patchData.MemberPicture);
// this.$auth.$storage.setUniversal(
// "userLastName",
// patchData.LastName
// );
// this.$store.dispatch("updatePicture");
})
.catch((error) => {
console.log(error);
});
}, 1000);
this.fetchUserData();
//this.$auth.$storage.setUniversal("userPicture", patchData.MemberPicture);
// this.$auth.$storage.setUniversal(
// "userLastName",
// patchData.LastName
// );
// this.$store.dispatch("updatePicture");
})
.catch((error) => {
console.log(error);
});
},
fetchUserData() {
@ -520,21 +470,21 @@ export default {
)
.then((response) => {
//console.log(JSON.stringify(response));
if(response && response.data && response.data.DATA && response.data.DATA.rel){
if (response && response.data && response.data.DATA && response.data.DATA.rel) {
let data = response.data.DATA.rel
if(data){
if (data) {
this.userData = data;
this.firstName = this.userData.FirstName;
this.lastName = this.userData.LastName;
this.userData.Phone ? (this.phoneValid = true): (this.phoneValid = false);
if(this.userData.ArgumentID == "en-US"){
this.userData.Phone ? (this.phoneValid = true) : (this.phoneValid = false);
if (this.userData.ArgumentID == "en-US") {
this.languageSelect.en = true;
}else if(this.userData.ArgumentID == "zh-TW"){
} else if (this.userData.ArgumentID == "zh-TW") {
this.languageSelect.zhtw = true;
}else{
} else {
this.languageSelect.en = "";
this.languageSelect.zhtw = "";
@ -543,12 +493,12 @@ export default {
if (
this.userData.BirthDate && typeof this.userData.BirthDate === "object"
){
) {
this.yearSelect = "";
this.monthSelect = "";
this.daySelect = "";
}else{
} else {
const space = this.userData.BirthDate.split("T");
const date = space[0].split("-");
this.yearSelect = date[0];
@ -561,7 +511,7 @@ export default {
})
.catch((error) => {
console.log(error);
});
});
},
handleImageUpdate(pictureURL) {
@ -583,62 +533,7 @@ 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