接入数小福

src/App.vue

@@ -1,18 +1,20 @@
 <template>
     <div id="app">
 <!--      596843564600706080-->
-        <iframe
-                src="https://iftappwelink.foton.com.cn/ke_fu_ui/?groupId=596843564600706080"
-                style="position: absolute; bottom: 1%;right: 10px;z-index: 10000"
-                height="490"
-                width="510"
-                frameborder="0"
-                scrolling="0"
-        ></iframe>
+<!--        <iframe-->
+<!--                src="https://iftappwelink.foton.com.cn/ke_fu_ui/?groupId=596843564600706080"-->
+<!--                style="position: absolute; bottom: 1%;right: 10px;z-index: 10000"-->
+<!--                height="490"-->
+<!--                width="510"-->
+<!--                frameborder="0"-->
+<!--                scrolling="0"-->
+<!--        ></iframe>-->
+        <!--   数小福   -->
+        <customerService></customerService>
         <!--    <router-view v-if="!isBoolean"/>-->
         <span v-if="this.$route.name === 'Login'|| !isBoolean">
-      <router-view/>
-    </span>
+          <router-view/>
+        </span>
         <span v-else>
       <div class="content-box" v-if="isCollapse">
         <el-container>
@@ -93,9 +95,11 @@
 <script>
     import {mapGetters, mapState} from 'vuex'
     import {webLoginType, ssoLogoutUrlDev} from '@/sysConfig'
+    import customerService from "@/components/customerService";
 
     export default {
         name: 'App',
+        components: { customerService },
         data() {
             return {
                 isBoolean: false,

src/components/customerService.vue

@@ -0,0 +1,136 @@
+<template>
+  <!-- 数小福 -->
+    <span id="drag" draggable>
+        <iframe
+            class="box"
+            id="child"
+            scrolling="no"
+            frameborder="0"
+            style="pointer-events: none"
+            src="https://iftappwelink.foton.com.cn/ke_fu_ui/?groupId=596843564600706080">
+        </iframe>
+    </span>
+</template>
+
+<script>
+export default {
+  name: "customerService",
+  mounted() {
+    this.kefu()
+  },
+  methods: {
+    kefu () {
+      let clientOffset = {};
+      var drag = document.getElementById("drag"),
+          flag;
+      drag.addEventListener("mousedown", dragDiv, false);
+      function dragDiv(e) {
+        e.preventDefault(); //阻止发生自身事件
+        flag = true;
+        var x = e.layerX || e.offsetX;
+        var y = e.layerY || e.offsetY;
+        document.addEventListener("mousemove", docMove, false);
+        document.addEventListener("mouseup", mouseup, false);
+        function docMove(e) {
+          if (flag) {
+            e.preventDefault;
+            var l = parseInt(drag.style.left);
+            var t = parseInt(drag.style.top);
+            drag.style.left = -x + e.pageX + "px";
+            drag.style.top = -y + e.pageY + "px";
+          }
+        }
+      }
+
+      function mouseup() {
+        flag = false;
+        window.removeEventListener("mouseup", mouseup);
+      }
+
+      // 弹框显示
+      drag.onmousedown = function (e) {
+        var disx = e.pageX - drag.offsetLeft;
+        var disy = e.pageY - drag.offsetTop;
+        clientOffset.clientX = event.clientX;
+        clientOffset.clientY = event.clientY;
+        document.onmousemove = function (e) {
+          console.log(11)
+          drag.style.left = e.pageX - disx + "px";
+          drag.style.top = e.pageY - disy + "px";
+        };
+        document.onmouseup = function () {
+          document.onmousemove = document.onmouseup = null;
+        };
+      };
+      drag.addEventListener("mouseup", (event) => {
+        //鼠标抬起后的事件，判断是拖拽还是点击
+        let clientX = event.clientX;
+        let clientY = event.clientY;
+        if (
+            clientX === clientOffset.clientX &&
+            clientY === clientOffset.clientY
+        ) {
+          //这里触发点击事件，将click方法移入这里
+          console.log(1212);
+          document
+              .getElementById("child")
+              .contentWindow.postMessage("open", "*");
+          return;
+        } else {
+          return;
+        }
+      });
+      var iframe = document.getElementById("child");
+
+      var styles = drag.style;
+      window.onload = () => {
+        // 父级页面接收消息
+        var _this = this;
+        window.addEventListener(
+          "message",
+          function (e) {
+            console.log("父级页面接收消息", e);
+            if (e.data === "open") {
+              iframe.setAttribute("height", "470");
+              iframe.setAttribute("width", "510");
+
+              styles.height = "470px";
+              styles.width = "580px";
+
+              iframe.style.pointerEvents = "";
+            } else if (e.data == "close") {
+              iframe.setAttribute("height", "100");
+              iframe.setAttribute("width", "100");
+
+              styles.height = "99px";
+              styles.width = "71px";
+
+              iframe.style.pointerEvents = "none";
+            }
+          },
+          false
+        );
+      };
+    },
+  }
+}
+</script>
+
+<style scoped>
+#drag {
+  display: block;
+  position: absolute;
+  width: 71px;
+  text-align: center;
+  height: 99px;
+  bottom: 78px;
+  right: 14px;
+  z-index: 1000;
+}
+
+.box {
+  position: absolute;
+  bottom: 0px;
+  right: 0px;
+}
+</style>