zh_order_food_xcx/pages-takeout/1212.vue

<template>
	<view class="container flex-common-css iPhone-bottom box-border-box">
		<Nav :title="school_name"></Nav>
		<image class="bg-img" src="https://sjz-school.oss-cn-chengdu.aliyuncs.com/webImages/bg.png" mode=""></image>
		<!-- 泡泡容器 -->
		<view class="q-box z-2">
			<view v-for="(bubble, index) in bubbles" :key="index" :style="{
        transform: `translate(${bubble.x}px, ${bubble.y}px)`,
        width: bubble.size + 'px',
        height: bubble.size + 'px',
        backgroundColor: selectedBubbleIndex === index ? '#ffcc00' : 'rgba(255, 255, 255, 0.7)', // 选中时高亮
      }" class="bubble"></view>
		</view>


		<!-- 选择按钮 -->
		<view class="button" @click="selectRandomBubble">随机选择一个泡泡</view>

		<!-- 弹窗 -->
		<view v-if="showPopup" class="popup">
			<view class="popup-content">
				<text>选中的泡泡编号：{{ selectedBubbleIndex + 1 }}</text>
				<view class="close-button" @click="closePopup">关闭</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				school_name: '',
				bubbles: [], // 存储泡泡信息
				screenWidth: 0, // 屏幕宽度
				screenHeight: 0, // 屏幕高度
				animationTimer: null, // 动画定时器
				selectedBubbleIndex: null, // 当前选中的泡泡索引
				showPopup: false, // 是否显示弹窗
				isSelecting: false, // 是否正在选择中
			};
		},
		onLoad(data) {
			this.school_name = uni.getStorageSync('school_name');
		},
		mounted() {
			this.getScreenSize(); // 获取屏幕尺寸
			this.generateBubbles(20); // 生成 20 个泡泡
			this.startAnimation(); // 开始动画
		},
		beforeDestroy() {
			// 组件销毁时停止动画
			if (this.animationTimer) {
				clearTimeout(this.animationTimer);
			}
		},
		methods: {
			// 获取屏幕尺寸
			getScreenSize() {
				// uni.createSelectorQuery().in(this).select('.q-box').boundingClientRect((rect) => {
				// 	if (rect) {
				// 		this.screenHeight = rect.height;
				// 	}
				// }).exec();
				const systemInfo = uni.getSystemInfoSync();
				this.screenWidth = systemInfo.windowWidth; // 屏幕宽度
				this.screenHeight = systemInfo.windowHeight; // 屏幕高度
			},
			// 生成随机泡泡
			generateBubbles(count) {
				const containerHeight = this.screenHeight * 0.7; // 泡泡容器高度为屏幕高度的 70%
				for (let i = 0; i < count; i++) {
					this.bubbles.push({
						x: Math.random() * (this.screenWidth - 50), // 随机水平位置
						y: Math.random() * (this.screenHeight - 50), // 随机垂直位置
						size: Math.random() * 40 + 20, // 随机大小（20px - 60px）
						speedX: (Math.random() - 0.5) * 2, // 水平速度（-1 到 1）
						speedY: (Math.random() - 0.5) * 2, // 垂直速度（-1 到 1）
					});
				}
			},
			// 开始动画
			startAnimation() {
				const animate = () => {
					this.updateBubblesPosition();
					this.animationTimer = setTimeout(animate, 16); // 模拟 60 FPS
				};
				animate(); // 启动动画
			},
			// 更新泡泡位置
			updateBubblesPosition() {
				const containerHeight = this.screenHeight * 0.7; // 泡泡容器高度为屏幕高度的 70%
				this.bubbles.forEach((bubble) => {
					// 更新位置
					bubble.x += bubble.speedX;
					bubble.y += bubble.speedY;

					// 碰到左右边框时反转水平速度
					if (bubble.x <= 0 || bubble.x + bubble.size >= this.screenWidth) {
						bubble.speedX = -bubble.speedX;
					}

					// 碰到上下边框时反转垂直速度
					if (bubble.y <= 0 || bubble.y + bubble.size >= this.screenHeight) {
						bubble.speedY = -bubble.speedY;
					}
				});
			},
			// 随机选择一个泡泡
			selectRandomBubble() {
				if (this.isSelecting) return; // 防止重复点击
				this.isSelecting = true;

				// 随机选择过程动画
				const totalSteps = 20; // 随机闪烁次数
				let step = 0;
				const interval = setInterval(() => {
					this.selectedBubbleIndex = Math.floor(Math.random() * this.bubbles.length);
					step++;
					if (step >= totalSteps) {
						clearInterval(interval);
						this.isSelecting = false;
						this.showPopup = true; // 显示弹窗
					}
				}, 100); // 每 100 毫秒闪烁一次
			},
			// 关闭弹窗
			closePopup() {
				this.showPopup = false;
				this.selectedBubbleIndex = null; // 重置选中状态
			},
		},
	};
</script>

<style>
	.bg-img {
		width: 100%;
		height: 89%;
		position: absolute;
		left: 0;
		top: 0;
	}

	.container {
		position: relative;
		overflow: hidden;
	}
	.q-box {
/* 		width: 100%;
		height: 71vh;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		position: relative; */
	}
	.bubble {
		position: absolute;
		background-color: rgba(255, 255, 255, 0.7);
		/* 泡泡颜色 */
		border-radius: 50%;
		will-change: transform;
		/* 优化性能 */
	}

	.button {
		position: absolute;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
		padding: 10px 20px;
		background-color: #007aff;
		color: white;
		border-radius: 20px;
		text-align: center;
		font-size: 16px;
		cursor: pointer;
	}

	.popup {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.popup-content {
		background-color: white;
		padding: 20px;
		border-radius: 10px;
		text-align: center;
	}

	.close-button {
		margin-top: 10px;
		padding: 5px 10px;
		background-color: #007aff;
		color: white;
		border-radius: 5px;
		cursor: pointer;
	}
</style>