zh_order_food_xcx/pages-takeout/help-choose.vue

<template>
	<view class="flex-common-css iPhone-bottom box-border-box">
		<Nav :title="school_name"></Nav>
		<image class="bg-img" src="/pages-takeout/static/bg.png" mode=""></image>
		<view class="q-box z-2">
			<view class="qp-box" v-for="(item,index) in shopData">
				<image class="qp-img" src="/pages-takeout/static/qp.png" mode=""></image>
			</view>
		</view>
		<view class="but-box">
			<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">
				君子帮你选，今日吃点啥？
			</view>
		</view>
		<view class="fs-28 fc-1089D1 text-align-center">
			全部商家随机抽取
		</view>
	</view>
</template>

<script>
	import {
		shopAll
	} from "@/api/shop.js"
	export default {
		components: {},
		data() {
			return {
				school_name: '',
				shopId: 0,
				shopData: [],
				animationFrames: [], // 存储每个小球的动画帧信息
			};
		},
		onLoad(data) {
			this.school_name = uni.getStorageSync('school_name');
			this.shopAll()
		},
		mounted() {},
		methods: {
			scrolltolower() {
				console.log('触底');
			},
			initBalls() {
			  const numBalls = 10; // 小球数量
			  for (let i = 0; i < numBalls; i++) {
			    this.shopData.push({
			      colorClass: this.getRandomColorClass(), // 随机颜色类
			      content: `Ball ${i + 1}`, // 自定义内容
			      style: {
			        position: 'absolute',
			        left: `${Math.random() * window.innerWidth}px`, // 随机初始位置X
			        top: `${Math.random() * window.innerHeight}px`, // 随机初始位置Y
			        transform: `translate(-50%, -50%)`, // 居中内容
			      },
			      direction: { x: Math.random() * 2 - 1, y: Math.random() * 2 - 1 }, // 随机方向
			      speed: Math.random() * 2 + 1, // 随机速度
			    });
			  }
			},
			getRandomColorClass() {
			  // 根据需要返回随机颜色类名，这里简化为几个预设类
			  const colors = ['red', 'blue', 'green', 'yellow', 'purple', 'orange'];
			  return colors[Math.floor(Math.random() * colors.length)];
			},
			startAnimations() {
			  // 为每个小球启动动画
			  this.shopData.forEach((ball, index) => {
			    setTimeout(() => {
			      this.animateBall(index);
			    }, Math.random() * 2000); // 随机延迟开始动画
			  });
			},
			animateBall(index) {
			  const ball = this.shopData[index];
			  let newLeft = parseFloat(ball.style.left) + ball.direction.x * ball.speed;
			  let newTop = parseFloat(ball.style.top) + ball.direction.y * ball.speed;
			
			  // 碰撞检测（边界反弹）
			  if (newLeft < 0 || newLeft > window.innerWidth - 118) { // 50是假设的小球宽度
			    ball.direction.x = -ball.direction.x;
			    newLeft += ball.direction.x * ball.speed * 2; // 反弹后调整位置，避免抖动
			  }
			  if (newTop < 0 || newTop > window.innerHeight - 118) { // 50是假设的小球高度
			    ball.direction.y = -ball.direction.y;
			    newTop += ball.direction.y * ball.speed * 2; // 反弹后调整位置，避免抖动
			  }
			
			  ball.style.left = `${newLeft}px`;
			  ball.style.top = `${newTop}px`;
			
			  // 使用requestAnimationFrame进行持续动画
			  this.animationFrames[index] = requestAnimationFrame(() => {
			    this.animateBall(index);
			  });

			},
			shopAll() {
				shopAll().then((res) => {
					if (res.code === 1) {
						this.shopData = res.data
					}
				})
			}
		},
		beforeDestroy() {
		  // 组件销毁前取消所有动画帧请求
		  this.animationFrames.forEach(cancelAnimationFrame);
		}
	}
</script>

<style lang="scss" scoped>
	.qp-box-ccc {
		background: #ccc;
	}

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

	.q-box {
		width: 100%;
		height: 71%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		position: relative;
	}

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

	.but-box {
		width: 100%;
		height: 170rpx;
		position: relative;
	}

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

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

	.qp-img {
		width: 118rpx;
		height: 118rpx;
	}
</style>