zhishifufei_uniapp/pages/activity/activity_list.vue

<template>
    
    <BaseContainer class="activity_list">
        <NavBar title="活动列表" />
        <view class="list">
            <navigator v-for="(item, index) in activityList" :key="index" :url="'/pages/activity/index?id='+item.id" class="item">
                <view class="image">
                    <image :src="item.image" class="img">
										<view class="label" :class="{'active': item.end_time > new Date().getTime() }">{{ item.end_time > new Date().getTime() ? '进行中' : '已结束'  }}</view>
                </view>
                <view class="text">
                    <view class="name">{{ item.title }}</view>
                    <view class="time">
                        <text class="iconfont iconshijian2"></text>报名时间：{{ item.baoming }}
                    </view>
                    <view class="time">
                        <text class="iconfont iconshijian2"></text>活动时间：{{ item.start }}
                    </view>
                    <view class="time">
                        <text class="iconfont icondidian"></text>活动地址：{{ item.province }}{{ item.city }}{{ item.district }}{{ item.detail }}
                    </view>
                </view>
            </navigator>
        </view>
        <view v-show="loading" class="loading">
            <text class="fa fa-spinner"></text>
        </view>
        <view v-if="loadend" class="loaded">{{loadTitle}}</view>
        <view v-if="!activityList.length && !loading" class="nothing"></view>
    </BaseContainer>
</template>

<script>
    import {
        getActivityList,
        getActivityDetail
    } from "@/api/activity";
import store from "@/store";

    export default {
        data() {
            return {
                activityList: [],
                loadTitle: '',
                loading: false,
                loadend: false,
                page: 1,
                limit: 20,
								gradeId: '',
								subjectId: '',
            };
        },
				computed: {
					position() {
						return store.getters.position;
					},
				},
				onLoad(options) {
					this.gradeId = options.gradeId;
					this.subjectId = options.subjectId;
					this.getActivityList();
				},
        methods: {
            init: function () {
                var that = this;

                that.getActivityList();

            },
            // 获取活动列表
            getActivityList: function () {
                var that = this;
                if (that.loading) return;
                if (that.loadend) return;
                that.loadTitle = '';
                that.loading = true;
                getActivityList({ page: that.page, limit: that.limit, city: this.position, grade_id: this.gradeId, subject_id: this.subjectId }).then(res => {
                    let list = res.data;
                    that.activityList.push.apply(that.activityList, list);
                    that.loadend = list.length < that.limit;
                    that.loadTitle = that.loadend ? '已全部加载' : '上拉加载更多';
                    that.page = that.page + 1;
                    that.loading = false;
                    that.$set(this, 'activityList', that.activityList);
                }).catch(res => {
                    that.loadTitle = '上拉加载更多';
                    that.loading = false;
                })
            }
        },
    };
</script>
<style lang="scss" scoped>
    .loading {
        font-size: 40rpx;
        text-align: center;
        color: #999999;
    }

    .loaded {
        font-size: 28rpx;
        line-height: 72rpx;
        text-align: center;
        color: #999999;
    }

    .nothing {
        position: absolute;
        top: 30%;
        left: 50%;
        width: 400rpx;
        height: 400rpx;
        background: url(getAssetsPath("/wap/first/zsff/images/nothing.png")) center/contain no-repeat;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
		.list {
			.item {
				width: 690rpx;
				margin: 20rpx auto;
				background: #fff;
				padding: 25rpx 20rpx 32rpx;
				.image{
					position: relative;
					.label {
						width: 92rpx;
						height: 39rpx;
						border-radius: 6rpx 0rpx 6rpx 0rpx;
						background: #535353;
						box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(68,68,68,0.04);
						color: #fff;
						font-size: 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						position: absolute;
						top: 0;
						left: 0;
						&.active {
							background: #FFEDE9;
							box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(68,68,68,0.04);
							color: #FF4B33;
						}
					}
				}
				.img {
					width: 200rpx;
					height: 160rpx;
				}
			}
		}
</style>