71 lines
1.9 KiB
Vue
71 lines
1.9 KiB
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> |