WenWuGuanJia/index_fenbao/fuWu/diTu/diTu.vue

<template>
	<view class="box">
		<u-navbar :autoBack="true" title="文物地图" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#000000"></u-navbar>
		<view class="fiex_top">
			<view class="top_box">
				<view @click="showqy = true" class="tit_box">
					<view class="">{{ qyVal ? qyVal : '区域' }}</view>
					<view class="">
						<image style="width: 40rpx; height: 40rpx" src="/static/img/map_more.png"></image>
					</view>
				</view>
				<view class="tit_box" @click="showlx = true">
					<view class="">{{ lxVal ? lxVal : '类型' }}</view>
					<view class="">
						<image style="width: 40rpx; height: 40rpx" src="/static/img/map_more.png"></image>
					</view>
				</view>
				<view class="tit_box" @click="showjb = true">
					<view class="">{{ jbVal ? jbVal : '级别' }}</view>
					<view class="">
						<image style="width: 40rpx; height: 40rpx" src="/static/img/map_more.png"></image>
					</view>
				</view>
			</view>

			<view class="" style="border: 1px solid #eba869; width: 670rpx; margin: auto; margin-top: 32rpx">
				<u-search
					bgColor="transparent"
					v-model="value"
					shape="square"
					:showAction="true"
					actionText="搜索"
					@custom="searchBtn"
					:actionStyle="{ color: '#985741', fontSize: '28rpx', fontWeight: 'bold', backgroundColor: '#fff9e9' }"
				></u-search>
			</view>
		</view>
		<!-- 选择 -->
		<!-- 选择 -->
		<u-picker keyName="title" :show="showqy" @cancel="showqy = false" :columns="columnsQy" @close="close" :closeOnClickOverlay="true" @confirm="qyBtn"></u-picker>
		<u-picker keyName="title" :show="showlx" @cancel="showlx = false" :columns="columnsLx" @close="close" :closeOnClickOverlay="true" @confirm="lxBtn"></u-picker>
		<u-picker keyName="title" :show="showjb" @cancel="showjb = false" :columns="columnsJb" @close="close" :closeOnClickOverlay="true" @confirm="jbBtn"></u-picker>
		<!-- 地图 -->
		<view class="map_box">
			<mapComponent :markers="markers" :height="height" :latitudeAndLongitude="latitudeAndLongitude"></mapComponent>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			lon: '',
			lat: '',
			pageSize: 1000,
			value: '',
			latitudeAndLongitude: {
				latitude: '24.46947',
				longitude: '118.13673'
			},
			height: '1360',
			showqy: false,
			showlx: false,
			showjb: false,
			levelId: '',
			cr_typeId: '',
			regionId: '',
			qyVal: '',
			lxVal: '',
			jbVal: '',
			columnsQy: [],
			columnsLx: [],
			columnsJb: [],
			markers: []
		};
	},
	onLoad(o) {
		that = this;
		this.getCulturalRelicCategory();
		// 附近文物
		if (o.pageSize && o.longitude) {
			this.pageSize = o.pageSize;
			this.lon = o.longitude;
			this.lat = o.latitude;
		}

		this.getContentList(o);
	},
	methods: {
		// 文物分类列表
		getCulturalRelicCategory() {
			this.$api.getCulturalRelicCategory({ main_body_id: 1 }, function (res) {
				// console.log(res, 565656);

				that.columnsQy = [res.data.region_list];
				that.columnsLx = [res.data.cr_type_list];
				that.columnsJb = [res.data.level_list];
			});
		},
		getContentList(o) {
			this.$api.getContentList(
				{
					model_id: '1',
					main_body_id: '1',
					page: 1,
					pageSize: this.pageSize,
					level: this.levelId,
					cr_type: this.cr_typeId,
					region: this.regionId,
					keywords: this.value,
					longitude: this.lon,
					latitude: this.lat
				},
				function (res) {
					that.markers = [];
					// that.latitudeAndLongitude.latitude = res.data[0].latitude;
					// that.latitudeAndLongitude.longitude = res.data[0].longitude;
					res.data.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
						});
					});
					// 数据处理完毕，隐藏加载提示
					// uni.hideLoading();
				}
			);
		},

		lxBtn(e) {
			// console.log(e, 'eeeeeee');
			this.lxVal = e.value[0].title;
			this.showlx = false;
			this.markers = [];
			// this.page = 1;
			this.cr_typeId = e.value[0].id;

			this.getContentList();
		},
		qyBtn(e) {
			this.qyVal = e.value[0].title;
			this.showqy = false;
			this.markers = [];
			// this.page = 1;
			this.regionId = e.value[0].id;
			this.getContentList();
		},
		jbBtn(e) {
			this.jbVal = e.value[0].title;
			this.showjb = false;
			this.markers = [];
			// this.page = 1;
			this.levelId = e.value[0].id;
			this.getContentList();
		},
		searchBtn() {
			this.qyVal = '';
			this.lxVal = '';
			this.jbVal = '';
			this.levelId = '';
			this.cr_typeId = '';
			this.regionId = '';
			this.page = 1;
			this.getContentList();
		},
		close() {
			this.showqy = false;
			this.showlx = false;
			this.showjb = false;
		}
	}
};
</script>

<style>
.box {
	height: 100%;
}
page {
	height: 100%;
	width: 100%;
	background-color: #fff9e9;
}
.top_box {
	display: flex;
	width: 90%;
	margin: auto;
	justify-content: space-between;
}
.tit_box {
	display: flex;
	align-items: center;
	text-align: center;
	width: 197rpx;
	height: 56rpx;

	justify-content: space-around;
	border: 2rpx solid #eba869;
}
.map_box {
	width: 100%;
	height: 1110rpx;
	margin: auto;
	margin-top: 20rpx;
	/* overflow: hidden; */
	background: #fcfdfd;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
}
.u-search__action--active.data-v-0a306a29 {
	height: 60rpx !important;
	line-height: 60rpx !important;
}
.u-search__action--active.data-v-2d141374 {
	height: 60rpx !important;
	line-height: 60rpx !important;
}
</style>