更新记录

1.0.2（2024-05-17）

添加插槽

1.0.1（2024-05-17）

更新文档

1.0.0（2024-05-17）

卡片列表下来刷新分页的页面，卡片位置为插槽暴露出去

平台兼容性

card-list

props

emits

slots

使用案例

<template>
    <view class="page">
        <searchHeader @search="search" v-model="searchParams"></searchHeader>
        <CardList v-bind="listConfig" class="list" ref="listRef">
            <template #card="{ data }">
                <PersonCard class="item" @click="goToOrderInfo(data)" :data="data"></PersonCard>
            </template>
        </CardList>
    </view>
</template>

<script setup lang="ts">
    import searchHeader from './components/searchHeader.vue'
    import CardList from '@/uni_modules/card-list/components/card-list/card-list.vue'
    import PersonCard from './components/orderCard.vue'

    import { computed, onMounted, ref, unref } from "vue";
    import { getList } from '@/api/requests/order';

    const searchParams = ref({
        searchKey: '',
        status: 'NORMAL',
        rangeTime: ""
    })

    const listRef = ref()
    const search = () => {
        listRef.value.refresh()
    }

    const listConfig = computed(() => {
        return {
            action: async (data) => {
                if (data.rangeTime?.length) {
                    data.startTime = data.rangeTime[0]
                    data.endTime = data.rangeTime[1]
                }
                const res = await getList(data)
                return res.data
            },
            filters: searchParams.value,
            pageSize: 20
        }
    })

    const goToOrderInfo = (data : any) => {
        uni.navigateTo({
            url: '/pages/order/orderInfo?order=' + JSON.stringify(data)
        })
    }
</script>

<style scoped lang="scss">
    .page {
        background: rgb(239, 239, 239);
        height: 100vh;
        width: 100vw;
        display: flex;
        justify-content: center;
        flex-direction: column;
align-items: center;
        .list {
            box-sizing: border-box;
            background-color: transparent;
            min-height: calc(100vh - 200rpx);
            // padding-bottom: 200rpx;
        }

        .item {
            background-color: #fff;
        }

    }
</style>