list view

list view 是对后端分页请求对统一封装

最终效果：

广告招商活动列表订单

vue

<template>
  <ATLayout title="广告招商">
    <ListView
      :loading="loading"
      :list="list"
      :total="total"
      :itemView="AdItem"
      @tapItem="toDetail"
      @tapNoData="reLoad"
      @loadNext="loadNext"
    />
  </ATLayout>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import ATLayout from '@/components/base/ATLayout.vue'
import AdItem from '@/components/page/ad/AdItem.vue'
import ListView from '@/components/base/ListView'

import type { IAdItem } from '@/types/ad'
import { toIAdItem } from '@/api/type'
import { reqAdList } from '@/api/home'
import { useRouter } from 'vue-router'

import { useGenericRichTextDetailStore } from '@/stores/other/promotion.store'
import { useListView } from '@/hook/useListView'

const richTextDetailStore = useGenericRichTextDetailStore()
const router = useRouter()

const { loading, total, list, reLoad, loadNext } = useListView<IAdItem>({
  loadAPI: (pageNum, pageSize) =>
    reqAdList({ pageSize, pageNum }).then((res) => {
      if (!Array.isArray(res.rows)) throw new Error(res.msg)

      const list = res.rows.map(toIAdItem)

      const total = res.total

      return { list, total }
    })
})

onMounted(() => {
  reLoad()
})

function toDetail(item: IAdItem) {
  richTextDetailStore.promotionToDetail(item)
  router.push({
    name: 'ad-detail'
  })
}
</script>

<style scoped lang="less"></style>

vue

<template>
  <div class="at-activity-list">
    <BackTitleBar title="赛事动态" />
    <van-tabs
      :active="routeTag"
      @update:active="updateTag"
      color="#2975FF"
      background="transparent"
    >
      <van-tab title="报名中" name="active"> </van-tab>
      <van-tab title="全部" name="all"> </van-tab>
    </van-tabs>
    <div class="list">
      <ListView
        v-if="routeTag === 'active'"
        :list="active.list.value"
        :itemView="ActivityItem"
        :loading="active.loading.value"
        :total="active.total.value"
        @tapItem="toActivity"
        @tapNoData="active.reLoad"
        @loadNext="active.loadNext"
        gap="12px"
      />
      <ListView
        v-if="routeTag === 'all'"
        :list="all.list.value"
        :itemView="ActivityItem"
        :loading="all.loading.value"
        :total="all.total.value"
        @tapItem="toActivity"
        @tapNoData="all.reLoad"
        @loadNext="all.loadNext"
        gap="12px"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import BackTitleBar from '@/components/base/TitleBar/BackTitleBar.vue'
