JianjianStreet-H5/pages/my/canyu-detail.vue

<template>
	<view>
		<view class="active-card">
			<u--image :showLoading="true" :src="dataInfo.photo" width="100%" height="314rpx"></u--image>
			<view class="active-title">{{dataInfo.title}}</view>
			<view class="active-time">
				<!-- <u-icon size="40" name="https://cdn.uviewui.com/uview/example/button.png"></u-icon> -->
				<text>{{dataInfo.activityTime}}</text>
			</view>
			<view class="active-add">
				<text>{{dataInfo.place}}</text>
			</view>
			<view class="active-menu">
				<view class="menu-price">
					<text class="unit">￥</text>
					<text>{{dataInfo.money}}</text>
				</view>
			</view>
		</view>
		<view class="contnet">
			<u-parse :content="dataInfo.details"></u-parse>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				fromPage:null,
				dataInfo:{},
				id:'',
				src: '', //require('@/static/img/course-img.png'),
				baomingStyle: {
					fontSize:"30rpx",
					fontWeight:"700",
					height: "100rpx"
				}
			}
		},
		onLoad(e) {
			this.getactivityFindById('1584923974407417857');
		},
		// 隐藏微信h5的标题栏
		onReady() {
			this.$com.displayNav()
		},
		methods:{
			
			
			getactivityFindById(id){
				uni.showLoading()
				this.$api('activityFindById',{id})
				.then(res=>{
					uni.hideLoading()
					if(res.code == 200){
						this.dataInfo = res.result;
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.active-card {
		background: #ffffff;
		padding: 20rpx 29rpx 13rpx;
		border-bottom: 20rpx solid #F5F5F5;
		
		.active-title {
			font-size: 30rpx;
			color: #000;
			font-weight: 700;
			margin-top: 20rpx;
			line-height: 40rpx;
		}
		
		.active-time {
			color: #707070;
			font-size: 26rpx;
			margin: 20rpx 0;
		}
		.active-add {
			color: #707070;
			font-size: 26rpx;
		}
		
		.active-menu {
			margin-top: 21rpx;
			padding: 0 10rpx;
			.menu-price {
				font-weight: 700;
				font-size: 40rpx;
				color: #D33D3E;
				.unit {
					font-size: 30rpx;
				}
			}
			.menu-btn {
				width: 213rpx;
				height: 79rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #ED1450;
				color: #FFFFFF;
				font-size: 26rpx;
				border-radius: 40rpx;
			}
		}
		
	}
	
	.contnet {
		padding: 20rpx 20rpx 100rpx;
	}
	
	.btn-box {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
</style>