ngbwg-wx/src/views/EnterNingguo/artwork.vue

<!-- eslint-disable vue/multi-word-component-names -->
<script setup lang='ts'>
import { ArtworkApi } from '@/api/api/artwork'
import { showToast } from 'vant'
import SearchInput from '@/components/SearchInput/index.vue'
import { baseIMGUrl } from '@/api/request.ts'


export type artworkType = {
  createTime: string,
  creatorId: null,
  creatorName: string,
  id: number,
  link: string,
  name: string,
  // 发布日期
  publishDate: string,
  thumb: string,
  updateTime: string
}

const searchParames = ref({
  pageNum: 0,
  pageSize: 0,
  searchKey: ''
} as {
  pageNum: number,
  pageSize: number,
  searchKey: string
})

const searchList = ref([] as artworkType[])



const getList = async () => {
  const res: any = await ArtworkApi.getSearchByKeyword(searchParames.value)
  if (res.code == 0) {
    searchList.value = res.data.records
  } else {
    showToast(res.msg)
  }
}

const onSearch = (eventData: any) => {
  searchParames.value.searchKey = eventData
  getList()
}

const isShowIframe = ref(false)
const iframeLink = ref('')


onBeforeMount(() => {
  getList()
})

</script>

<template>
  <div class='artwork-box'>
    <SearchInput @onSearch="onSearch" />
    <div class="search-list" v-if="searchList.length > 0">
      <div class="list-item" v-for="(item, index) in searchList" :key="index"
        @click="() => { isShowIframe = true, iframeLink = item.link }">
        <img :src="baseIMGUrl + item.thumb" alt="">
        <div class="name">{{ item.name }}</div>
      </div>
    </div>
    <div class="no-data" v-else>
      <img src="@/assets/images/no-data.png" alt="">
      <div class="tips">暂时没有数据 ，请试一下其他关键字</div>
    </div>
  </div>
  <div class="iframe-box" v-show="isShowIframe">
    <img src="@/assets/images/sceneBack.png" alt="" @click="isShowIframe = false">
    <iframe :src="iframeLink" frameborder="0"></iframe>
  </div>

</template>

<style lang='less' scoped>
.artwork-box {
  width: 100%;
  min-height: 100%;
  background: #F7F3E8;
  overflow: auto;

  .search-list {
    width: 100%;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    gap: 10px;
    box-sizing: border-box;


    .list-item {
      width: 100%;
      height: auto;
      background: #F7F3E8;
      // padding: 10px;
      box-sizing: border-box;
      box-shadow: 0px 0px 20px 0px rgba(222, 216, 199, 0.6);
      border-radius: 10px 10px 10px 10px;
      padding-bottom: 10px;

      img {
        width: 100%;
        height: 21vh;
        object-fit: cover;
        border-radius: 10px 10px 0 0;
      }

      .name {
        font-size: 1em;
        display: -webkit-box;
        /* 必须添加，以启用WebKit的弹性盒模型布局 */
        -webkit-line-clamp: 2;
        /* 最多显示两行 */
        -webkit-box-orient: vertical;
        /* 必须添加，使文本垂直显示 */

        overflow: hidden;
        /* 隐藏超出部分 */
        text-overflow: ellipsis;
        /* 末尾显示省略号 */
        word-break: break-all;
        /* 可选，根据需要断开长单词以适应行宽 */
        padding: 5px 10px 0 10px;
        font-family: 'SourceHanSansCN-Regular';
        color: #333333;
        text-align: justified;
      }
    }
  }

  .no-data {
    width: 100%;
    height: calc(100% - 7vh);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 10%;


    img {
      width: 40%;
    }

    .tips {
      color: #88866F;
      margin-top: 10px;
      font-family: 'SourceHanSansCN-Regular';
    }

  }
}

.iframe-box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;

  iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  img {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 3%;
    left: 3%;
    z-index: 11;
  }
}
</style>