renshouH5/match/activityManage/activityManage.vue

<template>
	<view>
		<view class="top-fixed">
			<view class="search-box ddflex">
				<view class="search-input ddflex fflex">
					<image src="/static/images/ssico.png"></image>
					<input @confirm="searchFn" confirm-type="search" @input="searchFn" v-model="searchVal" class="fflex"
						placeholder="请输入关键词" />
				</view>
				<view class="filter ddflex">
					<view class="fflex">
						<picker mode="selector" :range="rangeList" range-key="label" v-model="rangeIndex" @change="rangeChange">
							<view class="filter-item fflex ddflex f-active" style="text-align: right;justify-content: flex-end;">
								<text style="max-width: 150rpx;" class="tover">{{rangeList[rangeIndex].label}}</text>
								<image class="filter-item-icon" src="../../static/images/down.png"></image>
							</view>
						</picker>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 150rpx;"></view>
		<view class="title">
			我的活动<text>共{{total}}个</text>
		</view>
		<view class="padd30" v-if="pageList.length>0">
			<view class="act-bar ddflex" v-for="item,index in pageList">
				<view class="act-pic">
					<image :src="item.pic" mode="aspectFill"></image>
					<view class="act-pic-tag" v-if="item.state==0">审核中</view>
					<view class="act-pic-tag" v-if="item.state==6">审核失败</view>
				</view>
				<view class="flex">
					<view class="act-title tovers">{{item.title}}</view>
					<view class="act-time" v-if="item.endTime">活动时间：{{formatTime(item.endTime)}}</view>
					<view class="act-time" style="color: red;" v-if="item.state==6">{{item.refuse}}</view>
					<view class="act-bottom ddflex">
						<view class="act-bottom-look ddflex">
							<image src="../static/images/person.png"></image>
							{{item.person}}人
						</view>
						<view class="act-edit" v-if="item.state==0||item.state==6" @click="jumpUrl('/match/activityEdit/activityEdit?id='+item.id)">修改</view>
					</view>
				</view>
			</view>
		</view>
		<view class="nodata nosp bgfff" v-else>
			<image src="/static/images/empty_sp.png"></image>
			<text>暂无活动</text>
		</view>
		<view class="act-create" @click="jumpUrl('/match/activityEdit/activityEdit')">
			<image src="../static/images/add.png"></image>
			<view>发布</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	const req = require("../../utils/request.js");
	import util from "../../utils/util.js";
	export default {
		components: {},
		props: {},
		data() {
			return {
				pageList: [],
				isLoad: true,
				form: {
					page: 1,
					limit: 10
				},
				searchVal:'',
				total:0,
				saleNo:null,
				pcId:null,
				
				rangeIndex:0,
				rangeList:[{
					label:'全部',
					value:-1
				},{
					label:'审核中',
					value:0
				},{
					label:'审核失败',
					value:6
				},{
					label:'报名中',
					value:2
				},{
					label:'报名结束',
					value:3
				},{
					label:'活动中',
					value:4
				},{
					label:'活动结束',
					value:5
				}]
			}
		},
		async onLoad(opt) {
			await req.silenceLogin(opt.saleNo)
			this.pcId = req.getStorage('userInfo').id
			this.getPageList()
		},
		onShow() {
			
		},
		onReachBottom: function() {
			this.form.page++;
			this.getPageList(false);
		},
		methods: {
			jumpUrl(url){
				uni.navigateTo({
					url:url
				})
			},
			getPageList(isShow) {
				if (!this.isLoad) return false;
				this.isLoad = false;
				let form = this.form;
				if(this.searchVal){
					form.search = this.searchVal
				}else{
					form.search = ''
				}
				form.state = this.rangeList[this.rangeIndex].value
				if(form.state==-1) delete form.state
				uni.showLoading();
				req.getRequest(
					'/api/match/page',
					form,
					res => {
						this.total = res.total
						res  = res?res.list:[]
						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
				);
			},
			searchFn(){
				this.isLoad = true
				this.form.page=1
				this.getPageList()
			},
			formatTime(date){
				date = new Date(date.replace(/-/g, '/'))
				return util.formatTime(date).t3
			},
			rangeChange(e){
				this.rangeIndex = e.detail.value
				this.page = 1;
				this.isLoad = true;
				this.getPageList(true);
			}
		},
		mounted() {
			
		},
		onPageScroll: function(e) {
		}
	}
</script>

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