|
|
@@ -0,0 +1,162 @@
|
|
|
+<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>
|