refactor(leave-source): 重构离开页面组件并优化客服功能

- 更新了多个组件以支持新的离开页面逻辑
- 添加了立即开通会员的功能
- 优化了客服联系方式的展示和交互
- 调整了部分样式以适应新的布局

Signed-off-by: tangshizhe <48740614+tangshizhe@users.noreply.github.com>

apps/bigmember_pc/src/components/mask-card/MaskCard.vue

@@ -40,9 +40,14 @@
         >
           <!-- <div class="top-tip-title">{{item.title}}</div> -->
           <div class="top-tip-title" v-html="item.subtitle" />
-          <button v-if="islogin" @click.stop="$emit('click')">
-            {{ item.button ? item.button : '去升级' }}
-          </button>
+          <div v-if="islogin">
+            <button @click.stop="$emit('click')">
+              {{ item.button ? item.button : '去升级' }}
+            </button>
+            <button v-if="item.showActivate" class="activate_now" @click.stop="$emit('clickLink')">
+              立即开通
+            </button>
+          </div>
           <div v-else>
             <button @click.stop="$emit('click_nologin')">
               登录查看
@@ -205,6 +210,12 @@ export default {
       padding: 4px 24px;
       margin-top: 14px;
     }
+    .activate_now {
+      margin-left: 32px;
+      border: 1px  solid #E0E0E0;
+      background: #fff;
+      color: #1D1D1D;
+    }
   }
 
   .module-img-card {

apps/bigmember_pc/src/views/article-content/components/OriginLink.vue

@@ -91,7 +91,6 @@
 <script>
 import { mapGetters, mapState } from 'vuex'
 import LeaveInfo from '@jy/plugin-leave-source'
-import { doLeave } from '@/utils/leave'
 
 export default {
   name: 'OriginLink',

apps/bigmember_pc/src/views/article-content/components/RecommendCustomers.vue

@@ -84,6 +84,7 @@ const entContactTip = {
   subtitle:
     '根据区域、业务范围、客户类型帮助企业快速找到目标地区<br>潜在业务需求客户及联系方式。',
   button: '免费体验',
+  showActivate: true,
   source: 'pc_article_CustomerRecommend',
   img: getImgForVipUpgrade('qzkh'),
   bg: getImgForVipUpgrade('qzkh', true)
@@ -136,6 +137,10 @@ function getLeaveSourceModule(source, bool = false) {
   }
 }
 
+function openMemberBuyPage() {
+  window.open(`/big/pc/page/buy_commit?level=1`)
+}
+
 // 列表兼容
 const quickMonitorElement = ref(null)
 </script>
@@ -192,6 +197,7 @@ const quickMonitorElement = ref(null)
       class="contact-mask-card"
       :islogin="true"
       :item="entContactTip"
+      @clickLink="openMemberBuyPage"
       @click="doOpenCollectDialog(entContactTip.source)"
     >
       <div

apps/bigmember_pc/src/views/portrayal/EntSearchPortrayal.vue

@@ -67,6 +67,7 @@
     <ZhiMaReportBanner v-if="entName" :winner-name="entName" class="mt-16px" />
     <EntNewContent
       v-if="isNewEntPortrait"
+      ref="newEntContent"
       :_eId="eId"
       :dt-params="{
         canselect: canSelect,
@@ -77,7 +78,6 @@
         noStatesbarPower: showTab2Content ? false : true,
         seachisHide: showTab2Content ? false : true,
       }"
-      ref="newEntContent"
       :chart-params="{
         hasPower: showTab2Content,
         emptyShow,
@@ -155,6 +155,7 @@
             <MaskCard
               :islogin="loginFlag"
               k="工商变动"
+              :show-activate="true"
               :item="EntHistoryTip"
               :title-line="true"
               @click="openBigPage(EntHistoryTip)"
@@ -180,6 +181,7 @@
               class="contact-mask-card"
               :islogin="loginFlag"
               k="企业通讯录 "
+              :show-activate="true"
               :item="entContactTip"
               :title-line="true"
               @click="openBigPage(entContactTip)"

apps/bigmember_pc/src/views/portrayal/components/EntNewContent.vue

@@ -135,6 +135,15 @@ function getModuleRefName(moduleName) {
   }
   return nameMap[moduleName] || moduleName
 }
