Bladeren bron

feat:企业画像新增客服入口

zhangsiya 1 jaar geleden
bovenliggende
commit
428fb0dc7a

+ 4 - 2
src/jfw/modules/app/src/web/staticres/jyapp/big-member/js/ent_portrait.js

@@ -135,6 +135,8 @@ var vNode = {
       },
       importantCustomers: [],
       scrollTop: 0,
+      // 页面滚动距离
+      pageScrollTop: 0,
       getEntPortraitInfoTimes: 0,
       initEchartsOptions: {
         renderer: 'svg'
@@ -361,8 +363,8 @@ var vNode = {
       }
     },
     // 监听画像页面滚动
-    onEntScroll: utils.debounce(function () {
-      // do something
+    onEntScroll: utils.debounce(function (e) {
+      this.pageScrollTop = e.target.scrollTop
     }, 50),
     scrollHeight: function () {
       var storageClick = JSON.parse(sessionStorage.getItem('is-click-set'))

+ 4 - 1
src/jfw/modules/app/src/web/templates/big-member/page_ent_portrait.html

@@ -627,8 +627,10 @@
           </div>
         </van-tab>
       </van-tabs>
+     <!--客服组件-->
+      <customer-corner-component v-show="isLogin" :scroll-status="pageScrollTop < 60"></customer-corner-component>
     </section>
-    
+
     <div class="j-main project-tab-container" v-if="conf.powerLoaded && !conf.showPortraitAll">
       <div class="j-container empty" v-show="topProject.list.length === 0">
         <div class="j-img img-empty empty-img"></div>
@@ -689,6 +691,7 @@
 <script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/keep-tags/keep-tags-template.js?v={{Msg "seo" "version"}}'></script>
 <script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/keep-tags/keep-ent-tags-template.js?v={{Msg "seo" "version"}}'></script>
 <script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/dataExport/components/popup-data-export.js?v={{Msg "seo" "version"}}'></script>
+<script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/customer-corner/mobile-template.js?v={{Msg "seo" "version"}}'></script>
 <script>
   // 收藏组件
   var vKeepComponent = new Vue({

+ 4 - 1
src/web/staticres/common-module/collection/js/ent_portrait.js

@@ -134,6 +134,8 @@ var vNode = {
       },
       importantCustomers: [],
       scrollTop: 0,
+      // 页面滚动距离
+      pageScrollTop: 0,
       getEntPortraitInfoTimes: 0,
       initEchartsOptions: {
         renderer: 'svg'
@@ -359,7 +361,8 @@ var vNode = {
       }
     },
     // 监听画像页面滚动
-    onEntScroll: utils.debounce(function(){
+    onEntScroll: utils.debounce(function(e){
+      this.pageScrollTop = e.target.scrollTop
       if (!this.freeWinnerOpen) return // 没有开通超级订阅广告位banner return
       // do something
     }, 50),

BIN
src/web/staticres/common-module/customer-corner/img/kf-blue.png


+ 64 - 0
src/web/staticres/common-module/customer-corner/mobile-template.js

@@ -0,0 +1,64 @@
+var customerCornerStyle = `<style>
+.customer-corner-component{
+    position: fixed;
+    padding-top:4px;
+    width: 42px;
+    height: 42px;
+    bottom: 9%;
+    right: 12px;
+    background: #fff;
+    border-radius: 50%;
+    z-index: 99;
+    box-shadow: 0 0 16px rgba(0,0,0,0.16);
+    font-size: 9px;
+    line-height: 10px;
+    color: #2ABED1;
+  }
+  .customer-corner-component.fadeOutRight{
+   transform: translateX(98%);
+      opacity: 0.2;
+  }
+  .customer-corner-component  .content{
+      height:100%;
+      text-align: center;
+    }
+  .customer-corner-component img{
+    width: 24px;
+    height: 24px;
+  }
+  </style>`
+var customerCornerTemplate = `
+<div class="customer-corner-component" :class="{ fadeOutRight: !scrollStatus }" :style="{bottom: bottomPosition || ''}">
+    <div class="content" @click="jumpCustomerPage">
+      <img src="/common-module/customer-corner/img/kf-blue.png" alt="">
+      <p>客服</p>
+    </div>
+  </div>`
+
+Vue.component('customer-corner-component',{
+  name: 'customerCornerComponent',
+  template: customerCornerTemplate,
+  props: {
+    scrollStatus: {
+      type: Boolean,
+      default: false
+    },
+    bottomPosition: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      show: false
+    }
+  },
+  created () {
+    $('head').append(customerCornerStyle)
+  },
+  methods: {
+    jumpCustomerPage () {
+      location.href = '/page_social_mobile/home?pname=剑鱼标讯&receiveAppId=465d475c52&userType=1'
+    }
+  }
+})

+ 4 - 1
src/web/templates/frontRouter/wx/collection/sess/ent_portrait.html

@@ -620,8 +620,10 @@
                     </div>
                 </van-tab>
             </van-tabs>
+        <!--客服组件-->
+        <customer-corner-component v-show="isLogin" :scroll-status="pageScrollTop < 60"></customer-corner-component>
         </section>
-        
+
         <div class="j-main project-tab-container" v-if="conf.powerLoaded && !conf.showPortraitAll">
             <div class="j-container empty" v-show="topProject.list.length === 0">
                 <div class="j-img img-empty empty-img"></div>
@@ -683,6 +685,7 @@
 <script src='{{Msg "seo" "cdn"}}/common-module/keep-tags/keep-tags-template.js?v={{Msg "seo" "version"}}'></script>
 <script src='{{Msg "seo" "cdn"}}/common-module/keep-tags/keep-ent-tags-template.js?v={{Msg "seo" "version"}}'></script>
 <script src='{{Msg "seo" "cdn"}}/common-module/dataExport/components/popup-data-export.js?v={{Msg "seo" "version"}}'></script>
+<script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/customer-corner/mobile-template.js?v={{Msg "seo" "version"}}'></script>
 <script>
   // 收藏组件
   var vKeepComponent = new Vue({