FT/foton-laws-system-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/fix_foton_20230613' into fix_foton_20230613

Browse Source 
# Conflicts:
#	src/components/customerService.vue
This commit is contained in:
wxyclub
2023-08-29 10:20:32 +08:00
parent 0445aebcdc 1cbc46c0ba
commit 9a6c8a9490
1 changed files with 192 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/customerService.vue
+192 -106
View File
@@ -1,14 +1,14 @@
<template>
<!-- 数小福 -->
<span id="drag" draggable>
<!-- 596843564600706080 -->
<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=598318137837933308">
scrolling="0">
</iframe>
</span>
</template>
@@ -16,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>
@@ -136,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>