asean_nuxt/pages/header/index.vue

<template>
    <div class="header" >
        <div class="h-top">
            <div class="auto clearfix" style="display: flex">
                <!-- <div style="width: 15%">东盟头条新闻社 主办</div> -->
                <div class="top-left">
                    <nuxt-link to="/aboutUS" tag="a" target="_blank">关于我们</nuxt-link>
                    <!-- <a href="http://www.aseantop.com/#/aboutUS" target="_blank">关于我们</a> -->
                    <a href="http://mp.aseantop.com" target="_blank">我要投稿</a>
                </div>
                <!-- <ul class="clearfix">
                    <li>{{year}}年{{month}}月{{day}}日</li>
                    <li style="padding-left: 10px;">{{weekDay}}</li>
                </ul> -->
                <!-- <div style="width:300px; margin:4px 0 0 60%;">
                    <Input search enter-button="搜索" placeholder="站内搜索" size="small" @on-search="searchData" />
                </div> -->
                <div class="facebook">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-facebook"></use>
                    </svg>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-twitter"></use>
                    </svg>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weixin"></use>
                    </svg>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weibo"></use>
                    </svg>
                    <!-- <p class="iconfont icon-facebook"></p>
                    <p class="iconfont icon-twitter"></p>
                    <p class="iconfont icon-weixin"></p>
                    <p class="iconfont icon-weibo"></p> -->
                    <p @mouseenter="()=>showQRcode=true" @mouseleave="()=>showQRcode=false">APP</p>
                    <img class="QRcode" v-if='showQRcode' src="~/assets/img/QRcode.png" alt="">
                </div>
            </div>
        </div>
        <div class="h-main auto clearfix">
            <Row>
                <Col :span="24">
                    <div class="fl h-logo">
                        <nuxt-link :to="{path:'/'}">
                            <img src="~/assets/img/logo.png" alt="logo" />
                        </nuxt-link>
                        <div>
                            <span>{{weekDay}}</span>
                            <span>{{year}}年{{month}}月{{day}}日</span>
                        </div>
                    </div>
                </Col>
                <!-- <Col :span="18">
                    <h2 class="fr h-logo-ad">
                        <a :href="headerAdurl" target="view_frame">
                            <img :src="'http://pic-asean2.oss-cn-hongkong.aliyuncs.com/'+headerAd" alt="">
                        </a>
                    </h2>
                </Col> -->
            </Row>
        </div>
        <nav class="nav wgw-bg">
            <div class="menu">
                <Menu mode="horizontal" theme="dark" @on-select="jump" :active-name="activeKey">
                    <MenuItem name="1">
                        首页
                    </MenuItem>
                    <MenuItem name="recommend">
                        推荐
                    </MenuItem>
                    <Submenu name="4">
                        <template slot="title">
                            <div @click="jump('4')">
                                东盟
                            </div>
                        </template>
                        <MenuItem name="26">柬埔寨</MenuItem>
                        <MenuItem name="27">马来西亚</MenuItem>
                        <MenuItem name="28">印度尼西亚</MenuItem>
                        <MenuItem name="29">泰国</MenuItem>
                        <MenuItem name="30">菲律宾</MenuItem>
                        <MenuItem name="31">新加坡</MenuItem>
                        <MenuItem name="32">文莱</MenuItem>
                        <MenuItem name="33">越南</MenuItem>
                        <MenuItem name="34">老挝</MenuItem>
                        <MenuItem name="35">缅甸</MenuItem>
                    </Submenu>
                    <Submenu name="5" >
                        <template slot="title"  >
                            <div @click="jump('5')">
                                中国
                            </div>
                        </template>
                        <MenuItem name="36">中国要闻</MenuItem>
                        <MenuItem name="15">外媒看中国</MenuItem>
                        <MenuItem name="18">海外中企</MenuItem>
                    </Submenu>
                    <Submenu name="7">
                        <template slot="title">
                            <div @click="jump('7')">
                                国际
                            </div>
                        </template>
                        <MenuItem name="37">政治</MenuItem>
                        <MenuItem name="38">军事</MenuItem>
                        <MenuItem name="39">财经</MenuItem>
                        <MenuItem name="40">科技</MenuItem>
                    </Submenu>
                    <MenuItem name="23">
                        观察
                    </MenuItem>
                    <MenuItem name="3">
                        视频
                    </MenuItem>
                    <MenuItem name="6">
                        华社
                    </MenuItem>
                    <Submenu name="2">
                        <template slot="title">
                            <div @click="jump('2')">
                                生活
                            </div>
                        </template>
                        <MenuItem name="9">旅游</MenuItem>
                        <MenuItem name="11">美食</MenuItem>
                        <MenuItem name="12">健康</MenuItem>
                        <MenuItem name="13">流行风</MenuItem>
                    </Submenu>
                    <Submenu name="41">
                        <template slot="title">
                            <div @click="jump('41')">
                                文化
                            </div>
                        </template>
                        <MenuItem name="24">玄学</MenuItem>
                        <MenuItem name="8">娱乐</MenuItem>
                        <MenuItem name="10">文艺</MenuItem>
                    </Submenu>
                    <MenuItem name="22">
                        专题
                    </MenuItem>
                    <Submenu name="16">
                        <template slot="title">
                            <div @click="jump('16')">
                                服务
                            </div>
                        </template>
                        <MenuItem name="20">商务投资</MenuItem>
                        <MenuItem name="21">会展活动</MenuItem>
                        <MenuItem name="17">国外留学</MenuItem>
                        <MenuItem name="14">咨询答疑</MenuItem>
                        <MenuItem name="19">商会信息</MenuItem>
                    </Submenu>
                    <!-- <MenuItem name="42">
                        词条
                    </MenuItem> -->
                    <MenuItem name="43">
                        English
                    </MenuItem>
                </Menu>
            </div>
        </nav>
    </div>
