互动抽奖 #坎公骑冠剑
坎公快讯！公测200日即将到来之际，11月11日维护结束后，《坎公骑冠剑》将开启【200天纪念签到免费礼包】！14日共计可获得【钻石*6000+超凡突破锤*1+体力*100+经验结晶*140000+金币*100000】，关注并转发本条动态，我们将于11月14日抽取5名守护者送出坎公骑冠剑周边礼包一份，感谢各位守护者对我们的支持~
==============
（一）活动时间
11月11日维护完成后~11月25日停机维护前领取

（二）活动条件
在探险中通关“世界1”后，可前往卡马逊商店开启【200天纪念签到免费礼包】；该礼包仅限开启1次。

（三）活动奖励一览
开启【200天纪念签到免费礼包】后，活动时间内14天共计可领取【钻石*6000+超凡突破锤*1+体力*100+经验结晶*140000+金币*100000】奖励！

https://t.bilibili.com/591343612850521458

135eb9ca907b31e73bc60b24a10829668ba1b62d.png

**王小美** @[email protected] · Nov 10, 2021, 03:49

**王小美** @[email protected] · Nov 10, 2021, 03:49

Nov 10, 2021, 03:49

王小美 @[email protected]

封装了一个vue 的 navigation hook：

import type { AxiosResponse } from 'axios'
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import type { Pagination, PaginationModel } from '@/model/rootObject'
import type { PaginationRequestBase } from '@/apis/requestType'

export const usePagination = <Q extends PaginationRequestBase, T>(
  AxiosRequest: (query: Q) => Promise<AxiosResponse<PaginationModel<T>, any>>,
  queryOptions: Parameters<typeof AxiosRequest>[0]
) => {
  const state = reactive({
    fetchingError: false,
    fetching: true,
    list: [] as T[],
    pagination: { current: queryOptions.current || 1, pages: NaN, total: NaN, size: queryOptions.size || 10 } as Pagination
  })

  const fetchList = async () => {
    // @ts-ignore
    delete queryOptions.current
    // @ts-ignore
    delete queryOptions.size

    AxiosRequest({
      ...queryOptions,
      current: state.pagination.current,
      size: state.pagination.size
    })
      .then((res) => {
        state.list = res.data.data.records as typeof state.list

        state.pagination.current = res.data.data.current
        state.pagination.pages = res.data.data.pages
        state.pagination.total = res.data.data.total
        state.pagination.size = res.data.data.size
        state.fetchingError = false
      })
      .catch((err) => {
        state.fetchingError = true
        ElMessage.error(err.message)
      })
      .finally(() => {
        state.fetching = false
      })
  }

  const handlePageSizeChange = (val: number) => {
    state.pagination.size = val
    fetchList()
  }

  const handlePageCurrentChange = (val: number) => {
    state.pagination.current = val
    fetchList()
  }

  const handlePagePrevClick = () => {
    state.pagination.current--
    state.pagination.current = Math.max(state.pagination.current, 0)
    fetchList()
  }

  const handlePageNextClick = () => {
    state.pagination.current++
    state.pagination.current = Math.min(state.pagination.current, state.pagination.pages)
    fetchList()
  }

  return { state, methods: { fetchList, handlePageSizeChange, handlePageCurrentChange, handlePagePrevClick, handlePageNextClick } }
}