删除多余照片

tanghaolin

2025-04-15 8c3d15eae99d51193e20ff222dedf96cdba57b33

 src/views/ProductDetail.vue

@@ -36,7 +36,7 @@
            <div class="mb-6">
               <div class="flex items-baseline gap-2">
                  <span class="text-gray-500">价格：</span>
                  <span class="text-2xl font-bold text-red-500">¥{{ product.price }}</span>
                  <span class="text-2xl font-bold text-red-500">面议</span>
               </div>
            </div>

@@ -60,12 +60,22 @@

            <!-- 购买按钮 -->
            <div class="flex gap-4">
               <div class="flex items-center mb-4">
                  <el-input-number class="!w-[100px]" v-model="product.quantity" :min="1" :max="99" size="large" controls-position="right">
                     <template #decrease-icon>
                        <el-icon>
                           <Minus />
                        </el-icon>
                     </template>
                     <template #increase-icon>
                        <el-icon>
                           <Plus />
                        </el-icon>
                     </template>
                  </el-input-number>
               </div>
               <el-button size="large" @click="handleAddToCart">加入购物车</el-button>
               <el-button type="primary" size="large" @click="handleBuyNow">立即购买</el-button>
               <!-- <el-button size="large" @click="handleAddToCart">加入购物车</el-button> -->
               <!-- <el-button type="info" plain size="large" class="flex items-center" @click="handleViewCurve">
                  <el-icon class="mr-1" style="font-size: 18px"><TrendCharts /></el-icon>
                  性能曲线
               </el-button> -->
            </div>
         </div>
      </div>
@@ -193,6 +203,8 @@
import LXBChart from '@/components/Chart/LXBChart.vue';
import MultiSpeedChart from '@/components/Chart/MultiSpeedChart.vue';
import prop from './components/prop.vue';
import { useCartStore } from '@/stores/useCartStore';

const route = useRoute();
const router = useRouter();

@@ -215,6 +227,7 @@
   id: '',
   name: '',
   applicationCode: '',
   quantity: 1,
   price: '',
   image: '',
   brand: '',
@@ -239,12 +252,104 @@
});

const handleBuyNow = () => {
   // showBuyDialog.value = true;
   // 创建订单商品信息
   const orderItem = {
      addID: product.value.id,
      addTime: new Date().toLocaleString(),
      name: product.value.name,
      price: Number(product.value.price),
      quantity: product.value.quantity,
      image: product.value.image,
      selected: true  // 默认选中
   };

   // 将商品添加到购物车并设置为选中状态
   const cartStore = useCartStore();
	
   // 清除购物车中其他商品的选中状态
   cartStore.items.forEach(item => {
      cartStore.updateItemSelected(item.addID, false);
   });
	
   // 添加当前商品到购物车并选中
   cartStore.addToCart(orderItem);
   cartStore.updateItemSelected(orderItem.addID, true);

   // 跳转到订单页面
   router.push('/order-info');
};

// 创建飞入动画元素
const createFlyingElement = (productImg, cart) => {
  const imgClone = productImg.cloneNode(true) as HTMLElement;
  const startRect = productImg.getBoundingClientRect();
  const endRect = cart.getBoundingClientRect();

  // 设置初始样式
  Object.assign(imgClone.style, {
    position: 'fixed',
    width: `${startRect.width}px`, 
    height: `${startRect.height}px`,
    left: `${startRect.left}px`,
    top: `${startRect.top}px`,
    zIndex: '1000',
    transition: 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
    borderRadius: '50%',
    opacity: '0.8'
  });

  return {imgClone, endRect};
};

// 执行飞入动画
const animateToCart = (imgClone, endRect) => {
  Object.assign(imgClone.style, {
    width: '30px',
    height: '30px', 
    left: `${endRect.left + endRect.width / 2 - 15}px`,
    top: `${endRect.top + endRect.height / 2 - 15}px`,
    opacity: '0'
  });
};

// 添加商品到购物车
const addItemToCart = () => {
  const cartStore = useCartStore();
  const newCartItem = {
    addID: product.value.id,
    addTime: new Date().toLocaleString(),
    name: product.value.name,
    price: Number(product.value.price),
    quantity: product.value.quantity,
    image: product.value.image,
    selected: false,
   companyName: product.value.brand,
   model: product.value.model,
  };

  cartStore.addToCart(newCartItem);
  ElMessage.success('已添加到购物车');
};

const handleAddToCart = () => {
   ElMessage.success('已添加到购物车');
  const productImg = document.querySelector('.el-image__inner');
  const cart = document.querySelector('.cart-badge');
  
  if (!productImg || !cart) return;

  const {imgClone, endRect} = createFlyingElement(productImg as HTMLElement, cart);
  document.body.appendChild(imgClone);

  // 触发动画
  setTimeout(() => {
    animateToCart(imgClone, endRect);

    // 动画结束后处理
    setTimeout(() => {
      document.body.removeChild(imgClone);
      addItemToCart();
    }, 500);
  }, 0);
};

const handleViewCurve = () => {