添加列表模式

src/data.js

@@ -1297,7 +1297,22 @@ let types = [{ title: '全部', children: Object.keys(data) }].concat(Object.key
   }
 }))
 
-modules.forEach(item => {
+// [{
+//   title: '后环社区',
+//   children: [24, 25],
+//   center: [113.60437, 22.36556],
+//   zoom: 17
+// }]
+let all = [
+  {
+    title: '全部',
+    children: Object.keys(data),
+    center: [113.60437, 22.36556],
+    zoom: 13
+  }
+].concat(modules)
+
+all.forEach(item => {
   item.children = item.children.map(index => {
     data[index].parent = item.title
     data[index].tagType = TAG[data[index].type]
@@ -1318,7 +1333,7 @@ function findModel (item) {
 
 export default {
   data: data,
-  modules: modules,
+  modules: all,
   types: types,
   findModel
 }

src/pages/layout/aside/index.vue

@@ -79,17 +79,33 @@ export default {
   },
   methods: {
     handleChange (type) {
-      if (this.$route.params.title !== type.title) {
-        this.$router.push({name: 'map', params: {title: type.title}})
+      let route = this.$route
+      if (route.name === 'map' || route.name === 'info') {
+        if (route.params.title !== type.title) {
+          this.$router.push({name: 'map', params: {title: type.title}})
+        }
+      } else {
+        this.$router.push({
+          name: 'list',
+          params: this.showTab === 'type' ? {title: '全部', type: type.title} : {title: type.title, type: '全部'}
+        })
       }
     },
     checkHandle (type, item) {
-      this.$router.push({name: 'info',
-        params: {
-          title: type.title,
-          show: item.name
-        }
-      })
+      let route = this.$route
+      if (route.name === 'map' || route.name === 'info') {
+        this.$router.push({name: 'info',
+          params: {
+            title: type.title,
+            show: item.name
+          }
+        })
+      } else {
+        this.$router.push({
+          name: 'item',
+          params: this.showTab === 'type' ? {title: '全部', type: type.title, show: item.name} : {title: type.title, type: '全部', show: item.name}
+        })
+      }
     }
   },
   watch: {
@@ -99,11 +115,12 @@ export default {
       handler (newVal) {
         setTimeout(() => {
           this.showTitle = newVal.params.title
-
-          if (this.types.find(item => item.title === this.showTitle)) {
-            this.showTab = 'type'
-          } else {
-            this.showTab = 'module'
+          if (this.showTitle !== '全部') {
+            if (this.types.find(item => item.title === this.showTitle)) {
+              this.showTab = 'type'
+            } else {
+              this.showTab = 'module'
+            }
           }
         })
       }

src/pages/list/index.vue

@@ -0,0 +1,196 @@
+<!--  -->
+<template>
+<div class='layout' @touchmove.prevent>
+  <div class="nav-top">
+    <div class="nav-name">
+      <router-link :to="{name:'map',params:{title:$route.params.title}}" class="go-map" >
+        <i class="iconfont icon-left"></i><span>地图模式</span>
+      </router-link>
+      <div class="nav-tag"  v-if="currentArea.link">
+        <span class="fs">俯视整个{{currentArea.title}}</span>
+        <span @click="goto(currentArea)" class="hpsj">航拍视角</span>
+      </div>
+    </div>
+    <div class="area">
+      <span class="txt-bold">区域：</span>
+      <ul>
+        <li :class="{active:item==$route.params.title}" @click="$router.push({name: 'list', params: {title: item}})" v-for="(item,i) in area" :key="i">{{item}}</li>
+      </ul>
+    </div>
+    <div class="types">
+      <span class="txt-bold">类型：</span>
+       <ul>
+        <li :class="{active:item==$route.params.type}"  @click="$router.push({name: 'list', params: {type: item}})" v-for="(item,i) in types" :key="i">{{item}}</li>
+      </ul>
+    </div>
+  </div>
+  <div class="list-body" >
+    <div class="list-con" ref="listcon" :style="{height: (wh.height - topCap)+ 'px'}">
+      <div @click="goto(item)" :class="{card:true,'card-animation':i===whichitem}" :ref="`list${i}`" v-for="(item, i) in list" :key="i">
+        <div class="card-img">
+          <img src="https://pro.modao.cc/uploads4/images/3099/30999897/v2_pnhd3s.jpg" alt="">
+          <div class="card-mask" v-if="!item.link&&!item.data">
+            <p>正在拍摄<br/>敬请期待</p>
+            <div class="show-type">
+              <i v-for="(iType,idxT) in item.showType" :key="idxT" class="iconfont" :class="'icon-'+iType"></i>
+            </div>
+          </div>
+        </div>
+        <div class="card-txt">
+          <div class="title">
+            <i class="iconfont" :class="'icon-'+item.type"></i>
+            <span>{{item.name}}</span>
+          </div>
+          <div class="tag">
+            <span class="tag-span" v-for="(sub,idx) in item.tags" :key="idx">{{sub}}</span>
+          </div>
+          <div class="address">
+            <span>{{item.address}}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <imageQuery :screens="screens" @exitHandle="screens = null" />
+
+</div>
+</template>
+
+<script>
+// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+// 例如：import 《组件名称》 from '《组件路径》';
+import browser from '@/util/browser'
+import data from '@/data'
+import imageQuery from '@/pages/imageQuery'
+
+const wh = {width: window.innerWidth, height: window.innerHeight}
+const fixScroll = 40
+const topCap = 168
+export default {
+// import引入的组件需要注入到对象中才能使用
+  components: {imageQuery},
+  data () {
+    // 这里存放数据
+    return {
+      ismobile: browser.mobile,
+      wh,
+      showAside: false,
+      whichitem: '',
+      list: [],
+      fixScroll,
+      topCap,
+      currentArea: {},
+      screens: null
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {
+    area () {
+      return data.modules.map(item => {
+        return item.title
+      })
+    },
+    types () {
+      return data.types.map(item => {
+        return item.title
+      })
+    }
+  },
+  // 监控data中的数据变化
+  watch: {
+    '$route.params.title': {
+      deep: true,
+      immediate: true,
+      handler (newVal, oldVal) {
+        setTimeout(() => {
+          if (newVal !== oldVal) {
+            let tempArr = data.modules.find(item => item.title === newVal)
+            this.currentArea = tempArr
+            let children = [...tempArr.children]
+            if (tempArr && this.$route.params.type !== '全部') {
+              children = children.filter(item => item.tagType === this.$route.params.type)
+              this.list = children
+            } else if (tempArr && this.$route.params.type === '全部') {
+              this.list = children
+            }
+          }
+        })
+      }
+    },
+    '$route.params.type': {
+      deep: true,
+      immediate: true,
+      handler (newVal, oldVal) {
+        setTimeout(() => {
+          if (newVal !== oldVal) {
+            let tempArr = data.modules.find(item => item.title === this.$route.params.title)
+            let children = [...tempArr.children]
+            if (tempArr && newVal !== '全部') {
+              children = children.filter(item => item.tagType === this.$route.params.type)
+              this.list = children
+            } else if (tempArr && newVal === '全部') {
+              this.list = children
+            }
+          }
+        })
+      }
+    },
+    '$route.params.show': {
+      deep: true,
+      immediate: true,
+      handler (newVal, oldVal) {
+        setTimeout(() => {
+          if (newVal) {
+            this.list.find((item, i) => {
+              if (newVal === item.name) {
+                this.whichitem = i
+                let l = `list${this.whichitem}`
+                this.$refs.listcon.scrollTop = this.$refs[l][0].offsetTop - (fixScroll + topCap)
+              }
+            })
+          }
+        })
+        setTimeout(() => {
+          this.whichitem = ''
+        }, 1200)
+      }
+    }
+  },
+  // 方法集合
+  methods: {
+    goto (info) {
+      if (info.link) {
+        let id = null
+        Object.keys(data.data).forEach(key => {
+          if (data.data[key] === info) {
+            id = key
+          }
+        })
+        this.$router.push({name: 'external', params: {url: info.link, id: id}})
+      } else if (info.data) {
+        this.screens = info.data
+      }
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {
+
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {
+  },
+  beforeDestroy () {
+  },
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style scoped>
+/* 引入公共css类 */
+@import './style.css';
+
+</style>

src/pages/list/style.css

@@ -0,0 +1,202 @@
+.layout{
+  background: #f3f2f0;
+  transition: all ease 0.3s;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  background: #fff url('~@/assets/images/bg.jpg') center center;
+}
+
+.txt-bold{
+  font-weight: bold;
+}
+
+.clear{
+  clear: both;
+}
+
+.nav-top{
+  margin: 0 50px 20px;
+  padding-top: 20px;
+}
+.nav-top .nav-name .go-map{
+  background: #fa3800;
+  color: #fff;
+  padding: 10px;
+  border-radius: 4px;
+  margin-bottom: 30px;
+  display: inline-block;
+  cursor: pointer;
+  text-decoration: none;
+}
+.nav-top .nav-name .nav-tag{
+  display: inline-block;
+  margin-left: 15px;
+  font-size: 0;
+  cursor: pointer;
+}
+.nav-top .nav-name .fs{
+  padding: 10px 10px 7px 10px;
+  box-shadow: 0 1px 0 #ccc;
+  font-size: 16px;
+}
+.nav-top .nav-name .hpsj{
+  font-size: 16px;
+  background: #fa3800;
+  color: #fff;
+  padding: 10px;
+  border-top-right-radius:4px;
+  border-bottom-right-radius:4px;
+  margin-bottom: 30px;
+  display: inline-block;
+}
+.nav-top .go-map .iconfont{
+  font-size: 14px;
+}
+.nav-top .area,.nav-top .types{
+  margin-bottom: 30px ;
+}
+
+.nav-top .area  ul,.nav-top .types ul{
+  display: inline-block;
+}
+
+.nav-top .area  ul li,.nav-top .types ul li{
+  display: inline-block;
+  padding: 5px 10px;
+  margin:0 2px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.nav-top .area  ul li:hover,.nav-top .types ul li:hover{
+  background: #fa3800;
+  color: #fff;
+}
+
+.nav-top .active{
+  background: #fa3800;
+  color: #fff;
+}
+
+.list-con{
+  width: 100%;
+  padding: 0 30px 40px;
+  box-sizing: border-box;
+  overflow-y: scroll;
+}
+
+.list-con .card{
+  display: inline-block;
+  width: 23%;
+  box-sizing: border-box;
+  margin: 20px 1%;
+  background: #fff;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 1px 1px 10px #ccc;
+  cursor: pointer;
+}
+.card-animation{
+  animation: scaleFrames 0.5s 1;
+}
+.list-con .card:hover{
+  animation: scaleFrames 0.5s 1;
+}
+
+.list-con .card .card-img{
+  position: relative;
+}
+.list-con .card .card-img .card-mask{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+}
+
+.list-con .card .card-img .card-mask p {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  line-height: 1.5;
+}
+
+.list-con .card .card-img .card-mask .show-type {
+  position: absolute;
+  bottom: 10px;
+  left: 20px;
+}
+
+.list-con .card .card-img .card-mask .show-type i{
+  font-size: 24px;
+  margin-right: 10px;
+}
+
+
+.list-con .card .card-img img{
+  width: 100%;
+  height: 100%;
+}
+
+.list-con .card .card-txt{
+  padding: 0 10px;
+}
+
+
+
+
+.list-con .card .card-txt div{
+  margin: 10px 0;
+}
+
+.list-con .card .card-txt .title .iconfont{
+  color: #fa3800;
+  font-size: 28px;
+}
+
+.list-con .card .card-txt .title{
+  font-weight: bold;
+  display: table;
+}
+.list-con .card .card-txt .title span{
+  display: table-cell;
+  vertical-align: middle;
+  padding-left: 10px;
+}
+
+.list-con .card .card-txt .tag .tag-span{
+  display: inline-block;
+  color: #f13800;
+  border: 1px solid #f13800;
+  padding: 2px 5px;
+  margin-right: 10px;
+  font-size: 12px;
+}
+.list-con .card .card-txt .address{
+  font-size: 14px;
+  color: #2b2521;
+}
+
+
+/* 动画帧 */
+
+@keyframes scaleFrames
+{
+  0% {
+    transform: scale(1)
+  }
+  
+  50% {
+    transform: scale(1.05)
+  }
+  75% {
+    transform: scale(1.05)
+  }
+  100% {
+    transform: scale(1)
+  }
+}

src/pages/map/index.vue

@@ -2,7 +2,7 @@
   <div class="layout" @touchmove.prevent>
     <div id="map"></div>
 
-    <div class="dialog" v-show="showDialog">
+    <!-- <div class="dialog" v-show="showDialog">
       <a class="close" @click="showDialog = false"></a>
       <a class="jleft" @click="slideHandle(--imgIndex)">
         <img src="@/assets/images/jiantou.png">
@@ -10,25 +10,28 @@
       <a class="jright" @click="slideHandle(++imgIndex)">
         <img src="@/assets/images/jiantou2.png">
       </a>
-    </div>
+    </div> -->
 
     <div class="map-bottom-layout" :class="{mobile: ismobile}">
-      <div class="map-tabs clear" :class="{mobile: ismobile}" v-if="dmodel && dmodel.link">
-        <template v-if="ismobile">
-          <span v-if="mapTab === 1" @click="goto(dmodel)">
-            <i class="iconfont icon-leixing_hangpai"></i>航拍
-          </span>
-          <span v-if="mapTab === 0" @click="mapTab = 1 && goto(dmodel)">
-            <i class="iconfont icon-tuceng"></i>平面
-          </span>
-        </template>
-        <template v-else>
-          <a :class="{active: mapTab === 1}" class="rad">
-            俯视整个{{$route.params.title}}
-          </a>
-          <a @click="goto(dmodel)" :class="{active: mapTab === 0}" class="rad">
-            航拍视角
-          </a>
+      <div class="map-tabs clear" :class="{mobile: ismobile}">
+        <a @click="tapList()"><i class="iconfont icon-suolve"></i></a>
+        <template v-if="dmodel && dmodel.link">
+            <template v-if="ismobile">
+            <span v-if="mapTab === 1" @click="goto(dmodel)">
+              <i class="iconfont icon-leixing_hangpai"></i>航拍
+            </span>
+            <span v-if="mapTab === 0" @click="mapTab = 1 && goto(dmodel)">
+              <i class="iconfont icon-tuceng"></i>平面
+            </span>
+          </template>
+          <template v-else>
+            <a :class="{active: mapTab === 1}" class="rad">
+              俯视整个{{$route.params.title}}
+            </a>
+            <a @click="goto(dmodel)" :class="{active: mapTab === 0}" class="rad">
+              航拍视角
+            </a>
+          </template>
         </template>
       </div>
 
@@ -84,6 +87,7 @@ export default {
       ismobile: browser.mobile,
       info: null,
       dmodel: {},
+      isType: true,
       screens: null
     }
   },
@@ -235,6 +239,20 @@ export default {
       }
       this.loadding(item, params.show)
     },
+    tapList () {
+      let params = this.$route.params
+      let items, item
+      let tagType
+      if (params.show) {
+        items = data.modules.find(item => item.title === params.title)
+        item = items ? items.children.find(item => item.name === params.show) : ''
+        tagType = item.tagType
+      }
+      this.$router.push({
+        name: params.show ? 'item' : 'list',
+        params: !this.isType ? {title: params.title, type: tagType || '全部', show: params.show} : {title: '全部', type: params.title, show: params.show}
+      })
+    },
     goto (info) {
       if (info.link) {
         let id = null
@@ -266,10 +284,11 @@ export default {
           if (newVal !== oldVal) {
             let params = this.$route.params
             let item = data.modules.find(item => item.title === params.title)
+            this.isType = false
             if (!item) {
+              this.isType = true
               item = data.types.find(item => item.title === params.title)
             }
-
             this.map.setCenter(item.center)
             this.map.setZoom(item.zoom)
           }

src/pages/map/style.css

@@ -244,6 +244,12 @@
 .map-tabs a.active {
   background-color: #fa3800;
   color: #fff;
+  margin-left: 15px;
+}
+
+
+.map-tabs a .icon-suolve{
+  font-size: 22px;
 }
 
 .map-tabs span {

src/router/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import Layout from '@/pages/layout'
 import Map from '@/pages/map'
+import List from '@/pages/list'
 import Home from '@/pages/home'
 import Search from '@/pages/search'
 import External from '@/pages/External'
@@ -21,6 +22,14 @@ const router = new Router({
           component: Home
         },
         {
+          path: '/list/:title/:type',
+          name: 'list',
+          component: List,
+          children: [
+            {name: 'item', path: ':show'}
+          ]
+        },
+        {
           path: '/map/:title',
           name: 'map',
           component: Map,