YangZhouDaYunHeDaDu/src/views/RelicList.vue

<template>
  <div class="relic-list">
    <button
      class="return"
      @click="router.go(-1)"
    />
    <el-cascader
      v-model="cascaderValue"
      :options="cameraTree"
      :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">
      <div
        ref="listEl"
        class="content-wrap"
      >
        <div
          v-for="(item, idx) in relicData"
          :key="idx"
          class="relic-item"
          :class="{
            hide: !(item.isPassedSearch && item.isPassedSelect)
          }"
          @click="onClickItem(idx)"
        >
          <img
            class=""
            :src="getRelicThumbUrl(idx)"
            alt=""
            draggable="false"
          >
          <div
            class="name"
            :title="item['名称']"
          >
            {{ item['名称'] }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

const route = useRoute()
const router = useRouter()
const store = useStore()

const cascaderValueInit = (route.query.sceneIdx && route.query.cameraIdx) ? [route.query.sceneIdx, route.query.cameraIdx] : ['all']
const cascaderValue = ref(cascaderValueInit)
const cameraTree = ref([
  {
    value: 'all',
    label: '全部',
  },
  {
    value: '0',
    label: '大汗之城',
    children: [
      {
        value: 'all',
        label: '全部',
      },
      {
        value: '0',
        label: '雄伟帝都',
      },
      {
        value: '1',
        label: '大都宫阙',
      },
      {
        value: '2',
        label: '大都览胜',
      },
    ]
  },
  {
    value: '1',
    label: '河润大都',
    children: [
      {
        value: 'all',
        label: '全部',
      },
      {
        value: '0',
        label: '通惠河畅',
      },
      {
        value: '1',
        label: '舳舻蔽水',
      },
      {
        value: '2',
        label: '繁华富庶',
      },
    ]
  },
  {
    value: '2',
    label: '大都风华',
    children: [
      {
        value: 'all',
        label: '全部',
      },
      {
        value: '0',
        label: '文人雅集',
      },
      {
        value: '1',
        label: '曲苑杂剧',
      },
    ]
  },
])

const keyword = ref('')

const sceneIdx = computed(() => {
  return route.query.sceneIdx
})
const cameraIdx = computed(() => {
  return route.query.cameraIdx
})

const relicData = computed(() => {
  return store.getters.relicData.map((item) => {
    if (cascaderValue.value[0] === 'all') {
      item.isPassedSelect = true
    } else {
      const selectedSceneIdx = Number(cascaderValue.value[0])
      const itemSceneIdx = Number(item['镜头ID'].split('-')[0]) - 1
      if (selectedSceneIdx !== itemSceneIdx) {
        item.isPassedSelect = false
      } else {
        if (cascaderValue.value[1] === 'all') {
          item.isPassedSelect = true
        } else {
          const selectedCameraIdx = Number(cascaderValue.value[1])
          const itemCameraIdx = Number(item['镜头ID'].split('-')[1]) - 1
          if (selectedCameraIdx === itemCameraIdx) {
            item.isPassedSelect = true
          } else {
            item.isPassedSelect = false
          }
        }
      }
    }

    if (!keyword.value) {
      item.isPassedSearch = true
    } else {
      if (item['名称'].includes(keyword.value)) {
        item.isPassedSearch = true
      } else {
        item.isPassedSearch = false
      }
    }
    return item
  })
})

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)
const { width: listWidth, height: listHeight } = useElementSize(listEl)
const { hasOperatedThisTime, updateWidth } = useSmoothSwipe({
  scrollTargetRef: listEl,
  viewportWidth: listWidth,
})
watch(relicData, (vNew) => {
  nextTick(() => {
    updateWidth()
  })
}, {
  deep: true
})

function onClickItem(idx) {
  if (!hasOperatedThisTime.value) {
    router.push({
      name: 'RelicDetail',
      query: {
        sceneIdx: route.query.sceneIdx,
        cameraIdx: route.query.cameraIdx,
        relicIdx: idx,
      }
    })
  }
}
</script>

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

