jp-xqjy/pages/news/activityDetails.vue

<template>
	<view>
		<u-navbar :title="detail.title"></u-navbar>
		<!-- <view class="img">
			<img src="../../static/img/activity.png" alt="">
		</view> -->
		<view class="details">
			<view class="article-con"  v-html="detail.introduction" >
				  
			</view>
			<!-- <view class="detail-item">
				<view class="title">
					活动名称:
				</view>
				<view class="content" v-text="detail.title">
				</view>
			</view>
			<view class="detail-item">
				<view class="title">
					活动地址:
				</view>
				<view class="content">
					{{detail.address}}
				</view>
			</view>
			<view class="detail-item">
				<view class="title">
					报名时间:
				</view>
				<view class="content">
					{{detail.endTime}}截止
				</view>
			</view>
			<view class="detail-item">
				<view class="title">
					活动时间:
				</view>
				<view class="content">
					{{detail.activityStartTime}}~{{detail.activityEndTime}}
				</view>
			</view>
			<view class="detail-item">
				<view class="title">
					活动介绍:
				</view>
				<view class="content" v-html="detail.introduction">
				</view>
			</view>
			<view class="detail-item">
				<view class="title">
					特别说明:
				</view>
				<view class="content">
					{{detail.remark}}
				</view>
			</view> -->
		</view>
		<view>
			<u-toast ref="uToast" />
		</view>
		<view class="bottom">
			<u-modal v-model="show" :show-title="false" :content="content"
				:content-style="{color: '#101010',fontSize: '16px'}"	@confirm="confirm" confirm-color="#FF7C70" 
				:show-cancel-button="true" @cancel="cancel" ref="uModal" :async-close="true"></u-modal>
			<u-button v-if="detail.isShow && !detail.isJoin" @click="signUp">立即报名</u-button>
			<u-button v-if="detail.isShow && detail.isJoin" style="background-color: #CCCCCC;">已报名</u-button>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/news.js'
	
	export default {
		data() {
			return {
				navbarTitle: '',
				id: '',
				detail: {},
				userId: '',
				show: false,
				content: '您已报名成功!',
			}
		},
		onLoad(op) {
			if(op.id) {
				this.id = op.id;
				this.getActivityDetail();
			}
		},
		onShow() {
			if(this.carhelp.getPersonInfo()) {
				this.userId = this.carhelp.getPersonInfo().id;
			}
		},
		methods: {
			getActivityDetail() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.activityDetail({id:this.id}).then(response => {
					uni.hideLoading();
					
					this.detail = response.data;
					this.navbarTitle = this.detail.title;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			showToast() {
				this.$refs.uToast.show({
					title: '不在报名时段内!',
					type: 'warning '
				})
			},
			signUp() {
				if(this.userId) {
					var date = new Date();
					var oDate1 = new Date(this.detail.startTime);
					var oDate2 = new Date(this.detail.endTime);
					if(date.getTime() > oDate1.getTime() && date.getTime() < oDate2.getTime()){
						this.show = true;
					} else {
						this.showToast();
					}
				} else {
					uni.navigateTo({
						url:'../../pagesA/pages/login/index'
					})
				}
			},
			cancel() {
				this.show = false;
			},
			confirm() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.activitySave({id:this.id}).then(response => {
					uni.hideLoading();
					
					this.getActivityDetail();
					this.show = false;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.slot-wrap {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		flex: 1;
		position: absolute;
		left: 0;
		right: 0;
		height: 30px;
		text-align: center;
		flex-shrink: 0;
		
		.slot-title {
			color: rgb(96, 98, 102);
			font-size: 17px;
			left: 125px;
			right: 125px;
			width: 80%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
	
	.article-con{
		padding: 15px 0 35px;
		font-size: 14px;
		line-height: 28px;
		img{
			width: 100%;
			margin: 10px 0;
		}
	}
	
	/deep/.u-line-1 {
		overflow: inherit;
	}

	.img {
		margin: 32rpx;
		height: 404rpx;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.details {
		margin: 32rpx;
		font-size: 16px;
		color: #333333;
		padding-bottom: 70px;

		.detail-item {
			display: flex;
			margin-bottom: 24rpx;

			.title {
				// width: 26%;
			}

			.content {
				flex: 1;
				margin-left: 24rpx;
			}
		}
	}

	.bottom {
		width: 100%;
		height: 56px;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		display: flex;
	}
	
	.u-btn {
		width: 74.4%;
		line-height: 44px;
		border-radius: 50px;
		background-color: #FF5E5E;
		font-size: 16px;
		color: #ffffff;
		position: fixed;
		bottom: 8px;
		left: 0;
		right: 0;
	}

	/deep/.u-hairline-border:after {
		border: none;
	}
</style>