zh_order_food_xcx/pages-takeout/help-choose.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' : '', // 选中时高亮
      }" class="bubble box-border-box">
				<image class="qp-img" src="/pages-takeout/static/qp.png" mode=""></image>
				<image class="shop-logo z-2 b-rad-20" :src="bubble.shop_logo" mode=""></image>
				<view class="fs-24 fc-f z-2 text-overflow-ellipsis-one max-w-118 text-align-center pl-15 box-border-box">
					{{bubble.shop_name}}
				</view>
			</view>
		</view>
		<view class="but-box" @click="selectRandomBubble">
			<image class="but-img" src="/pages-takeout/static/but-bg.png" mode=""></image>
			<view class="fs-38 fc-f fw-b text-align-center z-2 pt-49 mb-82">
				君子帮你选，今日吃点啥？
			</view>
			<view class="fs-28 fc-1089D1 text-align-center">
				全部商家随机抽取
			</view>
		</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>
	import {
		shopAll
	} from "@/api/shop.js";
	export default {
		data() {
			return {
				school_name: '',
				shopId: 0,
				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.shopAll(); // 泡泡信息
			this.startAnimation(); // 开始动画
		},
		beforeDestroy() {
			// 组件销毁时停止动画
			if (this.animationTimer) {
				clearTimeout(this.animationTimer);
			}
		},
		methods: {
			// 获取屏幕尺寸
			getScreenSize() {
				const systemInfo = uni.getSystemInfoSync();
				this.screenWidth = systemInfo.windowWidth; // 屏幕宽度
				this.screenHeight = systemInfo.windowHeight * 0.71; // 屏幕高度
			},
			shopAll() {
				shopAll().then((res) => {
					if (res.code === 1) {
						this.bubbles = res.data;
						console.log(this.bubbles, this.bubbles.length);
						// 生成随机泡泡
						this.bubbles.forEach((v, k) => {
							v.x = Math.random() * (this.screenWidth - 50); // 随机水平位置
							v.y = Math.random() * (this.screenHeight - 50); // 随机垂直位置
							v.size = 59; // 随机大小（20px - 60px）
							v.speedX = (Math.random() - 0.5) * 2; // 水平速度（-1 到 1）
							v.speedY = (Math.random() - 0.5) * 2; // 垂直速度（-1 到 1）
						})
					}
				});
			},
			// 开始动画
			startAnimation() {
				const animate = () => {
					this.updateBubblesPosition();
					this.animationTimer = setTimeout(animate, 16); // 模拟 60 FPS
				};
				animate(); // 启动动画
			},
			// 更新泡泡位置
			updateBubblesPosition() {
				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>
	.max-w-118{
		max-width: 118rpx;
	}
	.qp-img {
		width: 118rpx;
		height: 118rpx;
		position: absolute;
		left: 0;
		top: 0;
	}

	.shop-logo {
		width: 68.5rpx;
		height: 68.5rpx;
		margin: 0 0 34rpx 29rpx;
	}

	.pt-49 {
		padding-top: 49rpx;
	}

	.mb-82 {
		margin-bottom: 82rpx;
	}

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

	.z-2 {
		position: relative;
		z-index: 2;
	}

	.container {
		position: relative;
		overflow: hidden;
	}

	.q-box {}

	.bubble {
		position: absolute;
		/* 泡泡颜色 */
		border-radius: 50%;
		will-change: transform;
		padding: 28rpx 20rpx 29rpx 0;
		/* 优化性能 */
	}

	.but-box {
		width: 100%;
		height: 170rpx;
		position: absolute;
		bottom: 135rpx;
		left: 0;
	}

	.but-img {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		width: 100%;
		height: 100%;
	}

	.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>