133 lines
3.4 KiB
Vue
133 lines
3.4 KiB
Vue
<template>
|
|
<view class="pop-service d-c d-c-c" :style="{ left: `${x}px`, top: `${y}px` }" @click="gotoService"
|
|
@touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
|
|
<image class="pop-service-image" src="/static/images/service.gif" mode=""></image>
|
|
<view class="pop-service-text tc">{{ '在线客服' }}</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
iosAudig: -1,
|
|
startX: 0,
|
|
startY: 0,
|
|
x: 295, // 元素的x坐标
|
|
y: 100, // 元素的y坐标
|
|
scale: 1, // 元素的缩放比例
|
|
initialX: 0,
|
|
initialY: 0
|
|
};
|
|
},
|
|
methods: {
|
|
gotoService() {
|
|
let userInfo = uni.getStorageSync("User");
|
|
let src =
|
|
"https://im1c5366d.7x24cc.com/phone_webChat.html?accountId=N000000033467&chatId=302384fb-eda1-436e-a5e9-c03a2dbd6e97&visitorId=" +
|
|
userInfo.memberCode +
|
|
"&nickName=" +
|
|
userInfo.memberCode;
|
|
window.open(src, "_blank");
|
|
},
|
|
gotoWeb(url) {
|
|
this.gotoPage('/pages/webview/webview?url=' + encodeURIComponent(url));
|
|
},
|
|
handleTouchStart(event) {
|
|
// 记录元素的初始位置
|
|
this.initialX = event.changedTouches[0].clientX;
|
|
this.initialY = event.changedTouches[0].clientY;
|
|
},
|
|
handleTouchMove(event) {
|
|
// 计算拖动的距离
|
|
const deltaX = event.changedTouches[0].clientX - this.initialX;
|
|
const deltaY = event.changedTouches[0].clientY - this.initialY;
|
|
// 更新元素的位置和缩放比例
|
|
this.x += deltaX;
|
|
this.y += deltaY;
|
|
|
|
// 更新元素的初始位置为最后一次拖动的结束位置
|
|
this.initialX = event.touches[0].clientX;
|
|
this.initialY = event.touches[0].clientY;
|
|
event.preventDefault(); // 阻止默认行为，防止触发点击事件
|
|
},
|
|
handleTouchEnd(event) {
|
|
|
|
console.log('handleTouchEnd');
|
|
console.log(this.x);
|
|
console.log(this.y);
|
|
if (this.x >= 343) {
|
|
this.x = 343;
|
|
}
|
|
if (this.x <= -30) {
|
|
this.x = -30;
|
|
}
|
|
// if (this.y >= 343) {
|
|
// this.y = 343;
|
|
// }
|
|
if (this.y <= -30) {
|
|
this.y = -30;
|
|
}
|
|
// 在这里记录第一次拖动的结束位置，以便第二次拖动时使用
|
|
// this.initialX = event.changedTouches[0].clientX;
|
|
// this.initialY = event.changedTouches[0].clientY;
|
|
},
|
|
handleDrag(e) {
|
|
// 获取拖动元素的当前位置
|
|
var x = event.clientX;
|
|
var y = event.clientY;
|
|
|
|
// 计算拖动的距离
|
|
var dx = x - startX;
|
|
var dy = y - startY;
|
|
|
|
// 更新元素的位置
|
|
this.x = startX + dx + 'px';
|
|
this.y = startY + dy + 'px';
|
|
|
|
// 判断是否达到拖动阈值，并触发拖动事件
|
|
if (Math.abs(dx) > dragThreshold || Math.abs(dy) > dragThreshold) {
|
|
// 触发拖动事件，传递拖动的距离和方向信息
|
|
dispatchEvent(event);
|
|
}
|
|
e.preventDefault(); // 阻止默认行为，防止触发点击事件
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.tc{
|
|
text-align: center;
|
|
}
|
|
.d-c {
|
|
flex-direction: column;
|
|
}
|
|
.d-c-c{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.pop-service {
|
|
position: fixed;
|
|
top: 20%;
|
|
right: 39rpx;
|
|
width: 138rpx;
|
|
box-sizing: border-box;
|
|
background: rgba(#ffffff, 0.45);
|
|
padding: 18rpx 20rpx;
|
|
border-radius: 20rpx;
|
|
z-index: 101;
|
|
touch-action: none;
|
|
|
|
.pop-service-image {
|
|
width: 54rpx;
|
|
height: 54rpx;
|
|
margin-bottom: 15rpx;
|
|
}
|
|
|
|
.pop-service-text {
|
|
font-size: 20rpx;
|
|
color: #333;
|
|
}
|
|
}
|
|
</style> |