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" />
				<view>
					<uni-icons type="notification" size="20"></uni-icons>
				</view>
			</view>
			
			<view class="banner">
				<uni-swiper-dot class="swiper" v-if="banners.length" :current="curBanner" :info="banners" field="id" mode="round" :dotsStyles="dotsStyles">
					<swiper class="swiper-box" autoplay>
						<swiper-item v-for="(item, i) in banners" :key="i">
							<image class="pic" :src="item.coverUrl"></image>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
				<image v-else class="pic" src="https://occupationlab.com/images/preschoolEdu/index-banner.jpg"></image>
			</view>
			
			
			<view class="module">
				<view class="title-wrap">
					<view class="title">爆款推荐</view>
				</view>
				
				<uni-swiper-dot class="swiper" v-if="hots.length" :current="curBanner" :info="hots" field="id" mode="round" :dotsStyles="dotsStyles">
					<swiper class="swiper-box" autoplay>
						<swiper-item v-for="(item, i) in hots" :key="i">
							<image class="hot" :src="item.coverUrl"></image>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
				<image v-else class="hot" src="https://occupationlab.com/images/preschoolEdu/index-hot.jpg"></image>
			</view>
			
			<view class="module">
				<view class="title">活动速递</view>
				
				<ul 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)">{{ tab.classificationName }}</li>
					</scroll-view>
				</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.signUpStartTime }}</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="signed">已报名</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, categoryList, explosiveList } from '@/apis/modules/activity.js'
	import Util from '@/libs/util'
	export default {
		data() {
			return {
				per: true, // 是否有权限
				teamId: uni.getStorageSync('teamId') || '',
				curBanner: 0,
				dotsStyles: {
					backgroundColor: 'rgba(83, 200, 249,0.3)',
					border: '1px rgba(83, 200, 249,0.3) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
					selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
				},
				banners: [],
				hots: [],
				reachBottom: 0, // 是否是上拉加载。0->否,1->是,-1->加载完所有数据
				status: 'more', // 上拉加载状态 more|loading|noMore
				keyword: '',
				list: [],
				page: 1,
				pageSize: 5,
				total: 0,
				curTab: '',
				curItem: null,
				timer: null,
				now: '',
				invitationCode: '',
				submiting: false,
				tabs: [],
				scrollLeft: 0,
			}
		},
		// 下拉刷新
		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.eyJzdWIiOiJ1c2VyIiwiaWF0IjoxNzAzNDk1ODY2LCJleHAiOjE3MDQzNTk4NjYsImFjY291bnRJZCI6IjQ5MzEifQ.A5tQewZlfVz3yiQCjPscWXvyXjOJmWzheG5b82siZl4')
			// uni.setStorageSync('openId', 'o3hKk686kGjgMygKdPTJd5KQQ7CA')
			this.keyword = ''
			this.curTab = ''
			this.per = true
			this.getBanner()
			this.getCategory()
			this.initList()
		},
		methods: {
			initList() {
				this.page = 1
				this.reachBottom = 0
				this.getList()
			},
			// 列表
			getList() {
				uni.showLoading({
					title: '加载中'
				})
				postLoginActivity({
					pageNum: this.page,
					pageSize: this.pageSize,
					listType: 0,
					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 => {
					uni.hideLoading()
				})
			},
			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 是否已报名 0为已报名 1为未报名)
				if (item.whetherToSignUp && now > signUpStartTime && now < signUpEndTime) {
					signing = 1
				}
				this.$set(item, 'signing', signing)
			},
			// 获取分类
			async getCategory() {
				const { page } = await categoryList()
				this.tabs = page
			},
			// 获取banner及爆款
			getBanner() {
				// banner
				explosiveList({
					pageNum: 1,
					pageSize: 5, 
					enabledState: 0,
					type: 1
				}).then(({ data }) => {
					this.banners = data.records
				}).catch(e => {})
				
				// 爆款
				explosiveList({
					pageNum: 1,
					pageSize: 5, 
					enabledState: 0,
					type: 0
				}).then(({ data }) => {
					data.records.forEach(e => {
						if (e.coverUrl.includes(',')) e.coverUrl = e.coverUrl.split(',')[0]
					})
					this.hots = data.records
				}).catch(e => {})
			},
			// 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%;
		height: 420rpx;
	}
	swiper {
		height: 420rpx;
	}
}
.tab-wrap {
	display: flex;
	.tab-scroll {
		width: calc(100% - 100rpx);
		white-space: nowrap;
		li {
			display: inline-block;
		}
	}
}
.hot {
	width: 100%;
	height: 300rpx;
}
.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: 280rpx;
		height: 180rpx;
		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: 24rpx;
		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 {
		position: absolute;
		bottom: 0;
		right: 0;
		font-size: 28rpx;
		color: #ff7b32;
	}
}
</style>