FE_preschoolEdu_miniProgram/pages/index/index.vue

<template>
	<view :class="[{oh: !per}]">
		<view class="page">
			<view class="search-wrap">
				<uni-search-bar class="search" radius="30" placeholder="请输入" v-model="keyword" clearButton="auto" cancelButton="none" @confirm="initList" @clear="clearKeyword" />
				<view>
					<uni-icons type="notification" size="20"></uni-icons>
				</view>
			</view>
			
			<view class="banner">
				<image class="pic" src="https://occupationlab.com/images/preschoolEdu/index-banner.jpg" mode="widthFix"></image>
			</view>
			
			
			<view class="module">
				<view class="title-wrap">
					<view class="title">爆款推荐</view>
				</view>
				
				<image class="hot" src="https://occupationlab.com/images/preschoolEdu/index-hot.jpg"></image>
			</view>
			
			<view class="module">
				<view class="title">活动速递</view>
				<ul class="tab">
					<li v-for="(tab, i) in tabs" :class="{active: curTab === tab.id}" @click="tabChange(tab)">{{ tab.name }}</li>
				</ul>
				<view class="list">
					<view v-for="(item, i) in list" :key="i" class="item" @click="toDetail(item)">
						<image class="pic" :src="item.coverUrl"></image>
						<view class="texts">
							<view class="name ell">{{ item.competitionName }}</view>
							<view class="meta">举办时间：{{ item.playStartTime + ' ~ ' + item.playEndTime }}</view>
							<view class="meta ell">主办方：{{ item.sponsor }}</view>
							<view v-if="item.whetherToShowApplicants === '1'" class="meta ell">{{ item.applicantNum }}/{{ item.quantityLimit }}人已报名</view>
							<view v-if="item.signing" class="sign" @click.stop="presign(item)">报名</view>
							<view v-if="!item.whetherToSignUp" class="sign signed" @click.stop="cancelSign(item)">取消报名</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="!per" class="per-mask">功能升级中，敬请期待...</view>
		
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="input" placeholder="请输入4位数邀请码" :duration="2000" :before-close="true" @close="closePopup" @confirm="codeSubmit"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import { postLoginActivity, individualEventRegistration, cancelRegistration } from '@/apis/modules/activity.js'
	import Util from '@/libs/util'
	export default {
		data() {
			return {
				per: true, // 是否有权限
				teamId: uni.getStorageSync('teamId') || '',
				reachBottom: 0, // 是否是上拉加载。0->否,1->是,-1->加载完所有数据
				status: 'more', // 上拉加载状态 more|loading|noMore
				keyword: '',
				list: [],
				page: 1,
				pageSize: 5,
				total: 0,
				curTab: 0,
				curItem: null,
				timer: null,
				now: '',
				invitationCode: '',
				submiting: false,
				tabs: [
					{
						name: '全部',
						id: 0
					},
					{
						name: '会议',
						id: 1
					},
					{
						name: '论坛',
						id: 2
					},
					{
						name: '讲座',
						id: 3
					},
					{
						name: '展会',
						id: 4
					},
					{
						name: '培训',
						id: 5
					}
				],
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.initList()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1500)
		},
		// 上拉加载
		onReachBottom() {
			if (this.reachBottom >= 0) {
				this.reachBottom = 1
				this.status = 'loading'
				this.getList()
			}
		},
		onShow() {
			// uni.setStorageSync('token', 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1c2VyIiwiaWF0IjoxNzAyMjg4MDEzLCJleHAiOjE3MDMxNTIwMTMsImFjY291bnRJZCI6IjEifQ.3dZSZAG7w8tSPU9DBL0VdULgkQmiZpYVzjf1qfxx5HY')
			this.keyword = ''
			this.per = true
			this.initList()
		},
		methods: {
			// 初始化权限
			initRole() {
				if (!uni.getStorageSync('auth').includes('首页')) {
					this.per = false
				}
				this.getProducts()
			},
			initList() {
				this.page = 1
				this.reachBottom = 0
				this.getList()
			},
			// 列表
			getList() {
				postLoginActivity({
					pageNum: this.page,
					pageSize: this.pageSize,
					listType: 0,
					keyWord: this.keyword,
					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()
					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 signing = 0
				const signUpStartTime = new Date(item.signUpStartTime) // 报名开始时间
				const signUpEndTime = new Date(item.signUpEndTime) // 报名结束时间
				const { now } = this
				// 报名中(whetherToSignUp 是否已报名 1已报名，0未报名)
				if (item.whetherToSignUp && now > signUpStartTime && now < signUpEndTime) {
					signing = 1
				}
				this.$set(item, 'signing', signing)
			},
			// keyword清除回调
			clearKeyword() {
				this.keyword = ''
				this.initList()
			},
			
			// 跳转活动详情
			toDetail(item) {
				this.$util.to('/other/activityDetail/activityDetail?id=' + item.id)
			},
			// tab切换
			tabChange(tab) {
				this.curTab = tab.id
				// this.initList()
			},
			// 报名前的判断
			async presign(item) {
				this.invitationCode = ''
				this.curItem = item
				// 需要输入验证码就弹出邀请码弹框，否则直接报名
				item.isNeedCode ? this.$refs.popup.open() : this.sign()
			},
			// 报名
			async sign() {
				const res = await individualEventRegistration({
					competitionId: this.curItem.id,
					registrationInvitationCode: this.invitationCode
				})
				this.initList()
				this.$util.sucMsg('报名成功！')
				this.closePopup()
			},
			// 关闭邀请码弹框
			closePopup() {
				this.$refs.popup.close()
			},
			// 邀请码确定
			codeSubmit(value) {
				if (!value || value.length !== 4) return this.$util.errMsg('请输入4位数邀请码！')
				this.invitationCode = value
				this.sign()
			},
			// 取消报名
			cancelSign(row) {
				if (this.submiting) return false
				this.submiting = true
				const that = this
				uni.showModal({
					title: '提示',
					content: '确定要取消报名吗？',
					success(res) {
						if (res.confirm) {
							cancelRegistration(row.id).then(res => {
								that.$util.sucMsg('取消报名成功')
								that.initList()
								that.submiting = false
							}).catch(res => {})
						} else {
							that.submiting = false
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.page {
	position: relative;
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
}
.banner {
	position: relative;
	.pic {
		width: 100%;
	}
}
.hot {
	width: 100%;
	height: 200rpx;
}
.module {
	margin: 20rpx;
	padding: 20rpx;
	background-color: #fff;
	border-radius: 8px;
	.title-wrap {
		display: flex;
		justify-content: space-between;
		margin-bottom: 34rpx;
	}
	.title {
		display: inline-flex;
		align-items: center;
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
	}
}
.list {
	.item {
		position: relative;
		display: flex;
		margin-bottom: 28rpx;
		background-color: #fff;
		overflow: hidden;
	}
	.pic {
		width: 320rpx;
		height: 240rpx;
		margin-right: 20rpx;
		border-radius: 8px;
	}
	.texts {
		width: calc(100% - 240rpx);
	}
	.name {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
	}
	.meta {
		margin: 10rpx 0;
		font-size: 26rpx;
		color: #999;
	}
	.sign {
		position: absolute;
		bottom: 0;
		right: 0;
		padding: 8rpx 28rpx;
		font-size: 28rpx;
		color: #fff;
		background-color: $uni-primary;
		border-radius: 4px;
	}
	.signed {
		background-color: #ff7b32;
	}
}
</style>