You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
208 lines
4.2 KiB
208 lines
4.2 KiB
<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=""> |
|
<!-- 核产业 --> |
|
<NuclearIndustry v-show="tabIndex==0"></NuclearIndustry> |
|
<!-- 核招商 --> |
|
<NuclearInvestment v-show="tabIndex==2"></NuclearInvestment> |
|
</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 NuclearIndustry from "../../component/NuclearIndustry.vue" |
|
// 核招商领域 |
|
import NuclearInvestment from "../../component/NuclearInvestment.vue" |
|
export default { |
|
components: { |
|
Table, |
|
NuclearIndustry, |
|
NuclearInvestment |
|
}, |
|
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:0, |
|
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>
|
|
|