act-activity-list 活动列表

通用的活动列表组件，传入 queryResult 即可，实现以下功能：

1. 基于 mp-query-list，自动处理空数据、加载错误、下一页等
2. 统一的活动显示、操作逻辑

所有项目都需使用该组件实现活动列表页，以确保风格统一。

代码演示

<script setup>
import {computed, ref, watch} from 'vue'
import {useInfiniteList, useUserStore} from '@ifanrx/uni-mp'
import {safeGet} from 'licia'
import {checkVisiblePermission} from '@ifanrx/uni-act'

import io from '@/io'
import {REGION_DATA} from '@/constants'

const rootRegionId = '440000'
const status = ref(undefined)
const regionId = ref(rootRegionId)

const userStore = useUserStore()

// 用户登陆完成后，根据用户所属地市自动选择
watch(
  () => userStore.isLoggedIn,
  () => {
    const cityCode = safeGet(userStore, ['user', 'cityCode'])
    if (cityCode in REGION_DATA) {
      regionId.value = cityCode
    }
  },
  {immediate: true}
)

// 缓存五分钟
const cacheTime = 5 * 60 * 1000

const request = params => {
  const {query, ...rest} = params

  return io.api.getActivityList({
    ...rest,
    where: JSON.stringify(query.queryObject),
  })
}

const activityListQueryResult = useInfiniteList({
  enabled: computed(() => userStore.isLoggedIn),
  queryKey: io.api.getActivityList.queryKey.concat({status, regionId}),
  queryFn: ({pageParam, queryKey}) => {
    const [, , {regionId, status}] = queryKey
    const {offset, limit} = pageParam

    const query = io.query.compare('active', '=', true).in('city_code', [rootRegionId, regionId])
    if (status) {
      query.compare('status', '=', status)
    }

    return request({query, offset, limit, plain: false, order_by: '-priority,-created_at'})
  },
  staleTime: cacheTime,
  gcTime: cacheTime,
  select: data => data?.filter(activity => checkVisiblePermission(userStore.user, activity)) || [],
})
</script>

<template>
  <mp-nav-bar />

  <act-activity-filter
    v-model:regionId="regionId"
    v-model:status="status"
    class="filter-bar"
    :regionData="REGION_DATA"
    :rootRegionId="rootRegionId"
  />

  <act-activity-list :queryResult="activityListQueryResult" />

  <mp-safe-area />
</template>

API（这些为 mp-query-list 属性）

Slots

Name	Description	Bindings
header	自定义列表头部内容
error	自定义 error 内容，不覆盖该 slot 则默认显示 empty 的内容
empty	自定义空数据内容
footer	自定义列表底部内容，默认在 useInfiniteList 时显示「加载中」、「到底啦」文案

API

Props

Prop name	Description	Type	Values	Default
queryResult	useQuery/useRequest/useInfiniteList 的返回结果	object	-	required
emptyText	空数据文案	string	-	'暂无活动记录'
loadingText	加载下一页文案	string	-	'加载中...'
noMoreText	加载完毕文案	string	-	'到底啦'
customActivityClick	自定义点击活动卡片的回调函数 默认会自动根据活动配置跳转相应路径	func|undefined	-	undefined

源码

组件 • 示例