YangZhouDaYunHeDaDu/src/views/RelicList.vue

<template>
  <div class="relic-list">
    <button
      class="return"
      @click="fakeBack"
    />
    <el-cascader
      v-model="cascaderValue"
      :options="cameraTree"
      :show-all-levels="false"
      :props="{
        expandTrigger: 'hover',
      }"
    />
    <div class="search-ui">
      <input
        v-model.trim="keyword"
        type="text"
        placeholder="请输入要搜索内容"
        @keydown.enter="onSearch"
      >
      <button
        class="search"
      />
    </div>
    <div
      class="the-list"
      :class="{
        scene1: cascaderValue[0] === '0',
        scene2: cascaderValue[0] === '1',
        scene3: cascaderValue[0] === '2',
      }"
    >
      <div
        ref="listEl"
        class="content-wrap"
        @scroll="handleScroll"
      >
        <div
          class="first-item"
          :class="{
            scene1: cascaderValue[0] === '0',
            scene2: cascaderValue[0] === '1',
            scene3: cascaderValue[0] === '2',
          }"
        />
        <div
          v-for="(item, idx) in relicData"
          :key="idx"
          class="relic-item"
          :class="{
            isScene1: item.sceneIdx === 0,
            isScene2: item.sceneIdx === 1,
            isScene3: item.sceneIdx === 2,
            isOdd: (idx) % 2 === 0,
            isEven: (idx) % 2 === 1,
          }"
          @click="onClickItem(item.idx)"
        >
          <div
            class="name"
            :class="{
              wide: item['名称'].replace(/<br\s*\/?>/g, '').length > 9,
              smallFontSize: item['名称'].replace(/<br\s*\/?>/g, '').length > 17,
            }"
            :title="item['名称']"
            v-html="item['名称']"
          />
          <img
            class=""
            :src="getRelicThumbUrl(idx)"
            alt=""
            draggable="false"
          >
        </div>
      </div>
    </div>
  </div>
  <div style="height: 100vh;" />
</template>

<script setup>
/**
 * todo: 自动恢复上次滚动位置
 */
import { ref, computed, watch, onMounted, nextTick, inject } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useStore } from "vuex"
import useSmoothSwipe from '@/useFunctions/useSmoothSwipe.js'
import { useElementSize, useWindowSize } from '@vueuse/core'
import { debounce } from "lodash"

const fakeBack = inject('fakeBack')
const $isMobile = inject('$isMobile')
const SCROLL_KEY = 'relicListScrollLeft'
const route = useRoute()
const router = useRouter()
const store = useStore()

const { height: windowHeight } = useWindowSize()

const cascaderValueInit = (route.query.sceneIdx && route.query.cameraIdx) ? [route.query.sceneIdx, route.query.cameraIdx] : ['0', '0']
const cascaderValue = ref(cascaderValueInit)
const cameraTree = ref([
  {
    value: '0',
    label: '天下大都',
    children: [
      {
        value: '0',
        label: '帝都',
      },
      {
        value: '1',
        label: '宫阙',
      },
      {
        value: '2',
        label: '览胜',
      },
    ]
  },
  {
    value: '1',
    label: '河润大都',
    children: [
      {
        value: '0',
        label: '河畅',
      },
      {
        value: '1',
        label: '航运',
      },
      {
        value: '2',
        label: '市井',
      },
    ]
  },
  {
    value: '2',
    label: '风雅大都',
    children: [
      {
        value: '0',
        label: '雅集',
      },
      {
        value: '1',
        label: '曲苑',
      },
    ]
  },
])

const keyword = ref('')

watch(route, () => {
  cascaderValue.value = (route.query.sceneIdx && route.query.cameraIdx) ? [route.query.sceneIdx, route.query.cameraIdx] : ['0', '0']
})

