170 lines
4.2 KiB
Vue
170 lines
4.2 KiB
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> |