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 v-if="saveruler.type"
			:class="saveruler.type=='日常' ? `title-time-border-yellow`:`title-time-border-pouple`"
			:style="{ top: `${clientY}rpx`, left: `${clientX}rpx` }" style="font-size: 30rpx;overflow: hidden;">
			<view class="title-time" v-show="saveruler.time" style="margin-top: 5rpx;">
				<view class="title-time-time" style="font-size: 30rpx;">
					{{saveruler.time}}
				</view>
				<image class="title-time-button"
					:src="saveruler.type=='日常'?`/static/index/yellowbian.png`:`/static/index/puoplebian.png`" />
				<view class="title-time-font">
					{{saveruler.type}}
				</view>
			</view>
			<view style="margin-top: 20rpx;font-weight: 700;">
				{{splitString(saveruler.value)[0]}}
			</view>
			<view class="down-icons" :style="saveruler.type!='日常'?{backgroundColor:`rgb(212,203,255)`}:{}"
				v-show="splitString(saveruler.value)[1]">
				<view class="" v-for="(item,index) in splitString(saveruler.value).slice(1)" :key="index">
					<view class="icon" :style="saveruler.type!='日常'?{backgroundColor:`rgb(123,97,255)`}:{}">
						{{splitString(saveruler.value)[1]}}
					</view>
				</view>
			</view>
		</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"
			@saveruler="openruler" @changefangkuang="changefangkuang" @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>(0);
	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,
	})
	//翻页计时器
	const canTrigger = ref(true);
	//全局获得x轴和y轴
	const getxyrel = (event) => {
		const touch = event.touches[0];
		clientX.value = 2 * (Math.floor(touch.clientX) - 100);
		clientY.value = 2 * (Math.floor(touch.clientY) - 55);
		// 遍历数组，找到点击区域所在的对象
		const translateX = Math.floor(touch.clientX) - 50;
		const translateY = Math.floor(touch.clientY) - 25;

		const clickedItem = fangkuaiValue.value.find(item => {
			return translateX >= Math.floor(item.left) && translateX <= Math.floor(item.right) &&
				translateY >= Math.floor(item.top) && translateY <= Math.floor(item.bottom);
		});
		if (clickedItem) {
			const { index0, index1 } = clickedItem.dataset;
			indexNumber.value.index0 = index0
			indexNumber.value.index1 = index1
			if (clientX.value > 2050 && canTrigger.value) {
				ruler.value?.nextItems();
				canTrigger.value = false;
				setTimeout(() => {
					canTrigger.value = true;
				}, 1000);
			}
		} else {
			indexNumber.value.index0 = 999
			indexNumber.value.index1 = 999
		}
	}
	//节流
	const getxy = throttle(getxyrel, 10);

	const fangkuaiValue = ref([])
	//所有适合的方块
	const openname = (res : string, fangkuai : any) => {
		savename.value = res;
		canmove.value = false;
		fangkuaiValue.value = fangkuai
	}
	const changefangkuang = (fangkuang : any) => {
		fangkuaiValue.value = fangkuang
		console.log("!!!!", fangkuaiValue.value)
	}
	//移动方块
	const saveruler = ref({})
	const openruler = (res : string, fangkuai : any) => {
		saveruler.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,
		};

		if (savename.value) {
			ruler.value?.rulerEnd(savename.value);
		} else if (saveruler.value.type) {
			ruler.value?.rulerMoveEnd(saveruler.value);
		}
		savename.value = "";
		saveruler.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);
			}
		};
	}
	function splitString(str) {
		// 使用正则表达式找到所有括号的内容
		let result = [];
		let remainingStr = str;

		// 正则匹配最外层括号（支持全角和半角）
		let regex = /([^（(]*)[（(]([^）)]+)[）)]/;

		while (regex.test(remainingStr)) {
			let match = remainingStr.match(regex);
			if (match) {
				// 添加括号前的部分（去掉空白）
				if (match[1].trim()) {
					result.push(match[1].trim());
				}
				// 添加括号内的内容
				if (match[2].trim()) {
					result.push(match[2].trim());
				}
				// 更新剩余的字符串
				remainingStr = remainingStr.replace(match[0], '').trim();
			}
		}

		// 如果最后还有剩余部分，也加入结果
		if (remainingStr.trim()) {
			result.push(remainingStr.trim());
		}

		return result;
	}
	// 生命周期钩子
	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: rgb(201, 232, 255);
		border-radius: 20rpx;
		border: 2rpx solid #fff;
		width: 220rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-size: 40rpx;
		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;
			}
		}
	}

	.title-time-border-yellow {
		width: 255rpx;
		height: 189rpx;
		margin: 10rpx;
		border: 1rpx solid #dae8fa;
		background: linear-gradient(to bottom, #fff1db, #ffe2b2);
		// width: calc(100% - 20rpx);
		// height: calc(100% - 20rpx);
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		position: absolute;
		z-index: 10;
	}

	.title-time-border-pouple {
		width: 255rpx;
		height: 189rpx;
		margin: 10rpx;
		border: 1rpx solid #dae8fa;
		background: linear-gradient(to bottom, #f1eeff, #e3deff);
		// width: calc(100% - 20rpx);
		// height: calc(100% - 20rpx);
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		position: absolute;
		z-index: 10;
	}

	.title-time {
		display: flex;
		width: 100%;
		position: relative;

		.title-time-time {
			font-size: 32rpx;
			margin-left: 27rpx;
			margin-top: 12rpx;
		}

		.title-time-button {
			position: absolute;
			top: -5rpx;
			right: 0rpx;
			width: 70rpx;
			height: 70rpx;
		}

		.title-time-font {
			position: absolute;
			top: 7rpx;
			right: 5rpx;
			font-size: 23rpx;
			color: #fff;
		}
	}

	.down-icons {
		margin-top: 20rpx;
		width: 100%;
		height: 50rpx;
		background-color: rgb(255, 216, 126);
		display: flex;
		justify-content: center;
		align-items: center;

		.icon {
			margin: 0 5rpx;
			font-size: 20rpx;
			padding: 5rpx 10rpx;
			background-color: rgb(255, 138, 0);
			color: #fff;
			border-radius: 5rpx;
		}
	}
</style>