guangdongVR_museum/code/src/views/collection/index.vue

<template>
  <div class="collectioncon">
    <div class="collections">
      <div class="slebar">
        <div class="sleft">
          <ui-select
            :options="museumList"
            :placeholder="'请选择'"
            v-model="currentMuseum"
          >
            <template v-slot:option="{ raw }">
              <div>{{ raw.label }}</div>
            </template>
          </ui-select>

          <ui-select :options="ages" :placeholder="'年代'" v-model="currentAge">
            <template v-slot:option="{ raw }">
              <div>{{ raw.label }}</div>
            </template>
          </ui-select>

          <ui-select
            :options="types"
            :placeholder="'藏品种类'"
            v-model="currentType"
          >
            <template v-slot:option="{ raw }">
              <div>{{ raw.label }}</div>
            </template>
          </ui-select>

          <ui-search
            v-model="searchKey"
            :placeholder="'请输入展览名称'"
          ></ui-search>
        </div>

        <div class="sright">
          <div>分类：</div>
          <ul>
            <li
              @click="menuActive = item.id"
              :class="{ active: menuActive == item.id }"
              v-for="(item, i) in menu"
              :key="i"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
      </div>

      <div
        v-if="list && list.length > 0"
        class="masonry"
        v-infinite-scroll="getData"
        infinite-scroll-disabled="busy"
        :infinite-scroll-immediate-check="true"
        infinite-scroll-distance="30"
        v-masonry="containerId"
        fit-width="true"
        gutter="40"
        initLayout="true"
        transition-duration="0.3s"
        item-selector=".item"
      >
        <div
          @click="onClickCollection(item)"
          v-masonry-tile
          class="item"
          :class="{ odd: index % 2 != 0 }"
          v-for="(item, index) in list"
          :key="index"
        >
          <div class="itemimg">
            <div :style="`background-image:url(${item.thumb})`"></div>
          </div>
          <p class="goodBotInfo">{{ item.name }}</p>
        </div>
      </div>

      <div class="searchNone" style="padding-top: 200px" v-else>
        <img src="@/assets/images/resource/searchNone.svg" alt="" />
        <p>暂时没有数据</p>
      </div>
    </div>
    <transition name="fade">
      <teleport to="body">
        <showCollection v-if="activeCollection" :item="activeCollection" />
      </teleport>
    </transition>
  </div>
</template>


<script>
import { defineProps, onMounted, watch, nextTick, ref } from "vue";
import {
  getCollectionList,
  getMuseumList,
  getAge,
  getType,
} from "@/config/api";
import showCollection from "@/components/showCollection/index.vue";
import emitter from "@/mitt/index";

export default {
  setup(props) {
    const containerId = ref("vuemasonry");
    const currentMuseum = ref("");

    const museumList = ref([]);

    // const props = defineProps({
    //   currentMuseumItem: {
    //     type: Object,
    //     default: () => {
    //       return {}
    //     },
    //   },
    // });

    const searchKey = ref("");
    const currentAge = ref("");
    const currentType = ref("");

    const busy = ref(false);

    const ages = ref([]);

    const types = ref([]);

    const menu = ref([
      {
        id: "",
        name: "全部",
      },
      {
        id: "model",
        name: "三维模型",
      },
      {
        id: "img",
        name: "图片",
      },
      {
        id: "video",
        name: "视频",
      },
      {
        id: "audio",
        name: "音频",
      },
    ]);

    const menuActive = ref("");

    onMounted(() => {
      getAge((data) => {
        ages.value = data.data.data.map((item) => {
          return {
            ...item,
            label: item.name,
            value: item.id,
          };
        });
      });

      getType((data) => {
        types.value = data.data.data.map((item) => {
          return {
            ...item,
            label: item.name,
            value: item.id,
          };
        });
      });

      getMuseumList(
        {
          cityId: "",
          pageNum: 1,
          pageSize: 1000,
        },
        (data) => {
          museumList.value = data.data.records.map((item) => {
            return {
              ...item,
              label: item.name,
              value: item.id,
            };
          });
          if (!props.currentMuseumItem) {
            currentMuseum.value = museumList.value[0].value;
          } else {
            currentMuseum.value = props.currentMuseumItem.id;
          }
        }
      );
    });

    return {
      ages,
      types,
      currentMuseum,
      menu,
      currentAge,
      menuActive,
      currentType,
      searchKey,
      busy,
      museumList,
    };
  },
  components: { showCollection },
  data() {
    return {
      activeCollection: "",
      list: [],
      paging: {
        pageSize: 10,
        pageNum: 1,
        showSize: 4,
        current: 1,
      },
    };
  },

  watch: {
    searchKey() {
      this.getData(true);
    },
    currentAge() {
      this.getData(true);
    },
    currentType() {
      this.getData(true);
    },
    currentMuseum() {
      this.getData(true);
      this.$emit(
        "updateMuseum",
        this.museumList.find((item) => item.id == this.currentMuseum)
      );
    },
    menuActive() {
      this.getData(true);
    },
  },

  methods: {
    getData(reset) {
      if (reset) {
        this.list = [];
        this.busy = false;
      }
      getCollectionList(
        {
          ageId: this.currentAge,
          museumId: this.currentMuseum,
          type: this.menuActive,
          pageNum: this.paging.pageNum,
          pageSize: this.paging.pageSize,
          searchKey: this.searchKey,
          textureId: this.currentType,
        },
        (data) => {
          if (data.data.total <= this.list.length) {
            this.busy = true;
            return;
          }
          this.list = this.list.concat(data.data.records);
          this.paging.pageNum += 1;

          this.$nextTick(() => {
            this.$redrawVueMasonry(this.containerId);
          });
        }
      );

      // console.log(this);
      // this.list = this.list.concat([]);
      // // list.value = list.value.concat(list.value);
      // this.$nextTick(() => {
      //   this.$redrawVueMasonry(this.containerId);
      // });
    },
    onClickCollection(data) {
      this.activeCollection = data;
      console.log(this.activeCollection);
    },
  },
  mounted() {
    emitter.on("closeCollection", () => {
      this.activeCollection = "";
    });
  },
};
</script>


<style lang="scss" scoped>
.collectioncon {
  background: #e8e3d1;
  overflow-y: auto;
  overflow-x: hidden;

  .collections {
    width: 1400px;
    margin: 62px auto;

    .slebar {
      display: flex;
      justify-content: space-between;

      .sleft {
        display: flex;
        width: 65%;

        &:deep(.text) {
          margin-right: 20px;
        }
      }

      .sright {
        display: flex;
        align-items: center;
        color: #333;

        > ul {
          display: flex;
          align-items: center;

          > li {
            text-align: center;
            margin: 0 10px;
            cursor: pointer;

            &.active {
              width: 90px;
              height: 34px;
              color: var(--main-color);
              line-height: 34px;
              border-radius: 60px;
              border: 1px solid var(--main-color);
            }
          }
        }
      }
    }

    .masonry {
      margin-top: 36px;

      .item {
        width: 320px;
        height: 270px;
        border-radius: 10px;
        margin-bottom: 40px;
        overflow: hidden;
        cursor: pointer;

        .itemimg {
          background: linear-gradient(180deg, #d9d9d9 0%, #b9b9b9 100%);
          font-size: 0;
          height: calc(100% - 60px);
          width: 100%;

          > div {
            height: 100%;
            width: 100%;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
          }
        }

        p {
          background: #fffef6;
          color: #999;
          height: 60px;
          line-height: 60px;
          padding: 0 10px;

          &.active {
            color: var(--main-color);
          }
        }
      }

      .odd {
        height: 410px;
      }
    }
  }
}
</style>