87 lines
2.2 KiB
Vue
87 lines
2.2 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/RecommendedColumnsV2.vue'
|
|
// import FeaturedSpecials from './components/FeaturedSpecials.vue'
|
|
import BannerTips from './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>({
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
projectType: '',
|
|
editions: '',
|
|
source: '',
|
|
type: 1,
|
|
})
|
|
const result = reactive<pageRes>({
|
|
list: [],
|
|
total: 0,
|
|
})
|
|
|
|
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()
|
|
}
|
|
|
|
const handleChangeCurrent = (val: number) => {
|
|
query.pageNo = val
|
|
getPage()
|
|
}
|
|
|
|
watch([() => query.projectType, () => query.editions, () => query.source], (val) => {
|
|
if (val) {
|
|
getPage()
|
|
}
|
|
})
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
:deep(.el-pagination) {
|
|
.el-input__inner {
|
|
text-align: center !important;
|
|
}
|
|
}
|
|
</style>
|