FE_preschoolEdu_miniProgram/other/registeredActivity/registeredActivity.vue

<template>
	<view class="page">
		<view class="filter">
			<uni-search-bar class="search" radius="30" placeholder="请输入活动名称" v-model="keyword" clearButton="auto" cancelButton="none" />
		</view>
		
		<view class="wrap">
			<view class="tab-wrap">
				<view class="tab">
					<li :class="{active: curTab === ''}" @click="tabChange('')">全部</li>
				</view>
				
				<scroll-view scroll-x :scroll-left="scrollLeft" class="tab tab-scroll">
					<li v-for="(tab, i) in tabs" :key="i" :class="{active: curTab === tab.id}" @click="tabChange(tab.id)">{{ tab.classificationName }}</li>
				</scroll-view>
				<uni-icons class="icon" custom-prefix="iconfont" type="icon-filter" size="22" color="#007eff" @click="popup = true"></uni-icons>
			</view>
			
			<view v-if="list.length" class="list">
				<uni-swipe-action>
					<uni-swipe-action-item
						v-for="(item, i) in list"
						:key="i"
						:threshold="0"
						:right-options="ops"
						@click="e => handle(e, item)"
					>
						<view class="item" @click.stop="toDetail(item)">
							<image class="pic" :src="item.coverUrl"></image>
							<view class="texts">
								<view class="name ell">{{ item.competitionName }}</view>
								<view v-if="item.playStartTime && item.playEndTime" class="meta">举办时间：{{ item.playStartTime.substr(0, 16) + ' ~ ' + item.playEndTime.substr(0, 16) }}</view>
								<view class="meta ell">主办方：{{ item.sponsor }}</view>
								<view v-if="item.whetherToShowApplicants === '1'" class="meta ell">{{ item.applicantNum }}/{{ item.quantityLimit }}人已报名</view>
								<view class="voucher" @click.stop="use(item)">电子入场券</view>
							</view>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>
			<empty v-else text="暂无数据"></empty>
		</view>
		
		<uni-popup ref="popup" type="dialog">
			<view class="sign-popup">
				<uni-icons class="close" type="closeempty" size="16" color="#4876f9" @click="closePopup"></uni-icons>
				<view class="activity-name">{{ curRow.competitionName }}</view>
				<view class="title">签到二维码</view>
				<image class="qrcode" src="http://124.71.79.122/images/miniProgram/qrcode.png"></image>
				<view v-if="curRow.playStartTime" class="date">有效期限{{ curRow.playStartTime.substr(0, 16) + ' ~ ' + curRow.playEndTime.substr(0, 16) }}</view>
				<view class="userName">{{ info.hrUserInfo.userName }}</view>
				<view class="phone">{{ info.hrUserInfo.phone }}</view>
				<view v-if="info.organizationInfoList && info.organizationInfoList.length" class="org-name">{{ info.organizationInfoList[0].organizationName }}</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { postLoginActivity, competitionUserDel, cancelRegistration, categoryList } from '@/apis/modules/activity.js'
	import { viewUserDetails } from '@/apis/modules/user.js'
	import Util from '@/libs/util'
	export default {
		data() {
			return {
				openId: uni.getStorageSync('openId'),
				tabs: [],
				popup: false,
				curTab: '',
				tabs: [],
				scrollLeft: 0,
				reachBottom: 0, // 是否是上拉加载。0->否,1->是,-1->加载完所有数据
				status: 'more', // 上拉加载状态 more|loading|noMore
				searchTimer: null,
				sort: 0,
				keyword: '',
				list: [],
				page: 1,
				pageSize: 10,
				total: 0,
				cartNum: '',
				productTypeName: '',
				tagName: '',
				categoryName: '',
				timer: null,
				curRow: {},
				info: {},
				ops: [
					{
						text: '删除',
						style: {
							backgroundColor: '#F56C6C'
						}
					},
					{
						text: '取消报名',
						style: {
							backgroundColor: '#f79c69'
						}
					}
				],
			}
		},
		watch: {
			keyword () {
				clearTimeout(this.searchTimer)
				this.searchTimer = setTimeout(() => {
					this.initList()
				}, 500)
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.initList()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1500)
		},
		// 上拉加载
		onReachBottom() {
			if (this.reachBottom >= 0) {
				this.reachBottom = 1
				this.status = 'loading'
				this.getList()
			}
		},
		onShow() {
			this.getCategory()
			this.initList()
			this.getInfo()
		},
		methods: {
			getList() {
				postLoginActivity({
					pageNum: this.page,
					pageSize: this.pageSize,
					listType: 1,
					keyWord: this.keyword,
					classificationId: this.curTab,
					platformSource: ''
				}).then(async ({ data }) => {
					this.list = this.reachBottom > 0 ? [...this.list, ...data.records] : data.records
					this.page++ // 每次获取了数据后page+1
					const noMore = this.list.length === data.total // 是否加载完所有数据
					this.status = noMore ? 'noMore' : 'more' // 加载完了则设置为noMore
					this.reachBottom = noMore ? -1 : 0 // 加载完了则设置为-1
					
					this.now = await Util.getNow()
					this.statusInterval()
					uni.hideLoading()
					this.timer = setInterval(() => {
						this.now = new Date(this.now.setSeconds(this.now.getSeconds() + 1))
						this.statusInterval()
					}, 1000)
				}).catch(e => {})
			},
			async statusInterval () {
				this.list.map(item => {
					if (item.signUpStartTime && item.signUpEndTime) {
						this.handleStatus(item)
					}
				})
			},
			// 定时处理时间及状态
			handleStatus (item) {
				let playing = 0
				const playStartTime = new Date(item.playStartTime) // 报名开始时间
				const playEndTime = new Date(item.playEndTime) // 报名结束时间
				const { now } = this
				// 报名中(whetherToSignUp 是否已报名 0为已报名 1为未报名)
				if (now > playStartTime && now < playEndTime) {
					playing = 1
				}
				this.$set(item, 'playing', playing)
			},
			initList() {
				this.page = 1
				this.reachBottom = 0
				this.getList()
			},
			// 获取组织名字
			async getInfo() {
				const { result } = await viewUserDetails({
					openId: this.openId
				})
				this.info = result
			},
			// 获取分类
			async getCategory() {
				const { page } = await categoryList()
				this.tabs = page
			},
			// tab切换
			tabChange(id) {
				this.curTab = id
				this.initList()
			},
			// 跳转详情
			toDetail(item) {
				this.$util.to(`../activityDetail/activityDetail?id=${item.id}`)
			},
			// 删除
			handle(e, row) {
				const that = this
				if (!e.index) {
					uni.showModal({
						title: '提示',
						content: '确定要删除吗？',
						success(res) {
							if (res.confirm) {
								competitionUserDel({
									competitionId: row.id
								}).then(res => {
									that.$util.sucMsg('删除成功')
									that.initList()
								}).catch(res => {})
							}
						}
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '确定要取消报名吗？',
						success(res) {
							if (res.confirm) {
								cancelRegistration(row.id).then(res => {
									that.$util.sucMsg('取消报名成功')
									that.initList()
								}).catch(res => {})
							}
						}
					})
				}
			},
			// 展示电子券
			use(row) {
				this.curRow = row
				this.$refs.popup.open()
			},
			// 关闭弹框
			closePopup() {
				this.$refs.popup.close()
			},
		}
	}
