FE_preschoolEdu_miniProgram/other/activityDetail/activityDetail.vue

<template>
	<view class="wrap">
		<view class="banner">
			<image class="pic" :src="form.coverUrl" mode="widthFix"></image>
		</view>
		
		<view class="info">
			<view class="line">
				<view class="label">活动名称：</view>
				<view class="val">{{ form.name }}</view>
			</view>
			<view class="line">
				<view class="label">状态：</view>
				<view class="val">{{ statusList[comStatus] }}</view>
			</view>
			<view v-if="form.whetherToShowApplicants === '1'" class="line">
				<view class="label">人数限制：</view>
				<view class="val">{{ form.quantityLimit }}</view>
			</view>
			<view class="line items-start">
				<view class="label">举办时间：</view>
				<view class="val">{{ form.startTime + ' ~ ' + form.endTime }}</view>
			</view>
			<view class="line">
				<view class="label">活动地点：</view>
				<view class="val">{{ form.reportingPlace }}</view>
			</view>
			<view class="line">
				<view class="label">主办方：</view>
				<view class="val">{{ form.sponsor }}</view>
			</view>
			<view v-if="form.whetherToShowApplicants === '1'" class="line">
				<view class="label">已报名人员：</view>
				<view class="val">({{ form.applicantNum }}/{{ form.quantityLimit }})</view>
			</view>
		</view>
		
		<ul class="tab">
			<li :class="{active: curTab === 0}" @click="tabChange(0)">活动详情</li>
			<!-- <li :class="{active: curTab === 1}" @click="tabChange(1)">活动通知</li> -->
			<li v-if="form.whetherToShowApplicants === '1'" :class="{active: curTab === 2}" @click="tabChange(2)">已报名人员({{ form.applicantNum }}/{{ form.quantityLimit }})</li>
		</ul>
		
		<view v-if="!curTab" class="detail">
			<mp-html :content="form.description"/>
			
			<template v-if="form.competitionAnnexList && form.competitionAnnexList.length">
				<view class="file-title">附件</view>
				<view class="files">
					<view class="file" v-for="(file, i) in form.competitionAnnexList" :key="i">
						<text class="file-name">{{ file.fileName }}</text>
						<view class="download" @click="download(file)">下载</view>
					</view>
				</view>
			</template>
		</view>
		<view v-else-if="curTab === 2" class="list">
			<view v-for="(item, i) in list" :key="i" class="item" @click="toDetail(item)">
				<view class="top">
					<image class="avatar" :src="item.userAvatars || Common.avatar"></image>
					<view class="name">{{ item.username }}</view>
				</view>
			</view>
		</view>
		
		<view class="btns">
			<button class="share" open-type="share">分享</button>
			<view :class="['btn sign', {signed, disabled: comStatus !== 1}]" @click="presign">{{ stopSign ? (signed ? '已报名' : '已截止报名') : comStatus === 1 ? (signed ? '取消报名' : '立刻报名') : statusList[comStatus] }}</view>
		</view>
		
		<uni-popup v-if="popupShow" 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 { getCompetition, individualEventRegistration, queryRegistrationByCondition, cancelRegistration } from '@/apis/modules/activity.js'
	import Util from '@/libs/util'
	import Common from '@/config/common'
	export default {
		data() {
			return {
				Common,
				id: '',
				statusList: ['待开始', '进行中', '已截止报名', '已结束'],
				comStatus: 0,
				signed: 0,
				stopSign: 0,
				curTab: 0,
				reachBottom: 0, // 是否是上拉加载。0->否,1->是,-1->加载完所有数据
				status: 'more', // 上拉加载状态 more|loading|noMore
				list: [],
				page: 1,
				pageSize: 5,
				total: 0,
				form: {
					startTime: '',
					endTime: '',
					quantityLimit: '',
					playStartTime: '',
					playEndTime: '',
					reportingPlace: '',
					sponsor: '',
				},
				shopCartTotal: 0,
				types: [],
				mpStyle: {
					p: 'font-size: 25rpx !important;font-family: Microsoft Yahei !important;font-weight: 400 !important;color: #333 !important;',
					span: 'font-size: 25rpx !important;font-family: Microsoft Yahei !important;font-weight: 400 !important;color: #333 !important;'
				},
				timer: null,
				now: '',
				invitationCode: '',
				submiting: false,
				popupShow: false,
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.initList()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1500)
		},
		// 上拉加载
		onReachBottom() {
			if (this.reachBottom >= 0) {
				this.reachBottom = 1
				this.status = 'loading'
				this.getRegList()
			}
		},
		onShow() {
			const pages = getCurrentPages()
			const { options } = pages[pages.length - 1]
			this.stopSign = 0
			this.id = options.id
			this.getInfo()
			this.focus = false
		},
		onLoad() {
			this.focus = false
		},
		methods: {
			// 获取详情
			getInfo() {
				uni.showLoading({
					title: '加载中'
				})
				getCompetition(this.id).then(async (res) => {
					const data = res.competition
					data.startTime = data.playStartTime.substr(5, 11).split('-').join('/')
					data.endTime = data.playEndTime.substr(5, 11).split('-').join('/')
					
					this.form = data
					
					this.now = await Util.getNow()
					this.statusInterval()
					clearInterval(this.timer)
					this.timer = setInterval(() => {
						this.now = new Date(this.now.setSeconds(this.now.getSeconds() + 1))
						this.statusInterval()
					}, 1000)
					uni.hideLoading()
				}).catch(e => {
					uni.hideLoading()
				})
			},
			async statusInterval () {
				const data = this.form
				if (data.signUpStartTime && data.signUpEndTime) {
					this.handleStatus()
				}
			},
			// 定时处理时间及状态
			handleStatus () {
				const data = this.form
				let status = 0
				const signUpStartTime = new Date(data.signUpStartTime) // 报名开始时间
				const signUpEndTime = new Date(data.signUpEndTime) // 报名结束时间
				const playStartTime = new Date(data.playStartTime) // 活动开始时间
				const playEndTime = new Date(data.playEndTime) // 活动结束时间
				const { now } = this
				// 报名中(whetherToSignUp 是否已报名 1已报名，0未报名)
				if (now < signUpStartTime) {
					// 待开始
					status = 0
				} else if (now > signUpStartTime && now < signUpEndTime) {
					// 报名中
					status = 1
				} else if (now > signUpEndTime && now < playEndTime) {
					// 已截止报名
					this.stopSign = 1
				} else if (now > playEndTime) {
					// 已结束
					status = 2
				}
				this.comStatus = status
				this.signed = data.competitionRegistration ? 1 : 0
			},
			// 已报名人员
			getRegList() {
				uni.showLoading({
					title: '加载中'
				})
				queryRegistrationByCondition({
					competitionId: this.id,
					pageNum: this.page,
					pageSize: this.pageSize,
					querySource: 1,
				}).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
					uni.hideLoading()
				}).catch(e => {
					uni.hideLoading()
				})
			},
			initList() {
				this.page = 1
				this.reachBottom = 0
				this.getRegList()
			},
			// tab切换
			tabChange(id) {
				id === 2 && this.initList()
				this.curTab = id
			},
			// 报名前的判断
			async presign() {
				if (this.comStatus !== 1) return false
				if (this.form.competitionRegistration) { // 取消报名
					this.cancelSign()
				} else { // 报名
					this.invitationCode = ''
					// 需要输入验证码就弹出邀请码弹框，否则直接报名
					if (this.form.isNeedCode) {
						this.popupShow = true
						this.$nextTick(() => {
							this.$refs.popup.open()
						})
					} else {
						this.sign()
					}
				}
			},
			// 取消报名
			cancelSign() {
				if (this.submiting) return false
				this.submiting = true
				const that = this
				uni.showModal({
					title: '提示',
					content: '确定要取消报名吗？',
					success(res) {
						if (res.confirm) {
							cancelRegistration(that.form.id).then(res => {
								that.$util.sucMsg('取消报名成功')
								that.getInfo()
								that.submiting = false
							}).catch(res => {})
						} else {
							that.submiting = false
						}
					}
				})
			},
			// 报名
			async sign() {
				const res = await individualEventRegistration({
					competitionId: this.form.id,
					registrationInvitationCode: this.invitationCode
				})
				this.getInfo()
				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()
			},
			download(item) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				// 下载文件资源到本地
				uni.downloadFile({
					url: item.filePath,
					success: function(res) {
						console.log('result:', res)
						// uni.hideLoading();
						
						if (res.statusCode === 200) {
							uni.getFileSystemManager().saveFile({
								tempFilePath: res.tempFilePath,
								success(res) {
									console.log('saveFile:',res.savedFilePath)
									uni.openDocument({
										filePath: res.savedFilePath,
										showMenu: true, //是否可以分享
										success: (res) => {
											uni.hideLoading()
											console.log(res);
										},
										fail: (e) => {
											uni.showToast({
												title: '打开失败',
												icon: "error"
											})
										}
									})
								}
							})
						}
						// uni.showLoading({
						// 	title: '正在打开',
						// 	mask: true
						// })
						// 新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。
						// uni.openDocument({
						// 	filePath: res.tempFilePath,
						// 	fileType: 'docx', // 文件类型，指定文件类型打开文件，有效值 doc, xls, ppt, pdf, docx, xlsx, pptx 
						// 	showMenu: true, // 允许出现分享功能
						// 	success: res => {
						// 		uni.hideLoading()
						// 	},
						// 	fail: openError => {
						// 		uni.hideLoading()
						// 	}
						// })
					},
					fail: function(err) {
						uni.hideLoading()
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.wrap {
	padding-bottom: 140rpx;
}
.banner {
	.pic {
		width: 100%;
		max-height: 500rpx;
	}
}
.info {
	position: relative;
	padding: 20rpx;
	margin: -150rpx 30rpx 0;
	background-color: #fff;
	border-radius: 8px;
	.line {
		display: flex;
		align-items: center;
		margin: 20rpx 0;
	}
	.items-start {
		align-items: flex-start;
	}
	.label {
		min-width: 180rpx;
		font-size: 28rpx;
		text-align: right;
	}
	.val {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
	}
}
.detail {
	padding: 34rpx 32rpx;
	margin: 20rpx;
	border-radius: 20px;
	background-color: #fff;
	.file-title {
		margin: 40rpx 0 20rpx;
		font-size: 26rpx;
		color: $uni-primary;
	}
	.file {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15rpx;
		font-size: 24rpx;
	}
	.file-name {
		color: #333;
	}
	.download {
		color: $uni-primary;
	}
}
.list {
	margin: 0 30rpx;
	.item {
		padding: 30rpx;
		margin: 10rpx 0;
		background-color: #fff;
		border-radius: 8px;
	}
	.top {
		display: flex;
		align-items: center;
	}
	.avatar {
		width: 60rpx;
		height: 60rpx;
		margin-right: 20rpx;
		border-radius: 50%;
	}
	.name {
		font-size: 30rpx;
		font-weight: 600;
	}
	.meta {
		margin: 10rpx 0;
		font-size: 26rpx;
	}
}
.btns {
	position: fixed;
	bottom: 0;
	display: flex;
	justify-content: center;
	width: 100%;
	padding: 20rpx 0;
	background-color: #fff;
	.btn {
		width: 200rpx;
		padding: 16rpx 0;
		font-size: 28rpx;
		color: #fff;
		text-align: center;
	}
	.share {
		width: 200rpx;
		margin: 0;
		font-size: 28rpx;
		color: #fff;
		text-align: center;
		background-color: #75b4ff;
		border-radius: 0;
		border-top-left-radius: 40rpx;
		border-bottom-left-radius: 40rpx;
		border: 0;
	}
	.sign {
		background-color: $uni-primary;
		border-top-right-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
		&.signed {
			background-color: #ff7b32;
		}
		&.disabled {
			background-color: #d7d7d7;
		}
	}
}
</style>