|
|
@@ -1,25 +1,38 @@
|
|
|
<template>
|
|
|
- <view class="flex-common-css iPhone-bottom box-border-box">
|
|
|
+ <view class="container 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="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="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}}
|
|
|
+ <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">
|
|
|
+ <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">
|
|
|
+ <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 class="fs-28 fc-1089D1 text-align-center">
|
|
|
- 全部商家随机抽取
|
|
|
+
|
|
|
+ <!-- 弹窗 -->
|
|
|
+ <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>
|
|
|
@@ -28,148 +41,120 @@
|
|
|
import {
|
|
|
shopAll
|
|
|
} from "@/api/shop.js";
|
|
|
-
|
|
|
export default {
|
|
|
- components: {},
|
|
|
data() {
|
|
|
return {
|
|
|
school_name: '',
|
|
|
shopId: 0,
|
|
|
- shopData: [],
|
|
|
- animationFrameId: null,
|
|
|
- animations: []
|
|
|
+ school_name: '',
|
|
|
+ bubbles: [], // 存储泡泡信息
|
|
|
+ screenWidth: 0, // 屏幕宽度
|
|
|
+ screenHeight: 0, // 屏幕高度
|
|
|
+ animationTimer: null, // 动画定时器
|
|
|
+ selectedBubbleIndex: null, // 当前选中的泡泡索引
|
|
|
+ showPopup: false, // 是否显示弹窗
|
|
|
+ isSelecting: false, // 是否正在选择中
|
|
|
};
|
|
|
},
|
|
|
onLoad(data) {
|
|
|
this.school_name = uni.getStorageSync('school_name');
|
|
|
- this.getQBoxSize();
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.shopAll();
|
|
|
- this.startAnimation();
|
|
|
+ this.getScreenSize(); // 获取屏幕尺寸
|
|
|
+ this.shopAll(); // 泡泡信息
|
|
|
+ this.startAnimation(); // 开始动画
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ // 组件销毁时停止动画
|
|
|
+ if (this.animationTimer) {
|
|
|
+ clearTimeout(this.animationTimer);
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
- scrolltolower() {
|
|
|
- console.log('触底');
|
|
|
+ // 获取屏幕尺寸
|
|
|
+ getScreenSize() {
|
|
|
+ const systemInfo = uni.getSystemInfoSync();
|
|
|
+ this.screenWidth = systemInfo.windowWidth; // 屏幕宽度
|
|
|
+ this.screenHeight = systemInfo.windowHeight * 0.71; // 屏幕高度
|
|
|
},
|
|
|
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);
|
|
|
+ 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.updateBalls();
|
|
|
- this.animationFrameId = setTimeout(animate, 16); // 确保正确调用 animate 函数
|
|
|
+ this.updateBubblesPosition();
|
|
|
+ this.animationTimer = setTimeout(animate, 16); // 模拟 60 FPS
|
|
|
};
|
|
|
- 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);
|
|
|
- }
|
|
|
+ // 更新泡泡位置
|
|
|
+ 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 (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);
|
|
|
- }
|
|
|
+
|
|
|
+ // 碰到上下边框时反转垂直速度
|
|
|
+ if (bubble.y <= 0 || bubble.y + bubble.size >= this.screenHeight) {
|
|
|
+ bubble.speedY = -bubble.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;
|
|
|
+ // 随机选择一个泡泡
|
|
|
+ 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; // 显示弹窗
|
|
|
}
|
|
|
- }).exec();
|
|
|
- }
|
|
|
+ }, 100); // 每 100 毫秒闪烁一次
|
|
|
+ },
|
|
|
+ // 关闭弹窗
|
|
|
+ closePopup() {
|
|
|
+ this.showPopup = false;
|
|
|
+ this.selectedBubbleIndex = null; // 重置选中状态
|
|
|
+ },
|
|
|
},
|
|
|
- beforeDestroy() {
|
|
|
- // 清除定时器
|
|
|
- clearTimeout(this.animationFrameId);
|
|
|
- }
|
|
|
- }
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
+<style>
|
|
|
.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 {
|
|
|
+ .qp-img {
|
|
|
width: 118rpx;
|
|
|
- height: 154rpx;
|
|
|
+ height: 118rpx;
|
|
|
position: absolute;
|
|
|
- padding-top: 28rpx;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
}
|
|
|
|
|
|
.shop-logo {
|
|
|
@@ -178,6 +163,14 @@
|
|
|
margin: 0 0 34rpx 29rpx;
|
|
|
}
|
|
|
|
|
|
+ .pt-49 {
|
|
|
+ padding-top: 49rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mb-82 {
|
|
|
+ margin-bottom: 82rpx;
|
|
|
+ }
|
|
|
+
|
|
|
.bg-img {
|
|
|
width: 100%;
|
|
|
height: 89%;
|
|
|
@@ -186,29 +179,69 @@
|
|
|
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: relative;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 135rpx;
|
|
|
+ left: 0;
|
|
|
}
|
|
|
|
|
|
.but-img {
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
+ z-index: 1;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
- .pt-49 {
|
|
|
- padding-top: 49rpx;
|
|
|
+ .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;
|
|
|
}
|
|
|
|
|
|
- .qp-img {
|
|
|
- width: 118rpx;
|
|
|
- height: 118rpx;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
+ .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>
|