</template>
<script>
// import { mapMutations, mapState, mapGetters, mapActions } from 'vuex';
import { mainAd } from "~/api/homePage";
import Bus from "~/common/bus"
export default {
  data() {
    return {
      activeKey:'1',
      year: "",
      month: "",
      day: "",
      weekDay: "",
      id: "",
      headerAd:'',
      headerAdurl:'',
      showQRcode:false
    };
  },
  mounted() {
    // this.id = parseInt(this.$route.params.id);
        this.getId()
                console.log(this.activeKey,'this.activeKey')
    var myDate = new Date();
    this.year = myDate.getFullYear();
    this.month = myDate.getMonth() + 1;
    this.day = myDate.getDate();
    switch (myDate.getDay()) {
      case 1:
        this.weekDay = "星期一";
        break;
      case 2:
        this.weekDay = "星期二";
        break;
      case 3:
        this.weekDay = "星期三";
        break;
      case 4:
        this.weekDay = "星期四";
        break;
      case 5:
        this.weekDay = "星期五";
        break;
      case 6:
        this.weekDay = "星期六";
        break;
      case 0:
        this.weekDay = "星期天";
        break;
      default:
        break;
    };

    mainAd().then(res => {
      this.headerAd = res.object['main-0'].adimg;
      this.headerAdurl=res.object['main-0'].adurl;
    });

  },

  watch: {
    $route() {
        this.getId()
    //   this.$route.name=="content"?this.getColumId():this.id = this.$route.params.id;
    //     console.log(this.$route.params.id,this.id,'this.$route.params.id')
      
    },
  },
  methods: {
    // culturalLife() {
    //     // this.$router.push({ path: '/lists/88' })
    //     // if(this.$route.name!="homePage"){
    //     //     this.$router.push({ path: '/lists/88' })
    //     // }else{
    //     //     window.scrollTo(0, 3646);
    //     // }
      
    // },
    searchData(val){
        if(val!=""){
            this.$store.dispatch('saveSearchVal',val);
            this.$router.push({ name:'lists'})
        }else{
            this.$Message.warning('请输入搜索内容！')
        }
        
        
    },
    getId(){
        if(this.$route.name=="content"){
            Bus.$on('columnId', (message) => {
                this.id = message;
                this.$nextTick(()=>{
                    this.activeKey=parseInt(message)?message+'':'0';
                })
            })
        }else if(this.$route.name=="lists"){
            this.id = parseInt(this.$route.params.id)
            this.$nextTick(()=>{
                this.activeKey=this.id?this.id+'':'0';
            })
        }else{
            this.$nextTick(()=>{
                this.activeKey='1';
            })
        }
    },
    jump(name){//菜单跳转
        if(name=='1'){
            this.$router.push({path:'/homePage'})
            this.$nextTick(()=>{
                this.activeKey='1';
            })
        }else{
            let routeData = this.$router.resolve({path:'/lists',query:{id:name}});
            window.open(routeData.href, '_blank');
        }
    }
  }
};
</script>