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" ref="qBox">
			<view v-for="(ball,index) in shopData" :key="index" class="ball flex-direction"
				:style="{ left: ball.x + 'rpx', top: ball.y + 'rpx' }">
				<image class="qp-img" src="/pages-takeout/static/qp.png" mode=""></image>
				<image class="shop-logo z-2 b-rad-20" :src="ball.shop_logo" mode=""></image>
				<view class="fs-24 fc-f z-2 text-overflow-ellipsis-one max-w-118 text-align-center">
					{{ball.shop_name}}
				</view>
			</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: [],
				animationFrameId: null,
				animations: []
			};
		},
		onLoad(data) {
			this.school_name = uni.getStorageSync('school_name');
			this.getQBoxSize();
		},
		mounted() {
			this.shopAll();
			this.startAnimation();
		},
		methods: {
			scrolltolower() {
				console.log('触底');
			},
			shopAll() {
				shopAll().then((res) => {
					if (res.code === 1) {
						this.shopData = res.data;
						this.shopData.forEach((v, k) => {
							const radius = 59; // 小球半径相关大小（这里用宽度等体现，单位rpx）
							const x = Math.random() * (this.containerWidth - 2 * radius) + radius;
							const y = Math.random() * (this.containerHeight - 2 * radius) + radius;
							const speedX = (Math.random() - 0.5) * 5; // 随机生成x方向速度
							const speedY = (Math.random() - 0.5) * 5; // 随机生成y方向速度
							v.x = x;
							v.y = y;
							v.speedX = speedX;
							v.speedY = speedY;
							// 为每个小球创建动画实例
							const animation = uni.createAnimation({
								duration: 0,
								timingFunction: 'linear'
							});
							this.animations.push(animation);
							v.animation = animation;
						});
						// console.log(this.shopData);
					}
				});
			},
			startAnimation() {
				const animate = () => {
					this.updateBalls();
					this.animationFrameId = setTimeout(animate, 16); // 确保正确调用 animate 函数
				};
				animate();
			},
			updateBalls() {
				for (const ball of this.shopData) {
					// 更新小球位置
					ball.x += ball.speedX;
					ball.y += ball.speedY;
					// console.log(`Ball position: x=${ball.x}, y=${ball.y}`); // 打印小球位置信息

					// 处理左右边界碰撞
					if (ball.x < 0 || ball.x + 2 * 59 > this.containerWidth) {
						if (ball.x < 0) {
							ball.x = 0;
							ball.speedX = Math.abs(ball.speedX);
						} else {
							ball.x = this.containerWidth - 2 * 59;
							ball.speedX = -Math.abs(ball.speedX);
						}
					}
					// 处理上下边界碰撞
					if (ball.y < 0 || ball.y + 2 * 59 > this.containerHeight) {
						if (ball.y < 0) {
							ball.y = 0;
							ball.speedY = Math.abs(ball.speedY);
						} else {
							ball.y = this.containerHeight - 2 * 59;
							ball.speedY = -Math.abs(ball.speedY);
						}
					}
					// 使用动画更新小球位置
					ball.animation.translateX(ball.x).translateY(ball.y).step();
					ball.animation.export();
					// 直接使用 uni 的动画更新方法
					uni.createSelectorQuery().in(this).select(`.ball:nth-child(${ball.index + 1})`).boundingClientRect(
						rect => {
							if (rect) {
								ball.animation.export()
									.translate(ball.x - rect.left, ball.y - rect.top)
									.step()
									.update();
							}
						}).exec();
				}
				// 利用 Vue 的响应式数据绑定自动更新视图，不再使用 $forceUpdate
			},
			getQBoxSize() {
				uni.createSelectorQuery().in(this).select('.q-box').boundingClientRect((rect) => {
					if (rect) {
						this.containerWidth = (rect.width) * 2;
						this.containerHeight = (rect.height) * 2;
					}
				}).exec();
			}
		},
		beforeDestroy() {
			// 清除定时器
			clearTimeout(this.animationFrameId);
		}
	}
</script>

<style lang="scss" scoped>
	.max-w-118{
		max-width: 118rpx;
	}
	.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;
	}

	.ball {
		width: 118rpx;
		height: 154rpx;
		position: absolute;
		padding-top: 28rpx;
	}

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

	.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;
		position: absolute;
		left: 0;
		top: 0;
	}
</style>