接入数小福

2023-08-23 11:53:07 +08:00
parent 8081c53a3b
commit 27a784768a
2 changed files with 150 additions and 10 deletions
@@ -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>