const relicData = computed(() => {
  return store.getters.relicData.filter((item) => {
    const selectedSceneIdx = Number(cascaderValue.value[0])
    if (selectedSceneIdx !== item.sceneIdx) {
      return false
    } else {
      const selectedCameraIdx = Number(cascaderValue.value[1])
      if (selectedCameraIdx === item.cameraIdx) {
        return true
      } else {
        return false
      }
    }
  }).filter((item) => {
    if (!keyword.value) {
      return true
    } else {
      if (item['名称'].includes(keyword.value)) {
        return true
      } else {
        return false
      }
    }
  })
})

function getRelicThumbUrl(idx) {
  if (Array.isArray(relicData.value[idx]['图片名']) && relicData.value[idx]['图片名'][0]) {
    return `${process.env.BASE_URL}relic-data/small-photo/${relicData.value[idx]['图片名'][0]}`
  } else {
    return ''
  }
}

const listEl = ref(null)
let scrollLeft = Number(localStorage.getItem(SCROLL_KEY) || 0)
const { width: listWidth, height: listHeight } = useElementSize(listEl)
const { translateLength, hasOperatedThisTime, updateWidth, updateTranslateLength } = useSmoothSwipe({
  scrollTargetRef: listEl,
  viewportWidth: listWidth,
  dontHandlerMobile: true
})
watch(relicData, (vNew) => {
  nextTick(() => {
    updateWidth()
  })
}, {
  deep: true
})

function onClickItem(idx) {
  if (!hasOperatedThisTime.value) {
    router[$isMobile ? 'replace' : 'push']({
      name: 'RelicDetail',
      query: {
        sceneIdx: route.query.sceneIdx,
        cameraIdx: route.query.cameraIdx,
        relicIdx: idx,
      }
    })
  }
}

watch(cascaderValue, val => {
  router.replace({
    name: 'RelicList',
    query: {
      sceneIdx: val[0],
      cameraIdx: val[1]
    }
  })
  updateTranslateLength(0)
  localStorage.setItem(SCROLL_KEY, 0)
})

router.beforeEach((to) => {
  if (!['RelicDetail', 'RelicList'].includes(to.name)) {
    localStorage.removeItem(SCROLL_KEY)
  }
})

onMounted(() => {
  if (scrollLeft) {
    updateTranslateLength(scrollLeft)
  }
})

const handleScroll = debounce(() => {
  listEl.value && localStorage.setItem(SCROLL_KEY, listEl.value.scrollLeft)
}, 100)
</script>

<style lang="less" scoped>
@page-height-design-px: 970;

