activitys-uniapp/pages/activity/list.vue

<template>
	<view :style="vuex_skin">
		<!-- #ifdef MP-WEIXIN -->
		<view class="navbar">
			<u-navbar title-color="#000000" :is-back="true" title="活动列表"></u-navbar>
		</view>
		<!-- #endif -->
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback"
			@up="upCallback">
			<view class="card" style="position: relative;" @click="jump(item)" v-for="(item,index) in list" :key="index">
				<view class="center">
					<image :src="item.imgUrl" mode="aspectFill"></image>
				</view>
				<view class="content" style="padding: 6rpx 0;">
					<view class="">
						<view class="text-bold  text-cut-2" style="font-size: 28rpx;">{{content(item.content)}}</view>
					</view>
					<view class="" >
						<view style="margin-top: 8rpx;color: #828282;font-weight: 300;font-size: 26rpx;margin-bottom: 15rpx;">
							参赛时间：
							<text>{{formatTime(item.startTime)}} 至 {{formatTime(item.endTime)}}</text>
						</view>
						<view class="flex">
							<text class="cuIcon-hotfill padding-lr-xs text-base" style="margin-right: 4rpx;"></text>
							<text style="margin-left: -6rpx;">{{numberNull(item.viewCount)}}</text>
						</view>
					</view>
				</view>
				<image :src="getIcon(item)" mode="" style="width: 80rpx;height: 80rpx;position: absolute;right: 0rpx;bottom: 0rpx;"></image>
			</view>
		</mescroll-body>
	</view>
</template>
<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				now:null,
				list: [],
				downOption:{
					auto:false
				},
				upOption:{
					auto:true
				}
			}
		},
		onLoad() {
			this.now=new Date().getTime()
		},
		computed:{
			content(){
				return data=>{
					return this.$util.formatHtml(data)
				}
			},
			getIcon(){
				return data=>{
					let startTime=this.$dateTime.getTime(data.startTime)
					let endTime=this.$dateTime.getTime(data.endTime)
					if (this.now<startTime) {
						return "/static/icon/waiting.png"
					}
					if (this.now>endTime) {
						return "/static/icon/end.png"
					}
					return "/static/icon/ongoing.png"
				}
			}
		},
		methods: {
			jump(item){
				uni.reLaunch({
					url:"/pages/index/home?activeId="+item.id
				})
			},
			downCallback() {
				setTimeout(() => {
					this.mescroll.resetUpScroll();
				}, 800)
			},
			upCallback(mescroll) {
				let params = {
					current:mescroll.num,
					size:mescroll.size,
				}
				try {
					this.$api.activerecord.list(params).then(res => {
						let data = res.data.data.records
						let total = res.data.data.total
						mescroll.endBySize(data.length, total);
						if (mescroll.num == 1) this.list = []; //如果是第一页需手动制空列表
						this.list = this.list.concat(data); //追加新数据
					})
				} catch (e) {
					this.mescroll.endErr()
				}
			},
		}
	}
</script>

<style lang="scss">
	.card{
		margin: 20rpx;
		padding: 20rpx;
		border-radius: 12rpx;
		background-color: #FFFFFF;
		display: flex;
		
		image{
			width: 200rpx;
			height: 200rpx;
			margin-right: 20rpx;
			border-radius: 8rpx;
		}
		
		.content{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
	}
</style>