hldy_app/pages/index/index.vue

<template>
	<view :class="darkFans?`darkbackgroundContainer`:`backgroundContainer`" @touchmove="getxy" @touchend="cleanall">
		<view class="move-font" v-show="savename && clientX" :style="{ top: `${clientY}rpx`, left: `${clientX}rpx` }">
			{{savename}}
		</view>
		<view class="left-container">
			<view class="left-head">
				<image class="left-head-img" src="/static/index/oldman.png" />
				<text :class="darkFans?`left-head-font-dark`:`left-head-font`">
					王金凤
				</text>
			</view>
			<view class="left-img-container">
				<view v-for="(item,index) in iconList" :key="index" class="blue-circle-pos">
					<view class="blue-circle" v-show="index === menuIndex">
						<image class="blue-circle-size" :src="`/static/index/ray.png`" />
					</view>
					<image class="left-img" :src="index === menuIndex ? item.targetUrl : item.url"
						@click="changeMenu(index)" />
				</view>
			</view>
		</view>
		<!-- 主页 -->
		<rightItemsfirst :isshow="menuIndexshow" :darkFans="darkFans" v-show="!menuIndex" @darkchange="darkchange" />
		<!-- 超凶表格 -->
		<rightItemssecond ref="ruler" :liang="indexNumber" :isshow="menuIndexshowsecond" :canmove="canmove"
			:darkFans="darkFans" v-show="menuIndex==1" @darkchange="darkchange" @savename="openname"
			@cleanname="closename" />
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue';
	import type { Link } from "./index";
	import rightItemsfirst from "../../component/rightItemsindex/index.vue"
	import rightItemssecond from "../../component/rightItemssecond/index.vue"
	import { onShow } from '@dcloudio/uni-app';

	// 初始化左侧菜单列表
	const iconList = ref<Link[]>([
		{ url: '/static/index/lefticon/index.png', targetUrl: '/static/index/lefticontarget/blueindex.png' },
		{ url: '/static/index/lefticon/nurse.png', targetUrl: '/static/index/lefticontarget/bluenurse.png' },
		{ url: '/static/index/lefticon/doctor.png', targetUrl: '/static/index/lefticontarget/bluedoctor.png' },
		{ url: '/static/index/lefticon/give.png', targetUrl: '/static/index/lefticontarget/givedark.png' },
		{ url: '/static/index/lefticon/wifi.png', targetUrl: '/static/index/lefticontarget/bluewifi.png' },
		{ url: '/static/index/lefticon/back.png', targetUrl: '/static/index/lefticontarget/blueback.png' }
	]);

	// 当前选中的菜单索引
	const menuIndex = ref<number>(1);
	const menuIndexshow = ref<boolean>(false);
	const menuIndexshowsecond = ref<boolean>(false);
	// 暗黑模式
	const darkFans = ref<boolean>(false);
	// 当前选中的菜单索引
	const roomTar = ref<number[]>([]);
	//滑块按钮
	const firstcurrentIndex = ref<number>(0);
	const firstcurrentIndexup = ref<number>(0);
	const secondcurrentIndexup = ref<number>(0);
	const secondcurrentIndex = ref<number>(0);
	const thirdcurrentIndex = ref<number>(0);
	// 暗黑模式改变
	const darkchange = (res : boolean) => {
		darkFans.value = res
	}
	// 变更菜单
	const changeMenu = (index : number) => {
		if (index === 3) {
			menuIndexshow.value = false;
			menuIndexshowsecond.value = false;
			uni.navigateTo({
				url: `/pages/somethingmove/index?darkFans=${darkFans.value}`,
				animationType: 'slide-in-right',
				animationDuration: 400// 设置动画时长为300毫秒, // 动画持续时间，单位为毫秒
			});
			return
		}
		menuIndex.value = index;
		menuIndexshow.value = false
		menuIndexshowsecond.value = false
		setTimeout(() => {
			switch (index) {
				case 0:
					menuIndexshow.value = true
					break;
				case 1:
					menuIndexshowsecond.value = true
					break;
				default:
			}
		}, 50)
	};
	const clientX = ref(0);
	const clientY = ref(0);
	const savename = ref("")
	const canmove = ref(true)
	const indexNumber = ref({
		index0: 999,
		index1: 999,
	})
	//全局获得x轴和y轴
	const getxyrel = (event) => {
		// event.stopPropagation();
		// event.preventDefault();
		const touch = event.touches[0];
		clientX.value = 2 * (Math.floor(touch.clientX) - 100);
		clientY.value = 2 * (Math.floor(touch.clientY) - 55);
		// console.log("?????",clientX.value,clientY.value)
		// 遍历数组，找到点击区域所在的对象
		const translateX = Math.floor(touch.clientX) - 50;
		const translateY = Math.floor(touch.clientY) - 25;
		const clickedItem = fangkuaiValue.value.find(item => {
			return translateX >= item.left && translateX <= item.right &&
				translateY >= item.top && translateY <= item.bottom;
		});
		// 如果找到，则输出该对象的 index0 和 index1
		if (clickedItem) {
			const { index0, index1 } = clickedItem.dataset;
			indexNumber.value.index0 = index0
			indexNumber.value.index1 = index1
		} else {
			indexNumber.value.index0 = 999
			indexNumber.value.index1 = 999
		}
	}
	//节流
	const getxy = throttle(getxyrel, 10);

	const fangkuaiValue = ref([])
	//所有适合的方块
	const openname = (res : string, fangkuai : Object) => {
		savename.value = res;
		canmove.value = false;
		fangkuaiValue.value = fangkuai
	}
	//解决拖动bug
	const closename = () => {
		savename.value = "";
		canmove.value = true;
		fangkuaiValue.value = []
	}
	const ruler = ref(null)
	//结束、禁止滑动
	const cleanall = () => {
		clientX.value = 9999;
		clientY.value = 9999;
		canmove.value = true;
		indexNumber.value = {
			index0: 999,
			index1: 999,
		};
		ruler.value?.rulerEnd(savename.value);
		savename.value = "";
	}
	//节流函数
	function throttle(fn, delay) {
		let lastExecutionTime = 0;
		return function (...args) {
			const now = Date.now();
			if (now - lastExecutionTime >= delay) {
				lastExecutionTime = now;
				fn.apply(this, args);
			}
		};
	}
	// 生命周期钩子
	onShow(() => {
		//首次加载和跳转回来需要重新做个动画
		setTimeout(() => {
			changeMenu(menuIndex.value)
		}, 50)
	});