import ActivityItem from '@/components/page/activity/ActivityItem.vue'
import ListView from '@/components/base/ListView'
import type { IActivity } from '@/types/home'
import { computed, onMounted, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { reqActivityList } from '@/api/other/activity'
import { toIActivity } from '@/api/type'
import { useActivityStore, useUserInputActivity } from '@/stores/other/activity'
import { useListView } from '@/hook/useListView'

const router = useRouter()
const route = useRoute()

const activityUserInput = useUserInputActivity()
const activityStore = useActivityStore()

type ISelectType = 'active' | 'all'

const routeTag = computed(() => route.query.tag as ISelectType)

const updateTag = (tag: ISelectType) => {
  switch (tag) {
    case 'active':
      // vant 会在没数据的时候自动触发 load
      active.reset()
      break
    case 'all':
      // vant 会在没数据的时候自动触发 load
      all.reset()
      break
  }

  router.replace({
    name: 'activity-list',
    query: {
      tag
    }
  })
}

const active = useListView<IActivity>({
  loadAPI: (page, size) =>
    reqActivityList({ eventStatus: 1, pageNum: page, pageSize: size }).then((res) => {
      if (res.code !== 200) throw new Error('获取数据失败')
      if (!Array.isArray(res.rows)) throw new Error('获取数据失败')

      return { list: res.rows.map(toIActivity), total: res.total }
    })
})

const all = useListView<IActivity>({
  loadAPI: (page, size) =>
    reqActivityList({ pageNum: page, pageSize: size }).then((res) => {
      if (res.code !== 200) throw new Error('获取数据失败')
      if (!Array.isArray(res.rows)) throw new Error('获取数据失败')

      return { list: res.rows.map(toIActivity), total: res.total }
    })
})

onMounted(() => {
  if (route.query.tag) {
    updateTag(route.query.tag as ISelectType)
  } else {
    updateTag('active')
  }
})

const toActivity = ({ id }: IActivity) => {
  activityUserInput.reset()
  activityStore.$reset()
  router.push({ name: 'activity-sign-up', params: { id } })
}
</script>

<style scoped lang="less">
.at-activity-list {
  height: 100vh;
  width: 100vw;

  display: flex;
  flex-direction: column;

  background-color: @c-bg;

  .list {
    flex: 1;
    overflow: scroll;
    padding: 12px;
  }
}
</style>

vue

<template>
  <div class="at-order">
    <BackTitleBar title="订单" />
    <van-tabs
      :active="routeTag"
      @update:active="updateTag"
      color="#2975FF"
      background="transparent"
    >
      <van-tab title="全部" name="all"> </van-tab>
      <van-tab title="待付款" name="unpaid"> </van-tab>
      <van-tab title="已付款" name="paid"> </van-tab>
      <van-tab title="已取消" name="cancel"> </van-tab>
      <van-tab v-if="false" title="已完成" name="completed"> </van-tab>
    </van-tabs>

    <div class="list">
      <ListView
        v-if="routeTag === 'all'"
        :itemView="OrderItemCard"
        :list="all.list.value"
        :loading="all.loading.value"
        :total="all.total.value"
        @load="all.loadNext"
      />
      <ListView
        v-if="routeTag === 'unpaid'"
        :itemView="OrderItemCard"
        :list="unpaid.list.value"
        :loading="unpaid.loading.value"
        :total="unpaid.total.value"
        @load="unpaid.loadNext"
      />
      <ListView
        v-if="routeTag === 'paid'"
        :itemView="OrderItemCard"
        :list="paid.list.value"
        :loading="paid.loading.value"
        :total="paid.total.value"
        @load="paid.loadNext"
      />
      <ListView
        v-if="routeTag === 'cancel'"
        :itemView="OrderItemCard"
        :list="cancel.list.value"
        :loading="cancel.loading.value"
        :total="cancel.total.value"
        @load="cancel.loadNext"
      />
    </div>
  </div>
</template>
<script setup lang="tsx">
import { computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import BackTitleBar from '@/components/base/TitleBar/BackTitleBar.vue'
import OrderItem from '@/components/page/order/item/index.vue'
import ListView from '@/components/base/ListView'

import type { IOrder } from '@/types/order'
import { IResOrderListRowsToIOrder, orderCancel, useRePay, type TagType } from './hooks'
import { showError, showOk } from '@/util/show'
import { useListView } from '@/hook/useListView'
import { reqOrderList } from '@/api/order'
import { onError2Toast } from '@/onError'

const { rePay } = useRePay()

const all = useListView<IOrder>({
  loadAPI: loadDataFromServer()
})
const unpaid = useListView<IOrder>({
  loadAPI: loadDataFromServer(1)
})
const paid = useListView<IOrder>({
  loadAPI: loadDataFromServer(2)
})
const cancel = useListView<IOrder>({
  loadAPI: loadDataFromServer(3)
})

// const completed = useListView<IOrder>({
//   loadAPI: loadDataFromServer(2)
// })

const OrderItemCard = (props: IOrder) => (
  <OrderItem
    {...props}
    onBase={() => handleBaseInfo(props)}
    onCancel={() => handleCancel(props)}
    onPay={() => handlePay(props)}
  />
)

const router = useRouter()
const route = useRoute()

const routeTag = computed(() => route.query.tag as TagType)

const getListController = (tag: TagType) => {
  switch (tag) {
    case 'all':
      return all
    case 'unpaid':
      return unpaid
    case 'paid':
      return paid
    case 'cancel':
      return cancel
    // case 'completed':
  }
}

const updateTag = (tag: TagType) => {
  console.log('updateTag', routeTag.value, '>', tag)

  const listController = getListController(tag)
  // 这里只需要reset，因为 vant 会在没数据的时候自动触发 load
  // 而 load 可以正确的加载数据
  if (listController) listController.reset()

  router.replace({
    name: 'order',
    query: {
      tag
    }
  })
}

const handleBaseInfo = (item: IOrder) => {
  router.push({
    name: 'order-info',
    params: {
      id: item.id
    }
  })
}

const handleCancel = (item: IOrder) => {
  console.log('handleCancel > ', item)
  orderCancel(item).then((res) => {
    if (res.code === 200) {
      // showOk('取消成功')

      const listController = getListController(routeTag.value)

      const orderData = listController?.list.value.find((i) => i.id === item.id)

      if (orderData) {
        orderData.type = 'cancel'
      }
    }
  })
}

const handlePay = (item: IOrder) => {
  return rePay(item)
    .then(({ message, isCanPaid, isPaySuccess }) => {
      if (!isCanPaid || !isPaySuccess) throw new Error(message)

      // orderStore.refresh()
    })
    .catch(onError2Toast('支付失败'))
}

function loadDataFromServer(status?: 1 | 2 | 3) {
  return function (pageNum: number, pageSize: number) {
    return reqOrderList({
      pageNum,
      pageSize,
      status
    }).then((res) => {
      if (res.code !== 200) throw new Error('获取数据失败')
      if (!Array.isArray(res.rows)) throw new Error('获取数据失败')

      return {
        list: res.rows.map(IResOrderListRowsToIOrder),
        total: res.total
      }
    })
  }
}
</script>
<style scoped lang="less">
.at-order {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  background-color: @c-bg;

  position: relative;

  .list {
    flex: 1;
    overflow: scroll;
    padding: 12px;
  }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201

就算最复杂的订单，在封装后，也才 200 行代码。

封装与可维护性都很高。

ListView.tsx

注意，是 tsx！

tsx

import { computed, type SetupContext } from 'vue'

import { List as VantList } from 'vant'

import IconNoData from '@/assets/icon/no-data.svg'


interface ListViewProps {
  list: Array<any>
  itemView: any
  loading: boolean
  total?: number
  gap?: string
}

interface ListViewEvents {
  tapItem: (item: any) => void
  loadNext: () => void
  tapNoData: () => void
}

export default function (props: ListViewProps, { emit }: SetupContext<ListViewEvents>) {
  const isFinished = computed(() => {
    if (typeof props.total === 'undefined') return false

    // state.page * state.size >= state.total,
    return props.list.length >= props.total
  })

  const isNoData = computed(() => isFinished.value && props.total === 0)

  const finishedText = computed(() => (isNoData.value ? '' : '没有更多了'))

  const ItemView = props.itemView

  const listView = props.list.map((item) => (
    <ItemView {...item} onClick={() => handleItemClick(item)} />
  ))

  const noData = (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        color: '#666',
        gap: '12px',
        paddingTop: '100px'
      }}
      onClick={() => emit('tapNoData')}
    >
      <img src={IconNoData} />
      <div>无数据</div>
    </div>
  )

  const handleItemClick = (item: any) => {
    // console.log('tapItem', item)
    emit('tapItem', item)
  }

  return (
    <VantList
      style={{ display: 'flex', flexDirection: 'column', gap: props.gap || '20px' }}
      loading={props.loading}
      finished={isFinished.value}
      finishedText={finishedText.value}
      onLoad={() => emit('loadNext')}
    >
      {isNoData.value ? noData : listView}
    </VantList>
  )
}

useListView.ts

import { showInfo } from '@/util/show'
import { ref } from 'vue'

interface IListViewOptions<X> {
  loadAPI: (page: number, size: number) => Promise<{ list: X[]; total: number }>
  pageSize?: number
}

export const useListView = <T = any>({ loadAPI, pageSize }: IListViewOptions<T>) => {
  const page = ref(0)

  const size = ref(pageSize || 10)
  const total = ref<number | undefined>(undefined)

  const loading = ref(false)
  const list = ref<T[]>([])

  const reLoad = async () => {
    page.value = 0
    list.value = []

    await loadNext()
  }

  const loadNext = async () => {
    if (loading.value) return

    const isNoMore =
      typeof total.value !== 'undefined' && total.value > 0 && list.value.length >= total.value
    if (isNoMore) {
      return console.log('没有更多了')
    }

    loading.value = true

    try {
      const res = await loadAPI(page.value + 1, size.value)

      // @ts-ignore
      list.value.push(...res.list)
      total.value = res.total
      page.value++
    } catch (error: any) {
      showInfo(error.message)
    } finally {
      loading.value = false
    }
  }

  return { reLoad, loadNext, list, loading, total, page: { index: page, size } }
}

奥体业务中需要整改的 list

✅订单

✅广告招商

✅活动承接

✅场地租用

✅赛事活动

✅奥体动态

✅首页-消息列表

✅意见反馈-历史

分页注意事项

思考

重新加载，数据清空

list clear
page = 1

page + 1
list push
page++（需要成功才真的++）

无数据的时候

需要更具 total 判断
total 默认为 undefined

📁 apis

📁 报表

list view

奥体业务中需要整改的 list

分页注意事项

list view ​

奥体业务 中 需要整改的 list ​

分页 注意事项 ​

list view

奥体业务中需要整改的 list

分页注意事项