4dkankan_mobile/src/pages/layout/header.vue

<template>
  <div class="header-layout" >
    <div class="h-left" @click="active = !active">
      <div class="l-con" :class="{active:active}" >
        <span class="l1"></span>
        <span class="l2"></span>
        <span class="l3"></span>
      </div>
    </div>
    <div class="h-center">
      <vcenter>
        <img :src="`${$cdn}images/logo.png`"  @click="()=>{goto({name:'home'})} " alt>
      </vcenter>
    </div>
    <div class="h-right">
      <div  v-if="$route.name==='cases'" style="text-align:right">
        <i class="iconfont icon-sousuo" @click="()=>{searchActive = true;active = false}"></i>
      </div>
      <div class="h-user" v-else-if="isAccout">
          <i class="iconfont icon-cart" @click="$router.push({path:'/cart'})"><span>{{count>99?'99+':count}}</span></i>
          <img ref="userList" :src="`${$cdn}images/icon/nav_icon.png`" @click="userList=!userList" alt="">
        <ul :class="{'ul-active':userList}" >
          <li v-for="(item,i) in manage" :key="i" @click="handleClick(item)">{{item.name}}</li>
        </ul>
      </div>
      <div class="btn-buy" @click="buy" v-else>{{langHeader.buy}}</div>
    </div>
    <div class="search-active" :style="{maxHeight:searchActive?'140px':'0'}">
      <input type="text" v-model="searchTxt" :placeholder="langHeader.placeholder">
      <i @click="()=>{searchActive = false;searchTxt=''}" class="iconfont icon-cuowu"></i>
      <div v-if="scene.length>0&&searchActive" class="logo"></div>
    </div>
    <div class="search-result" id="search-result" @touchmove.stop :style="{maxHeight:scene.length>0&&searchActive?'calc(100vh - 140px)':'0'}">
      <div class="items" @click="linkto(item.webSite)" v-for="(item,i) in scene" :key="i">
        <div class="card-img" :style="{backgroundImage: `url(${item.thumb||`${$cdn}images/default.png`})`}"></div>
        <div class="item-txt">
          <p>{{typeArr[item.sceneType]}}</p>
          <p v-html="maskTitle(item.sceneName)"></p>
          <p><span>作者：</span>{{item.nickName}}</p>
        </div>
      </div>
      <div class="paging" v-if="scene.length>0&&searchActive">
        <vcenter>
            <Paging :current="currentPage" @clickHandle="pageChange" :total="total" :equable="pageSize" />
        </vcenter>
      </div>
    </div>
    <div class="nav-active" :style="{maxHeight:active?'100vh':'0'}">
      <div  class="nav-bg">
        <img :src="`${$cdn}images/nav-bg.png`" alt="">
      </div>
      <ul v-for="(item, index) in langHeader.navs" :key="index">
        <li>
          <div class="n-name" @click="clickItem(item)">
            <span>{{item.title}}</span>
            <img
              v-if="item.sub.length>0"
              :src="`${$cdn}images/sanjiao.png`"
              :class="{active:activeIdx===item.id}"
              alt
            >
          </div>
          <div class="n-child" :class="{'open':activeIdx===item.id}">
            <div v-for="(sub,i) in item.sub" :key="i" @click="goto(sub.to)">
              <i class="iconfont" :class="sub.icon"></i>
              <span>{{sub.name}}</span>
              <img v-if="sub.isNew" class="new-icon" :src="`${$cdn}images/new.png`" alt="">
            </div>
          </div>
        </li>
      </ul>
      <div class="language">
        <span :class="{active:language === '中'}" @click="changLang('中')">中</span>
        <span :class="{active:language === 'en'}" @click="changLang('en')">En</span>
      </div>
    </div>
  </div>
</template>

<script>
import vcenter from '@/components/vcenter/'
import { mapState } from 'vuex'
import Paging from '@/components/Paging'

