ZhuHaiGaoXinQuUnmovable/src/pages/layout/aside/index.vue

<template>
  <div>
    <div class="mobile-z" :class="{show: show}" v-if="ismobile" @click="show = false" @touchmove.prevent></div>

    <div class="search mobileSearch" v-if="ismobile" @touchmove.prevent>
      <a  @click="show = true"><i class="iconfont icon-menu"></i></a>
      <div @click="$router.push({name: 'search',query:{type:$route.name}})">
        <input placeholder="搜索">
      </div>
      <a><i class="iconfont icon-sousuo"></i></a>
    </div>

    <div class="right-layout" :class="{show: show, mobile: ismobile}">
      <div class="info" @touchmove.prevent @click="mainHandle">
        <i class="iconfont icon-guojiagaoxinqu"></i>
        <h1>珠海高新区</h1>
        <p>不可移动文物一张图</p>
      </div>

      <div class="search rad" v-if="!ismobile">
        <input placeholder="搜索" type="search" v-model="keyword" >
        <a><i class="iconfont icon-sousuo"></i></a>
      </div>

      <div class="list-layout">
        <div class="tabs">
          <a @click="showTab = 'module'" :class="{active: showTab === 'module'}">区域划分</a>
          <a @click="showTab = 'type'" :class="{active: showTab === 'type'}">类型划分</a>
        </div>
        <div class="content" v-show="showTab === 'module'">
          <down
            :aaaactive="showTitle === type.title"
            :keyword="keyword"
            :setting="type"
            v-for="(type, key) in modules"
            :key="key"
            @showcontent="handleChange(type)"
            @checkItem="item => checkHandle(type, item)"
            :show="showTitle"
          />
        </div>
        <div class="content" v-show="showTab === 'type'">
          <down
            :aaaactive="showTitle === type.title"
            :setting="type"
            :keyword="keyword"
            v-for="(type, key) in types"
            :key="key"
            @showcontent="handleChange(type)"
            @checkItem="item => checkHandle(type, item)"
            :show="showTitle"
          />
        </div>
      </div>

      <a class="switch" v-if="!ismobile" @click="show = !show" @touchmove.prevent>
        <i class="iconfont" :class="show ? 'icon-right' : 'icon-left'"></i>
      </a>
    </div>
  </div>
</template>

<script>
import browser from '@/util/browser'
import data from '@/data'
import down from './down'

export default {
  components: { down },
  data () {
    return {
      show: !browser.mobile,
      types: data.types,
      modules: data.modules,
      showTab: 'module',
      keyword: '',
      ismobile: browser.mobile,
      showTitle: '',
      clickItem: false
    }
  },
  methods: {
    mainHandle () {
      this.$router.push({name: 'home'})
      this.ismobile && this.$bus.$emit('showaside', false)
    },
    handleChange (type) {
      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' ? {type: type.title} : {title: type.title}
        })
      }
    },
    checkHandle (type, item) {
      let route = this.$route
      if ((route.name === 'map' || route.name === 'info' || route.name === 'home') && !this.$isLocal) {
        this.$router.push({name: 'info',
          params: {
            title: type.title,
            show: item.name
          }
        })
      } else {
        this.clickItem = !this.clickItem
        this.$bus.$emit('itemclick', this.clickItem)
        this.$router.push({
          name: 'item',
          params: this.showTab === 'type' ? {title: '全部', type: type.title, show: item.name} : {title: type.title, type: '全部', show: item.name}
        })
      }
    }
  },
  watch: {
    '$route': {
      deep: true,
      immediate: false,
      handler (newVal) {
        setTimeout(() => {
          if (newVal.name === 'map' || newVal.name === 'info' || newVal.name === 'home') {
            this.showTitle = newVal.params.title
          } else {
            this.showTitle = this.showTab === 'type' ? newVal.params.type : newVal.params.title
          }
          // if (this.types.find(item => item.title === this.showTitle)) {
          //   this.showTab = 'type'
          // } else {
          //   this.showTab = 'module'
          // }
        })
      }
    },
    showTab (newVal) {
      if (!this.keyword) {
        this.$bus.$emit('closeitem', false)
      }
      this.showTitle = newVal === 'type' ? this.$route.params.type : this.$route.params.title
    }
  },
  mounted () {
    this.$bus.$on('showaside', data => {
      this.show = data
    })
  }
}
</script>

<style scoped>
@import url('./style.css');
</style>