platform-customsdeclaration-ssr/components/default/Header.vue

<template>
  <div class="header_view">
    <div class="top_user">
      <div class="container">
        <div class="user">
          <span v-text="user ? user.vipName : '用户名'">用户名</span><span v-text="user ? user.spaceName : '公司名'">公司名</span>
          <a class="header-link" @click="logoutClick">退出</a>
        </div>
      </div>
    </div>
    <div class="header_time">
      <div class="container">
        <div class="tabs">
          <ul class="list-inline">
            <li :class="{active: linkTab === 'client'}" @click="hasClick('client')"><i class="iconfont icon-kehuzhongxin1"></i>客户中心</li>
            <li :class="{active: linkTab === 'sever'}" @click="hasClick('sever')"><i class="iconfont icon-ziyuan"></i>服务商中心</li>
          </ul>
        </div>
        <div class="info">
          <p><span v-text="user ? user.vipName : '用户名'">用户名</span>，欢迎使用晶琳报关系统 <strong>登陆时间 {{formatDate(user.lastLoginTime)}}</strong></p>
          <p>今天是 <b v-text="newTime"></b></p>
        </div>
        <div class="slide_info">
          <div class="mode">
            <ul class="list-inline" ref="slideInfo" :style="{left: leftSilide + 'px'}" :class="{no_transition: leftSilide === 600}">
              <li v-for="item in all"><span v-text="item.currencyName"></span>(<span v-text="item.currency"></span>)&nbsp;<span v-text="item.rate"></span></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {formatDate, showTime} from '@/utils/date'
  export default {
    name: 'ViewHeader',
    data () {
      return {
        linkTab: '',
        newTime: '',
        leftSilide: 100
      }
    },
    beforeMount () {
      let _this = this
      setInterval(function(){
        _this.stringTime()
        _this.leftSilide -= 5
        if (-(_this.widthSilde) > _this.leftSilide) {
          _this.leftSilide = 600
        }
      }, 100)
    },
    computed: {
      user () {
        return this.$store.state.option.user.data.content
      },
      all () {
        return this.$store.state.exchange.all.data.content
      },
      widthSilde () {
        return this.$refs.slideInfo.clientWidth
      }
    },
    mounted() {
      this.$route.path.indexOf('severPage') !== -1 ?  this.linkTab = 'sever' : this.linkTab = 'client'
    },
    methods: {
      formatDate (type) {
        let date = new Date(type)
        return formatDate(date, 'hh:mm:ss')
      },
      stringTime () {
        return this.newTime = showTime()
      },
      hasClick: function (type) {
        this.linkTab = type
        this.$emit('hasEvent', type)
        if (type === 'client') {
          this.$router.push('/clientPage')
        } else {
          this.$router.push('/severPage')
        }
      },
      // 退出
      logoutClick () {
        this.$http.get('/logout')
          .then(response => {
            if (response.data.success) {
              this.$store.state.option.cookies = ''
              window.location.href = response.data.redirectUrl
            }
          })
      }
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
  .header_view{
    margin-bottom:20px;
    .top_user{
      background: #0d5ffe;
      .user{
        text-align: right;
        height:100px;
        padding-top:40px;
        padding-right:20px;
        background:url(/img/banner.png)no-repeat;
        font-size:14px;
        color:#fff;
        span{
          margin-right:35px;
        }
      }
    }
    .header_time{
      position:relative;
      background: #fff;
      line-height: 30px;
      .tabs{
        position:absolute;
        top:-40px;
        left:50%;
        margin-left:-200px;
        ul{
          li{
            position:relative;
            left:-8px;
            height: 0;
            width: 200px;
            border-bottom: 40px solid #74a9fc;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-radius: 20px 20px 0 0 ;
            line-height: 40px;
            color:#c7ddfe;
            font-size: 16px;
            text-align: center;
            i{
              margin-right:15px;
            }
            &:first-child{
              left:0;
            }
            &.active,&:hover{
              cursor:pointer;
              border-bottom: 40px solid #fff;
              z-index:100;
              color:#0d5ffe;
              font-weight: bold;
            }
          }
        }
      }
      .slide_info{
        position:absolute;
        top:0;
        left:50%;
        width:600px;
        margin-left:-300px;
        background: #f4f7fe;
        border-radius:20px;
        overflow: hidden;
        .mode{
          position:relative;
          height:30px;
          line-height: 30px;
          ul{
            position:absolute;
            white-space:nowrap;
            &.no_transition{
              transition:none;
            }
            transition: .1s all linear;
            li{
              margin:0 10px;
              color:#fa6d48;
            }
          }
        }
      }
      .info{
        padding: 0 10px;
        p{
          display:inline-block;
          width:50%;
          margin:0;
          span{
            color:#0d5ffe;
          }
          strong{
            color:#666;
            font-weight: normal;
          }
          b{
            color:#f97f25;
          }
          &:last-child{
            text-align: right;
          }
        }
      }
    }
  }
</style>