en-shoubo-pc/src/views/Exhibitions/Detail/components/Overview.vue

<template>
  <div
    ref="wrapRef"
    class="exh-detail-overview"
    :style="{ height: hasMore ? `${height}px` : 'auto' }"
  >
    <div
      class="exh-detail-overview-hd"
      data-aria-viewport-area
      tabindex="0"
      aria-description="You've reached the section of exhibition title, please use the tab key to navigate through the content."
    >
      <p class="title">{{ detail?.name }}</p>
      <div>
        <div v-if="detail?.dateStart">
          <img :src="DateIcon" style="width: 18px; height: 20px" />
          <p style="padding: 0 15px">{{ date }}</p>
        </div>
        <div v-if="detail?.typeRemark">
          <img :src="ClockIcon" style="width: 20px; height: 20px" />
          <p style="padding: 0 15px">
            {{ detail.typeRemark }}
          </p>
        </div>
        <div>
          <img :src="AddressIcon" style="width: 14px; height: 20px" />
          <p style="padding-left: 15px">{{ detail?.address }}</p>
        </div>
      </div>
    </div>
    <div
      ref="mainRef"
      class="exh-detail-overview-main"
      data-aria-viewport-area
      tabindex="0"
      aria-description="You've reached the section of exhibition overview, please use the tab key to go through the content."
    >
      <p class="exh-detail__title" tabindex="0">
        <span>Exhibition Overview</span>
      </p>

      <div
        v-for="item in rtf"
        :key="item.id"
        class="exh-detail-overview__content"
      >
        <p tabindex="0">{{ item.name }}</p>
        <div
          v-html="item.txt"
          tabindex="0"
          :aria-audio-url="
            item.fileInfo.filePath ? baseUrl + item.fileInfo.filePath : ''
          "
        />
      </div>
    </div>

    <div v-if="hasMore" class="exh-detail-overview__more">
      <div
        tabindex="0"
        aria-label="Button"
        @click="showMore"
        @keydown.enter.passive="showMore"
      >
        Click here to see more
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import DateIcon from "@/assets/images/bg_5.png";
import ClockIcon from "@/assets/images/bg_6.png";
import AddressIcon from "@/assets/images/bg_7.png";
import { computed, nextTick, ref, watch } from "vue";
import { type ExhibitionDetail } from "@/api";
import { MONTHS } from "@/utils/date";
import { getBaseURL } from "@dage/service";

const props = defineProps<{
  detail: null | ExhibitionDetail;
}>();

const baseUrl = getBaseURL();
const wrapRef = ref();
const mainRef = ref();
const hasMore = ref(true);
const height = ref(600);
const rtf = computed<
  { id: number; txt: string; name: string; fileInfo: { filePath: string } }[]
>(() => (props.detail ? JSON.parse(props.detail.rtf).txtArr : []));

const date = computed(() => {
  if (!props.detail || !props.detail.dateStart) return;

  const start = new Date(props.detail.dateStart);
  const end = new Date(props.detail.dateEnd);

  if (start.getFullYear() === end.getFullYear()) {
    return `${MONTHS[start.getDay()]} ${start.getDate()} - ${
      MONTHS[end.getDay()]
    } ${end.getDate()}, ${end.getFullYear()}`;
  }

  return `${
    MONTHS[start.getDay()]
  } ${start.getDate()}, ${start.getFullYear()} - ${
    MONTHS[end.getDay()]
  } ${end.getDate()}, ${end.getFullYear()}`;
});

watch(
  () => props.detail,
  (v) => {
    if (!v) return;

    nextTick(() => {
      if (mainRef.value.offsetHeight <= 600) {
        hasMore.value = false;
      }
    });
  }
);

const showMore = () => {
  const _h = mainRef.value.offsetHeight;
  if (height.value + 400 > _h) {
    height.value = _h;
    hasMore.value = false;
  } else {
    height.value += 400;
  }
};

defineExpose({
  wrapRef,
});
</script>

<style lang="scss" scoped>
.exh-detail {
  &-overview {
    position: relative;
    margin-bottom: 40px;
    overflow: hidden;
    background: var(--white-bg);
    border: 1px solid #e0e0e0;

    &__content {
      > p {
        font-weight: bold;
      }
      :deep(p) {
        margin-top: 24px;
        font-size: 18px;
        line-height: 26px;
        word-break: break-all;
        color: var(--black2-text-color);
      }
    }
    &-hd {
      padding: 40px 210px 20px 40px;
      border-bottom: 1px solid #e0e0e0;

      .title {
        margin-bottom: 10px;
        font-size: 30px;
        line-height: 44px;
        font-weight: bold;
      }
      > div {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        font-size: 14px;
        line-height: 36px;
        color: var(--gray-text-color);
        width: 940px;

        > div {
          display: flex;
          align-items: center;
        }
      }
    }
    &-main {
      padding: 30px 40px;
    }
    &__more {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100px;
      z-index: 98;

      &::before {
        content: "";
        display: block;
        height: 50px;
        background-image: linear-gradient(
          hsla(0, 0%, 100%, 0.4),
          var(--white-bg)
        );
      }
      div {
        cursor: pointer;
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        color: var(--van-primary-color);
        text-align: center;
        background: var(--white-bg);
      }
    }
  }
}
</style>