guangdongVR_museum/code/src/views/home/maside.vue

<template>
  <div class="aside">
    <transition name="fade">
      <div class="vlist" v-if="isShow">
        <img class="guanbi" @click="isShow=false" :src="require('@/assets/images/icon/guanbi.png')" alt="">

        <div class="vtitle">{{currentId === 'museum' ? '博物馆列表' : '虚拟场景列表'}}</div>
        <div class="search">
          <input v-model="searchkey" type="text" placeholder="请输入关键字查询">
          <img @click="search" :src="require('@/assets/images/icon/search_red.png')" alt="">
        </div>

        <div class="list">
          <p class="gd"  @click="router.push({name:'gdmuseum'})">广东省博物馆</p>
          <section>
            <ul v-if="list.length > 0">
              <li v-for="(sub, idx) in list" :key="idx">
                <p :id="'aside-list-sidebar-' + sub.type">{{ sub.type }}</p>
                <ul v-if="sub.arr.length > 0">
                  <li  @click="onClickItem(son)" v-for="(son, sonidx) in sub.arr" :key="sonidx">
                    {{ son.name }}
                  </li>
                </ul>
              </li>
            </ul>
          </section>

          <div class="sidebar">
            <ul>
              <li v-for="(item, i) in charStrs" :key="i" @click="onClickSidebarItem(item)">
                {{ item }}
              </li>
            </ul>
          </div>

          <div class="sanjiao"></div>
        </div>
      </div>

    </transition>

    <ul class="select">
      <li @click="onClickSelect({id:'museum'})" :class="{ active: currentId == 'museum' }">
        <span></span>
        <span>博物馆</span>
      </li>
      <li @click="onClickSelect({id:'scene'})" :class="{ active: currentId == 'scene' }">
        <span></span>
        <span>虚拟场景</span>
      </li>
    </ul>


  </div>
</template>

<script setup>
import { ref, onMounted, computed,watch, nextTick } from "vue";
import { getMuseumList,getExhibitionList } from "@/config/api";

import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();
const isShow = ref(false)
const currentId = ref('museum')
const searchkey = ref('')

const charStrs = ref('')

const list = ref([]);

const onClickSelect = (data) => {
  isShow.value = true
  currentId.value = data.id
}
const onClickSidebarItem = (item) => {
  const targetNode = document.getElementById('aside-list-sidebar-' + item)
  if (targetNode) {
    targetNode.scrollIntoView()
  }
}

const onClickItem = data => {
  if (currentId.value=='museum') {
    router.push({name:'exhibition',query:{id:data.id}})
  }else{
    router.push({name:'zhanlan',params:{id:data.id}})
  }
}

const getList = () => {
  let getData = currentId.value == 'museum' ? getMuseumList : getExhibitionList
  list.value = []
  getData({
    "cityId": '',
    "pageNum": 1,
    "pageSize": 1000,
    "searchKey": searchkey.value
  }, data => {
    console.log(data);

    data.data.records.forEach(item => {
      let ele = list.value.findIndex(sub => sub.type == item.initial.toUpperCase())
      if (ele < 0) {
        list.value.push({
          type: item.initial.toUpperCase(),
          arr: [
            { ...item }
          ],
        })
      } else {
        list.value[ele].arr.push({ ...item })
      }
    })

    list.value = list.value.sort((a, b) => {
      if (a.type < b.type) {
        return -1;
      }
      if (a.type > b.type) {
        return 1;
      }
      return 0;
    })

    charStrs.value = list.value.map(item => item.type)
  })
}

const search = ()=>{
  getList()
}

watch(currentId,()=>{
  getList()
})



onMounted(() => {
  getList()
})

</script>

<style lang="scss" scoped>
.aside {
  width: 90%;
  height: 94%;
  margin: 0 auto;
  pointer-events: none;

  .vlist {
    pointer-events: auto;
    background: rgba(255, 254, 246, 0.94);
    backdrop-filter: blur(20px);
    padding: 18px;
    border-radius: 8px;
    height: calc(100% - 60px);
    position: relative;

    .guanbi {
      position: absolute;
      right: 6px;
      top: 6px;
      width: 40px;
      z-index: 1;
    }

    .vtitle {
      color: var(--main-color);
      font-size: 18px;
      font-weight: bold;
    }


    .list {
      background-color: #fffef6;
      border-radius: 5px;
      height: calc(100% - 60px);
      color: #333333;
      text-align: left;
      position: relative;
      padding: 18px 10px;

      .gd {
        color: var(--main-color);
        font-size: 16px;
      }

      >section {
        height: 95%;
        overflow-y: auto;
        &::-webkit-scrollbar { display: none; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
        >p {
          color: var(--main-color);
          font-size: 16px;
          font-weight: bold;
          padding-left: 16px;
          position: relative;

          &::before {
            content: "";
            display: inline-block;
            width: 10px;
            height: 10px;
            background: var(--main-color);
            border-radius: 50%;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }

        >ul {
          >li {
            margin: 14px 0;
            cursor: pointer;

            >p {
              font-weight: bold;
            }

            >ul {
              >li {
                color: #999999;
                margin: 10px 0;
              }
            }
          }
        }
      }

      .sidebar {
        width: 20px;
        height: 94%;
        background: #f3f2e8;
        border-radius: 50px;
        position: absolute;
        right: 10px;
        top: 18px;

        >ul {
          text-align: center;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
          height: 100%;

          >li {
            color: #999999;
            font-size: 12px;
            cursor: pointer;
          }
        }
      }

      .sanjiao {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 2px;
        border: 8px solid transparent;
        border-top-color: var(--main-color);
      }
    }

    .search {
      width: 100%;
      height: 40px;
      border-radius: 8px;
      background: #EBEAE7;
      margin-top: 16px;
      position: relative;

      >input {
        line-height: 40px;
        text-align: left;
        width: 100%;
        padding: 0 40px 0 10px;
      }

      >img {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
      }
    }
  }

  .select {
    pointer-events: auto;
    width: 100%;
    display: flex;
    padding: 10px 0;
    justify-content: center;
    background: var(--main-color);
    border-radius: 50px;
    position: absolute;
    bottom: 0;
    left: 0;

    >li {
      display: flex;
      align-items: center;
      margin: 0 10px;
      cursor: pointer;

      >span {
        margin-right: 6px;
        display: inline-block;

        &:first-of-type {
          width: 20px;
          height: 20px;
          position: relative;
          border-radius: 50%;
          background: #fff;
        }
      }

      &.active {
        >span {
          &:first-of-type {
            &::before {
              content: "";
              position: absolute;
              width: 10px;
              height: 10px;
              background: var(--font-active);
              border-radius: 50%;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
        }
      }
    }
  }

}
</style>