65 lines
1.8 KiB
Vue
65 lines
1.8 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)
|
||
|
||
</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"><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> |