act-prize-log-list 活动奖品列表

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

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

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

代码演示

<script setup>
import {ref, computed} from 'vue'
import {useInfiniteList} from '@ifanrx/uni-mp'
import {normalizePrizeLog} from '@ifanrx/uni-act'

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

const options = defineProps({
  activityAlias: {
    type: String,
    default: '',
  },
})

const searchWord = ref('')
const prizeLogQueryResult = usePrizeLogInfiniteList({
  alias: options.activityAlias,
  searchWord,
})

/**
 * 获取中奖记录列表
 * @param {object} options
 * @param {string} options.alias 活动别名
 * @param {import('vue').Ref<string>} options.searchWord 搜索关键词
 */
function usePrizeLogInfiniteList({alias, searchWord}) {
  const couponQuery = computed(() => {
    const statusQuery = io.query.in('status', [
      PRIZE_STATUS.SENT_SUCCEEDED,
      PRIZE_STATUS.USED,
      PRIZE_STATUS.EXPIRED,
    ])

    if (alias) {
      statusQuery.compare('activity_alias', '=', alias)
    }

    const searchQuery = searchWord.value
      ? io.queryOr(
          io.query.contains('activity_name', searchWord.value),
          io.query.contains('prize_name', searchWord.value)
        )
      : io.query

    return io.queryAnd(statusQuery, searchQuery)
  })

  const prizeLogQueryResult = useInfiniteList({
    table: io.prizeLog,
    initialPageParam: {
      expand: 'activity',
      query: couponQuery,
      limit: 20,
    },
    queryKey: io.prizeLog.find.queryKey.concat(searchWord),
    loadingOptions: {
      title: '加载中',
    },
    select: prizeLogs => {
      return prizeLogs.map(normalizePrizeLog)
    },
  })

  return prizeLogQueryResult
}
</script>

<template>
  <view>
    <mp-nav-bar backgroundColor="#fff" :placeholder="true" title="中奖记录" titleColor="black" />

    <act-prize-log-search-bar v-if="!activityAlias" v-model:value="searchWord" />
    <act-prize-log-list :queryResult="prizeLogQueryResult" />

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

<style scoped>
:global(page) {
  background: #fafafa;
}
</style>

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	-	'到底啦'
customPrizeIconMap	自定义奖品类型图标	object	-	null

源码

组件 • 示例