trunkweb/pages/Biomedicines/Biomedicines.vue

<template>
	<view class="common">
		<!-- table 切换 -->
		<view class="content">
			<!-- table 切换 -->
			<view class="uni_tab_bar">
				<view class="uni_swiper_tab order_top">
					<block v-for="(tabBar,index) in headtabBars" :key="tabBar.id">
						<view class="swiper_tab_list" :class="{'newactive': headtabIndex==tabBar.id}"
							@click="headtoggleTab(tabBar.id)">
							{{tabBar.name}}
							<view class="swiper_tab_line">
							</view>
						</view>
					</block>
				</view>
			</view>
			<!--内容区域 -->
		</view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map id="map" style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude"
					:markers="covers" @markertap="markertap" :circles="circles">
				</map>
			</view>
		</view>
		<view class="content">
			<!-- table 切换 -->
			<view class="uni_tab_bar">
				<view class="uni_swiper_tab order_top">
					<block v-for="(tabBar,index) in tabBars" :key="tabBar.id">
						<view class="swiper_tab_list" :class="{'active': tabIndex==tabBar.id}"
							@click="toggleTab(tabBar.id)">
							{{tabBar.name}}
							<view class="swiper_tab_line">
							</view>
						</view>
					</block>
				</view>
			</view>
			<!--内容区域 -->
		</view>
		<view class="">
			<!-- 医药产业 -->
			<Bioindustry v-show="tabIndex==0"></Bioindustry>
			<!-- 医药招商 -->
			<BiologicalMerchants v-show="tabIndex==2"></BiologicalMerchants>
		</view>


		<!-- puop 弹出层 -->
		<u-popup v-model="show" mode="top">
			<view class="puop">
				<view class="puopItem" v-for=" item in pouop" :key="item.id">
					<text :class="{'active':item.id==puopInedex}">{{item.name}}</text>
				</view>
			</view>
		</u-popup>

	</view>

</template>

<script>
	import Table from "../../component/table.vue"
	// 产业基础
	import Bioindustry from "../../component/Bioindustry.vue"
	// 招商领域
	import BiologicalMerchants from "../../component/BiologicalMerchants.vue"
	export default {
		components: {
			Table,
			Bioindustry,
			BiologicalMerchants
		},
		data() {
			return {
				// 弹出层控制
				show: false,
				mapContext: '',
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					id: 0,
					latitude: 39.909,
					longitude: 116.39742,
					width: 20,
					height: 30,
					label: {
						content: "北川县40",
						textAlign: "center",
						color: "#FFFFFF",
						fontSize: 15
					},

				}],

				// table切换数据
				tabIndex: 2, //选中标签栏的序列
				tabBars: [{
						name: '产业基础',
						id: '0',
						title: '国政策'
					},
					{
						name: '发展目标',
						id: '1',
						title: '省政策'
					},
					{
						name: '招商领域',
						id: '2',
						title: '使政策'
					},
					{
						name: '平台载体',
						id: '3',
						title: '县政策'
					},
				],
				// 弹出框数据
				puopInedex: 1,
				pouop: [{
						name: '核心技术应用',
						id: '0',

					},
					{
						name: '生物医药',
						id: '1',

					},
					{
						name: '轻工纺织',
						id: '2',

					},
				],
				// 头部table数据
				headtabIndex: 1, //选中标签栏的序列
				headtabBars: [{
						name: '支柱产业',
						id: '0',
					},
					{
						name: '生物医药',
						id: '1',
					}
				],
			}
		},
		methods: {
			// 内容部分的table切换
			toggleTab(id) {
				this.tabIndex = id;
			},
			// 拿取坐标点ID
			markertap(e) {
				console.log(e);
			},
			// 控制puop  头部table切换
			headtoggleTab(id) {
				this.headtabIndex = id;
				if (this.headtabIndex == 1) {
					this.show = !this.show
				}
			}

		},
		//页面初始化
		onReady() {
			console.log(this.mapContext);
		},
		onLoad() {
			// 获取地图实例
			this.mapContext = uni.createMapContext("map")
			// maker点的聚合
			this.mapContext.includePoints({
				padding: [100, 40, 100, 40],
				points: [{
						latitude: 39.909,
						longitude: 116.39742,

					},
					{
						latitude: 39.90,
						longitude: 116.39,
					}
				]
			})
		}

	}
</script>

<style lang="scss">
	@import "../../styles/common.scss"
</style>