From 1cbc46c0ba23d55ab34810d721b3c6730803525f Mon Sep 17 00:00:00 2001
From: zyn <nn_0223@163.com>
Date: Fri, 25 Aug 2023 15:52:58 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E5=B0=8F=E7=A6=8F3.1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/customerService.vue | 297 +++++++++++++++++++----------
 1 file changed, 192 insertions(+), 105 deletions(-)

diff --git a/src/components/customerService.vue b/src/components/customerService.vue
index 664467477..b69900736 100644
--- a/src/components/customerService.vue
+++ b/src/components/customerService.vue
@@ -2,12 +2,13 @@
   <!-- 数小福 -->
     <span id="drag" draggable>
         <iframe
-            class="box"
+            src="https://iftappwelink.foton.com.cn/ke_fu_ui/?groupId=596843564600706080"
+            style="position: absolute; bottom: 10px; right: 0%"
+            :height="height"
+            :width="width"
             id="child"
-            scrolling="no"
             frameborder="0"
-            style="pointer-events: none"
-            src="https://iftappwelink.foton.com.cn/ke_fu_ui/?groupId=596843564600706080">
+            scrolling="0">
         </iframe>
     </span>
 </template>
@@ -15,117 +16,210 @@
 <script>
 export default {
   name: "customerService",
-  mounted() {
-    this.kefu()
+  data() {
+    return {
+      clientOffset: {},
+      drag: null,
+      flag: null,
+      height: 100,
+      width: 100,
+      l: 0,
+      t: 0,
+      x: 0,
+      y: 0,
+    };
   },
-  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);
-      }
-
+  mounted(){
+    this.drag = document.getElementById('drag');
+    var iframe = document.getElementById('child');
+    iframe.style.pointerEvents = 'none';
+    this.drag.addEventListener('mousedown', this.dragDiv, false);
+    window.onload = () => {
+      let that = this;
       // 弹框显示
-      drag.onmousedown = function (e) {
-        var disx = e.pageX - drag.offsetLeft;
-        var disy = e.pageY - drag.offsetTop;
-        clientOffset.clientX = event.clientX;
-        clientOffset.clientY = event.clientY;
-        // 解决点击后图标偏移 start (1/3)
-        drag.style.left = e.pageX - disx + "px";
-        drag.style.top = e.pageY - disy + "px";
-        // 解决点击后图标偏移 end
+      that.drag.onmousedown = function (e) {
+        // 获取鼠标点击位置与拖拽元素左上角的偏移
+        var disx = e.pageX - that.drag.offsetLeft;
+        var disy = e.pageY - that.drag.offsetTop;
+        that.clientOffset.clientX = e.clientX;
+        that.clientOffset.clientY = e.clientY;
+
+        // 设置 document.onmousemove 事件处理函数来实现拖拽效果
         document.onmousemove = function (e) {
-          drag.style.left = e.pageX - disx + "px";
-          drag.style.top = e.pageY - disy + "px";
+          that.drag.style.left = e.pageX - disx + 'px';
+          that.drag.style.top = e.pageY - disy + 'px';
         };
+
+        // 设置 document.onmouseup 事件处理函数来结束拖拽
         document.onmouseup = function () {
-          document.onmousemove = document.onmouseup = null;
+          document.onmousemove = null;
+          document.onmouseup = null;
         };
       };
-      drag.addEventListener("mouseup", (event) => {
+      that.drag.addEventListener('mouseup', (event) => {
         //鼠标抬起后的事件，判断是拖拽还是点击
         let clientX = event.clientX;
         let clientY = event.clientY;
-        if (
-            clientX === clientOffset.clientX &&
-            clientY === clientOffset.clientY
-        ) {
+        if (clientX === that.clientOffset.clientX && clientY === that.clientOffset.clientY) {
           //这里触发点击事件，将click方法移入这里
-          console.log(1212);
-          document
-              .getElementById("child")
-              .contentWindow.postMessage("open", "*");
+          document.getElementById('child').contentWindow.postMessage('open', '*');
+          window.addEventListener(
+              'message',
+              function (e) {
+                if (e.data === 'open') {
+                  that.height = 470;
+                  that.width = 510;
+                  iframe.style.pointerEvents = 'auto';
+                } else if (e.data == 'close') {
+                  that.height = 100;
+                  that.width = 100;
+                  iframe.style.pointerEvents = 'none';
+                }
+              },
+              false
+          );
           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";
-
-              // 解决点击后图标偏移 start (2/3)
-              styles.left = (styles.left.slice(0,styles.left.indexOf('px')) - 509) + 'px'
-              styles.top = (styles.top.slice(0,styles.top.indexOf('px')) - 470 + 99) + 'px'
-              // 解决点击后图标偏移 end
-
-              iframe.style.pointerEvents = "";
-            } else if (e.data == "close") {
-              iframe.setAttribute("height", "100");
-              iframe.setAttribute("width", "100");
-
-              styles.height = "99px";
-              styles.width = "71px";
-
-              // 解决点击后图标偏移 start (3/3)
-              styles.left = (styles.left.slice(0,styles.left.indexOf('px')) / 1 + 509) + 'px'
-              styles.top = (styles.top.slice(0,styles.top.indexOf('px')) / 1 + 470 - 99) + 'px'
-              // 解决点击后图标偏移 end
-
-              iframe.style.pointerEvents = "none";
-            }
-          },
-          false
-        );
-      };
+  },
+  Method:{
+    dragDiv(e) {
+      e.preventDefault(); //阻止发生自身事件
+      this.flag = true;
+      this.x = e.layerX || e.offsetX;
+      this.y = e.layerY || e.offsetY;
+      document.addEventListener('mousemove', this.docMove, false);
+      document.addEventListener('mouseup', this.mouseup, false);
+    },
+    docMove(e) {
+      if (this.flag) {
+        e.preventDefault();
+        this.l = parseInt(drag.style.left);
+        this.t = parseInt(drag.style.top);
+        drag.style.left = -this.x + e.pageX + 'px';
+        drag.style.top = -this.y + e.pageY + 'px';
+      }
+    },
+    mouseup() {
+      this.flag = false;
+      window.removeEventListener('mouseup', this.mouseup);
     },
   }
+  // 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;
+  //       // 解决点击后图标偏移 start (1/3)
+  //       drag.style.left = e.pageX - disx + "px";
+  //       drag.style.top = e.pageY - disy + "px";
+  //       // 解决点击后图标偏移 end
+  //       document.onmousemove = function (e) {
+  //         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";
+  //
+  //             // 解决点击后图标偏移 start (2/3)
+  //             styles.left = (styles.left.slice(0,styles.left.indexOf('px')) - 509) + 'px'
+  //             styles.top = (styles.top.slice(0,styles.top.indexOf('px')) - 470 + 99) + 'px'
+  //             // 解决点击后图标偏移 end
+  //
+  //             iframe.style.pointerEvents = "";
+  //           } else if (e.data == "close") {
+  //             iframe.setAttribute("height", "100");
+  //             iframe.setAttribute("width", "100");
+  //
+  //             styles.height = "99px";
+  //             styles.width = "71px";
+  //
+  //             // 解决点击后图标偏移 start (3/3)
+  //             styles.left = (styles.left.slice(0,styles.left.indexOf('px')) / 1 + 509) + 'px'
+  //             styles.top = (styles.top.slice(0,styles.top.indexOf('px')) / 1 + 470 - 99) + 'px'
+  //             // 解决点击后图标偏移 end
+  //
+  //             iframe.style.pointerEvents = "none";
+  //           }
+  //         },
+  //         false
+  //       );
+  //     };
+  //   },
+  // }
 }
 </script>
 
@@ -135,15 +229,8 @@ export default {
   position: absolute;
   width: 71px;
   text-align: center;
-  height: 99px;
-  bottom: 78px;
+  height: 117px;
+  bottom: 36px;
   right: 14px;
-  z-index: 1000;
-}
-
-.box {
-  position: absolute;
-  bottom: 0px;
-  right: 0px;
 }
 </style>