修改数据与页面逻辑

tanghaolin

10 天以前 04a2d3e3c701a03981c4b66162ff9515f9d7dd12

 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">
               <el-button type="primary" size="large" @click="handleBuyNow">立即购买</el-button>
               <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="info" plain size="large" class="flex items-center" @click="handleViewCurve">
                  <el-icon class="mr-1" style="font-size: 18px"><TrendCharts /></el-icon>
                  性能曲线
               </el-button>
               <el-button type="primary" size="large" @click="handleBuyNow">立即购买</el-button>
            </div>
         </div>
      </div>
@@ -93,16 +104,34 @@
                  </div>
               </div>
            </el-tab-pane>
            <el-tab-pane label="规格参数" name="params">
               <div class="p-6">
                  <el-descriptions :column="1" border>
                     <el-descriptions-item v-for="(value, key) in product.specifications" :key="key" :label="key">
                        {{ value }}
                     </el-descriptions-item>
                  </el-descriptions>
            <el-tab-pane label="性能曲线" name="PerformanceCurve">
               <div style="width: 1200px; height: 750px" v-show="isPumpDetail">
                  <LXBChart ref="lxbChartCtrl"></LXBChart>
               </div>
               <img width="1200" height="auto" :src="product.Chart" v-if="isFan" />
               <el-empty description="暂无性能曲线信息" v-show="!isPumpDetail && !isFan" />
            </el-tab-pane>
            <el-tab-pane label="节能证书" name="certificate">
            <el-tab-pane label="变速曲线" name="params">
               <!-- <div style="width: 1200px; height: 750px"></div> -->
               <div style="width: 1200px; height: 750px" v-show="isPumpDetail">
                  <MultiSpeedChart ref="multiSpeedChartCtrl"></MultiSpeedChart>
               </div>
               <el-empty description="暂无变速曲线信息" v-show="!isPumpDetail" />
            </el-tab-pane>
            <el-tab-pane label="切割曲线" name="CutCurve">
               <el-empty description="暂无切割曲线信息" />
            </el-tab-pane>
            <el-tab-pane label="规格参数" name="SpecificParam">
               <div class="p-6">
                  <prop ref="propCtrl" v-show="isPumpDetail"></prop>
               </div>
               <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 || isPumpDetail" />
               <el-empty description="暂无报告" v-show="!isPumpDetail && !isFan" />
            </el-tab-pane>
            <el-tab-pane label="测试报告" name="certificate">
               <div class="p-6 flex justify-center">
                  <img :src="product.certificatePath" alt="节能证书" class="max-w-full" />
               </div>
@@ -162,19 +191,33 @@
</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';
import { onMounted, ref } from 'vue';
import { onMounted, ref, watch, onUnmounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import pumpDetailInfo from './mock/DetailsInfo';
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();

const lxbChartCtrl = ref();
const multiSpeedChartCtrl = ref();
const propCtrl = ref();
const activeTab = ref('intro');
const showBuyDialog = ref(false);

const isPumpDetail = ref(false);
const isFan = ref(false);
const orderForm = ref({
   name: '',
   phone: '',
@@ -186,6 +229,7 @@
   id: '',
   name: '',
   applicationCode: '',
   quantity: 1,
   price: '',
   image: '',
   brand: '',
@@ -210,16 +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/web/#/CN/Target/DOOCH/Pump/Index/C69S4/8978', '_blank');
   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) {
@@ -244,6 +385,7 @@
const EecLevelEnum = {
   1: { name: '一级能效', icon: EecLevel1 },
   2: { name: '二级能效', icon: EecLevel2 },
   3: { name: '二级能效', icon: EecLevel3 },
};

const productDataRef = ref({});
@@ -253,6 +395,7 @@
   if (savedProduct) {
      const productData = JSON.parse(savedProduct);
      productDataRef.value = productData;

      // 合并默认值和保存的产品数据
      product.value = {
         ...product.value,
@@ -263,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: '详询厂家',
@@ -277,8 +422,75 @@
            能效等级: `${productData.EnergyEfficiencyClass}级`,
         },
      };
console.log(productData,425)
      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';
      }
   }
   initDetailData();
});
const initDetailData = () => {
   let m_userUnitSetting = {
      NPSH: 0,
      isAdjustCoordUnitByUserSetting: false,
   };
   let pumpInfoData = pumpDetailInfo;
   if (product.value.model.includes('DSWQ')) {
      pumpInfoData = pumpDetailInfo_WQ;
   }
   let pumpBaseInfo = {
      CorpID: 69,
      SeriesID: 'C69S4',
      PumpID: 8978,
      SubID: 0,
      ChartType: 3,
      PumpStyle: 0,
      PumpName4File: product.value.model,
      CorpName: product.value.CompanyName,
      PumpName: product.value.model,

      SeriesName: product.value.ModelType,
      CatalogName: '立式多级泵',
      EecStauts: 0,
      EecGrade: 0,
      DefaultMotorPower: 0,
      MaxD2: 75,
      WrkD2: 75,
      MinD2: 75,
      Ratedn: 2900,
      WrkSpeed: 2900,
      FirePumpType: 0,
      DriveType: 0,
      RatedParas: {
         H: '100.5',
         Q: '1',
         E: '41',
         P: '0.67',
         NPSHr: null,
      },
   };
   var cb_dict = {
      //设置曲线修改回调函数
      setChangeWrkCurveCb: (curve) => {
         multiSpeedChartCtrl.value.setWrkCurveInfo(curve);
      },
   };
   if (!isPumpDetail.value) return;
   lxbChartCtrl.value.initPumpInfoData(0, pumpInfoData, cb_dict, m_userUnitSetting);
   multiSpeedChartCtrl.value.initPumpInfoData(0, pumpInfoData, () => {}, m_userUnitSetting);
   //初始化属性控件
   propCtrl.value.initialData(0, pumpBaseInfo, pumpInfoData.PartFullInfo, pumpInfoData.SettingInfo);
};
</script>

<style scoped>