</script>

<style scoped lang="scss">
.tab-wrap {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
	.tab {
		margin-bottom: 0;
	}
	.tab-scroll {
		width: calc(100% - 170rpx);
		white-space: nowrap;
		li {
			display: inline-block;
		}
	}
}
.list {
	padding: 20rpx;
	margin: 20rpx;
	border-radius: 8px;
	background-color: #fff;
	.item {
		position: relative;
		display: flex;
		margin-bottom: 28rpx;
		background-color: #fff;
		overflow: hidden;
	}
	.pic {
		min-width: 280rpx;
		width: 280rpx;
		height: 180rpx;
		margin-right: 20rpx;
		border-radius: 8px;
	}
	.texts {
		position: relative;
		width: calc(100% - 300rpx);
	}
	.name {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
	}
	.meta {
		margin: 10rpx 0;
		font-size: 24rpx;
		color: #999;
	}
	.voucher {
		position: absolute;
		bottom: 10rpx;
		right: 0;
		padding: 8rpx 20rpx;
		margin-left: 20rpx;
		font-size: 24rpx;
		color: #fff;
		white-space: nowrap;
		background-color: $uni-primary;
		border-radius: 4px;
	}
}


.sign-popup {
	position: relative;
	width: 80vw;
	padding: 40rpx 0 20rpx;
	text-align: center;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 8px;
	.close {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
	}
	.activity-name {
		padding: 0 10rpx;
		font-size: 36rpx;
		color: $uni-primary;
	}
	.title {
		padding: 20rpx 0;
		margin: 40rpx 0 20rpx;
		font-size: 32rpx;
		color: #fff;
		background-color: $uni-primary;
	}
	.qrcode {
		width: 200rpx;
		height: 200rpx;
	}
	.date {
		margin: 20rpx;
		font-size: 24rpx;
		color: #8c8c8c;
	}
	.userName {
		font-size: 30rpx;
		color: #333;
	}
	.phone {
		margin: 20rpx;
		font-size: 24rpx;
		color: #6f6f6f;
	}
	.org-name {
		font-size: 24rpx;
		color: #333;
	}
}
</style>