yunshengtai-uniapp/pages/home/activityDetail/index.vue

<template>
	<view class="activity-detail">
		<view class="head_box">
		  <cu-custom :isBack="true" :bgColor="'transparent'"></cu-custom>
		</view>
		<view class="activity-banner">
			<image :src="detail.images"></image>
		</view>
		<view class="title-box">
			<view class="title">{{detail.name}}</view>
			<view class="price">¥{{detail.price || 0}}</view>
		</view>
		<view class="activity-info">
			<view class="title">活动介绍</view>
			<view class="address acea-row">
				<image src="../../../static/images/address.png"></image>
				<view class="label line1" @click="openMap()">活动地点：{{detail.address || ''}}</view>
			</view>
			<view class="address acea-row">
				<image src="../../../static/images/time.png"></image>
				<view class="label line1">活动时间：{{detail.activityStartTime || ''}}</view>
			</view>
			<view class="address acea-row">
				<image src="../../../static/images/price.png"></image>
				<view class="label line1">活动费用：{{detail.price || ''}}</view>
			</view>
			<view class="info-content">
				<rich-text :nodes="detail.content"></rich-text>
			</view>
			<view class="sign-btn" v-if="detail.status == 1" @click="toSignPage">立即报名</view>
			<view class="cancel-btn" v-if="detail.status == 2">报名截止</view>
			<view class="cancel-btn" v-if="detail.status == 3">活动结束</view>
			<view class="cancel-btn" v-if="detail.status == 0">等待报名</view>
		</view>
	</view>
</template>

<script>
	import { getActivityInfo } from '@/api/home.js'
	import { formatRichText } from '@/utils/util.js'
	export default{
		data(){
			return {
				id: '',
				detail: {}
			}
		},
		mounted() {
			this.id = this.$yroute.query.id
			this.getDetail()
		},
		methods:{
			getDetail(){
				getActivityInfo(this.id).then((res)=>{
					if(res.success){
						res.data.content = formatRichText(res.data.content)
						this.detail = res.data
					} else{
						uni.showToast({
							title: '服务器错误',
							icon: 'none'
						})
					}
				})
			},
			openMap(){
				uni.openLocation({
					latitude: this.detail.latitude,
					longitude: this.detail.longitude,
					success: function () {
						console.log('success');
					}
				});
			},
			toSignPage() {
			 uni.navigateTo({
			   url: '/pages/activity/signIn/index?id=' + this.detail.id
			 });
			},
		}
	}
</script>

<style lang="less">
.cuIcon-back{
	color: #fff;
}
.activity-detail{
	width: 100%;
	position: relative;
	.activity-banner{
		width: 100%;
		height: 750rpx;
		position: absolute;
		top: 0;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.title-box{
		width: 100%;
		padding: 60rpx 40rpx 12rpx;
		border-radius: 34rpx 34rpx 0px 0px;
		background: #fff;
		border-bottom: 26rpx solid #F7F7F7;
		position: relative;
		top: 536rpx;
		left: 0;
		.title{
			color: #212121;
			font-size: 38rpx;
			margin-bottom: 34rpx;
		}
		.price{
			color: #E70012;
			font-size: 44rpx;
			line-height: 58rpx;
		}
	}
	.activity-info{
		width: 100%;
		padding: 52rpx 40rpx 32rpx;
		background: #fff;
		position: absolute;
		top: 894rpx;
		left: 0;
		.title{
			font-size: 40rpx;
			color: #000;
			margin-bottom: 34rpx;
		}
		.address{
			font-size: 28rpx;
			color: #707070;
			margin-bottom: 20rpx;
			.label{
				width: calc(100% - 70rpx);
			}
			image{
				width: 30rpx;
				height: 30rpx;
				margin-right: 22rpx;
			}
		}
		.sign-btn{
			width: 100%;
			height: 92rpx;
			font-size: 40rpx;
			color: #fff;
			line-height: 92rpx;
			text-align: center;
			background: #212121;
			margin-top: 52rpx;
		}
		.cancel-btn{
			background: #F4F4F4;
			color: #868686;
		}
	}
}

</style>