golden-dream-web/pages/search.vue

<template>
  <div>
    <div class="header-height"></div>
    <div class="w-1200 py-8 nav">
      <NBreadcrumb>
        <NBreadcrumbItem>
          <NuxtLink :to="localePath('/')">{{ $t('homePage') }}</NuxtLink>
        </NBreadcrumbItem>
        <NBreadcrumbItem>
          {{ $t('searchResult') }}
        </NBreadcrumbItem>
      </NBreadcrumb>
    </div>

    <!-- 文章列表-->
    <div class="w-1440">
      <div class="w-1200">
        <n-divider title-placement="left">
          {{ $t('article') }}
        </n-divider>
        <NuxtLink v-for="(item, index) in articleDataList" :to="localePath('/news-detail/' + item.id)"
                  class="article flex justify-between">
          <div class="flex flex-col justify-between">
            <p class="article-title line-clamp-2">{{ locale == 'zh' ? item.title : item.titleEn }}</p>
            <NSpace class="article-footer">
              <span class="">{{ locale == 'zh' ? item.source : item.sourceEn }}</span>
              <span class="">{{ item.viewsCount }} {{ $t('viewsCount') }}</span>
              <span class="">{{ dayjs(item.createTime).format('YYYY-MM-DD') }}</span>
            </NSpace>
          </div>
          <img :src="item.picUrl" class="article-img"/>
        </NuxtLink>
        <!-- 分页-->
        <div v-show="articleDataList.length >0" class="flex justify-center py-8">
          <NPagination
              :itemCount="articleCount"
              :page-size="10"
              @change="queryArticleList"
          />
        </div>
        <NEmpty :description="$t('noArticle')" v-if="articleDataList.length == 0"></NEmpty>
      </div>

      <div class="w-1200">
        <n-divider title-placement="left">
          {{ $t('video') }}
        </n-divider>
        <NuxtLink v-for="(item, index) in videoDataList" :to="localePath('/video-detail/' + item.id)"
                  class="africen inline-block cursor-pointer ">
          <div class="africen-img-box" @mouseleave="item.play = false" @mouseover="item.play = true">
            <video v-if="item.play" autoplay muted class="africen-img-cover" :src="item.videoUrl"/>
            <video v-if="!item.picUrl" v-show="!item.play" muted class="africen-img" :src="item.videoUrl"/>
            <img v-if="item.picUrl" v-show="!item.play" muted class="africen-img" :src="item.picUrl"/>
            <div class="africen-video-desc">
              <div class="view-num pl-2">
                <p class="flex items-center">
                  <NIcon :component="VideocamOutline" size="25"></NIcon>
                  <span class="ml-1">{{ item.viewsCount }}</span></p>
              </div>
            </div>
          </div>
          <p class="africen-title py-2">{{ locale == 'zh' ? item.title : item.titleEn }}</p>
          <div class="africen-desc">
            <div class="africen-time">{{ dayjs(item.createTime).format('YYYY-MM-DD') }}</div>
          </div>
        </NuxtLink>
        <!-- 分页-->
        <div v-show="videoDataList.length >0" class="flex justify-center py-8">
          <NPagination
              :itemCount="videoCount"
              :page-size="10"
              @change="queryVideoList"
          />
        </div>
        <NEmpty :description="$t('noVideo')" v-if="videoDataList.length == 0"></NEmpty>
      </div>

    </div>
  </div>


</template>
<script setup lang="ts">
import {NBreadcrumb, NBreadcrumbItem, NSpace, NPagination, NDivider, NIcon, NEmpty} from 'naive-ui'
import {getArticleList} from "~/api/article";
import {getVideoList} from "~/api/video";
import {VideocamOutline} from "@vicons/ionicons5";

const dayjs = useDayjs()
const {locale} = useI18n()
const localePath = useLocalePath()
const router = useRoute()
useHead({
  title: `金梦网-搜索`
})
const articlePageParams = {
  pageNo: 1,
  pageSize: 10,
  keyWord: ''
}
const videoPageParams = {
  pageNo: 1,
  pageSize: 10,
  keyWord: ''
}
articlePageParams.keyWord = router.query.word || ''
videoPageParams.keyWord = router.query.word || ''
watch(() => router.query, (newVal, oldValue) => {
  articlePageParams.keyWord = newVal.word ? newVal.word.toString() : ''
  videoPageParams.keyWord = newVal.word ? newVal.word.toString() : ''
  queryArticleList(1)
  queryVideoList(1)
})


const articleCount = ref(0)
const videoCount = ref(0)
const articleDataList = ref<any[]>([])
const videoDataList = ref<any[]>([])
const queryArticleList = (pageNo: number) => {
  articlePageParams.pageNo = pageNo
  getArticleList(articlePageParams).then((res: any) => {
    articleDataList.value = res.list
    articleCount.value = res.total
  })
}

queryArticleList(1)

const queryVideoList = (pageNo: number) => {
  videoPageParams.pageNo = pageNo
  getVideoList(videoPageParams).then((res: any) => {
    videoDataList.value = res.list
    videoCount.value = res.total
  })
}

queryVideoList(1)

</script>

<style scoped>
.data-list {

}

.article {
  border-bottom: 1px solid rgba(137, 107, 52, 0.15);
  padding: 38px 0 28px;
}

.article-img {
  width: 260px;
  height: 165px;
  border-radius: 8px;
}

.article-title {
  width: 859px;
  height: 92px;
  line-height: 45px;
  color: rgba(51, 51, 51, 1);
  font-size: 20px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

.article-footer {
  font-size: 14px;
  color: #9A9A9A;
}

.nav {
  border-bottom: 1px solid rgba(137, 107, 52, 0.15);
}


.africen {
  width: 280px;
  margin: 0 10px 30px;
}

.africen-title {
  height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 20px;
}

.africen-img-box {
  width: 100%;
  height: 175px;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

.africen-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.africen-img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}

.africen-video-desc {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 25px;
  line-height: 20px;
  background-image: linear-gradient(to top, rgba(0, 0, 0, .5), transparent);
  color: #FFFFFF;
  z-index: 10;

}
</style>