export default {
  computed: {
    ...mapState({
      token: state => state.user.token,
      langHeader: state => state.language.home.headers,
      language: state => state.language.current
    }),
    isAccout: function () {
      if (this.$route.matched.length > 0) {
        return this.$route.matched[0]['name'] === 'manage'
      }
      return false
    }
  },
  data () {
    let typeArr = {
      2: '房地产',
      1: '博物馆',
      5: '家居',
      4: '餐饮',
      0: '其他'
    }
    let manage = [
      {
        name: '我的账号',
        to: {path: '/information'}
      },
      {
        name: '我的订单',
        to: {path: '/order'}
      },
      {
        name: '我的场景',
        to: {path: '/myscene'}
      },
      {
        name: '我的设备',
        to: {path: '/device'}
      },
      {
        name: '消费记录',
        to: {path: '/consumption'}
      },
      {
        name: '修改密码',
        to: {path: '/change'}
      },
      {
        name: '退出登录',
        to: 'logout'
      }
    ]

    return {
      manage,
      active: false,
      searchActive: false,
      searchTxt: '',
      activeIdx: '',
      count: 0,
      typeArr,
      total: 0,
      pageSize: 10,
      currentPage: 1,
      scene: [],
      userList: false
    }
  },
  watch: {
    currentPage () {
      this.getData()
    },
    searchTxt (newVal) {
      if (newVal) {
        this.currentPage === 1 ? this.getData() : this.currentPage = 1
      } else {
        this.scene = []
      }
    }
  },
  mounted () {
    document.addEventListener('click', (e) => {
      if (this.$refs.userList) {
        if (!this.$refs.userList.contains(e.target)) {
          this.userList = false
        }
      }
    })
    if (this.token) {
      let cart = JSON.parse(this.$store.state.user.cart)
      let count = 0
      cart.forEach(item => {
        count += item.goodsCount
      })
      this.count = count
    }
    this.$bus.$on('updateCart', data => {
      this.count = data
    })
  },
  methods: {
    pageChange (data) {
      this.currentPage = data
    },
    handleClick (item) {
      if (item.to === 'logout') {
        this.$store.dispatch('logout')
        this.$router.push({name: 'home'})
      } else {
        this.$router.push(item.to)
      }
      this.userList = false
    },
    clickItem (item) {
      this.activeIdx = this.activeIdx === item.id ? '' : item.id
      if (item.url) {
        this.active = false
        if (item.url === '/login' && this.token) {
          this.$router.push({
            path: '/information'
          })
        } else {
          this.$router.push({
            path: item.url,
            query: {
              id: item.id
            }
          })
        }
      }
    },
    changLang (lang) {
      this.$store.commit('change_language', lang)
      this.active = false
    },
    linkto (url) {
      location.href = url.replace('http://', 'https://')
    },
    maskTitle (name) {
      if (!name) { return '' }
      let html = ''
      var arr = name.split(this.searchTxt)
      html = arr.join('<span style="background:#feced4;">' + this.searchTxt + '</span>')
      return html
    },
    buy () {
      let name = this.$route.name
      name === 'binocular' || name === 'purchasetwo' ? this.$router.push({name: 'purchasetwo'}) : this.$router.push({name: 'purchase'})
      this.active = false
    },
    goto (to) {
      this.$router.push(to)
      this.active = false
    },
    format (time) {
      let date = new Date(time)
      return date.format('yyyy-MM-dd')
    },
    async getData () {
      document.querySelector('#search-result').scrollTo(0, 0)
      let params = {
        pageSize: this.pageSize,
        pageNum: this.currentPage,
        searchKey: this.searchTxt
      }
      let result = await this.$http({
        method: 'post',
        data: params,
        url: '/scene/search'
      })
      let data = result.data.data
      this.scene = data.list
      this.total = data.total
    }
  },
  components: {
    vcenter,
    Paging
  }
}
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>