.relic-list {
  height: 100%;
  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: 58px;
    height: 58px;
    left: 42px;
    top: 68px;
    background-image: url(@/assets/images/btn-return.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }

  ::v-deep {
    .el-cascader {
      position: absolute;
      width: 200px;
      height: 58px;
      left: 160px;
      top: 68px;

      .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: 30px;
            text-align: center;
            font-family: 'SourceHanSerifCN-Heavy';
            color: #6A3906;
          }
          .el-input__suffix {
            color: #6A3906;
          }

        }
        .icon-arrow-down {
          font-size: 24px;
          margin-top: 10px;
        }

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

  }

  // >menu{
  //   position: absolute;
  //   width: 524px;
  //   height: 66px;
  //   left: 150px;
  //   top: 64px;
  //   background-image: url(@/assets/images/relic-list-page-menu-bg.png);
  //   background-size: contain;
  //   background-repeat: no-repeat;
  //   background-position: center center;
  //   >button.scene-select{
  //     position: absolute;
  //     top: 50%;
  //     left: 10px;
  //     transform: translateY(-50%);
  //     width: 220px;
  //     height: 50px;
  //     padding-left: 10px;
  //     font-size: 30px;
  //     font-family: Source Han Serif CN, Source Han Serif CN;
  //     font-weight: bold;
  //     color: #43310E;
  //     line-height: 46px;
  //     letter-spacing: 6px;
  //   }
  //   >button.camera-select{
  //     position: absolute;
  //     top: 50%;
  //     left: 230px;
  //     transform: translateY(-50%);
  //     width: 160px;
  //     height: 50px;
  //     font-size: 24px;
  //     font-family: Source Han Sans CN, Source Han Sans CN;
  //     font-weight: 500;
  //     color: #FFF7D9;
  //     line-height: 36px;
  //     letter-spacing: 5px;
  //   }
  //   >button.all{
  //     position: absolute;
  //     top: 50%;
  //     left: 400px;
  //     transform: translateY(-50%);
  //     width: 100px;
  //     height: 50px;
  //     font-size: 24px;
  //     font-family: Source Han Sans CN, Source Han Sans CN;
  //     font-weight: 500;
  //     color: rgba(255,247,217,0.7);
  //     line-height: 36px;
  //     letter-spacing: 5px;
  //   }
  // }
  >.search-ui {
    position: absolute;
    top: 65px;
    right: 27px;
    width: 406px;
    height: 62px;
    background-image: url(@/assets/images/search-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;

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

      &::placeholder {
        font-size: 24px;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.3);
        line-height: 28px;
      }
    }

    >button.search {
      position: absolute;
      width: 31px;
      height: 31px;
      position: absolute;
      top: 50%;
      right: 53px;
      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: 150px;
    width: 100%;
    height: calc(650 / @page-height-design-px * 100vh);
    background-image: url(@/assets/images/relic-list-bg-1.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: calc(56 / @page-height-design-px * 100vh);
    box-sizing: border-box;

    >.content-wrap {
      &::-webkit-scrollbar {
        height: 0;
      }

      box-sizing: border-box;
      height: 100%;
      width: 100%;
      overflow: auto;
      user-select: none;
      display: flex;
      align-items: center;
      background-image: url(@/assets/images/relic-list-bg-2.png);
      background-size: auto 92%;
      background-repeat: repeat no-repeat;
      background-position: left 44%;
      background-attachment: local;
      padding-top: calc(50 / @page-height-design-px * 100vh);

      >.relic-item {
        flex: 0 0 auto;
        width: calc(290 / @page-height-design-px * 100vh);
        height: 80%;
        padding: calc(10 / @page-height-design-px * 100vh);
        margin-right: calc(100 / @page-height-design-px * 100vh);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;

        >img {
          flex: 0 0 auto;
          width: 100%;
          height: calc(290 / @page-height-design-px * 100vh);
          object-fit: contain;
          margin-bottom: calc(10 / @page-height-design-px * 100vh);
        }

        >.name {
          text-align: center;
          flex: 0 0 auto;
          height: 4em;
          width: 100%;
          font-size: calc(26 / @page-height-design-px * 100vh);
          font-family: Source Han Serif CN, Source Han Serif CN;
          font-weight: 500;
          color: #281D0C;
          line-height: calc(32 / @page-height-design-px * 100vh);
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }
      }

      >.relic-item.hide {
        display: none;
      }
    }
  }
}
</style>