<template>
	<view class="continueFloat">
		<view class="jiantou" @click="toGo">首页→</view>
		<!-- <text style="font-size: 0.8rem;color: darkslategrey;text-align: center;">首页</text> -->
	</view>
</template>

<script>
	import $ from "@/static/js/jquery-3.6.4.min.js";

	export default {
		mounted() {
			var idom = document.getElementsByClassName("continueFloat");
			var contW = $(idom).width();
			var contH = $(idom).height();
			var startX, startY, sX, sY, moveX, moveY, leftX, rightX, topY, bottomY;
			var winW = $(window).width();
			var winH = $(window).height();
			$(idom).on({ //绑定事件
				touchstart: function(e) {
					startX = e.originalEvent.targetTouches[0].pageX; //获取点击点的X坐标    
					startY = e.originalEvent.targetTouches[0].pageY; //获取点击点的Y坐标
					sX = $(idom).offset().left; //相对于当前窗口X轴的偏移量
					sY = $(idom).offset().top; //相对于当前窗口Y轴的偏移量
					leftX = startX - sX; //鼠标所能移动的最左端是当前鼠标距div左边距的位置
					rightX = winW - contW + leftX; //鼠标所能移动的最右端是当前窗口距离减去鼠标距div最右端位置
					topY = startY - sY; //鼠标所能移动最上端是当前鼠标距div上边距的位置
					bottomY = winH - contH + topY; //鼠标所能移动最下端是当前窗口距离减去鼠标距div最下端位置      
				},
				touchmove: function(e) {
					e.preventDefault();
					//移动过程中XY轴的坐标要减去margin的距离
					moveX = e.originalEvent.targetTouches[0].pageX; //移动过程中X轴的坐标
					moveY = e.originalEvent.targetTouches[0].pageY; //移动过程中Y轴的坐标
					//判断的时候要计算加上padding的距离
					if (moveX < leftX) {
						moveX = leftX;
					}
					if (moveX > rightX) {
						moveX = rightX;
					}
					if (moveY < topY) {
						moveY = topY + 150; //顶部可留空间
					}
					if (moveY > bottomY) {
						moveY = bottomY - 80; //底部可留空间
					}
					if (startY < winH) {
						$(this).css({
							"top": moveY + sY - startY,
						})
					}
					$(this).css({
						"left": moveX + sX - startX, //去掉之后仅沿y轴移动
						"top": moveY + sY - startY,
					})
				}
			})
		},
		methods: {
			toGo() {
				uni.redirectTo({
					url: "/pages/newindex/newindex" // 跳转至修改密码页面路径
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.continueFloat {
		position: fixed;
		z-index: 999;
		left: 30rpx;
	
		.jiantou {
			background-color: rgba(60, 158, 255, 0.8);
			width: 100rpx;
			height: 100rpx;
			border-radius: 50rpx;
			color: white;
			text-align: center;
			line-height: 100rpx;
			border: 1px solid white;
		}
	}
</style>