优化智能客服按钮

acf39998 · youjie · 2d70f934 · acf39998 · acf39998 · acf39998
Commit acf39998 authored Jun 10, 2025 by youjie
5 changed files
--- a/index.html
+++ b/index.html
@@ -32,7 +32,7 @@
  <script src="/static/UE/ueditor.all.js"></script>
  <script src="/static/UE/lang/zh-cn/zh-cn.js"></script>
  <script src="/static/UE/ueditor.parse.min.js"></script>
-  <script>
+  <!-- <script>
    window.difyChatbotConfig = {
     token: 'RrfZrrXKACVg4HpB',
     baseUrl: 'http://dify.oytour.com'
@@ -42,17 +42,23 @@
    src="http://dify.oytour.com/embed.min.js"
    id="RrfZrrXKACVg4HpB"
    defer>
-   </script>
+   </script> -->
  <title></title>
 </head>
 <style>
-  #dify-chatbot-bubble-button {
+  /* #dify-chatbot-bubble-button {
    background-color: #1C64F2 !important;
+    position: fixed!important;
+    right: -29px!important;
+    transition: right 1s;
+  }
+  #dify-chatbot-bubble-button:hover {
+    right: 5px!important;
  }
  #dify-chatbot-bubble-window {
    width: 24rem !important;
    height: 40rem !important;
-  }
+  } */
 </style>

 <body>

--- a/src/App.vue
+++ b/src/App.vue
@@ -12,11 +12,16 @@
    <div class="showMyCareer" v-if="showCareer">
      <mycareer :show-close="true" :uid="careerId" @close="closeCareer"></mycareer>
    </div>
+    <customerService v-show="showCustomerService" @close="showCustomerService=false"/>
+    <img @click="showCustomerService=!showCustomerService" 
+    class="customerServiceButton" 
+    src="./assets/img/kefu1.png" alt=""/>
  </div>
 </template>


 <script>
+  
  var sUserAgent = navigator.userAgent;
  if (
    sUserAgent.indexOf("Android") > -1 ||
@@ -35,6 +40,7 @@
  }
  import chosenOpenMode from "./components/commonPage/chosenOpenMode";
  import mycareer from "./components/champion/mycareer";
+  import customerService from './components/commonPage/customerService/index';
  import {
    clearInterval
  } from "timers";
@@ -42,7 +48,8 @@
    name: "App",
    components: {
      chosenOpenMode,
-      mycareer
+      mycareer,
+      customerService
    },
    watch: {
      'window.location.ancestorOrigins': {
@@ -83,6 +90,7 @@
        careerId: 0,
        isRed: false,
        typeSystem: 0,
+        showCustomerService: false,
      };
    },
    methods: {
@@ -425,5 +433,18 @@
  .colorRed{
    color: red;
  }
+  .customerServiceButton{
+    width: 48px;
+    height: auto;
+    position: fixed;
+    right: -26px;
+    bottom: 20px;
+    z-index: 33;
+    transition: right .5s;
+    cursor: pointer;
+  }
+  .customerServiceButton:hover{
+    right: 3px;
+  }

 </style>
--- a/src/assets/img/kefu1.png
+++ b/src/assets/img/kefu1.png
--- a/src/assets/img/kefu2.png
+++ b/src/assets/img/kefu2.png
--- a/src/components/commonPage/customerService/index.vue
+++ b/src/components/commonPage/customerService/index.vue
+<template>
+  <div class="dialogPptistVisible-box" style="width: 100%;height: 100%;">
+    
+    <div style="position: relative;width: 800px;">
+      <span style="opacity: 0;">1</span>
+      <div class="item">
+              <div class="itemBox">
+                <i class="el-icon-close" style="color: #E95252; font-size: 20px;" @click="close()"></i>
+              </div>
+        </div>
+    </div>
+    <iframe id="myTemplateUrl" name="myTemplateUrl" :src="Url" class="TemplateIframe">
+    </iframe>
+  </div>
+  
+</template>
+<script>
+  export default {
+    // props: ['Url'],
+    data() {
+      return {
+        dialogPptistVisible: false,
+        userInfo: {},
+        TemplateUrl: '',
+        TemplateUrlImg: '',
+        isPostMessage: false,
+        isPostMessageImg: false,
+        Url: 'http://dify.oytour.com/chatbot/RrfZrrXKACVg4HpB',
+      }
+    },
+    watch: {
+      // Url: {
+      //   handler: function (val, oldVal) {
+      //     if (document.all.myTemplateUrl) {
+      //       if (this.Url && this.Url != '') {
+      //         document.all.myTemplateUrl.src = this.Url + `&t=${new Date().getTime()}`
+      //       }
+      //     }
+      //   },
+      //   deep: true,
+      //   immediate: true
+      // },
+    },
+    mounted() {
+
+    },
+    methods: {
+      close() {
+        this.$emit('close')
+      }
+    }
+  }
+
+</script>
+<style scoped>
+  .dialogPptistVisible-box {
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.4);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .closePptist-box {
+    position: fixed;
+    z-index: 1001;
+    left: 0;
+    right: 0;
+    top: 0;
+    height: 30px;
+    background: #fff;
+    border-bottom: 1px solid #eee;
+  }
+
+  .closePptist {
+    padding: 0 30px;
+    text-align: right;
+    margin: auto;
+    position: relative;
+  }
+
+  .closePptist i {
+    display: inline-block;
+    padding: 5px 10px;
+    font-size: 20px;
+    position: absolute;
+    right: 20px;
+    cursor: pointer;
+  }
+
+  .TemplateIframe {
+    border: none;
+    width: 800px;
+    height: 600px;
+    background: rgb(243, 246, 251);
+    z-index: 1002;
+    border-radius: 10px;
+  }
+  .item{
+    position: absolute;
+    right: -40px;
+    top: -10px;
+    z-index: 99;
+    
+  }
+  .itemBox{
+    width: 30px;
+    height: 30px;
+    background: #fff;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 33px;
+    cursor: pointer;
+  }
+
+</style>