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.acTitle }}
                    </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.addres }}
                    </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 activityState = ref([])//字典
const iconConfig = proxy.iconConfig;
const tu21 = iconConfig.tu21;
const tu22 = iconConfig.tu22;
const tu51 = iconConfig.tu51;
const tu52 = iconConfig.tu52;
const tu53 = iconConfig.tu53;
const props = defineProps({
    modelValue: Array
});

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

const toInfo = (item) => {
    proxy.$tab.navigateTo(`/pages/activity/info?id=${item.id}`);
}
const getDictLabelByValue = (state) => {
    const dict = activityState.value.find((dict) => dict.dictValue === state);
    return dict ? dict : '未知状态';
};
onLoad((options) => {
    getDicts('activity_state').then(e => {
        activityState.value = e.data
        console.log(activityState.value);
    })
    
})

onShow(() => {
    console.log('Page onShow')
})
</script>
<style lang="scss" scoped>
.scrollable-list {

    overflow-x: hidden;
  overflow-y: auto;

}

.listInfo {
    position: relative;
    width: 686rpx;
    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>