|
|
@@ -1,214 +1,206 @@
|
|
|
<template>
|
|
|
- <view class="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" 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>
|
|
|
+ <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>
|
|
|
|
|
|
-<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;
|
|
|
- // 生成更大的速度，范围在 -5 到 5 之间，使小球移动更快
|
|
|
- const speedX = (Math.random() - 0.5) * 5;
|
|
|
- const speedY = (Math.random() - 0.5) * 5;
|
|
|
- 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();
|
|
|
- // 进一步减小调用间隔，例如 20 毫秒，提高更新频率
|
|
|
- this.animationFrameId = setTimeout(animate, 20);
|
|
|
- };
|
|
|
- animate();
|
|
|
- },
|
|
|
- updateBalls() {
|
|
|
- for (const ball of this.shopData) {
|
|
|
- // 更新小球位置
|
|
|
- ball.x += ball.speedX;
|
|
|
- ball.y += ball.speedY;
|
|
|
- // 处理左右边界碰撞
|
|
|
- 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>
|
|
|
+ <!-- 选择按钮 -->
|
|
|
+ <view class="button" @click="selectRandomBubble">随机选择一个泡泡</view>
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
-.max-w-118{
|
|
|
- max-width: 118rpx;
|
|
|
- }
|
|
|
-.qp-box-ccc {
|
|
|
- background: #ccc;
|
|
|
- }
|
|
|
+ <!-- 弹窗 -->
|
|
|
+ <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>
|
|
|
|
|
|
-.z-2 {
|
|
|
- position: relative;
|
|
|
- z-index: 2;
|
|
|
- }
|
|
|
+<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;
|
|
|
+ }
|
|
|
|
|
|
-.q-box {
|
|
|
- width: 100%;
|
|
|
- height: 71%;
|
|
|
- padding-bottom: constant(safe-area-inset-bottom);
|
|
|
- padding-bottom: env(safe-area-inset-bottom);
|
|
|
- position: relative;
|
|
|
- }
|
|
|
+ // 碰到上下边框时反转垂直速度
|
|
|
+ if (bubble.y <= 0 || bubble.y + bubble.size >= this.screenHeight) {
|
|
|
+ bubble.speedY = -bubble.speedY;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 随机选择一个泡泡
|
|
|
+ selectRandomBubble() {
|
|
|
+ if (this.isSelecting) return; // 防止重复点击
|
|
|
+ this.isSelecting = true;
|
|
|
|
|
|
-.ball {
|
|
|
- width: 118rpx;
|
|
|
- height: 154rpx;
|
|
|
- position: absolute;
|
|
|
- padding-top: 28rpx;
|
|
|
- }
|
|
|
+ // 随机选择过程动画
|
|
|
+ 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>
|
|
|
|
|
|
-.shop-logo {
|
|
|
- width: 68.5rpx;
|
|
|
- height: 68.5rpx;
|
|
|
- margin: 0 0 34rpx 29rpx;
|
|
|
- }
|
|
|
+<style>
|
|
|
+ .bg-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 89%;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
|
|
|
-.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;
|
|
|
+ /* 优化性能 */
|
|
|
+ }
|
|
|
|
|
|
-.but-box {
|
|
|
- width: 100%;
|
|
|
- height: 170rpx;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
|
|
|
-.but-img {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- 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;
|
|
|
+ }
|
|
|
|
|
|
-.pt-49 {
|
|
|
- padding-top: 49rpx;
|
|
|
- }
|
|
|
+ .popup-content {
|
|
|
+ background-color: white;
|
|
|
+ padding: 20px;
|
|
|
+ border-radius: 10px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
|
|
|
-.qp-img {
|
|
|
- width: 118rpx;
|
|
|
- height: 118rpx;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- }
|
|
|
+ .close-button {
|
|
|
+ margin-top: 10px;
|
|
|
+ padding: 5px 10px;
|
|
|
+ background-color: #007aff;
|
|
|
+ color: white;
|
|
|
+ border-radius: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
</style>
|
