DataFront/components/tools/qqazk/QqazkShowSearch.vue

<script setup lang="ts">

import {Action} from "element-plus";

const props = defineProps({
  words:String,
  method:String
})
interface Word{
  bsm:string
  hz:string
  pyJs:string[]
  id:number
}
let showCards = ref<Word[]>([])
const isLoading = ref(true)
const dataRaw = await $fetch(`/api/tools/qqazk/search?words=${props.words}&method=${props.method}`)
if (dataRaw.haveMess){
  ElMessageBox.alert(dataRaw.message,"获取资源错误",{
    confirmButtonText: '确认',
    callback:(action:Action)=>{

    }
  })
}
showCards.value = dataRaw.data
isLoading.value=false
const nowPage = ref<Number>(1)
const pageChanged = (page:number)=>{
    nowPage.value=page
  window.scrollTo(0, 0)
}
const aPage = 20
const  pages =Math.ceil(showCards.value.length/aPage)
const clicked = ()=>{
    isLoading.value=true
}
useHead({
  title:"'"+props.words+"'搜索结果"
})

</script>

<template>
    <el-row v-loading="isLoading" style="min-height: 100px">
      <span v-for="(item,index) in showCards">
<!--        {{(nowPage-1)*aPage}} {{(nowPage)*aPage}} {{index}}-->
        <el-card class="box-card"  style="max-width: 220px;margin: 10px" v-show="index>=(nowPage-1)*aPage&&index<(nowPage)*aPage" :key="index">
        <template #header>
          <div class="card-header">
            <span style="margin-right: 10px;font-size: 30px"> {{item.hz}}</span>
            <NuxtLink :to="'/tools/qqazk/details/'+item.id" v-loading="isLoading" @click="clicked"><el-button>点击详情</el-button></NuxtLink>
          </div>
        </template>
        <div>笔顺码： {{item.bsm}}</div>
      </el-card>
      </span>

    </el-row>
  <div style="display: flex;justify-content: center">
<!--    {{showCards.length/aPage}}-->
    <el-pagination background layout="prev, pager, next" :total="pages" @current-change="pageChanged" :default-page-size="1"/>
  </div>
</template>

<style scoped>
a{
  text-decoration: none;
  color: var(--el-menu-text-color);
}
</style>