feat: 工作台内增加客服固定服务角，头部客服二维码改为调用客服接口

apps/bigmember_pc/src/api/modules/common.js

@@ -1,8 +1,13 @@
 import request from '@/api'
 import qs from 'qs'
 
-// 获取客服用户
-export function getCustomInfo(data) {
+/**
+ * 获取客服二维码
+ * @param data { type: "kf" } 只获取客服的二维码，
+ * 不传参根据用户权限判断是否返回客成二维码
+ * @returns {*}
+ */
+export function getCustomInfo (data) {
   data = qs.stringify(data)
   return request({
     url: '/bigmember/use/getCustom',

apps/bigmember_pc/src/views/medical-field/Credentials.vue

@@ -610,7 +610,6 @@ export default {
         if(code === 0 && data) {
           this.kefuInfo = Object.assign(this.kefuInfo, data)
         }
-        console.log(data)
       })
     }
   }

apps/work-bench/src/App.vue

@@ -2,17 +2,20 @@
   <router-view>
     <template v-slot:nav-user-info="{ info }">
       <nav-user-info :info="info"></nav-user-info>
+      <custom-service-corner></custom-service-corner>
     </template>
   </router-view>
 </template>
 
 <script>
 import NavUserInfo from '@/components/NavUserInfo'
+import CustomServiceCorner from '@/components/CustomServiceCorner.vue'
 
 export default {
   name: 'App',
   components: {
-    NavUserInfo
+    NavUserInfo,
+    CustomServiceCorner
   }
 }
 </script>

apps/work-bench/src/api/modules/user.js

@@ -51,3 +51,18 @@ export function ajaxSwitchUserIdentity (data) {
     data
   })
 }
+
+/**
+ * 获取客服二维码
+ * @param data { type: "kf" } 只获取客服的二维码，
+ * 不传参根据用户权限判断是否返回客成二维码
+ * @returns {*}
+ */
+export function getCustomInfo (data) {
+  data = qs.stringify(data)
+  return request({
+    url: '/bigmember/use/getCustom',
+    method: 'POST',
+    data
+  })
+}

apps/work-bench/src/brace/index.js

@@ -35,6 +35,9 @@ Vue.prototype.$BRACE.$on('click-dialog-customer', () => {
 Vue.prototype.$BRACE.$on('open-customer', () => {
   store.dispatch('customer/open')
 })
+Vue.prototype.$BRACE.$on('close-customer', () => {
+  store.dispatch('customer/close')
+})
 /**
  * 监听菜单匹配事件、统一处理外部链接
  */

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

@@ -0,0 +1,221 @@
+<!--桌面右下角客服-->
+<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">客服热线：400-108-6670<br>服务时间：工作日 9:00-17:40</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>
+import { Popover } from 'element-ui'
+import { mapGetters, mapActions } from 'vuex'
+export default {
+  components: {
+    [Popover.name]: Popover
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    ...mapGetters('work-bench/user', [
+      'hasExclusiveCustomer',
+      'exclusiveCustomerInfo'
+    ])
+  },
+  created () {
+    this.getCustomerInfo()
+  },
+  methods: {
+    ...mapActions('work-bench', ['getCustomerInfo']),
+    // 显示的时候触发
+    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')
+    }
+  }
+}
+</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;
+        &:hover{
+          background: #EAF8FA;
+        }
+        img {
+          width:20px;
+          height:20px;
+          margin-right:8px;
+        }
+      }
+    }
+  }
+  .kf-phone-tooltip.el-tooltip__popper.is-light{
+    background: linear-gradient(180deg, #F1F4F8 0%, #FEFEFF 100%);
+    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;
+    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>

apps/work-bench/src/store/modules/customer.js

@@ -29,6 +29,9 @@ export default {
           commit('setCustomerStatus', true)
         }
       })
+    },
+    close ({ commit }) {
+      commit('setCustomerStatus', false)
     }
   },
   getters: {

apps/work-bench/src/store/modules/work-bench.js

@@ -5,7 +5,8 @@ import {
   ajaxGetPower,
   ajaxGetUserInfo, ajaxSetClickMessages,
   ajaxSetMenuType, ajaxSetReadMessages,
-  ajaxSetSignOut, ajaxNavbarConvergeSearch
+  ajaxSetSignOut, ajaxNavbarConvergeSearch,
+  getCustomInfo
 } from '../../api/modules'
 import { storeModules } from '@jy/work-bench-frame'
 import { clearStorage, replaceKeyword } from '@/utils'
@@ -246,8 +247,6 @@ export default {
           commit('user/changePower', data || {})
           // 根据用户权益调整顶部导航搜索类型相关信息
           dispatch('setNavSearch')
-          // 根据用户权限设置客服二维码
-          dispatch('setCustomerInfo', data || {})
         }
       } catch (error) {
       }
@@ -305,22 +304,23 @@ export default {
       // 更新 frame store 配置
       commit('navbar-search/setSearchTypes', BaseNavbarSearchInfo)
     },
+    /**
+     * 获取客服二维码，不传参服务端会根据用户身份返回客成或者客服二维码
+     * @param dispatch
+     * @returns {Promise<void>}
+     */
+    async getCustomerInfo ({ dispatch }) {
+      const { error_code: code, data } = await getCustomInfo()
+      if (code === 0 && data) {
+        dispatch('setCustomerInfo', data || {})
+      }
+    },
     /**
      * 根据用户权限设置客服二维码
      * 商机管理或者大会员用户展示带有vip字段的二维码
      */
-    setCustomerInfo ({ commit }, payload) {
-      if (payload && Array.isArray(payload.customers)) {
-        const { memberStatus, entniche, customers } = payload
-        let target
-        if (memberStatus > 0 || entniche) {
-          // 商机管理或者大会员用户展示vip
-          target = customers.find(c => c.vip)
-        } else {
-          target = customers.find(c => !c.vip)
-        }
-        commit('user/changeCustomerInfo', target || {})
-      }
+    setCustomerInfo ({ commit }, data) {
+      commit('user/changeCustomerInfo', data || {})
     },
     /**
      * 导航栏聚合查询