WenWuGuanJia/index_fenbao/HuoHuaLiYong/YanXue/XiangQing.vue

<template>
	<view class="box">
		<u-navbar :autoBack="true" bgColor="rgba(255,255,255,0)" :placeholder="true"></u-navbar>
		<!-- 日历 -->
		<view class="aaa">
			<!-- <uv-calendars readonly="true" :selected="selected" @monthSwitch="monthSwitch" mode="multiple" insert="false" lunar="true" /> -->
			<uv-calendars readonly="true" :insert="true" mode="range" lunar="true" :date="date" />
		</view>
		<view class="map_tit" style="margin-left: 90rpx">
			<image style="width: 211rpx; height: 52rpx" src="/static/img/right_img.png"></image>
			<view class="">路线明细</view>
			<image style="width: 211rpx; height: 52rpx" src="/static/img/left_img.png"></image>
		</view>
		<view class="ban_box">
			<view style="display: flex; justify-content: space-around; margin-top: 100rpx">
				<!-- <view class="lx_tn"></view> -->
				<view class="time_box">
					<view class="">开始时间:{{ list.start_time }}</view>
					<view class="">结束时间:{{ list.end_time }}</view>
					<!-- <view class="">活动名额:35人</view> -->
				</view>
			</view>
			<!-- 路线 -->

			<view class="lx_tit">
				<text style="color: #000000">路线：</text>
				<text v-for="(item, index) in content_list" :key="item.id">{{ item.title }}{{ index < content_list.length - 1 ? ' →' : '' }}</text>
			</view>

			<!-- 地图 -->
			<view style="height: 560rpx; overflow: hidden">
				<mapComponent :height="height" :markers="markers" :latitudeAndLongitude="latitudeAndLongitude"></mapComponent>
			</view>

			<!-- <view style="font-size: 28rpx; margin-top: 20rpx">福建省厦门市思明区寿山路与思明南路交叉正北方向12米</view> -->
			<view style="font-size: 28rpx; margin-top: 20rpx">活动描述：{{ list.desc }}</view>
			<view @click="signUp" class="ewm_box">立即报名</view>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			date: ['', ''],
			list: {},
			content_list: [],
			latitudeAndLongitude: {
				latitude: '24.503559',
				longitude: '118.13093'
			},
			// 绑定上dateList即可需
			dateList: [],
			selected: [],
			markers: [],
			height: '600'
		};
	},

	created() {
		// this.updateDateListForCurrentMonth();
		// this.dimension();
	},
	onLoad(o) {
		that = this;
		this.activityDetails(o.id);
	},
	methods: {
		activityDetails(id) {
			this.$api.activityDetails({ main_body_id: 1, id: id }, function (res) {
				if (res.code == 1) {
					// console.log(res, '研学详情');
					that.list = res.data;
					that.content_list = Object.values(that.list.content_list);
					if (that.content_list.length > 0) {
						that.markers = [];
						that.latitudeAndLongitude.latitude = that.content_list[0].latitude;
						that.latitudeAndLongitude.longitude = that.content_list[0].longitude;
						that.content_list.forEach((item, index) => {
							that.markers.push({
								id: parseFloat(item.id),
								latitude: parseFloat(item.latitude), //纬度
								longitude: parseFloat(item.longitude), //经度
								iconPath: item.thumbnail, //显示的图标
								width: 30, //宽
								height: 30, //高
								title: item.title, //标注点名
								label: {
									//自定义标记点上方的文本
									content: item.title, //文本
									color: '#444444', //文字颜色
									fontSize: 14, //文本大小
									bgColor: '#f1cdb2', // 背景颜色（半透明黑色）
									borderRadius: 5, // 边框圆角
									padding: [2, 2], // 内边距
									textAlign: 'center', // 文本对齐方式
									display: 'ALWAYS' // 始终显示标签
								},
								joinCluster: true
							});
						});
					}

					// console.log(that.markers, '地图');
					that.date = [];
					that.date.push(res.data.start_time.split(' ')[0]);
					that.date.push(res.data.end_time.split(' ')[0]);
					// console.log(that.date, '日历时间');
				}
			});
		},
		signUp() {
			if (this.list.status == 1) {
				uni.navigateTo({
					url: '/index_fenbao/HuoHuaLiYong/YanXue/baoMing?id=' + this.list.id
				});
			} else if (this.list.status == 2) {
				this.$common.errorToShow('当前活动' + this.list.status_text);
			} else if (this.list.status == 4) {
				this.$common.errorToShow('当前活动' + this.list.status_text);
			}
		}
		// updateDateListForCurrentMonth() {
		// 	const currentDate = new Date();
		// 	this.getSaturdaysOfMonth(currentDate.getFullYear(), currentDate.getMonth() + 1); // 月份是从 0 开始计数的
		// },

		// getSaturdaysOfMonth(year, month) {
		// 	const daysInMonth = new Date(year, month - 1, 0).getDate();

		// 	this.dateList = [];
		// 	for (let day = 1; day <= daysInMonth; day++) {
		// 		const date = new Date(year, month - 1, day);
		// 		if (date.getDay() === 0) {
		// 			this.dateList.push(date.toISOString().substring(0, 10));
		// 		}
		// 	}
		// 	console.log(this.dateList);
		// },

		// monthSwitch({ year, month }) {
		// 	this.getSaturdaysOfMonth(year, month);
		// 	this.dimension();
		// },
		// 周六标注点
		// dimension() {
		// 	let a = [];
		// 	this.dateList.forEach((item) => {
		// 		a.push({ date: item, info: '活动' });
		// 	});
		// 	this.selected = a;
		// 	console.log(this.selected);
		// }
	}
};
</script>

