talk_appAmin/pages/common/activityList/index.vue

<template>
    <!-- 列表信息 -->
    <view class="scrollable-list">
        <up-list @scrolltolower="scrolltolower" :showScrollbar="false" :pagingEnabled="true">
            <up-list-item v-for="(item, index) in modelValue" :key="index">
                <view class="listInfo" @click="toInfo(item)">
                    <span class="titile">
                        {{ item.title }}
                    </span>
                    <view class="startTime flex  alignCenter">
                        <image :src="tu52" style="width: 25rpx; height: 26rpx; margin-right: 12rpx;"></image>
                        开始时间：{{ item.startTime }}
                    </view>
                    <view class="endTime flex  alignCenter">
                        <image :src="tu53" style="width: 25rpx; height: 26rpx; margin-right: 12rpx;"></image>
                        结束时间：{{ item.endTime }}
                    </view>
                    <view class="addrs flex  alignCenter">
                        <image :src="tu51" style="width: 20rpx; height: 26rpx; margin-right: 12rpx;"></image>
                        活动地点：{{ item.addrs }}
                    </view>
                    <view class="statsInfo">
                        <!-- 动态数据 -->
                        <!-- <view :class="getDictLabelByValue(item.state).cssClass"  >
                            <span class="text">{{ getDictLabelByValue(item.state).dictLabel }}</span></view> -->
                        <!-- 静态数据 -->
                        <view class="state1">
                            <span class="text">报名中</span>
                        </view>
                    </view>

                </view>

            </up-list-item>
        </up-list>
    </view>
</template>
<script setup>
import { onShow, onLoad } from '@dcloudio/uni-app'
import { getDicts } from "@/api/system/dict/data"
import { ref, reactive, getCurrentInstance } from 'vue'
import { useStore } from 'vuex';
const emit = defineEmits(['scrolltolower']);
const { proxy } = getCurrentInstance();

const props = defineProps({
    modelValue: Array
});

const scrolltolower = () => {
    emit('scrolltolower'); // 如果不需要传递数据，可以省略第二个参数
};


</script>
<style lang="scss" scoped>
.scrollable-list {

    overflow: auto;
    /* 允许这个容器内部滚动 */
}

.listInfo {
    position: relative;
    
    height: 328rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    background: #ffffff;
    margin: 0 auto;
    margin-top: 12rpx;
    margin-bottom: 12rpx;
    padding-top: 24rpx;
    padding-left: 24rpx;

    .titile {
        font-weight: 400;

        height: 80rpx;
        font-size: 32rpx;
        color: #000000 100%;
    }

    .startTime {
        margin-top: 34rpx;
        font-weight: 400;

        height: 24rpx;
        font-size: 24rpx;
        color: #000000 100%;
    }

    .endTime {
        margin-top: 12rpx;
        font-weight: 400;

        height: 24rpx;
        font-size: 24rpx;
        color: #000000 100%;
    }

    .addrs {
        margin-top: 22rpx;
        font-weight: 400;
        height: 24rpx;
        font-size: 24rpx;
        color: #000000 100%;
    }
}

.statsInfo {
    position: absolute;
    right: 24rpx;
    bottom: 24rpx;
}

.state0 {
    width: 84rpx;
    height: 28rpx;
    border-radius: 14rpx 14rpx 14rpx 14rpx;
    background: #f1f1f1;
    display: flex;
    justify-content: center;
    align-content: center;

    .text {
        font-weight: 400;
        width: 60rpx;
        height: 20rpx;
        font-size: 20rpx;
        text-align: center;
        color: #7E7E7E;
    }
}

.state1 {
    width: 84rpx;
    height: 28rpx;
    border-radius: 14rpx 14rpx 14rpx 14rpx;
    background: #c0f0ec;
    display: flex;
    justify-content: center;
    align-content: center;

    .text {
        font-weight: 400;
        font-size: 20rpx;
        text-align: center;
        color: #00CCBE;
    }
}

.state2 {
    width: 84rpx;
    height: 28rpx;
    border-radius: 14rpx 14rpx 14rpx 14rpx;
    background: #fde2e2;
    display: flex;
    justify-content: center;
    align-content: center;

    .text {
        font-weight: 400;
        width: 60rpx;
        height: 20rpx;
        font-size: 20rpx;
        text-align: center;
        color: #FFABAB;
    }
}
</style>