renshou/match/activity/activity.vue

<template>
	<view v-if="isShow">
		<view class="tab ddflex">
			<view :class="'li' + (current == 2 ? ' active':'')" @click="tabClick(2)">待参与</view>
			<view :class="'li' + (current == 3 ? ' active':'')" @click="tabClick(3)">已参与</view>
		</view>
		<view class="list" v-if="pageList && pageList.length >0">
			<view class="li" v-for="(item,index) in pageList" :key="index" @click="jumpUrl('/match/activityDet/activityDet?id=' + item.id + '&orderId=' + item.orderId)">
				<view class="infos ddflex">
					<view class="imgbox">
						<image :src="item.pic" mode="aspectFill"></image>
						<!-- <text class="tag">已认证</text> -->
					</view>
					<view class="fflex">
						<view class="act-tit tovers">{{item.title}}</view>
						<view class="area fflex tover">
							<text>{{item.startTime}}</text>
							<!-- <text>湖南长沙</text> -->
						</view>
					</view>
				</view>
				<view class="libot ddflex">
					<view class="time fflex" v-if="item.state != 5">{{item.startTime}}-{{item.endTime}}</view>
					<view class="btn end">{{item.enlistState == 0 ? '未付款' : item.enlistState == 2 ? '报名成功' : '报名失败'}}</view>
				</view>
			</view>
		</view>
		<view class="nodata" v-else>
			<image :src="picUrlss+'empty.png'"></image>
			<text>暂无记录~</text>
		</view>
	</view>
</template>

<script>
const req = require('../../utils/request.js');
const api = require('../../utils/api.js');
const util = require('../../utils/util.js');
const app = getApp();
export default {
	components: {
	},
	data() {
		return {
			picUrlss: req.public.picUrls,
			isShow: false,
			current: 2,
			pageList: [],
			isLoad: true,
			form: {
				page: 1,
				limit: 10
			},
		};
	},
	onLoad(options) {
		if(options.current){
			this.current = options.current
		}
	},
	onShow() {
		this.getPageList(true);
	},
	onReachBottom: function() {
		this.form.page++;
		this.getPageList(false);
	},

	methods: {
		tabClick(it){
			if(it == this.current) return false;
			this.current = it;
			this.form.page = 1;
			this.isLoad = true;
			this.getPageList();
		},
		getPageList(isShow){
			if (!this.isLoad) return false;
			this.isLoad = false;
			let form = this.form;
			req.loadIng('加载中')
			form.state = this.current;
			// form.state = 2;
			req.getRequest('/api/match/enlist/list',form,res => {
				this.isShow = true;
				if (res && res.length == 10) {
					this.isLoad = true;
				}
				if (this.form.page > 1) {
					res = this.pageList.concat(res);
				}
				this.pageList = res;
				uni.hideLoading()
			},isShow);
		},
		jumpUrl(url){
			uni.navigateTo({
				url: url
			})
		},
	}
};
</script>

<style>
	@import "./activity.css";
</style>