FE_preschoolEdu_miniProgram/order/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">进行中</view>
			</view>
			<view class="line">
				<view class="label">人数限制：</view>
				<view class="val">{{ form.quantityLimit }}</view>
			</view>
			<view class="line">
				<view class="label">举办时间：</view>
				<view class="val">{{ form.playStartTime + ' ~ ' + form.playEndTime }}</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">(0/{{ form.quantityLimit }})</view>
			</view>
		</view>
		
		<ul class="tab">
			<li v-for="(tab, i) in tabs" :class="{active: curTab === tab.id}" @click="tabChange(tab)">{{ tab.name }}</li>
		</ul>
		
		<view v-if="!curTab" class="detail">
			<mp-html :content="form.description"/>
		</view>
		<view v-else class="list">
			
		</view>
		
		<view class="btns">
			<view class="btn share">分享</view>
			<view class="btn sign">立刻报名</view>
		</view>
	</view>
</template>

<script>
	import { getCompetition } from '@/apis/modules/activity.js'
	export default {
		data() {
			return {
				id: '',
				curTab: 0,
				tabs: [
					{
						name: '活动详情',
						id: 0
					},
					{
						name: '活动通知',
						id: 1
					},
				],
				form: {
					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;'
				}
			}
		},
		onShow() {
			const pages = getCurrentPages()
			const { options } = pages[pages.length - 1]
			this.id = options.id
			this.getInfo()
		},
		methods: {
			// 获取详情
			getInfo() {
				uni.showLoading({
					title: '加载中'
				})
				getCompetition(this.id).then(res => {
					const data = res.competition
					data.whetherToShowApplicants === '1' && this.tabs.push({
						name: '已报名人员',
						id: 2
					})
					this.form = data
					uni.hideLoading()
				}).catch(e => {
					uni.hideLoading()
				})
			},
			// tab切换
			tabChange(tab) {
				this.curTab = tab.id
			},
			// 下载附件
			download(item) {
				uni.setStorageSync('files', {
					copyWriting: this.form.mall.productName,
					fileName: [item.fileName],
					urls: [item.filePath]
				})
				this.$util.to(`/team/send/send`)
			},
		}
	}
</script>

<style scoped lang="scss">
.wrap {
	padding-bottom: 140rpx;
}
.banner {
	.pic {
		width: 100%;
	}
}
.info {
	position: relative;
	padding: 20rpx;
	margin: -150rpx 30rpx 30rpx;
	background-color: #fff;
	border-radius: 8px;
	.line {
		display: flex;
		align-items: center;
		margin: 20rpx 0;
	}
	.label {
		min-width: 180rpx;
		font-size: 28rpx;
	}
	.val {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
	}
}
.detail {
	padding: 34rpx 32rpx;
	margin: 20rpx;
	border-radius: 20px;
	background-color: #fff;
}
.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 {
		background-color: #75b4ff;
		border-top-left-radius: 40rpx;
		border-bottom-left-radius: 40rpx;
	}
	.sign {
		background-color: $uni-primary;
		border-top-right-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
	}
}
</style>