tiaozhan-exam-2/src/views/ListView.vue

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { NGradientText, NPagination, NButton, useLoadingBar } from 'naive-ui'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios';

const store = useStore()
const router = useRouter()
const route = useRoute()
const loadingbar = useLoadingBar()

var contents: object = reactive([])

var pagedata = reactive({
  page: 1,
  total: 10,
  lang: 'ch'
})

async function updateContent() {
  var type = pagedata.lang == 'all' ? null : pagedata.lang;
  loadingbar.start()
  await axios({
    method: 'get',
    url: 'passagelist',
    params: {
      type: type,
      page: pagedata.page,
      limit: 9,
    }
  }).then((res) => {
    if (res.status == 200 && res.data.success) {
      loadingbar.finish()
      contents.length = 0
      res.data.data.passages.forEach(element => {
        contents.push(element)
      });
      pagedata.total = Math.ceil(res.data.data.total / 9)
    }
    else {
      loadingbar.error()
    }
  })
}

if (route.params.page !== undefined) {
  pagedata.lang = route.params.lang
  pagedata.page = parseInt(route.params.page)
}
updateContent()

function changeCH() {
  var page = {
    lang: pagedata.lang,
    page: pagedata.page,
  }
  switch (pagedata.lang) {
    case 'ch': {
      page.lang = 'en'
      pagedata.lang = 'en'
      router.push({ name: 'list', params: page })
      break
    }
    case 'en': {
      page.lang = 'all'
      pagedata.lang = 'all'
      router.push({ name: 'list', params: page })
      break
    }
    case 'all': {
      page.lang = 'en'
      pagedata.lang = 'en'
      router.push({ name: 'list', params: page })
      break
    }
  }
  updateContent()
}

function changeEN() {
  var page = {
    lang: pagedata.lang,
    page: pagedata.page,
  }
  switch (pagedata.lang) {
    case 'ch': {
      page.lang = 'all'
      pagedata.lang = 'all'
      router.push({ name: 'list', params: page })
      break
    }
    case 'en': {
      page.lang = 'ch'
      pagedata.lang = 'ch'
      router.push({ name: 'list', params: page })
      break
    }
    case 'all': {
      page.lang = 'ch'
      pagedata.lang = 'ch'
      router.push({ name: 'list', params: page })
      break
    }
  }
  updateContent()
}

</script>

<template>
  <div class="cards_container flexdiv">
    <div class="title">
      <n-gradient-text type="success">
        文章列表
      </n-gradient-text>
      <n-button class="langbut" :type="pagedata.lang == 'ch' || pagedata.lang == 'all' ? 'primary' : 'default'"
        @click="changeCH">
        中</n-button>
      <n-button class="langbut" :type="pagedata.lang == 'en' || pagedata.lang == 'all' ? 'primary' : 'default'"
        @click="changeEN">
        英</n-button>
    </div>
    <div class="cards">
      <router-link class="card" v-for="(item, index) in contents" :to="{ path: '/page/' + item.id }">
        {{ item.title }}
      </router-link>
    </div>
    <!-- pagedata.total -->
  </div>
  <div class="footer">
    <n-pagination v-model:page="pagedata.page" :page-count="pagedata.total"
      @update-page="updateContent(pagedata.lang, pagedata.page)" />
  </div>
</template>

<style scoped>
.langbut {
  margin-left: 30px;
  font-size: large;
}

.title {
  display: flex;
  align-items: center;
}

.footer {
  width: 100%;
  position: absolute;
  margin: 0 auto;
  top: 95vh;
}

.n-pagination {
  justify-content: center;
}

.n-gradient-text {
  font-weight: 500;
  font-size: 2.6rem;
  top: -10px;
}

.card {
  display: flex;
  border: 1px solid hsla(160, 100%, 37%, 1);
  border-radius: 0.25rem;
  flex-grow: 1;
  width: 50vw;
  padding: 0.5rem 1rem;
  margin: 0.5rem 0;
  font-size: 1.2rem;
}

.cards {
  max-height: 75vh;
  align-items: center;
  display: flex;
  flex-direction: column;
  width: 51vw;
  overflow-y: scroll;
}


.cards::-webkit-scrollbar {
  display: none;
}

.cards_container {
  display: flex;
  flex-direction: column;
  padding: 7vh 0 3vh 0;
}

.cards_container h1,
.cards_container h3 {
  text-align: center;
}

@media (min-width: 1024px) {

  .cards_container h1,
  .cards_container h3 {
    text-align: left;
  }
}
</style>