<style>
.box {
	width: 100%;
	padding-bottom: 50rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/xbg_2.png');
	background-size: 100% 100%;
	background-attachment: fixed;
	background-repeat: repeat-y;
	min-height: 100%;
	height: auto;
}
/deep/.uv-calendar__content.data-v-0d8ea832 {
	background-color: #fff9e9 !important;
}
.uv-calendar__content.data-v-513749fa {
	background-color: #fff9e9 !important;
}
.uv-calendar__backtoday.data-v-173dfca3 {
	display: none !important;
}
.uv-calendar__backtoday.data-v-5b1004fa {
	display: none !important;
}
.uv-calendar-item__weeks-box-item.data-v-101dc4d8 {
	height: 90rpx !important;
}
.uv-calendar-item__weeks-box-item.data-v-6a001a42 {
	height: 90rpx !important;
}
.map_tit {
	display: flex;
	align-items: center;
	margin-left: 60rpx;
	margin-top: 40rpx;
	font-size: 40rpx;
	font-family: Songti SC, Songti SC;
	font-weight: 900;
	line-height: 52rpx;
	color: #444444;
}
.ban_box {
	width: 692rpx;
	margin: auto;
	margin-top: 20rpx;
	padding: 40rpx 40rpx 130rpx 40rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/lx_bg.png');
	background-size: 100% 100%;
}
.lx_tn {
	width: 163rpx;
	height: 150rpx;
	background-image: url('/static/img/lx_ta.png');
	background-size: 100% 100%;
}
.lx_tit {
	color: #894514;
	margin: 20rpx 0 20rpx 10rpx;
	font-size: 30rpx;
	font-weight: 700;
}
.rili {
	width: 670rpx;
	height: 1054rpx;
	margin: auto;
}
.img {
	width: 100%;
	height: 100%;
}
.xwgg {
	width: 170rpx;
	height: 89rpx;
	margin: auto;
	margin-top: 70rpx;
	font-size: 32rpx;
	font-weight: 900;
	text-align: center;
	line-height: 89rpx;
	letter-spacing: 1px;
	color: #feece3;
	background-image: url('/static/img/title2.png');
	background-size: 100% 100%;
}

.time_box {
	height: 96rpx;
	font-size: 32rpx;
	font-weight: 400;
	color: #894514;
	line-height: 48rpx;
}

.map_box {
	width: 670rpx;
	height: 670rpx;
	margin: auto;
	margin-top: 40rpx;
	overflow: hidden;
	background: #fcfdfd;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	opacity: 1;
}
.ewm_box {
	height: 80rpx;
	background-color: #efb781;
	border-radius: 35rpx;
	font-size: 32rpx;
	text-align: center;
	line-height: 80rpx;
	margin: 20rpx 32rpx 0 32rpx;
}
</style>