fix(sideBard): 购物车商品列表问题修复

src/components/Sidebar.vue

@@ -8,12 +8,11 @@
   <div>
     <div class="bian">
       <el-popover
-        placement="left-start"
+        placement="left"
         v-if="
           (specialArea == 31 && userInfo.isMakerSpace == 0) || specialArea != 31
         "
         width="412"
-        offset="33"
         popper-class="area_popper"
         :visible-arrow="false"
         @show="carShow"
@@ -348,8 +347,13 @@ export default {
       this.$refs.popover.doClose();
     },
     // eslint-disable-next-line no-unused-vars
-    carShow(e) {
+    carShow() {
       this.$emit("showCar");
+      setTimeout(() => {
+        if (this.$refs.popover && this.$refs.popover.showPopper) {
+          this.$refs.popover.updatePopper();
+        }
+      }, 100);
     },
     showShare() {
       this.$emit("showShare");
@@ -767,7 +771,7 @@ export default {
   width: 86px; // height: 425px;
   background: #ffffff;
   box-shadow: -8px 1px 20px 0px rgba(165, 165, 165, 0.5);
-  top: 60%;
+  top: 50%;
   transform: translate(0, -50%);
   right: 0;
   padding: 40px 0 0 0;
@@ -826,7 +830,7 @@ export default {
   }
   .pop_tb {
     padding: 34px 0px 0 0;
-    max-height: 320px;
+    max-height: 50vh;
     overflow: auto;
     &::-webkit-scrollbar {
       width: 0;

src/views/shoppingMall/index.vue

@@ -393,12 +393,12 @@
     <poster v-if="isPost"></poster>
     <!-- Flying animation element -->
     <div
-      v-if="isAnimating"
+      v-for="flyer in flyingItems"
-      ref="flyer"
+      :key="flyer.id"
       class="flyer-element"
-      :style="flyerStyle"
+      :style="flyer.style"
     >
-      <img :src="flyerImage" alt="flying item" />
+      <img :src="flyer.image" alt="flying item" />
     </div>
     <div>
       <!-- 公告弹窗 -->
@@ -480,9 +480,7 @@ export default {
       total: 100,
       moneySymbol: "",
       isLoading: false,
-      isAnimating: false,
+      flyingItems: [],
-      flyerImage: "",
-      flyerStyle: {},
     };
   },
   watch: {
@@ -871,6 +869,7 @@ export default {
       // closePopover
       this.$refs.sideBar.closePopover();
       let carList;
+
       if (item.specialArea && item.specialArea != 21) {
         carList = {
           specialArea: item.specialArea,
@@ -889,6 +888,7 @@ export default {
           productGroup: item.productGroup,
         };
       }
+
       if (
         item.isMakerGift == 2 &&
         (item.specialArea == 1 || item.specialArea == 3)
@@ -905,8 +905,8 @@ export default {
           }
         });
 
-        // --- Start Manual Animation ---
+        // --- Start New Animation Logic for Multiple Flyers ---
-        const startElement = ev.target;
+        const startElement = ev.target.closest(".addCarImg") || ev.target; // Prefer button, fallback to icon
         const sidebarComponent = this.$refs.sideBar;
         const targetElement = sidebarComponent
           ? sidebarComponent.$refs.shoppCar
@@ -927,82 +927,55 @@ export default {
           return;
         }
 
-        // 1. Get coordinates
-        console.log("[Animation Debug] Start Element:", startElement);
-        console.log("[Animation Debug] Target Element:", targetElement);
         const startRect = startElement.getBoundingClientRect();
         const targetRect = targetElement.getBoundingClientRect();
-        console.log("[Animation Debug] Start Rect:", startRect);
-        console.log("[Animation Debug] Target Rect:", targetRect);
 
-        // Calculate start position (center of button)
         const startX = startRect.left + startRect.width / 2;
         const startY = startRect.top + startRect.height / 2;
-        console.log(
-          `[Animation Debug] Calculated Coords: Start(${startX}, ${startY})`
-        );
-
-        // Calculate end position (center of cart icon)
         const endX = targetRect.left + targetRect.width / 2;
         const endY = targetRect.top + targetRect.height / 2;
-        console.log(
-          `[Animation Debug] Calculated Coords: End(${endX}, ${endY})`
-        );
 
-        // 2. Set flyer image and initial style
+        const flyerId = Date.now() + Math.random(); // Unique ID for the flyer
-        this.flyerImage = item.cover1;
+        const newFlyer = {
-        this.flyerStyle = {
+          id: flyerId,
-          transform: "scale(1)",
+          image: item.cover1,
-          opacity: 1,
+          style: {
-          // Set initial position (adjusting for new flyer size 70px)
+            position: "fixed", // Ensure fixed positioning for correct coordinates
-          left: `${startX - 35}px`,
+            zIndex: 9999,
-          top: `${startY - 35}px`,
+            width: "70px",
+            height: "70px",
+            borderRadius: "50%",
+            overflow: "hidden",
+            // Transition properties are defined in the .flyer-element class
+            transform: "scale(1)",
+            opacity: 1,
+            left: `${startX - 35}px`, // Adjust for flyer size (70px / 2)
+            top: `${startY - 35}px`,
+          },
         };
-        console.log(
-          "[Animation Debug] Initial flyerStyle:",
-          JSON.stringify(this.flyerStyle)
-        );
-        console.log("[Animation Debug] Setting isAnimating to true...");
 
-        // 3. Start animation
+        this.flyingItems.push(newFlyer);
-        this.isAnimating = true;
 
-        // 4. Apply end state styles in the next frame to trigger transition
         this.$nextTick(() => {
-          console.log(
-            "[Animation Debug] Inside $nextTick. Requesting animation frame..."
-          );
           requestAnimationFrame(() => {
-            console.log(
+            const currentFlyer = this.flyingItems.find((f) => f.id === flyerId);
-              "[Animation Debug] Inside requestAnimationFrame. Applying end styles..."
+            if (currentFlyer) {
-            );
+              // Update style to trigger transition
-            this.flyerStyle = {
+              currentFlyer.style = {
-              ...this.flyerStyle, // Keep initial position
+                ...currentFlyer.style,
-              // Apply final position and style changes for transition
+                transform: "scale(0.1)",
-              transform: "scale(0.1)",
+                opacity: 0.8,
-              opacity: 0.8, // Increase final opacity further
+                left: `${endX - 4}px`, // Adjust for final smaller size (70px * 0.1 / 2 = 3.5 -> 4)
-              left: `${endX - 4}px`, // Adjust for final smaller size (70px * 0.1 / 2 = 3.5 -> 4)
+                top: `${endY - 4}px`,
-              top: `${endY - 4}px`,
+              };
-            };
+            }
-            console.log(
-              "[Animation Debug] End flyerStyle applied:",
-              JSON.stringify(this.flyerStyle)
-            );
           });
         });
 
-        // 5. Hide flyer after animation duration (match CSS transition duration)
-        console.log(
-          "[Animation Debug] Setting timeout to hide flyer in 1200ms"
-        );
         setTimeout(() => {
-          console.log(
+          this.flyingItems = this.flyingItems.filter((f) => f.id !== flyerId);
-            "[Animation Debug] Timeout finished. Setting isAnimating to false."
+        }, 1200); // Match CSS transition duration (1.2s)
-          );
+        // --- End New Animation Logic ---
-          this.isAnimating = false;
-        }, 1200); // Match the new CSS transition duration (1.2s)
-
-        // --- End Manual Animation ---
       }
     },
     changeArea(item) {