修改申报流程界面

tanghaolin

8 天以前 49ab96a40dd2e95cde3e455b07f990e49bbc9cee

 src/views/ProductDetail.vue

@@ -4,7 +4,8 @@
      <div class="mb-6 text-gray-500">
         <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/certified-products' }">能效产品</el-breadcrumb-item>
            <!-- 我需要跳转到上一页 -->
            <el-breadcrumb-item @click="handleBack">{{product.modelType  }}</el-breadcrumb-item>
            <el-breadcrumb-item>产品详情</el-breadcrumb-item>
         </el-breadcrumb>
      </div>
@@ -25,7 +26,7 @@
               <div class="flex items-center gap-2">
                  <span class="text-gray-500">能效等级：</span>
                  <div class="flex items-center relative">
                     <img :src="EecLevelEnum[productDataRef.EnergyEfficiencyClass]?.icon" class="h-8" />
                     <img :src="EecLevelEnum[productDataRef.eec]?.icon" class="h-8" />
                     <!-- <span class="text-white relative right-[42px] top-[-1px]">1</span> -->
                     <!-- <span class="text-white absolute left-[16px] bottom-[10px] text-small">{{ EecLevelEnum[productDataRef.EnergyEfficiencyClass]?.name }}</span> -->
                  </div>
@@ -36,7 +37,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 +61,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>
@@ -117,7 +128,7 @@
               <el-empty description="暂无变速曲线信息" v-show="!isPumpDetail" />
            </el-tab-pane>
            <el-tab-pane label="选型报告" name="SelectReport">
               <img width="1200" height="auto" :src="product.SelectReport" v-if="isFan" />
               <img width="1200" height="auto" :src="product.SelectReport" v-if="isFan || isPumpDetail" />
               <el-empty description="暂无报告" v-show="!isPumpDetail && !isFan" />
            </el-tab-pane>
            <el-tab-pane label="测试报告" name="certificate">
@@ -180,8 +191,9 @@
</template>

<script setup lang="ts">
import EecLevel1 from '@/assets/icons/energy1.png';
import EecLevel2 from '@/assets/icons/energy2.png';
import EecLevel1 from '@/assets/icons/ecc1.svg';
import EecLevel2 from '@/assets/icons/ecc2.svg';
import EecLevel3 from '@/assets/icons/ecc3.svg';
import { SERVE_URL } from '@/constants';
import { Check, TrendCharts } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
@@ -189,10 +201,12 @@
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import pumpDetailInfo from './mock/DetailsInfo';
import pumpDetailInfo_WQ from "./mock/DetailsInfo_WQ"
import pumpDetailInfo_WQ from './mock/DetailsInfo_WQ';
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 +229,7 @@
   id: '',
   name: '',
   applicationCode: '',
   quantity: 1,
   price: '',
   image: '',
   brand: '',
@@ -239,17 +254,113 @@
});

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 = () => {
   window.open('http://www.xpump.net/V4/#/CN/Target/DOOCH/Pump/Index/C69S4/8978', '_blank');
};

const handleBack = ()=>{
   router.go(-1);
}

const confirmOrder = () => {
   if (!orderForm.value.name || !orderForm.value.phone || !orderForm.value.address) {
@@ -274,6 +385,7 @@
const EecLevelEnum = {
   1: { name: '一级能效', icon: EecLevel1 },
   2: { name: '二级能效', icon: EecLevel2 },
   3: { name: '二级能效', icon: EecLevel3 },
};

const productDataRef = ref({});
@@ -294,7 +406,9 @@
         image: `${SERVE_URL}${productData.PhysicalPicturePath}`,
         certificatePath: `${SERVE_URL}${productData.CertificatePath}`,
         brand: productData.CompanyName,
         model: productData.Model,
         model: productData.model,
         modelType: productData.ModelType,
			
         power: '详询厂家',
         voltage: '详询厂家',
         speed: '详询厂家',
@@ -308,8 +422,15 @@
            能效等级: `${productData.EnergyEfficiencyClass}级`,
         },
      };
      isPumpDetail.value = productData.Id.includes('Pupm') ? true : false;
      isFan.value = productData.Id.includes('FJ') ? true : false;
      isPumpDetail.value = productData.type == 1 ? true : false;
      if (product.value.model.includes('DSWQ') && isPumpDetail.value) {
         product.value.SelectReport = 'static/EecProductData/image/1/DSWQ_SelectReport.png';
      }
      if (product.value.model.substring(0, 3).includes('DRL') && isPumpDetail.value) {
         product.value.SelectReport = 'static/EecProductData/image/1/DRL_SelectReport.png';
      }

      isFan.value = productData.Type== 7 ? true : false;
      if (isFan.value) {
         product.value.Chart = 'static/EecProductData/image/3/fan_chart.png';
         product.value.SelectReport = 'static/EecProductData/image/3/SelectReport.png';
@@ -323,7 +444,7 @@
      isAdjustCoordUnitByUserSetting: false,
   };
   let pumpInfoData = pumpDetailInfo;
   if(product.value.model.includes('DSWQ')) {
   if (product.value.model.includes('DSWQ')) {
      pumpInfoData = pumpDetailInfo_WQ;
   }
   let pumpBaseInfo = {
@@ -333,10 +454,11 @@
      SubID: 0,
      ChartType: 3,
      PumpStyle: 0,
      PumpName4File: 'DRL1-18S',
      CorpName: '中韩杜科',
      PumpName: 'DRL1-18S',
      SeriesName: 'DRL',
      PumpName4File: product.value.model,
      CorpName: product.value.CompanyName,
      PumpName: product.value.model,

      SeriesName: product.value.ModelType,
      CatalogName: '立式多级泵',
      EecStauts: 0,
      EecGrade: 0,