Refactor code structure and remove redundant changes

pages/foreign/index.vue

@@ -0,0 +1,86 @@
+<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 { 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>