WenWuGuanJia/index_fenbao/XuanJiangYuan/xq_page.vue

<template>
	<view class="box">
		<u-navbar :title="details.title" autoBack :placeholder="true" bgColor="#fee1b9"></u-navbar>
		<view class="ban">
			<view class="" style="margin-bottom: 30rpx">
				<u-swiper :list="bannerlist" imgMode="aspectFill" :height="180" :autoplay="true" :circular="true"></u-swiper>
			</view>
			<!--  -->
			<view class="xq_tit">{{details.title}}</view>
			<view class="xq_js">{{details.desc}}</view>
			<!-- 报名 -->
			<view @click="goRegister()" class="bm_btn">立即报名</view>
			<view class="ld">活动详情</view>
			<view class="hd_xq">
				<u-parse :content="details.content"></u-parse>
				<!-- <div>
					<text>活动时间:</text>
					<text>2024年12月18日</text>
				</div>
				<div>
					<text>活动起点:</text>
					<text>翔安区荻花洲</text>
				</div>
				<div>
					<text>报名费用:</text>
					<text>免费</text>
				</div>
				<div style="margin-bottom: 40rpx">
					<text>活动流程:</text>
					<text>...</text>
				</div> -->
			</view>
			<view class="ld" style="margin-top;: 40rpx">活动日程</view>
			<view class="rc_box">
				<view style="margin-top: 8rpx">
					<u-icon name="clock" color="#57bdc3" size="12"></u-icon>
				</view>
				<view style="margin-left: 30rpx; color: black">
					<view class="">起跑时间</view>
					<view class="star_time">8:00 AM</view>
				</view>
			</view>
			<!--  -->
			<view class="rc_box">
				<view class="yuan"></view>
				<view style="margin-left: 30rpx; color: black">
					<view class="">路线站点</view>
					<view class="star_time">沿途站点</view>
				</view>
			</view>
			<!--  -->
			<view class="rc_box">
				<view class="yuan"></view>
				<view style="margin-left: 30rpx; color: black">
					<view class="">文物讲解</view>
					<view class="star_time">每个站点的文物讲解</view>
				</view>
			</view>
			<!--  -->
			<view class="rc_box">
				<view style="margin-top: 8rpx">
					<u-icon name="clock" color="#57bdc3" size="12"></u-icon>
				</view>
				<view style="margin-left: 30rpx; color: black">
					<view class="">终点庆祝</view>
					<view class="star_time">8:00 AM</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
//全局定义
let that;
export default {
	data() {
		return {
			details: [],
			bannerlist: []
		};
	},
	onLoad(option) {
		//启动时赋值
		that = this;
		console.log(option);
		that.getActivityDetails(option.id);
	},
	methods: {
		getActivityDetails(id) {
			this.$api.activityDetails(
				{
					id: id
				},
				data => {
					if (data.code == 0) {
						that.$common.errorToShow(data.msg);
						return;
					} else {
						that.details = data.data;
						that.bannerlist = data.data.images;
						// console.log(that.details);
					}
				}
			);
		},
		goRegister() {
			let id = that.details.id;
			let title = that.details.title;
			let desc = that.details.desc;
			uni.navigateTo({
				url: '/index_fenbao/XuanJiangYuan/bm_page?id=' + id + '&title=' + title + '&desc=' + desc
			});
		}
	}
};
</script>

<style>
.box {
	height: auto;
	width: 100%;
	padding-bottom: 50rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/gj_bg.png');
	background-repeat: repeat-y;
	background-size: 100%;
}
.ban {
	width: 92%;
	margin: auto;
}
.xq_tit {
	color: black;
	font-size: 32rpx;
	font-weight: 700;
}
.xq_js {
	color: black;
	font-size: 28rpx;
	margin-top: 10rpx;
	line-height: 40rpx;
	height: 160rpx;
	overflow: scroll;
}
.bm_btn {
	width: 100%;
	height: 80rpx;
	font-size: 30rpx;
	line-height: 80rpx;
	text-align: center;
	color: #ffffff;
	border-radius: 10rpx;
	background-color: #fb5a02;
	margin-bottom: 60rpx;
}
.ld {
	font-size: 30rpx;
	font-weight: 700;
	margin-bottom: 20rpx;
}
.hd_xq {
	color: black;
	line-height: 40rpx;
	font-size: 26rpx;
	margin: 20rpx;
}
.rc_box {
	display: flex;
	margin-left: 10rpx;
	margin-top: 20rpx;
}
.star_time {
	color: #928f8f;
	font-size: 26rpx;
	line-height: 45rpx;
}
.yuan {
	width: 16rpx;
	height: 16rpx;
	border-radius: 50%;
	margin-top: 10rpx;
	border: 2rpx solid #57bdc3;
}
</style>