mall-web-ssr/components/default/RightBar.vue

<template>
  <div class="right-bar">
    <ul class="right-bar-center">
      <li class="right-bar-item">
        <a href="/user#/cart" class="title" target="_blank">
          <i class="iconfont icon-shopping-cart icon-xlg"></i>
        </a>
        <div class="sidebar-menu"><a href="/user#/cart" title="我的购物车" target="_blank">我的购物车<em><span>(<span v-text="cartCount.count || 0"></span>)</span></em></a></div>
      </li>
      <li class="right-bar-item">
        <a @click="onLeaveMessageClick()" class="title">
          <i class="iconfont icon-liuyan icon-xlg"></i>
        </a>
        <div class="sidebar-menu"><a href="" title="留言板" target="_blank">留言板</a></div>
      </li>
      <li class="right-bar-item contact-menu">
        <a href="http://wpa.qq.com/msgrd?v=3&uin=3432892085&site=www.ubtoc.com&menu=yes" target="_blank" class="title">
          <i class="iconfont icon-kefu icon-xlg"></i>
        </a>
        <div class="contact-us sidebar-menu">
          <p>在线客服：<img src="/images/all/songguo.png" /><a href="http://wpa.qq.com/msgrd?v=3&uin=3432892085&site=www.ubtoc.com&menu=yes" class="contact-btn" target="_blank">联系客服</a></p>
          <p>服务电话：400-830-1818</p>
          <p>服务邮箱：yrsc@usoftchina.com</p>
          <p>工作时间：</p>
          <p>周一至周五 9:00-18:00</p>
        </div>
      </li>
    </ul>
    <ul class="right-bar-bottom">
      <li class="right-bar-item">
        <a href="/user#/browsingHistory" class="title" target="_blank">
          <i class="iconfont icon-zuji icon-xlg"></i>
        </a>
        <div class="sidebar-menu" v-if="!user.logged"><a href="/user#/browsingHistory" title="浏览记录" target="_blank">浏览记录</a></div>
        <div class="sidebar-menu" v-if="user.logged && listMe(history).length == 0"><a href="/user#/browsingHistory" title="浏览记录" target="_blank">浏览记录</a></div>
        <div class="foot-record sidebar-menu" v-if="user.logged && listMe(history).length > 0">
          <h3><a href="">浏览历史</a></h3>
          <dl>
            <dd v-for="item in listMe(history)">
                <a :href="'/store/' + item.storeid + '/' + item.batchCode" :title="item.code" v-text="item.code" v-if="item.status== 1"></a>
                <a :title="item.code" v-text="item.code" v-if="item.status== 0" disabled="disabled"></a>
                <div class="hover-shows">
                    <em :class="{ 'off' : item.status== 0}"></em>
                    <span :class="{ 'off' : item.status== 0}">失效</span>
                    <a @click="deleteHistory(item,item.id)">&times;</a>
                </div>
            </dd>
          </dl>
        </div>
      </li>
      <li class="right-bar-item">
        <a @click="toTop()" class="title">
          <i class="iconfont icon-arrow-up icon-xlg"></i>
        </a>
        <div class="sidebar-menu"><a @click="toTop()" title="返回顶部" target="_blank">返回顶部</a></div>
      </li>
    </ul>
  </div>
</template>
<script>
  import { scrollTo } from '~utils/scroll'

  export default {
    name: 'right-bar',
    data () {
      return {
        historyLength: []
      }
    },
    computed: {
      user () {
        return this.$store.state.option.user
      },
      cartCount () {
        return this.$store.state.user.history.cartCount.data
      },
      history () {
        let arr = this.$store.state.user.history.historyList.data.slice(0, 8)
        return arr
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.loadHistorys()
        this.loadCarCount()
      })
    },
    methods: {
      listMe: function (list) {
        return list.filter(function (item) {
          return item.isDelete === 1
        })
      },
      loadHistorys () {
        this.$store.dispatch('user/loadHistory')
      },
      loadCarCount () {
        this.$store.dispatch('user/CarCount')
      },
      toTop () {
        scrollTo('body', 300)
      },
      toBottom () {
        scrollTo(window.scrollY + window.innerHeight, 300)
      },
      // 打开留言板
      onLeaveMessageClick () {
      },
      deleteHistory (item, id) {
        this.$store.dispatch('user/deleteHistory', {id: id})
        this.loadHistorys()
      }
    }
  }