.relic-list {
  height: 100vh;
  background-image: url(@/assets/images/relic-list-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;

  >button.return {
    position: absolute;
    width: calc(58 / @page-height-design-px * 100vh);
    height: calc(58 / @page-height-design-px * 100vh);
    left: calc(42 / @page-height-design-px * 100vh);
    top: calc(68 / @page-height-design-px * 100vh);
    background-image: url(@/assets/images/btn-return.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }

  :deep {
    .el-cascader {
      position: absolute;
      width: calc(200 / @page-height-design-px * 100vh);
      height: calc(58 / @page-height-design-px * 100vh);
      left: calc(160 / @page-height-design-px * 100vh);
      top: calc(68 / @page-height-design-px * 100vh);
      z-index: 1;

      .el-input {
        height: 100%;
        background-image: url(@/assets/images/cascader-bg.png);
        background-size: 100% 100%;
        border: 0;

        .el-input__wrapper {
          background: none;
          border: 0;
          box-shadow: none;

          .el-input__inner {
            height: 100%;
            font-size: calc(30 / @page-height-design-px * 100vh);
            text-align: center;
            font-family: 'SourceHanSerifCN-Heavy';
            color: #6A3906;
          }
          .el-input__suffix {
            color: #6A3906;
          }

        }
        .icon-arrow-down {
          font-size: calc(24 / @page-height-design-px * 100vh);
          margin-top: calc(10 / @page-height-design-px * 100vh);
        }

      }
    }
    .el-popper .is-light {
      background: red;
    }

  }

  >.search-ui {
    position: absolute;
    top: calc(65 / @page-height-design-px * 100vh);
    right: calc(27 / @page-height-design-px * 100vh);
    width: calc(406 / @page-height-design-px * 100vh);
    height: calc(62 / @page-height-design-px * 100vh);
    background-image: url(@/assets/images/search-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 1;

    >input {
      position: absolute;
      left: 50px;
      top: 50%;
      transform: translateY(-50%);
      height: calc(35 / @page-height-design-px * 100vh);
      width: calc(250 / @page-height-design-px * 100vh);
      font-size: calc(24 / @page-height-design-px * 100vh);
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.7);
      line-height: calc(28 / @page-height-design-px * 100vh);

      &::placeholder {
        font-size: calc(24 / @page-height-design-px * 100vh);
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.3);
        line-height: calc(28 / @page-height-design-px * 100vh);
      }
    }

    >button.search {
      position: absolute;
      width: calc(31 / @page-height-design-px * 100vh);
      height: calc(31 / @page-height-design-px * 100vh);
      position: absolute;
      top: 50%;
      right: calc(53 / @page-height-design-px * 100vh);
      transform: translateY(-50%);
      background-image: url(@/assets/images/icon-search.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
    }
  }

  >.the-list {
    position: absolute;
    left: 0;
    top: 55%;
    transform: translateY(-50%);
    width: 100%;
    height: calc(650 / @page-height-design-px * 100vh);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: calc(54 / @page-height-design-px * 100vh);
    box-sizing: border-box;

    &.scene1 {
      .content-wrap::after {
        background: #B8AD9C;
      }
    }
    &.scene2 {
      .content-wrap::after {
        background: #AEC5BB;
      }
    }
    &.scene3 {
      .content-wrap::after {
        background: #A6A3AD;
      }
    }
    >.content-wrap {
      position: relative;
      &::after {
        content: '';
        position: absolute;
        top: calc(42 / @page-height-design-px * 100vh);
        left: 0;
        right: 0;
        bottom: calc(42 / @page-height-design-px * 100vh);
        z-index: -1;
      }
      &::-webkit-scrollbar {
        height: 0;
      }
      box-sizing: border-box;
      margin-top: calc(27 / @page-height-design-px * 100vh);
      height: calc(589 / @page-height-design-px * 100vh);
      width: 100%;
      overflow: auto;
      user-select: none;
      display: flex;
      align-items: center;
      background: rgba(230,232,224,0.375);
      >.first-item{
        flex: 0 0 auto;
        width: calc(277 / @page-height-design-px * 100vh * 0.83);
        height: calc(608 / @page-height-design-px * 100vh * 0.83);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
      }
      >.first-item.scene1{
        background-image: url(@/assets/images/relic-first-item-bg-1.jpg);
      }
      >.first-item.scene2{
        background-image: url(@/assets/images/relic-first-item-bg-2.jpg);
      }
      >.first-item.scene3{
        background-image: url(@/assets/images/relic-first-item-bg-3.jpg);
      }
      >.relic-item {
        flex: 0 0 auto;
        width: calc(277 / @page-height-design-px * 100vh * 0.83);
        height: calc(608 / @page-height-design-px * 100vh * 0.83);
        cursor: pointer;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        position: relative;
        >.name {
          flex: 0 0 auto;
          position: absolute;
          top: calc(10 / @page-height-design-px * 100vh * 0.83);
          right: calc(32 / @page-height-design-px * 100vh * 0.83);
          width: calc(47 / @page-height-design-px * 100vh * 0.83);
          line-height: calc(47 / @page-height-design-px * 100vh * 0.83);
          height: calc(261 / @page-height-design-px * 100vh * 0.83);
          font-size: calc(19 / @page-height-design-px * 100vh * 0.83);
          font-family: "SourceHanSansSC-Normal";
          font-weight: 800;
          color: #43310E;
          overflow: hidden;
          writing-mode: vertical-rl;
          letter-spacing: 0.2em;
          background-image: url(@/assets/images/relic-item-title-bg.png);
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center center;
          text-align: center;
          padding-top: calc(17 / @page-height-design-px * 100vh * 0.83);
          padding-bottom: calc(17 / @page-height-design-px * 100vh * 0.83);
          z-index: 1;
        }
        >.name.wide{
          right: calc(12 / @page-height-design-px * 100vh * 0.83);
          width: calc(82 / @page-height-design-px * 100vh * 0.83);
          height: calc(255 / @page-height-design-px * 100vh * 0.83);
          line-height: 1.5em;
          background-image: url(@/assets/images/relic-item-title-bg-wide.png);
          padding-right: 0.7em;
          padding-top: calc(26 / @page-height-design-px * 100vh * 0.83);
          padding-bottom: calc(26 / @page-height-design-px * 100vh * 0.83);
          z-index: 1;
        }
        >.name.smallFontSize{
          padding-right: calc(20 / @page-height-design-px * 100vh * 0.83);;
          font-size: calc(14 / @page-height-design-px * 100vh * 0.83);
        }
        >.name.smFontSize {
          font-size: calc(14 / @page-height-design-px * 100vh * 0.83);
        }
        >img {
          position: absolute;
          left: 50%;
          transform: translateX(-50%) scale(calc(v-bind('windowHeight') / @page-height-design-px));
          object-fit: contain;
          transform-origin: center bottom;
          pointer-events: none;
        }
      }
      >.relic-item.isOdd{
        >img{
          bottom: calc(250 / @page-height-design-px * 100vh * 0.83);
        }
      }
      >.relic-item.isEven{
        >img{
          bottom: calc(120 / @page-height-design-px * 100vh * 0.83);
        }
      }
      >.relic-item.isScene1.isOdd{
        background-image: url(@/assets/images/relic-item-bg-1-odd.jpg);
      }
      >.relic-item.isScene1.isEven{
        background-image: url(@/assets/images/relic-item-bg-1-even.jpg);
      }
      >.relic-item.isScene2.isOdd{
        background-image: url(@/assets/images/relic-item-bg-2-odd.jpg);
      }
      >.relic-item.isScene2.isEven{
        background-image: url(@/assets/images/relic-item-bg-2-even.jpg);
      }
      >.relic-item.isScene3.isOdd{
        background-image: url(@/assets/images/relic-item-bg-3-odd.jpg);
      }
      >.relic-item.isScene3.isEven{
        background-image: url(@/assets/images/relic-item-bg-3-even.jpg);
      }
    }
  }
  >.the-list.scene1{
    background-image: url(@/assets/images/relic-list-bg-1-1.png);
  }
  >.the-list.scene2{
    background-image: url(@/assets/images/relic-list-bg-1-2.png);
  }
  >.the-list.scene3{
    background-image: url(@/assets/images/relic-list-bg-1-3.png);
  }
}

@media screen and (max-height: 480px) {
  .relic-list > button.return {
    left: calc(42 / 970* 100vh);
    top: calc(48 / 970* 100vh);
    width: calc(90 / 970* 100vh);
    height: calc(90 / 970* 100vh);
  }
  .relic-list > .the-list {
    top: unset;
    bottom: 0;
    padding-left: calc(66 / 970* 100vh);
    height: calc(800 / 970* 100vh);
    transform: unset;

    .content-wrap {
      margin-top: calc(33 / 970* 100vh);
      height: calc(726 / 970* 100vh);

      .first-item,
      .relic-item {
        width: calc(352 / 970* 100vh* 0.83);
        height: calc(758 / 970* 100vh* 0.83);
      }
      .relic-item {
        .name {
          width: calc(65 / 970* 100vh* 0.83);
          line-height: calc(65 / 970* 100vh* 0.83);
          height: calc(363 / 970* 100vh* 0.83);
          font-size: calc(30 / 970* 100vh* 0.83);

          &.wide {
            padding-right: 0.4em;
            width: calc(116 / 970* 100vh* 0.83);
            height: calc(363 / 970* 100vh* 0.83);
          }
          &.smallFontSize {
            font-size: calc(24 / 970* 100vh* 0.83);
          }
        }
        &.isOdd > img {
          bottom: calc(310 / 970* 100vh* 0.83);
        }
        &.isEven > img {
          bottom: calc(150 / 970* 100vh* 0.83);
        }
      }
    }
  }
}
</style>