ReptileFront/pages/search/[id].vue

<template>
  <section class="mai-wrap">
    <div class="mai-container">
      <div class="mai-article py-5" v-if="content.length" v-for="(item, index) in content"
           :key="index">
        <template v-if="searchType === 0">
          <nuxt-link :to="categoryNames[item.category_id].path + '/' + item.id">
            <div class="article mb-9">
              <div class="title flex items-center mb-5">
                <h3 class="text-2xl mr-4">{{ item.title }}</h3>
                <span class="category text-md px-4 py-1">{{
                    categoryNames[item.category_id].name
                  }}</span>
              </div>

              <p class="text-gray-400 ">{{ item.desc }}</p>

            </div>
            <div class="article-bottom flex justify-between">
              <a target="_blank" class="article-link"
                 :href="item.fromLink ? item.fromLink: 'javascript:void(0);'">文章来源: {{
                  item.fromDesc
                }}</a>
              <span class="text-gray-400">{{ item.time }}</span>
            </div>
          </nuxt-link>
        </template>
        <template v-else>
          <nuxt-link :to="'/' + routes[route.path.split('/')[2]] + '/' + item.id">
            <div class="article mb-9">
              <div class="title flex items-center mb-5">
                <h3 class="text-2xl mr-4">{{ item.title }}</h3>
                <span class="category text-md px-4 py-1">{{
                    routes[route.path.split('/')[2]]
                  }}</span>
              </div>

              <p class="text-gray-400 ">{{ item.description }}</p>

            </div>
            <div class="article-bottom flex justify-between">
              <a :target="item.fromLink ? '_blank': ''" class="article-link"
                 :href="item.fromLink ? item.fromLink: 'javascript:void(0);'">文章来源: {{
                  item.fromDesc
                }}</a>
              <span class="text-gray-400">{{
                  dayjs(item.createtime * 1000).format('YYYY-MM-DD hh:mm:ss')
                }}</span>
            </div>
          </nuxt-link>
        </template>
      </div>
      <div v-else>
        <el-empty description="暂无数据"/>
      </div>
    </div>
    <div class="mt-32">
      <Pagination
        :current="current"
        :limit="limit"
        :pages="pagesRef"
        :total="total"
        @change="onChangePage"
      />
    </div>
  </section>
</template>

<script setup lang="ts">
import dayjs from "dayjs";

enum Category {
  index,
  inform,
  warning,
  rules,
  tptsps,
}

const categoryNames = reactive({
  "1": {
    name:"动态资讯",
    path: '/inform'
  },
  "2":{
    name:"预警信息",
    path: '/warning'
  },
  "3": {
    name:"法律法规",
    path: '/rules'
  },
  "4": {
    name:"TBT/SPS通报",
    path: '/tptsps'
  },
  "5":{
    name:"案例",
    path: '/case'
  },
})
const routes = reactive({
  "inform": "动态资讯",
  "warning": "预警信息",
  "rules": "法律法规",
  "case": "案例"
})
definePageMeta({
  hidden: true,
  middleware: ['is-search'],
  headerHost: true,
})
// const {searchVal} = props.searchVal
const route = useRoute()
const store = useAppStore()
const searchVal = computed(() => store.getSearchVal)
const {commonApi, informationApi, warningApi, caseApi} = useApi()

const {setTotal, current, total, setCurrentPage, limit, pagesRef} = usePagination(1, 6, 0)
const content = ref([
  {
    title: '市场监管总局发布食品补充检验方法管理规定',
    type: 1,
    description: '12日，记者从北京海关获悉，今年前11个月，北京地区（含中央在京单位）进出口总值3.3万亿元人民币，超过去年全年水平，较去年同期增长19.4%，高于全国增速10.8个百分点。其中，进口2.78万亿元，增长26%；出口5242.4亿元，下降6.3%',
    time: '2022-11-12 12:23',
    fromLink: 'https://www.baidu.com',
    fromDesc: 'TSC技术性贸易措施资讯网',
    category_id: '1',
  }
])

const searchType = ref(0)

function onChangePage(val: number) {
  setCurrentPage(val)
  getList()
}

async function getList() {
  if (searchVal.value) {
    let params = {keyword: searchVal.value, page: current.value, limit}
    if (searchType.value === 0) {
      const {data} = await commonApi.searchApi(params)
      setData(data.data, data.total)
    } else if (route.path === '/search/inform') {
      const {data} = await informationApi.getInformationList(params)
      setData(data.data, data.total)
    } else if (route.path === '/search/warning') {
      const {data} = await warningApi.getWarningList(params)
      setData(data.data, data.total)
    } else if (route.path === '/search/case') {
      const {data} = await caseApi.getCaseList(params)
      setData(data.data, data.total)
    }
  }

}

function setData(data: Array<any>, total: number) {
  content.value = data;
  setTotal(total);
}


// onMounted(()=>{
//   getList()
// })
//
// watch(() => store.$state.searchVal, () => {
// })
watchEffect(() => {
  searchType.value = Category[route.params.id as unknown as any] as unknown as number;
  getList()
})

</script>

<style lang="scss" scoped>
.mai-wrap {
  width: 1300px;
  margin: 0 auto;
  padding: 75px 0;

  .mai-article {
    border-bottom: 1px solid #F3F3F3;
  }

  .article-link {
    color: #0055AB;
  }

  .category {
    color: #022950;
    border-radius: 8px;
    border: 1px solid #022950;
  }
}
</style>