act-activity-filter 活动列表筛选

通用的活动列表筛选组件，实现以下功能：

1. 支持筛选地区、状态
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

Props

Prop name	Description	Type	Values	Default
regionId v-model	当前选中的区域，值为对应区域的 regionId	-	-
status v-model	当前选中的状态，当选中「全部」时，status 为 undefined	-	-
regionData	regionData 配置	object	-	required
rootRegionId	指定 regionData 中的顶级区域 id 在区域选择器内会显示该区域以及该区域下的直属子区域 如：取广东省及其下属的 21 个地市，则 rootRegionId 填入广东省的 regionId：440000 再如：取佛山市及其下属区县，则 rootRegionId 填入佛山市的 regionId：440300	string	-	required

源码

组件 • 示例