imengyu
/
wenbao-website


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
							<template>
  <!-- 分类 -->
  <div class="main-background">
    <!-- SEO -->
    <Head>
      <Title>厦门市文化遗产保护中心 - 搜索</Title>
      <Meta name="description" content="" />
      <Meta name="keywords" content="" />
    </Head>

    <!-- 主要内容 -->
    <div class="main-content">
      <div class="container">
        <div class="row justify-content-center">
          
          <!-- 右侧内容 -->
          <div class="col-12 col-sm-12 col-md-8 col-lg-9">
            <div class="content">
              <div class="section-title">
                <h2 class="icon">搜索结果：{{ keyword }}</h2>
                
                <nav aria-label="breadcrumb">
                  <ol class="breadcrumb">
                    <li class="breadcrumb-item"><router-link to="/">首页</router-link></li>
                    <li class="breadcrumb-item active" aria-current="page">搜索</li>
                  </ol>
                </nav>
              </div>
              
              <!-- 文章列表 -->
              <SimplePageContentLoader :loader="articlesData">
                <div class="news-list">
                  <div v-for="(item, key) in articlesData.content.value?.items" :key="key" class="news-item">
                    <router-link :to="'/page/' + item.id" class="title">{{ item.title }}</router-link>
                    <span class="date">{{ DateUtils.formatDate(new Date((item.publishtime || item.createtime) * 1000), 'yyyy-MM-dd') }}</span>
                  </div>
                  <div v-if="!articlesData.content.value || articlesData.content.value.empty" class="no-news">暂无相关文章</div>
                </div>
                <!-- 分页 -->
                <SimplePagination
                  v-if="articlesData.content.value" 
                  :currPage="articlesData.content.value.pageIndex"
                  :allPage="articlesData.content.value.allPage"
                  :maxCount="10"
                />
              </SimplePageContentLoader>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useSSrSimpleDataLoader } from '@/composeable/SimpleDataLoader';
import { DateUtils } from '@imengyu/imengyu-utils';
import SimplePagination from '~/components/content/SimplePagination.vue';

const route = useRoute();
const keyword = route.query.keyword as string;

const articlesData = await useSSrSimpleDataLoader('articles' + keyword, async () => {
  const res = await $fetch('/api/ecms/article/search', {
    method: 'GET',
    query: { 
      search: keyword,
      page: route.query.page || 1,
      pageSize: 10,
    }
  });
  if (!res.status)
    throw new Error(res.message);
  return res.data;
});

watch(route, async (newVal, oldVal) => {
  if (newVal !== oldVal) {
    articlesData.loadData(undefined, true);
  }
});
</script>

<style lang="scss">
@use "sass:list";
@use "sass:math";
</style>