SideBar.vue

<template>
  <section>
    <div class="slide-bar">
      <div class="customer-service" @click="recordFn" v-if="kefuishow">
        <i class="iconfont icon-kefu"></i>
      </div>
      <div class="backtop carslide"  v-if="carshow">
        <a href="/v3/joincart" >
          <i class="iconfont icon-gouwuche1"></i>
          <b class="carNumx">{{cartCount}}</b>
        </a>
      </div>
      <template v-if="isWindow">
        <div class="backtop " v-backTopWindow v-show="show">
          <i class="iconfont icon-xiangshang1"></i>
        </div>
      </template>
      <template v-else>
        <div class="backtop" v-backTop v-show="show">
          <i class="iconfont icon-xiangshang1"></i>
        </div>
      </template>

    </div>
    <!--客服弹出框-->
    <van-dialog
      v-model="flag"
      :showConfirmButton="showButton"
      :showCancelButton="showButton"
      :closeOnClickOverlay="closeOnClickOverlay"
    >
      <div class="van-dialog__message">
        <div class="kefu">
          <p class="t0">
            <i class="iconfont icon-kefu"></i>
          </p>
          <p class="t1">
            <a href="tel:0755-88914841" class="but-blue">国内服务电话：0755-88914841</a>
          </p>
          <p class="t2">
            <a
              target="_blank"
              @click="customsrService"
              :href="phpParams.kfqq_xk"
              data-href="http://wpa.b.qq.com/cgi/wpa.php?ln=1&amp;key=XzgwMDE1ODQzMl80ODY0NDVfODAwMTU4NDMyXzJf"
              data-ptag="right-layer"
              class="but-white kefuio kefuioxk"
            >
              <i class="icon iconfont icon-qq"></i>客服QQ
            </a>
          </p>
        </div>
      </div>
    </van-dialog>
  </section>
</template>

<script>
import { mapState } from "vuex";
import Vue from "vue";
import { Dialog } from "vant";
import bus from '../../util/bus.js'

Vue.use(Dialog);

export default {
  name: "sidebar",
  props: {
    kefuishow: {
      type: Boolean, //是否展示客服
      default: true
    },
    carshow: {
      type: Boolean, //是否展示购物车
      default: false
    },
    isWindow: {
      type: Boolean, //是否开启windows监听
      default: false
    }
  },
  data() {
    return {
      flag: false,
      show: false,
      showButton: false,
      closeOnClickOverlay: true,
      showFastNav: false
    };
  },
  computed: mapState({
    phpParams: state => state.common.phpParams,
    cartCount: state => state.common.cartCount
  }),
  mounted() {
    if (this.isWindow) {
      this.scrollFnWindow();
    } else {
      this.scrollFn();
    }
  },
  created(){
    var self=this;
    bus.$on('xunjia',function(){
      self.recordFn()
    })
    if(this.carshow){
      this.$store.dispatch({
        type: 'cartCount'
      })
    }
  },
  methods: {
    customsrService() {
      this.$store.dispatch({
        type: "customsrService"
      });
    },
    //弹性布局监听不到window
    scrollFnWindow() {
      var self = this;
      window.onscroll = function() {
        var t = document.documentElement.scrollTop || document.body.scrollTop;
        if (t >= 300) {
          self.show = true;
        } else {
          self.show = false;
        }
      };
    },
    scrollFn() {
      var obj = document.querySelector(".container-wrap"),
        self = this;
      obj.onscroll = function() {
        var t = document.querySelector(".container-wrap").scrollTop;
        if (t >= 300) {
          self.show = true;
        } else {
          self.show = false;
        }
      };
    },
    recordFn() {
      this.flag = true;
      this.$store.dispatch({
        type: "getCommonParams"
      });
      try {
        sensors.track("RNavClick", {
          right_nav_click: "h5-客服"
        });
      } catch (e) {}
    },
    changFastNav() {
      this.showFastNav = !this.showFastNav;
    }
  }
};
</script>