+
+// 是否需要展示立即开通按钮
+function showActivate(card) {
+  const codeList = ['company_change', 'winner_book']
+  if (codeList.includes(card.code)) {
+    return true
+  }
+  return false
+}
 // 统一加载模块数据的函数
 function loadModuleData(moduleName) {
   const {
@@ -407,6 +416,10 @@ function onKnowConfirm() {
     window.location.reload()
   }
 }
+
+function onActivateClick() {
+  window.open('/big/pc/page/buy_commit?level=0')
+}
 </script>
 
 <template>
@@ -548,6 +561,8 @@ function onKnowConfirm() {
                   <template v-else>
                     <MaskCard
                       v-bind="card.tip"
+                      :show-activate="showActivate(card)"
+                      @clickLink="onActivateClick"
                       @btnClick="onMaskBtnClick(card.tip)"
                     />
                   </template>
@@ -742,6 +757,8 @@ function onKnowConfirm() {
                     <template v-else>
                       <MaskCard
                         v-bind="card.tip"
+                        :show-activate="showActivate(card)"
+                        @clickLink="onActivateClick"
                         @btnClick="onMaskBtnClick(card.tip)"
                       />
                     </template>

apps/bigmember_pc/src/views/portrayal/components/common/MaskCard.vue

@@ -23,9 +23,14 @@
         :class="{ 'no-login': !isLogin }"
       >
         <div class="top-tip-title" v-html="subtitle" />
-        <button v-if="isLogin" @click.stop="$emit('btnClick')">
-          {{ button }}
-        </button>
+        <div v-if="isLogin">
+          <button @click.stop="$emit('btnClick')">
+            {{ button }}
+          </button>
+          <button v-if="showActivate" class="activate_now" @click.stop="$emit('clickLink')">
+            立即开通
+          </button>
+        </div>
         <div v-else>
           <button @click.stop="$emit('loginClick')">
             {{ noLoginBtn }}
@@ -78,7 +83,11 @@ export default {
     bgSize: {
       type: String,
       default: ''
-    }
+    },
+    showActivate: {
+      type: Boolean,
+      default: false
+    },
   },
   data() {
     return {
@@ -195,6 +204,12 @@ export default {
       padding: 4px 24px;
       margin-top: 14px;
     }
+    .activate_now {
+      margin-left: 32px;
+      border: 1px  solid #E0E0E0;
+      background: #fff;
+      color: #1D1D1D;
+    }
   }
 
   .module-img-card {

apps/bigmember_pc/src/views/workspace/dashboard.vue

@@ -24,7 +24,7 @@
     </el-main>
     <el-aside width="369px">
       <AccountInfo ref="accountInfoRef" @showGiftDialog="showGiftDialog" />
-      <PCContentStatic />
+      <PCContentStatic set-class="gzzm-card" />
       <ChatList />
       <MessageTips class="aside-module" />
       <AsideOthers class="aside-module" />

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

@@ -38,13 +38,13 @@
           v-if="hasExclusiveCustomer"
         >
           <div slot="content" class="qw-qrcode">
-            <img :src="exclusiveCustomerInfo.qrcode" alt="" />
-            <p class="text">微信扫一扫</p>
+            <!-- <img :src="exclusiveCustomerInfo.qrcode" alt="" />
+            <p class="text">微信扫一扫</p> -->
+            <PCContentPopover set-class="leave-aside-card" ></PCContentPopover>
           </div>
           <div class="self-row">
-            <!-- <img src="@/assets/img/icon/qiwei.png" alt="" />
-            <span>客服企微</span> -->
-            <PCContentCard></PCContentCard>
+            <img src="@/assets/img/icon/qiwei.png" alt="" />
+            <span>客服企微</span>
           </div>
         </el-tooltip>
         <div class="self-row" v-else>
@@ -70,7 +70,7 @@ import LeaveInfo from '@jy/plugin-leave-source'
 export default {
   components: {
     [Popover.name]: Popover,
-    PCContentCard: LeaveInfo.PCContentCard
+    PCContentPopover: LeaveInfo.PCContentPopover
   },
   data() {
     return {
@@ -166,10 +166,10 @@ export default {
 }
 .qw-qrcode-tooltip.el-tooltip__popper.is-light {
   border: none;
-  width: 144px;
-  height: 154px;
+  width: 364px;
+  height: 306px;
   border-radius: 8px;
-  padding: 12px 20px;
+  padding: 0;
   box-shadow: 0px 0px 20px rgba(8, 31, 38, 0.12);
   img {
     width: 104px;

packages/work-bench-frame/packages/components/Navbar/index.vue

@@ -77,7 +77,7 @@
                 <navbar-item :nav="{ label: '在线咨询', icon: 'icon-kefu_xian' }" :svg="true"></navbar-item>
               </div>
               <div class="info-item" @click="onClickCustomer('客服热线')">
-                <navbar-item :nav="{ label: '客服热线：400-108-6670', icon: 'icon-telphone_line' }"></navbar-item>
+                <navbar-item :nav="{ label: `客服热线：${exclusiveCustomerInfo.phone}`, icon: 'icon-telphone_line' }"></navbar-item>
               </div>
             </div>
           </el-popover>

packages/work-bench-frame/packages/store/modules/user.js

@@ -61,7 +61,8 @@ export default {
         return {
           ...customerInfo,
           name: customerInfo?.remark,
-          qrcode: customerInfo?.wxer
+          qrcode: customerInfo?.wxer,
+          phone: customerInfo?.phone
         }
       } else {
         return {}

plugins/leave-source/src/api/service.js

@@ -1,5 +1,5 @@
 import axios from 'axios'
 
 export default axios.create({
-  baseURL: import.meta.env.VITE_APP_BASE_API
+  baseURL: ''
 })

plugins/leave-source/src/components/common/index.js

@@ -19,7 +19,7 @@ const footerDataConfig = {
     {
       icon: 'icon-customer',
       title: '人工',
-      subtitle: ' 1V1功能使用培训'
+      subtitle: '1V1功能使用培训'
     },
     {
       icon: 'icon-support',

plugins/leave-source/src/entry.js

@@ -3,6 +3,7 @@
  */
 
 import PCContentCard from './lib/pc/components/content-card.vue'
+import PCContentPopover from './lib/pc/content-popover.vue'
 import PCLeaveDialog from './lib/pc/content-dialog.vue'
 import MobileLeavePopup from './lib/mobile/content-popup.vue'
 import registryToast from './components/toast/index'
@@ -24,6 +25,7 @@ export default {
   renderComponent,
   registryToast,
   sourceMap,
+  PCContentPopover,
   PCContentCard,
   PCContentStatic,
   PCLeaveDialog,

plugins/leave-source/src/lib/pc/components/CallPhone.vue

@@ -5,12 +5,29 @@
         1. 联系客服:
       </div>
       <div class="call-phone-content">
-        拨打&nbsp;<span class="number">18829413659</span>
+        <span v-if="showPhoneLabel">拨打&nbsp;</span>
+        <span class="number">{{ phone }}</span>
       </div>
     </div>
   </div>
 </template>
 
+<script>
+export default {
+  name: 'CallPhone',
+  props: {
+    showPhoneLabel: {
+      type: Boolean,
+      default: true
+    },
+    phone: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
 <style lang="scss" scoped>
 .call-phone-container {
   .call-phone {

plugins/leave-source/src/lib/pc/components/ContractMine.vue

@@ -16,12 +16,25 @@
 <script>
 export default {
   name: 'ContractMine',
+  props: {
+    userPhone: {
+      type: String,
+      default: ''
+    }
+  },
   data() {
     return {
       phone: ''
     }
   },
-
+  watch: {
+    userPhone: {
+      handler(val) {
+        this.phone = val
+      },
+      immediate: true
+    }
+  },
   methods: {
     handle() {
       console.log('phone', this.phone)

plugins/leave-source/src/lib/pc/components/QrCode.vue

@@ -5,12 +5,12 @@
         2. 添加企业微信:
       </div>
       <div class="qr-code">
-        <img src="../../../assets/images/商务合作.png" alt="">
+        <img :src="wxer" alt="">
       </div>
     </div>
     <div v-if="type === '2'" class="qr-code-content">
       <div class="qr-code">
-        <img src="../../../assets/images/商务合作.png" alt="">
+        <img :src="wxer" alt="">
         <div v-if="showText" class="qr-code-title qr-code-title-small">
           <span>添加企业微信</span>
         </div>
@@ -23,17 +23,28 @@
 export default {
   name: 'QrCode',
   props: {
-    type: String,
-    default() {
-      return '1'
+    type: {
+      type: String,
+      default() {
+        return '1'
+      }
     },
     showText: {
       type: Boolean,
       default() {
         return true
       }
+    },
+    wxer: {
+      type: String,
+      default() {
+        return ''
+      }
     }
   },
+  mounted() {
+    console.log('this.wxer', this.wxer)
+  }
 }
 </script>
 

plugins/leave-source/src/lib/pc/components/content-card.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="content-card">
-    <span class="j-icon icon-pc-close" @click="closeIconClick" />
-    <ContractCard v-if="type === '1'" @contactMeEvent="contactMeEvent" />
-    <ContractCardQrcode v-else :show-text="showText" class="qrcode-module" />
+  <div class="content-card" :class="setClass">
+    <span v-if="showCloseIcon" class="j-icon icon-pc-close" @click="closeIconClick" />
+    <ContractCard v-if="type === '1'" :phone="phone" :user-phone="userPhone" :wxer="wxer" @contactMeEvent="contactMeEvent" />
+    <ContractCardQrcode v-else :wxer="wxer" :show-text="showText" class="qrcode-module" />
     <LeaveCommon :class="{ 'samll-footer': type === '2' }" />
   </div>
 </template>
@@ -14,7 +14,6 @@ import ContractCardQrcode from './contract-card-qrcode.vue'
 import LeaveCommon from './footer'
 
 export default {
-  el: '.pc-content-card',
   name: 'ContentCard',
   components: {
     ContractCard,
@@ -34,6 +33,26 @@ export default {
       type: Boolean,
       default: true
     },
+    showCloseIcon: {
+      type: Boolean,
+      default: true
+    },
+    wxer: {
+      type: String,
+      default: ''
+    },
+    setClass: {
+      type: String,
+      default: ''
+    },
+    phone: {
+      type: String,
+      default: ''
+    },
+    userPhone: {
+      type: String,
+      default: ''
+    }
     // source: {
     //   type: String,
     //   default: ''
@@ -47,6 +66,17 @@ export default {
     //   default: '联系专属客服，申请免费体验'
     // }
   },
+  watch: {
+    showText: {
+      handler(val) {
+        console.info(val, 'showText')
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    useContactMeLogic({ props: this.$props })
+  },
   methods: {
     contactMeEvent(phone) {
       this.$emit('contactMeEvent', phone)
@@ -84,5 +114,52 @@ export default {
   .samll-footer {
     height: 216px;
   }
+  &.leave-aside-card {
+    ::v-deep {
+      .contract-card-qrcode {
+        height: 172px;
+        padding: 12px 0 0;
+        .contract-card-content {
+          margin-top: 8px;
+        }
+      }
+      .qr-code-container {
+        padding: 0;
+        .qr-code {
+          padding-left: 0;
+          img {
+            width: 104px;
+            height: 104px;
+          }
+        }
+      }
+      .leave-common-footer {
+        height: 134px;
+        .leave-common-title {
+          margin-top: 10px;
+        }
+        .leave-common-footer-list {
+          padding: 0 20px;
+          width: 100%;
+          margin-top: 8px;
+        }
+        .j-icon {
+          width: 20px;
+          height: 20px;
+        }
+        .icon-customer {
+          width: 20px;
+          height: 20px;
+        }
+        .leave-common-footer-item {
+          margin-bottom: 10px;
+        }
+        .leave-common-footer-item-title {
+          font-size: 12px;
+          line-height: 18px;
+        }
+      }
+    }
+  }
 }
 </style>

plugins/leave-source/src/lib/pc/components/contract-card-qrcode.vue

@@ -4,7 +4,7 @@
       <span class="title">添加客服，立享1V1管家式服务</span>
     </div>
     <div class="contract-card-content">
-      <QrCode type="2" @handle="handle" />
+      <QrCode :show-text="showText" :wxer="wxer" type="2" @handle="handle" />
     </div>
   </div>
 </template>
@@ -17,6 +17,16 @@ export default {
   components: {
     QrCode
   },
+  props: {
+    wxer: {
+      type: String,
+      default: ''
+    },
+    showText: {
+      type: Boolean,
+      default: true
+    }
+  },
   methods: {
     handle() {
       this.$emit('handle')

plugins/leave-source/src/lib/pc/components/contract-card.vue

@@ -5,9 +5,9 @@
       <span class="subtitle">（以下三种方式任选）</span>
     </div>
     <div class="contract-card-content">
-      <CallPhone class="call-phone" @handle="handle" />
-      <QrCode type="1" @handle="handle" />
-      <ContractMine class="contract-mine" @contactMeEvent="contactMeEvent" />
+      <CallPhone class="call-phone" :phone="phone" @handle="handle" />
+      <QrCode :wxer="wxer" type="1" @handle="handle" />
+      <ContractMine :user-phone="userPhone" class="contract-mine" @contactMeEvent="contactMeEvent" />
     </div>
   </div>
 </template>
@@ -24,6 +24,20 @@ export default {
     ContractMine,
     QrCode
   },
+  props: {
+    wxer: {
+      type: String,
+      default: ''
+    },
+    phone: {
+      type: String,
+      default: ''
+    },
+    userPhone: {
+      type: String,
+      default: ''
+    }
+  },
   methods: {
     handle() {
       this.$emit('handle')

plugins/leave-source/src/lib/pc/components/static-card.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="contract-card-container">
+  <div class="contract-card-container" :class="setClass">
     <div class="contract-card-title">
       <span class="title">联系客服，立享1V1管家式服务</span>
     </div>
     <div class="contract-card-content">
-      <CallPhone class="call-phone" @handle="handle" />
-      <QrCode type="1" @handle="handle" />
+      <CallPhone :show-phone-label="false" class="call-phone" @handle="handle" />
+      <QrCode :wxer="wxer" :type="type" @handle="handle" />
     </div>
     <LeaveCommon class="static-footer" />
   </div>
@@ -23,6 +23,20 @@ export default {
     QrCode,
     LeaveCommon
   },
+  props: {
+    type: {
+      type: String,
+      default: '1'
+    },
+    wxer: {
+      type: String,
+      default: ''
+    },
+    setClass: {
+      type: String,
+      default: ''
+    }
+  },
   methods: {
     handle() {
       this.$emit('handle')
@@ -78,5 +92,49 @@ export default {
       }
     }
   }
+  &.gzzm-card {
+    margin-bottom: 16px;
+    .contract-card-content {
+      padding: 0 20px;
+      height: 100px;
+      margin-bottom: 16px;
+    }
+    ::v-deep {
+
+      .qr-code-title, .call-phone-title {
+        font-size: 14px;
+        line-height: 22px;
+      }
+      .qr-code-container::before {
+        height: 100px;
+      }
+      .qr-code-container .qr-code {
+        margin-top: 2px;
+      }
+      .qr-code-container .qr-code img {
+        width: 76px;
+        height: 76px;
+      }
+      .leave-common-footer {
+        padding-top: 10px;
+      }
+      .leave-common-footer-content {
+        padding: 0 20px;
+      }
+      .leave-common-footer .leave-common-footer-list  .leave-common-footer-item-title {
+        margin-left: 6px;
+        font-size: 12px;
+        line-height: 18px;
+      }
+      .leave-common-title {
+        width: 100%;
+        text-align: left;
+        line-height: 24px;
+      }
+      .leave-common-footer-list {
+        width: auto;
+      }
+    }
+  }
 }
 </style>

plugins/leave-source/src/lib/pc/content-dialog.vue

@@ -44,7 +44,7 @@ const config = {
   configInfo,
   props,
 }
-
+console.log('config', configInfo)
 const {
   confirmPhoneDialog,
   changePhoneDialog,
@@ -63,8 +63,8 @@ function contactMeEvent(phone) {
   if (!phonePass) {
     return showToast('联系电话格式不正确')
   }
-  configInfo.phone = phone
-  changePhoneDialog.phoneNumber = phone
+  // configInfo.phone = phone
+  // changePhoneDialog.phoneNumber = phone
   contactMe()
 }
 
@@ -94,6 +94,9 @@ export default {
     <ContentCard
       :type="config.props.type"
       :show-text="config.props.showText"
+      :wxer="configInfo.wxer"
+      :phone="configInfo.phone"
+      :user-phone="configInfo.userPhone"
       @contactMeEvent="contactMeEvent"
       @close="updateVisible(false)"
     />

plugins/leave-source/src/lib/pc/content-popover.vue

@@ -0,0 +1,67 @@
+<script setup>
+import { useStaticCustomInfo } from '../../utils/hooks'
+import PopoverContentCard from './components/content-card'
+
+const props = defineProps({
+  source: {
+    type: String,
+    default: '',
+    // required: true,
+  },
+  sourceDesc: {
+    type: String,
+    default: '',
+  },
+  popupTitle: {
+    type: String,
+    default: '联系客服，立享1V1管家式服务'
+  },
+  type: {
+    type: String,
+    default: '2'
+  },
+  showText: {
+    type: Boolean,
+    default: false
+  },
+  showCloseIcon: {
+    type: Boolean,
+    default: false
+  },
+  wxer: {
+    type: String,
+    default: ''
+  },
+  setClass: {
+    type: String,
+    default: ''
+  }
+})
+
+const {
+  configInfo,
+} = useStaticCustomInfo({ props })
+
+console.log(configInfo)
+</script>
+
+<script>
+export default {
+  name: 'PCContentStatic',
+}
+</script>
+
+<template>
+  <div class="pc-content-static">
+    <PopoverContentCard
+      :set-class="setClass"
+      :type="props.type"
+      :wxer="configInfo.wxer"
+      :show-close-icon="showCloseIcon"
+      :show-text="showText"
+    />
+  </div>
+</template>
+
+<style scoped lang="scss">
+</style>

plugins/leave-source/src/lib/pc/content-static.vue

@@ -18,7 +18,11 @@ const props = defineProps({
   },
   type: {
     type: String,
-    default: '2'
+    default: '1'
+  },
+  setClass: {
+    type: String,
+    default: ''
   }
 })
 
@@ -37,7 +41,7 @@ export default {
 
 <template>
   <div class="pc-content-static">
-    <StaticCard />
+    <StaticCard :set-class="setClass" :type="props.type" :wxer="configInfo.wxer" />
   </div>
 </template>
 

plugins/leave-source/src/utils/leave.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
-import phoneConfirmDialog from '../lib/pc/components/phoneConfirmDialog.vue'
+import PhoneConfirmDialog from '../lib/pc/components/PhoneConfirmDialog.vue'
 import PCLeaveDialog from '../lib/pc/content-dialog.vue'
-import PCContentCard from '../lib/pc/components/content-card.vue'
+import PCLeavePopover from '../lib/pc/content-popover.vue'
 import MobileLeavePopup from '../lib/mobile/content-popup.vue'
 import { isDOMElement } from '../utils/utils'
 
@@ -26,8 +26,8 @@ export function createInstance(platform, options = {}) {
     'app': MobileLeavePopup,
     'pc': PCLeaveDialog,
     'h5': MobileLeavePopup,
-    'pc-leave-content-card': PCContentCard,
-    'phone-confirm': phoneConfirmDialog,
+    'pc-leave-popover': PCLeavePopover,
+    'phone-confirm': PhoneConfirmDialog,
   }
   const MyComponent = componentMap[platform]
   if (!MyComponent)