修改证书图片

tanghaolin

2025-02-19 ae33d67ec2a4edc3ccfbb61631c475cfb74bc206

 src/views/ProductDetail.vue

@@ -4,7 +4,7 @@
      <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 :to="{ path: '/certified-products' }">能效产品</el-breadcrumb-item>
            <el-breadcrumb-item>产品详情</el-breadcrumb-item>
         </el-breadcrumb>
      </div>
@@ -24,10 +24,10 @@
               <div class="text-gray-500 mb-2">订货编码：{{ product.applicationCode }}</div>
               <div class="flex items-center gap-2">
                  <span class="text-gray-500">能效等级：</span>
                  <div class="flex items-center">
                     <img :src="product.eecLevelIcon" class="h-8" />
                     <span class="text-white relative right-[42px] top-[-1px]">1</span>
                     <span class="text-white relative right-[30px] top-[-1px] text-sm">一级能效</span>
                  <div class="flex items-center relative">
                     <img :src="EecLevelEnum[productDataRef.EnergyEfficiencyClass]?.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>
               </div>
            </div>
@@ -62,6 +62,10 @@
            <div class="flex gap-4">
               <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>
@@ -89,13 +93,30 @@
                  </div>
               </div>
            </el-tab-pane>
            <el-tab-pane label="规格参数" name="params">
            <el-tab-pane label="性能曲线" name="PerformanceCurve">
               <div style="width: 1200px; height: 750px" v-show="false">
                  <LXBChart ref="lxbChartCtrl"></LXBChart>
               </div>
               <el-empty description="暂无性能曲线信息" />
            </el-tab-pane>
            <el-tab-pane label="变速曲线" name="params">
               <!-- <div style="width: 1200px; height: 750px"></div> -->
               <el-empty description="暂无变速曲线信息" />
            </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">
                  <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>
                  <prop ref="propCtrl"></prop>
               </div>
            </el-tab-pane>
            <el-tab-pane label="选型报告" name="SelectReport">
               <el-empty description="暂无报告" />	
            </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>
            </el-tab-pane>
            <el-tab-pane label="包装售后" name="service">
@@ -153,15 +174,22 @@
</template>

<script setup lang="ts">
import EecLevel1 from '@/assets/icons/energy_level_1.svg';
import { Check } from '@element-plus/icons-vue';
import EecLevel1 from '@/assets/icons/energy1.png';
import EecLevel2 from '@/assets/icons/energy2.png';
import { SERVE_URL } from '@/constants';
import { Check, TrendCharts } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

import axios from 'axios';
import pumpDetailInfo from './mock/DetailsInfo';
import LXBChart from '@/components/Chart/LXBChart.vue';
import prop from './components/prop.vue';
const route = useRoute();
const router = useRouter();

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

@@ -186,6 +214,7 @@
   protection: '',
   eecLevelIcon: EecLevel1,
   package: '电机 × 1, 说明书 × 1, 合格证 × 1',
   certificatePath: '',
   specifications: {
      产品型号: '',
      额定功率: '',
@@ -206,46 +235,110 @@
   ElMessage.success('已添加到购物车');
};

const handleViewCurve = () => {
   window.open('http://www.xpump.net/V4/#/CN/Target/DOOCH/Pump/Index/C69S4/8978', '_blank');
};

const confirmOrder = () => {
   if (!orderForm.value.name || !orderForm.value.phone || !orderForm.value.address) {
      ElMessage.warning('请填写完整的收货信息');
      return;
   }
   // 保存订单信息到localStorage
   const orderInfo = {
      orderNo: 'DD' + Date.now(),
      totalAmount: product.value.price,
      createTime: new Date().toLocaleString(),
      product: product.value,
      address: orderForm.value,
   };
   localStorage.setItem('currentOrder', JSON.stringify(orderInfo));

   ElMessage.success('订单提交成功');
   showBuyDialog.value = false;
   // 这里可以添加跳转到订单详情页的逻辑
   // 跳转到支付页面
   router.push('/payment');
};
const EecLevelEnum = {
   1: { name: '一级能效', icon: EecLevel1 },
   2: { name: '二级能效', icon: EecLevel2 },
};

const productDataRef = ref({});
onMounted(() => {
   // 从localStorage获取产品信息
   const savedProduct = localStorage.getItem('currentProduct');
   if (savedProduct) {
      const productData = JSON.parse(savedProduct);
      productDataRef.value = productData;
      // 合并默认值和保存的产品数据
      product.value = {
         ...product.value,
         id: productData.id,
         name: productData.name,
         applicationCode: productData.applicationCode,
         price: productData.price,
         image: productData.logo || productData.image,
         brand: productData.brand || productData.name.split(' ')[0],
         model: productData.model || '',
         power: productData.power || '',
         voltage: productData.voltage || '',
         speed: productData.speed || '',
         protection: productData.protection || '',
         detailImages: productData.detailImages || [productData.logo || productData.image],
         id: productData.Id,
         name: productData.ModelType,
         applicationCode: productData.RecordNumber,
         price: productData.Price,
         image: `${SERVE_URL}${productData.PhysicalPicturePath}`,
         certificatePath: `${SERVE_URL}${productData.CertificatePath}`,
         brand: productData.CompanyName,
         model: productData.Model,
         power: '详询厂家',
         voltage: '详询厂家',
         speed: '详询厂家',
         protection: '详询厂家',
         detailImages: [`${SERVE_URL}${productData.PhysicalPicturePath}`],
         specifications: {
            ...product.value.specifications,
            产品型号: productData.model || '',
            额定功率: productData.power || '',
            额定电压: productData.voltage || '',
            防护等级: productData.protection || '',
            产品型号: productData.Model,
            生产企业: productData.CompanyName,
            备案编号: productData.RecordNumber,
            备案时间: productData.RecordTime,
            能效等级: `${productData.EnergyEfficiencyClass}级`,
         },
      };
   }
   initDetailData();
});
const initDetailData = () => {
   let m_userUnitSetting = {
      NPSH: 0,
      isAdjustCoordUnitByUserSetting: false,
   };
   let pumpInfoData = pumpDetailInfo;
   let pumpBaseInfo = {
      CorpID: 69,
      SeriesID: 'C69S4',
      PumpID: 8978,
      SubID: 0,
      ChartType: 3,
      PumpStyle: 0,
      PumpName4File: 'DRL1-18S',
      CorpName: '中韩杜科',
      PumpName: 'DRL1-18S',
      SeriesName: 'DRL',
      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,
      },
   };
   lxbChartCtrl.value.initPumpInfoData(0, pumpInfoData, () => {}, m_userUnitSetting);

   //初始化属性控件
   propCtrl.value.initialData(0, pumpBaseInfo, pumpInfoData.PartFullInfo, pumpInfoData.SettingInfo);
};
</script>

<style scoped>