pages/sub_index/activeDetails.vue

<template>
	<view class="activeDetails">
		<!-- #ifndef H5 -->
		<view class="bgColor"></view>
		<!-- #endif -->
		<view v-if="!show">
			<view class="activeDetails-title">
				<text class="activeDetails-title-title">{{article.title}}</text>
				<view class="activeDetails-title-author">
					<text class="activeDetails-title-author-author">{{article.author}}</text>
					<text class="activeDetails-title-author-date">{{creatime}}</text>
					<view></view>
					<view class="activeDetails-title-author-watch">
						<u-icon name="eye" color="#9A9A9A" size="28"></u-icon>
						<text>{{article.hits}}</text>
					</view>
				</view>
			</view>
			<view class="richText">
				<u-parse :html="article.content" :lazy-load="true"></u-parse>
			</view>
			<!-- <u-button :custom-style="activeDetailsBtn" @click="join" v-if="isShowBtn">报名</u-button> -->
		</view>
		<u-empty text="活动不存在" mode="page" font-size="40" :show="show" margin-top="300"></u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				article: {},
				creatime: "",
				activeDetailsBtn: {
					width: "650rpx",
					backgroundColor: "#30A8E1",
					color: " #FFFFFF",
					padding: "50rpx 0 ",
					position: "fixed",
					bottom: "30rpx",
					left: "50%",
					transform: "translateX(-50%)",
					isShowBtn:false
				},
				show: true
			}
		},
		methods: {
			join(){
				uni.showToast({
					title:"此活动暂时无法报名",
					icon:"none",
					duration:1500
				})
			},
			getArticle(id) {
				let that = this
				that.$u.post("/i/activity/" + id).then(res => {
					that.show = false
					that.article = res.data
					//修改发布时间
					let time = new Date(res.data.createtime.substr(0, 19))
					//console.log(time)
					let year = time.getFullYear()
					let month = (time.getMonth() + 1 )> 10 ? time.getMonth() + 1 : '0' + (time.getMonth() + 1 )
					let date = time.getDay()
					let hour = time.getHours() >10 ? time.getHours() : '0' +  time.getHours()
					let min = time.getMinutes() >10 ? time.getMinutes() : '0' +  time.getMinutes()
					let sec = time.getSeconds() >10 ? time.getSeconds() : '0' +  time.getSeconds()
					if (Number(date) < 10) {
						date = "0" + date
					}
					let newtime = year + '-' + month + '-' + date + ' ' + hour + ':' + min + ':' + sec
					let now = Number(new Date().getTime())
					let old = Number(new Date(res.data.createtime.substr(0, 19)).getTime())
					let minus = Math.floor((now - old) / (60 * 60 * 1000))
					//console.log(minus)
					if (minus > 24) {
						that.creatime = newtime
					} else if(minus == 0){
						that.creatime = "刚刚"
					} else {
						that.creatime = minus + "小时前"
					}
					//修改富文本图片样式
					// const regex = new RegExp('<img', 'gi');
					// res.data.content = res.data.content.replace(regex, `<img style=""`)
				}).catch(res=>{
					that.show = true
				})
			}
		},
		onLoad(option) {
			// console.log(option.id)
			let type = option.type
			if(type == 'OnlineActivities'){
				this.isShowBtn = true
			}else{
				this.isShowBtn = false
			}
			this.getArticle(option.id)
		}
	}
</script>

<style lang="scss" scoped>
	.richText {
		padding: 20rpx 20rpx 150rpx;
		text-align: justify;
	}
	page{
		background-color: #FFFFFF;
	}
	/* #ifndef H5 */
	.bgColor {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #FFFFFF;
		z-index: -1;
	}
	/* #endif */
	

	.activeDetails {
		font-family: "PingFang-SC-Medium";
		overflow: hidden;
		background-color: #FFFFFF;

		&-btn {
			width: 650rpx;
			background-color: #30A8E1;
			color: #FFFFFF;
			padding: 50rpx 0;
			position: fixed;
			bottom: 30rpx;
			left: 50%;
			transform: translateX(-50%);
		}

		&-title {
			display: flex;
			flex-direction: column;
			padding: 20rpx;
			background-color: #FFFFFF;

			&-title {
				color: #343434;
				font-size: 30rpx;
			}

			&-author {
				color: #9A9A9A;
				font-size: 25rpx;
				display: flex;
				justify-content: space-between;
				margin-top: 10rpx;
			}
		}

		&-condition {
			background-color: #FFFFFF;
			padding: 20rpx;

			&-con {
				&-con {
					color: #666666;
					font-size: 28rpx;
				}

				&-title {
					color: #333333;
					font-size: 28rpx;
					margin-right: 10rpx;
				}
			}

			&-lay {
				display: flex;
				color: #666666;

				&-con {
					display: flex;
					flex-direction: column;
				}
			}
		}

		&-introduce {
			background-color: #FFFFFF;
			display: flex;
			font-size: 28rpx;
			flex-direction: column;
			padding: 0 20rpx 150rpx;

			&-title {
				color: #333333;
				margin: 30rpx 0;
			}

			&-con {
				color: #666666;
			}
		}
	}
</style>