107 lines
3.0 KiB
Vue
107 lines
3.0 KiB
Vue
<template>
|
|
<!-- 导航 -->
|
|
<KlNavTab active="国外专区" />
|
|
<!-- banneer提示 -->
|
|
<BannerTips />
|
|
<div class="ma-auto w-[1440px]">
|
|
<!-- 图片展示鼠标移上去展示提示语 -->
|
|
<!-- <ImageTips /> -->
|
|
<!-- 推荐栏目 -->
|
|
<RecommendedColumnsV2 v-model:query="query" v-model="result"></RecommendedColumnsV2>
|
|
<!-- 精选专题 -->
|
|
<!-- <FeaturedSpecials></FeaturedSpecials> -->
|
|
<!-- 分页 -->
|
|
<div class="mt-[10px] flex justify-center">
|
|
<el-pagination
|
|
v-model:current-page="query.pageNo"
|
|
v-model:page-size="query.pageSize"
|
|
:page-sizes="[10, 20, 30]"
|
|
:total="result?.total"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
@size-change="handleChangeSize"
|
|
@current-change="handleChangeCurrent"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import KlNavTab from '~/components/kl-nav-tab/index.vue'
|
|
import RecommendedColumnsV2 from '~/components/foreign-components/RecommendedColumnsV2.vue'
|
|
// import FeaturedSpecials from './components/FeaturedSpecials.vue'
|
|
import BannerTips from '~/components/foreign-components/BannerTips.vue'
|
|
// import ImageTips from './components/ImageTips.vue'
|
|
|
|
import { reactive, watch } from 'vue'
|
|
import { page } from '~/api/upnew/index'
|
|
import type { pageRes, pageReq } from '~/api/upnew/types'
|
|
|
|
const query = reactive<
|
|
pageReq & {
|
|
isDomestic: number
|
|
}
|
|
>({
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
projectType: '-1',
|
|
editions: '-1',
|
|
source: -1,
|
|
type: 1,
|
|
/**是否是国内: 1是 0否 */
|
|
isDomestic: 1,
|
|
})
|
|
// const result = reactive<pageRes>({
|
|
// list: [],
|
|
// total: 0,
|
|
// })
|
|
|
|
const { data: result } = await useAsyncData(`draw-page-list-${Date.now()}`, async () => {
|
|
const res = await page({
|
|
...query,
|
|
editions: query.editions === '-1' ? '' : query.editions,
|
|
source: query.source === -1 ? '' : query.source,
|
|
projectType: query.projectType === '-1' ? '' : query.projectType,
|
|
})
|
|
return res.data
|
|
})
|
|
// const getPage = () => {
|
|
// page(query).then((res) => {
|
|
// const { data, code } = res
|
|
// if (code === 0) {
|
|
// result.list = data.list
|
|
// result.total = data.total
|
|
// }
|
|
// })
|
|
// }
|
|
|
|
// getPage()
|
|
|
|
const handleChangeSize = (val: number) => {
|
|
query.pageSize = val
|
|
// query.pageNo = 1
|
|
// getPage()
|
|
|
|
navigateTo(`/foreign/${query.projectType}/${query.pageNo}/${val}/${query.editions}/${query.source}`)
|
|
}
|
|
|
|
const handleChangeCurrent = (val: number) => {
|
|
query.pageNo = val
|
|
// getPage()
|
|
navigateTo(`/foreign/${query.projectType}/${val}/${query.pageSize}/${query.editions}/${query.source}`)
|
|
}
|
|
|
|
watch([() => query.projectType, () => query.editions, () => query.source], (val) => {
|
|
if (val) {
|
|
// getPage()
|
|
|
|
navigateTo(`/foreign/${query.projectType}/1/${query.pageSize}/${query.editions}/${query.source}`)
|
|
}
|
|
})
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
:deep(.el-pagination) {
|
|
.el-input__inner {
|
|
text-align: center !important;
|
|
}
|
|
}
|
|
</style>
|