</script>
<style lang="scss" scoped>
  a[disabled] {
    cursor: not-allowed;
  }
  em,i{
    font-style: inherit;
  }
  .right-bar ul li{
    position: relative;
  }
  .right-bar ul li .sidebar-menu {
    position: absolute;
    display: block;
    right: -100%;
    top: 0px;
    bottom: 0;
    width: 120px;
    line-height: 38px;
    height: 38px;
    color: #ffffff;
    background: #555;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: transform .5s;
    -moz-transition: transform .5s;
    -ms-transition: transform .5s;
    -o-transition: transform .5s;
    transition: transform .5s;
    z-index: 19;
  }
  .right-bar ul li .sidebar-menu a{
    background-color: #555555;
  }
  .right-bar ul li:hover a{
    background-color: #555555;
  }
  .right-bar ul li:hover .sidebar-menu {
    display: block;
    -webkit-transform: translateX(-72px);
    -moz-transform: translateX(-72px);
    -ms-transform: translateX(-72px);
    -o-transform: translateX(-72px);
    transform: translateX(-72px);
  }
  /*浏览记录*/
  .right-bar ul li .foot-record{
    /* display: none; */
    width: 210px !important;
    max-height: 230px;
    line-height: 30px;
   /* right: 200px;*/
    top: inherit;
    bottom: -100%;
    height: inherit;
    /*padding-bottom: 10px;*/
  }
  .right-bar ul li .foot-record h3{
    line-height: 39px;
    border-bottom: #767575 1px solid;
    text-align: left;
    padding-left: 10px;
    width: 100%;
    display: inline-block;
    margin: 0 auto;
    font-size: 12px;
    height: 39px;
    position: relative;
    z-index: 1;
  }
  .right-bar ul li .foot-record h3:hover a{
    color: #fbb029;
  }
  .right-bar ul li .foot-record h3 a{
    color: #fff;
    background-color: inherit;
    line-height: 39px;
    text-align: left;
  }
  .right-bar ul li .foot-record dl{
    padding-top: 5px;
    display: inline-block;
    background: #555;
  }
  .right-bar ul li .foot-record dl,.right-bar ul li .foot-record dl dd{
    width: 100%;
    margin: 0 auto;
    background: #555;
  }
  .right-bar ul li .foot-record dl dd{
    line-height: 22px;
    width: 100%;
    display: inline-block;
    float: left;
    height: 22px;
    position: relative;
  }
  .right-bar ul li .foot-record dl dd a{
    display: inline-block;
    height: 22px;
    padding: 0 10px;
    width: 91%;
    font-size: 12px;
    color: #fff;
    line-height: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: none;
    text-align: left;
    padding-right: 44px;
  }
  .right-bar ul li li a:hover div.foot-record{
    display: inline-block !important;
  }
  .right-bar ul li .foot-record dl dd:hover{
    background: #fff;
  }
  .right-bar ul li .foot-record dl dd:hover a{
    color: #333;
  }
  .right-bar ul li .foot-record dl dd:hover div.hover-shows{
    display: inline-block;
  }
  .right-bar ul li .foot-record dl dd div.hover-shows{
    position: absolute;
    top: 0;
    right: 2px;
    max-width: 55px;
    line-height: 20px;
    padding-right: 0;
    z-index: 100;
    display: none;
  }
  .right-bar ul li .foot-record dl dd div.hover-shows span{
    display: inline-block;
    width: 30px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    background: #e04b38;
    color: #fff;
    border-radius: 5px;
    opacity: 0;
    margin-top: 1px;
  }
  .right-bar ul li .foot-record dl dd:first-child{
   /* margin-top: 5px;*/
  }
  .right-bar ul li .foot-record dl dd:last-child{
   /* margin-bottom: 10px;*/
  }
  .right-bar ul li .foot-record dl dd div.hover-shows a{
    font-size: 23px;
    float: right;
    width: 20px;
    padding: 0;
    text-align: center;
    color: #999;
    top: -2px;
  }
  .right-bar ul li .foot-record dl dd div.hover-shows a:hover{
    color: #fbb029;
  }
  .right-bar ul li .foot-record dl dd div.hover-shows em{
    display: inline-block;
    position: absolute;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-left: 7px solid #fbb029;
    border-bottom: 8px solid transparent;
    left: -158px;
    top: 4px;
  }
  .right-bar ul li .foot-record dl dd div.hover-shows em.off{
    border-left: 8px solid #b2b0b0;
  }
  .right-bar ul li .foot-record dl dd div.hover-shows span.off{
    opacity: 1;
  }
  /*浏览记录结束*/
  .right-bar ul li .contact-us{
    /*right: 200px;*/
    height: 180px;
    padding-top: 10px;
    width: 210px;
    top: -76px;
  }
  .right-bar ul li .contact-us p{
    line-height: 33px;
    text-align: left;
    padding-left: 10px;
    margin-bottom: 0;
    white-space: nowrap;
    font-size: 12px;
  }
  .right-bar ul li .contact-us .contact-btn{
    width: 62px;
    height: 18px;
    line-height: 18px;
    background: #ef7f03;
    display: inline-block;
    text-align: center;
    color: #fff;
    font-size: 12px;
    border-radius: 5px;
    padding: 0;
  }
  .right-bar-item{
    width: 36px;
   /* height: 38px;*/
  }
  .right-bar .right-bar-item a.title{
    display: inline-block;
    width: 36px;
    height: 38px;
    line-height: 38px;
    padding: 0;
  }
  .right-bar {
    position: fixed;
    z-index: 1000;
    right: 0;
    top: 0;
    width: 36px;
    height: 100%;

    .right-bar-center {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      list-style: none;
      padding: 0;
      width: 100%;
    }

    .right-bar-bottom {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 36px;
    }

    .right-bar-item {
      a {
        position: relative;
        display: block;
        width: 100%;
        color: #fff;
        background-color: #5078CB;
        text-align: center;
        -webkit-transition: background-color ease .5s;
        -moz-transition: background-color ease 0.5s;
        -ms-transition: background-color ease 0.5s;
        -o-transition: background-color ease 0.5s;
        transition: background-color ease 0.5s;
        z-index: 20;
        font-size: 12px;
      }
    }
  }
</style>