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.
324 lines
10 KiB
324 lines
10 KiB
<template>
|
|
<div
|
|
class="exhibitionListCard tw-border tw-border-solid tw-border-neutrals-200 tw-rounded-[20px] tw-p-[10px] tw-mb-[20px] md:tw-px-[20px] md:tw-py-[15px] md:tw-grid md:tw-grid-cols-[auto_28px]"
|
|
>
|
|
<!-- 手機版save exhibition -->
|
|
<div
|
|
class="tw-absolute tw-cursor-pointer md:tw-hidden"
|
|
@click="onToggleFavorite"
|
|
>
|
|
<div v-if="item.saved">
|
|
<nuxt-link :to="localePath('/exhibition/' + item.id)"
|
|
><img
|
|
src="~/assets/svg/bookmark.svg"
|
|
class="tw-w-[24px] md:tw-w-[28px]"
|
|
alt=""
|
|
/></nuxt-link>
|
|
</div>
|
|
<div v-else>
|
|
<nuxt-link :to="localePath('/exhibition/' + item.id)"
|
|
><img
|
|
src="~/assets/svg/bookmark_outline.svg"
|
|
class="tw-w-[24px] md:tw-w-[28px]"
|
|
alt=""
|
|
/></nuxt-link>
|
|
</div>
|
|
</div>
|
|
<!-- 電腦版exhibition status -->
|
|
<!-- <div
|
|
class="tw-hidden md:tw-block md:tw-absolute tw-border-solid tw-border tw-border-complementary-1 tw-text-complementary-1 tw-bg-white tw-rounded-[8px] tw-px-[10px] tw-py-[4px] tw-text-[12px] md:tw-text-[14px]"
|
|
>
|
|
Ongoing
|
|
</div> -->
|
|
|
|
<div
|
|
class="tw-grid tw-grid-cols-[102px_auto] tw-gap-[10px] tw-items-center md:tw-grid-cols-[160px_auto]"
|
|
>
|
|
<div v-if="item.logo == null">
|
|
<img src="~/assets/svg/noLogo.svg" alt="" />
|
|
</div>
|
|
<nuxt-link v-else :to="localePath('/exhibition/' + item.id)"
|
|
><img :src="item.logo" class="tw-py-[35px]" alt=""
|
|
/></nuxt-link>
|
|
|
|
<div>
|
|
<div class="tw-flex tw-flex-row tw-mb-[8px]">
|
|
<div
|
|
v-if="item.isRecommend != null"
|
|
class="tw-grid tw-grid-cols-[12px_auto] tw-gap-[4px] tw-items-center tw-w-fit tw-border tw-border-solid tw-border-primary-2 tw-bg-primary-1 tw-rounded-[8px] tw-px-[10px] tw-py-[4px] tw-mr-[8px] md:tw-grid-cols-[14px_auto]"
|
|
>
|
|
<img
|
|
src="~/assets/svg/recommend.svg"
|
|
class="tw-w-[12px] md:tw-w-[14px]"
|
|
alt=""
|
|
/>
|
|
<div class="tw-text-white tw-text-[12px] md:tw-text-[16px]">
|
|
Recommend
|
|
</div>
|
|
</div>
|
|
<!-- <div
|
|
class="md:tw-hidden tw-border-solid tw-border tw-border-complementary-1 tw-text-complementary-1 tw-bg-white tw-rounded-[8px] tw-px-[10px] tw-py-[4px] tw-text-[12px] md:tw-text-[14px]"
|
|
>
|
|
Ongoing
|
|
</div> -->
|
|
<!-- exhibition status -->
|
|
<!-- <div v-if="item.status != null && item.status.name != null">
|
|
<div
|
|
v-if="item.status.name == 'Upcoming'"
|
|
class="tw-border-solid tw-border tw-border-primary-1 tw-text-primary-1 tw-bg-white tw-rounded-[8px] tw-px-[10px] tw-py-[4px] tw-text-[12px] md:tw-text-[14px]"
|
|
>
|
|
{{ item.status ? item.status.name : "" }}
|
|
</div>
|
|
<div
|
|
v-else-if="item.status.name == 'Ongoing'"
|
|
class="tw-border-solid tw-border tw-border-complementary-1 tw-text-complementary-1 tw-bg-white tw-rounded-[8px] tw-px-[10px] tw-py-[4px] tw-text-[12px] md:tw-text-[14px]"
|
|
>
|
|
{{ item.status ? item.status.name : "" }}
|
|
</div>
|
|
<div
|
|
v-else-if="item.status.name == 'Finished'"
|
|
class="tw-border-solid tw-border tw-border-neutrals-500 tw-text-neutrals-500 tw-bg-white tw-rounded-[8px] tw-px-[10px] tw-py-[4px] tw-text-[12px] md:tw-text-[14px]"
|
|
>
|
|
{{ item.status ? item.status.name : "" }}
|
|
</div>
|
|
<div
|
|
v-else-if="item.status.name == 'Cancelled'"
|
|
class="tw-border-solid tw-border tw-border-error-default tw-text-error-default tw-bg-white tw-rounded-[8px] tw-px-[10px] tw-py-[4px] tw-text-[12px] md:tw-text-[14px]"
|
|
>
|
|
{{ item.status ? item.status.name : "" }}
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="tw-border-solid tw-border tw-bg-error-default tw-text-white tw-rounded-[8px] tw-px-[10px] tw-py-[4px] tw-text-[12px] md:tw-text-[14px]"
|
|
>
|
|
{{ item.status ? item.status.name : "" }}
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
|
|
<div class="tw-mb-[8px] xl:tw-mb-[10px]">
|
|
<nuxt-link :to="localePath('/exhibition/' + item.id)">
|
|
<div
|
|
class="tw-line-clamp-3 md:tw-line-clamp-2 xl:tw-line-clamp-1 tw-text-base-primary tw-text-[14px] tw-font-medium md:tw-font-bold md:tw-text-[18px]"
|
|
>
|
|
{{ item.name }}
|
|
</div>
|
|
</nuxt-link>
|
|
</div>
|
|
<div
|
|
v-if="$i18n.locale == 'zh-tw'"
|
|
v-show="item.short_name != null"
|
|
class="tw-mb-[8px] xl:tw-mb-[10px]"
|
|
>
|
|
<nuxt-link :to="localePath('/exhibition/' + item.id)">
|
|
<div
|
|
class="tw-line-clamp-3 md:tw-line-clamp-2 xl:tw-line-clamp-1 tw-text-base-primary tw-text-[14px] tw-font-medium md:tw-font-bold md:tw-text-[18px]"
|
|
>
|
|
{{ item.short_name }}
|
|
</div>
|
|
</nuxt-link>
|
|
</div>
|
|
<div
|
|
class="tw-text-[14px] tw-font-normal tw-mb-[8px] md:tw-text-[16px] xl:tw-mb-[4px]"
|
|
>
|
|
<nuxt-link
|
|
class="tw-text-neutrals-800"
|
|
:to="localePath(`/exhibition?region=${item.region.id}`)"
|
|
>{{
|
|
item.region.name == null ? "" : item.region.name + "．"
|
|
}}</nuxt-link
|
|
>
|
|
<nuxt-link
|
|
class="tw-text-neutrals-800"
|
|
:to="localePath(`/exhibition?country=${item.country.id}`)"
|
|
>{{
|
|
item.country.name == null ? "" : item.country.name + "．"
|
|
}}</nuxt-link
|
|
>
|
|
<nuxt-link
|
|
class="tw-text-neutrals-800"
|
|
:to="localePath(`/exhibition?city=${item.city.id}`)"
|
|
>{{ item.city.name == null ? "" : item.city.name }}</nuxt-link
|
|
>
|
|
</div>
|
|
<div class="tw-hidden md:tw-block md:tw-mb-[8px] xl:tw-mb-[10px]">
|
|
<div class="tw-flex tw-flex-row tw-items-center">
|
|
<div class="tw-text-[14px] tw-text-primary-1 tw-mr-[4px]">
|
|
{{ item.rating }}
|
|
</div>
|
|
<img src="~/assets/svg/start.svg" class="tw-w-[14px]" alt="" />
|
|
<div class="tw-text-[14px] tw-text-neutral-600 tw-ml-[8px]">
|
|
({{ item.reviewCount ? item.reviewCount : "0" }} reviews)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div
|
|
v-if="item.categories != null"
|
|
class="md:tw-flex md:tw-flex-row md:tw-items-center tw-mb-[8px]"
|
|
>
|
|
<div
|
|
v-for="(item, index) in item.categories"
|
|
v-show="index < 1"
|
|
:key="index"
|
|
class="tw-bg-[#f6f6f6] tw-w-fit tw-rounded-[10px] tw-px-[10px] tw-py-[5px] tw-text-[14px] tw-mr-[10px]"
|
|
>
|
|
<nuxt-link
|
|
class="tw-text-neutrals-800"
|
|
:to="localePath('/exhibition?category=' + item.id)"
|
|
>{{ item.name }}</nuxt-link
|
|
>
|
|
</div>
|
|
<div
|
|
class="tw-text-[12px] tw-text-complementary-1"
|
|
v-if="item.categories.length > 1"
|
|
>
|
|
More ＋
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="tw-hidden xl:tw-block xl:tw-line-clamp-2 tw-text-neutrals-600 tw-text-[14px] xl:tw-mb-[14px]"
|
|
v-if="!!item.about"
|
|
>
|
|
<div v-html="item.about"></div>
|
|
</div>
|
|
<div class="tw-text-[16px] tw-text-base-primary md:tw-text-[18px]">
|
|
{{ formatDate(item.startdate) + " - " + formatDate(item.enddate) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 電腦版save exhibition -->
|
|
<div
|
|
class="tw-hidden md:tw-cursor-pointer md:tw-block"
|
|
@click="onToggleFavorite"
|
|
>
|
|
<div v-if="item.saved">
|
|
<img
|
|
src="~/assets/svg/bookmark.svg"
|
|
class="tw-w-[24px] md:tw-w-[28px]"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div v-else>
|
|
<img
|
|
src="~/assets/svg/bookmark_outline.svg"
|
|
class="tw-w-[24px] md:tw-w-[28px]"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import CardStatus from "~/components/exhibition/CardStatus.vue";
|
|
import { formatDate, dateCountDown } from "~/utils/assist";
|
|
import { ExhibitCardStatus, needLeftTagStatus } from "~/utils/constant";
|
|
|
|
export default {
|
|
name: "ExhibitionListCard",
|
|
props: {
|
|
item: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
},
|
|
components: {
|
|
CardStatus,
|
|
},
|
|
data: () => ({
|
|
StatusMap: ExhibitCardStatus,
|
|
}),
|
|
methods: {
|
|
formatDate,
|
|
dateCountDown,
|
|
needLeftTagStatus,
|
|
onToggleFavorite(id) {
|
|
if (this.$auth.loggedIn) {
|
|
// this.$axios
|
|
// .put(
|
|
// `/member/exhibitions?jwt=${
|
|
// this.$auth.$storage.getUniversal("jwt")
|
|
// ? this.$auth.$storage.getUniversal("jwt").token
|
|
// : ""
|
|
// }&exhibition_id=${this.item.id}&delete=${
|
|
// this.item.saved ? this.item.saved : false
|
|
// }`
|
|
// )
|
|
// .then((result) => {
|
|
// if (result.data.message == "successfully unsaved exhibition") {
|
|
// this.item.saved = false;
|
|
// } else if (result.data.message == "successfully saved exhibition") {
|
|
// this.item.saved = true;
|
|
// }
|
|
// this.$emit("toggle-favorite", {
|
|
// id: this.item.id,
|
|
// saved: this.item.saved,
|
|
// });
|
|
// })
|
|
// .catch((err) => {
|
|
// console.log(err);
|
|
// });
|
|
// this.$nextTick(() => {
|
|
// this.$forceUpdate();
|
|
// });
|
|
} else {
|
|
this.$router.push(this.localePath("/user"));
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.exhibit-card {
|
|
max-width: 836px;
|
|
&.disabled .card__right {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.exhibit-title {
|
|
position: relative;
|
|
font-weight: bold;
|
|
color: #232323;
|
|
word-break: break-word;
|
|
|
|
.bookmark-tag {
|
|
position: absolute;
|
|
color: $primary-light-orange;
|
|
right: 0;
|
|
top: 0.5em;
|
|
}
|
|
}
|
|
|
|
.status-tag {
|
|
position: absolute;
|
|
top: 16px;
|
|
left: 20px;
|
|
}
|
|
|
|
.recommend-tag {
|
|
border: 1px solid $primary-light-orange;
|
|
max-width: 108px !important;
|
|
|
|
img {
|
|
width: 11px;
|
|
height: 12px;
|
|
}
|
|
}
|
|
|
|
.category-tag {
|
|
border: 1px solid #f7ede4;
|
|
height: 16px;
|
|
}
|
|
|
|
.last-dates {
|
|
color: #ef5a5a;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
</style>
|