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

<template>
  <div class="aside">
    <div class="vtitle">
      {{ currentId === "museum" ? "博物馆列表" : "虚拟场景列表" }}
    </div>
    <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 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>
        <div v-else class="searchNone">暂无数据</div>
      </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 class="search">
      <input
        @keydown.enter="search"
        v-model="searchkey"
        type="text"
        placeholder="请输入关键字查询"
      />
      <img
        @click="search"
        :src="require('@/assets/images/icon/search_red.png')"
        alt=""
      />
    </div>
  </div>
</template>

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

const router = useRouter();
const route = useRoute();

const isShow = ref(false);
const currentId = ref("museum");

const charStrs = ref("");

const list = ref([]);

const emit = defineEmits(["changeMap"]);

const onClickSelect = (data) => {
  emit("changeMap", data.id);

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

const searchkey = ref("");

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 = (cityId = "") => {
  let getData = currentId.value == "museum" ? getMuseumList : getExhibitionList;
  list.value = [];
  getData(
    {
      cityId: cityId,
      pageNum: 1,
      pageSize: 1000,
      searchKey: searchkey.value,
    },
    (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);
    }
  );
};
defineExpose({
  getList,
});

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

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

onMounted(() => {
  getList();
});
</script>
  
<style lang="scss" scoped>
.aside {
  width: 300px;
  height: 90%;
  background: var(--main-color);
  border-radius: 8px;
  padding: 18px;
  text-align: center;

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

  .select {
    width: 100%;
    display: flex;
    margin: 20px 0;

    > li {
      display: flex;
      align-items: center;
      margin-right: 30px;
      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%);
            }
          }
        }
      }
    }
  }

  .list {
    background-color: #fffef6;
    border-radius: 5px;
    height: calc(100% - 150px);
    color: #333333;
    text-align: left;
    position: relative;
    padding: 18px 10px;
    .gd {
      color: var(--main-color);
      font-size: 16px;
      font-weight: bold;
      padding-left: 16px;
      cursor: pointer;
      position: relative;
      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        display: inline-block;
        width: 10px;
        height: 10px;
        background: var(--main-color);
        border-radius: 50%;
      }
    }

    > section {
      height: 95%;
      overflow-y: auto;
      &::-webkit-scrollbar {
        display: none;
      } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
      > ul {
        padding-left: 16px;

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

          > p {
            font-weight: bold;
          }

          > ul {
            > li {
              color: #999999;
              margin: 10px 0;
            }
          }
        }
      }
      .searchNone {
        color: #999999;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .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: 10px solid transparent;
      border-top-color: var(--main-color);
    }
  }

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

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

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