web/apps/work-bench/src/components/CustomServiceCorner.vue

<!--桌面右下角客服-->
<template>
  <div class="custom-service-corner">
    <el-popover
      ref="customServiceCorner"
      placement="left-end"
      width="132"
      trigger="click"
      :visible-arrow="false"
      @show="onShowPopover"
      popper-class="custom-popover-menu"
    >
      <div class="self-card">
        <div class="self-row" @click="onClickCustomer">
          <img src="@/assets/img/icon/kefu.png" alt="" />
          <span>在线客服</span>
        </div>
        <el-tooltip
          trigger="click"
          placement="left"
          effect="light"
          :visible-arrow="false"
          popper-class="kf-phone-tooltip"
        >
          <div slot="content" class="kf-phone" v-html="workTime"></div>
          <div class="self-row">
            <img src="@/assets/img/icon/dianhua.png" alt="" />
            <span>客服热线</span>
          </div>
        </el-tooltip>

        <el-tooltip
          trigger="click"
          placement="left"
          effect="light"
          :visible-arrow="false"
          popper-class="qw-qrcode-tooltip"
          v-if="hasExclusiveCustomer"
        >
          <div slot="content" class="qw-qrcode">
            <img :src="exclusiveCustomerInfo.qrcode" alt="" />
            <p class="text">微信扫一扫</p>
          </div>
          <div class="self-row">
            <img src="@/assets/img/icon/qiwei.png" alt="" />
            <span>客服企微</span>
          </div>
        </el-tooltip>
        <div class="self-row" v-else>
          <img src="@/assets/img/icon/qiwei.png" alt="" />
          <span>客服企微</span>
        </div>
        <div class="self-row" @click="jumpHelpPage">
          <img src="@/assets/img/icon/help.png" alt="" />
          <span>帮助中心</span>
        </div>
      </div>
      <div class="custom-btn" slot="reference">
        <img src="@/assets/img/icon/wenhao.png" alt="" />
      </div>
    </el-popover>
  </div>
</template>
<script>
/* eslint-disable */
import { Popover } from 'element-ui'
import { mapGetters, mapActions } from 'vuex'
export default {
  components: {
    [Popover.name]: Popover
  },
  data() {
    return {
      workTime: ''
    }
  },
  computed: {
    ...mapGetters('work-bench/user', [
      'hasExclusiveCustomer',
      'exclusiveCustomerInfo'
    ])
  },
  created() {
    this.getCommonAdListFn({ codes: ['jy_pc_sidebar_float'] }).then((res) => {
      if (res) {
        const adList = res.jy_pc_sidebar_float
        console.log(adList)
        if (adList && adList.length > 0) {
          this.workTime = adList[0]?.s_pic.replace('/n', '<br>')
        }
      }
    })
  },
  methods: {
    ...mapActions('customer', ['getCommonAdListFn']),
    // 显示的时候触发
    onShowPopover() {
      this.$BRACE.$emit('close-customer')
    },
    // 在线客服
    onClickCustomer() {
      try {
        this.$BRACE.$emit('open-customer')
        if (this.$refs.customServiceCorner) {
          this.$refs.customServiceCorner.doClose()
        }
      } catch (e) {}
    },
    // 跳转到帮助中心
    jumpHelpPage() {
      if (this.$refs.customServiceCorner) {
        this.$refs.customServiceCorner.doClose()
      }
      window.open('/helpCenter/index', '_blank')
    }
  }
}
/* eslint-disable */
</script>
<style lang="scss">
.custom-popover-menu.el-popover {
  box-sizing: border-box;
  width: 132px;
  min-width: 132px;
  height: 168px;
  background: #fff;
  border: none;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.16);
  border-radius: 8px;
  padding: 8px;
  .self-card {
    color: #1d1d1d;
    font-size: 14px;
    line-height: 22px;
    .self-row {
      display: flex;
      align-items: center;
      height: 38px;
      padding-left: 8px;
      cursor: pointer;
      border-radius: 4px;
      &:hover {
        background: #eaf8fa;
      }
      img {
        width: 20px;
        height: 20px;
        margin-right: 8px;
      }
    }
  }
}
.kf-phone-tooltip.el-tooltip__popper.is-light {
  border: 2px solid #ffffff;
  box-shadow: 0px 0px 20px rgba(8, 31, 38, 0.12);
  font-size: 14px;
  line-height: 22px;
  left: -240px;
  color: #1d1d1d;
  padding: 12px 20px;
  border-radius: 8px;
  box-sizing: border-box;
}
.qw-qrcode-tooltip.el-tooltip__popper.is-light {
  border: none;
  width: 144px;
  height: 154px;
  border-radius: 8px;
  padding: 12px 20px;
  box-shadow: 0px 0px 20px rgba(8, 31, 38, 0.12);
  img {
    width: 104px;
    height: 104px;
  }
  .text {
    text-align: center;
    font-size: 14px;
    line-height: 22px;
  }
}
</style>
<style lang="scss" scoped>
.custom-service-corner {
  .custom-btn {
    position: fixed;
    bottom: 50px;
    right: 32px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    text-align: center;
    line-height: 40px;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.16);
    cursor: pointer;
    z-index: 10;
    img {
      width: 24px;
      height: 24px;
    }
  }

  //.kf-phone {
  //  font-size: 14px;
  //  line-height: 22px;
  //  left: -240px;
  //  color: #1D1D1D;
  //  padding: 12px 20px;
  //  border-radius: 8px;
  //  box-sizing: border-box;
  //}
}
.mini-custom {
  display: none;
  position: fixed;
  right: 84px;
  bottom: 80px;
  max-height: 674px;
  min-height: 400px;
  width: 460px;
  height: calc(100% - 40px);
  box-shadow: 0 0 20px 0 rgba(8, 31, 38, 0.12);
  border-radius: 8px;
  overflow: hidden;
  z-index: 9999;
}
@media screen and (max-height: 800px) {
  .mini-custom {
    bottom: 20px;
  }
}
</style>