</script>

<style lang="less" scoped>
	.backgroundContainer {
		display: flex;
		position: relative;
		width: 100%;
		height: 100vh;
		background-image: url('/static/index/lightbgcnew.png');
		background-size: cover;
		background-position: center center;
		overflow: hidden;
		z-index: 12;
	}

	//暗黑模式
	.darkbackgroundContainer {
		display: flex;
		position: relative;
		width: 100%;
		height: 100vh;
		background-image: url('/static/index/background.png');
		background-size: cover;
		background-position: center center;
		overflow: hidden;
		z-index: 11;
	}

	.move-font {
		position: absolute;
		// font-size: 45rpx;
		font-weight: 700;
		z-index: 10;
		pointer-events: none;
		color: #016AD1;
		background-color: #fff;
		border-radius: 20rpx;
		border: 2rpx solid #fff;
		width: 300rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-size: 45rpx;
		box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
	}

	.left-container {
		width: 235rpx;
		height: 100%;

		.blue-circle-pos {
			position: relative;

			.blue-circle {
				position: absolute;
				top: -50rpx;
				left: -68rpx;

				.blue-circle-size {
					width: 170rpx;
					height: 250rpx;
				}
			}
		}

		.left-head {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.left-head-img {
				width: 150rpx;
				height: 150rpx;
				margin-top: 60rpx;
			}

			.left-head-font {
				font-weight: 700;
				font-size: 40rpx;
			}

			.left-head-font-dark {
				font-weight: 700;
				font-size: 40rpx;
				background: linear-gradient(to right, #EBF4FF, #ADC4E0);
				-webkit-background-clip: text;
				color: transparent;
			}
		}

		.left-img-container {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			// margin-top: 30rpx;

			.left-img {
				width: 93rpx;
				height: 93rpx;
				margin: 50rpx 0;
				z-index: 100;
			}
		}
	}
</style>