activitys-uniapp/pages/activity/list.vue

<template>
	<view :style="vuex_skin">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback"
			@up="upCallback">
			<view class="card" @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">
							<image style="width: 30rpx;height: 30rpx;" src="/static/icon/remen.png" mode=""></image>
							<text style="margin-left: -6rpx;">{{numberNull(item.viewCount)}}</text>
						</view>
					</view>
				</view>
			</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 {
				list: [],
				downOption:{
					auto:false
				},
			}
		},
		onLoad() {

		},
		computed:{
			content(){
				return data=>{
					return this.$util.formatHtml(data)
				}
			},
		},
		methods: {
			async jump(item){
				let params={
					activeId:item.id,
					platformSettingEnum:'ACTIVE_SETTING'
				}
				let res= (await this.$api.platform.getPlatformValue(params)).data.data;
				console.log(JSON.parse(res));
			},
			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>