PixelAI-mobile/pages/mobile_web/wall/components/movable.vue

<template>
	<view>
		<!-- 悬浮按钮 -->
		<movable-area class="movableArea">
			<movable-view class="movableView" :position="position" :x="x" :y="y" 
			:direction="direction" @click="show = true"
			:damping="damping" @change="onChange" @touchend="onTouchend">
				<u-icon name="question" size="40" :color="textColor"></u-icon>
			</movable-view>
		</movable-area>
		<u-modal v-model="show" :mask-close-able="true" confirm-text="明白了" :confirm-color="textColor">
			<view class="modal-content">
				<view class="content-item" v-for="(item,index) in tipText" :key="index">
					{{ item }}
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				x: 0,
				y: 0,
				x1: 0,
				x2: 0,
				y1: 0,
				y2: 0,
				move: {
					x: 0,
					y: 0
				},
				show: false,
			};
		},
		props: {
			damping: {
				type: Number,
				default: 10
			},
			direction: {
				type: String,
				default: "all"
			},
			position: {
				type: Number,
				default: 4
			},
			tipText: {
				type: Array,
				default: ''
			},
			textColor: {
				type: String,
				default: '#333'
			}
		},
		async mounted() {
			// 获取屏幕尺寸
			await uni.getSystemInfo({
				success: (res) => {
					this.x1 = 0;
					this.x2 = parseInt(res.windowWidth) - 50;
					this.y1 = 0;
					this.y2 = parseInt(res.windowHeight) - 20;
					if (this.position == 1 || this.position == 2) this.y = parseInt(this.y2 * 0.2);
					if (this.position == 3 || this.position == 4) this.y = parseInt(this.y2 * 0.8);
					if (this.position == 1 || this.position == 3) this.x = parseInt(this.x1);
					if (this.position == 2 || this.position == 4) this.x = parseInt(this.x2);
					this.move.x = this.x;
					this.move.y = this.y;
				}
			});
		},
		methods: {
			// 更改位置
			onChange(e) {
				if (e.detail.source === "touch") {
					this.move.x = e.detail.x;
					this.move.y = e.detail.y;
				}
			},
			// 拖动
			onTouchend() {
				this.x = this.move.x;
				this.y = this.move.y;
				setTimeout(() => {
					if (this.move.x < this.x2 / 2) this.x = this.x1;
					else this.x = this.x2;
				}, 100)
			},
		}
	}
</script>

<style scoped lang="scss">
.movableArea {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素
	z-index: 80;
 
	.movableView {
		pointer-events: auto; //可以点击
		width: 100rpx;
		height: 100rpx;
		border-radius: 78rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		// filter: opacity(0.9);
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0,0,0,0.16);
		// background: linear-gradient(354deg,#9BE15D 0%,#FFFFFF 0%,#FFFFFF 0%,#FFFFFF 0%,#A9FFD0 100%);
		background: rgba(255,255,255,0.99);
		.iconImage {
			width: 80rpx;
			height: 70rpx;
			display: block;
			// animation: iconImage 5s linear infinite;
		}
		// @keyframes iconImage{
		//   0%{-webkit-transform:rotate(0deg);}
		//   25%{-webkit-transform:rotate(90deg);}
		//   50%{-webkit-transform:rotate(180deg);}
		//   75%{-webkit-transform:rotate(270deg);}
		//   100%{-webkit-transform:rotate(360deg);}
		// }
 
		// .contact {
		// 	width: 124rpx;
		// 	height: 46rpx;
		// 	background: #50B674;
		// 	box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(80,182,116,0.3);
		// 	border-radius: 36rpx;
		// 	font-weight: 500;
		// 	font-size: 24rpx;
		// 	color: #FFFFFF;
		// 	line-height: 24rpx;
		// 	display: flex;
		// 	justify-content: center;
		// 	align-items: center;
		// 	margin-bottom: -25rpx;
		// }
 
	}
}
.modal-content{
	padding: 40rpx 60rpx;
	.content-item{
		margin: 10rpx 0;
	}
}
</style>