<template>
|
<div class="container mx-auto px-4 py-8 bg-white">
|
<!-- 面包屑导航 -->
|
<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>产品详情</el-breadcrumb-item>
|
</el-breadcrumb>
|
</div>
|
|
<div class="flex gap-8">
|
<!-- 左侧商品图片 -->
|
<div class="w-[400px] flex-shrink-0">
|
<el-image :src="product.image" fit="contain" :preview-src-list="[product.image]" class="w-full h-[400px] border rounded-lg" />
|
</div>
|
|
<!-- 右侧商品信息 -->
|
<div class="flex-1">
|
<h1 class="text-2xl font-medium mb-4">{{ product.name }}</h1>
|
|
<!-- 订货信息 -->
|
<div class="bg-gray-50 p-4 rounded-lg mb-4">
|
<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 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>
|
|
<!-- 价格区域 -->
|
<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>
|
</div>
|
</div>
|
|
<!-- 服务承诺 -->
|
<div class="border-t border-b py-4 mb-6">
|
<div class="flex items-center gap-6">
|
<div class="flex items-center gap-2">
|
<el-icon class="text-green-500"><Check /></el-icon>
|
<span>正品保证</span>
|
</div>
|
<div class="flex items-center gap-2">
|
<el-icon class="text-green-500"><Check /></el-icon>
|
<span>极速发货</span>
|
</div>
|
<div class="flex items-center gap-2">
|
<el-icon class="text-green-500"><Check /></el-icon>
|
<span>售后无忧</span>
|
</div>
|
</div>
|
</div>
|
|
<!-- 购买按钮 -->
|
<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>
|
</div>
|
</div>
|
</div>
|
|
<!-- 商品详情 -->
|
<div class="mt-8">
|
<el-tabs v-model="activeTab">
|
<el-tab-pane label="商品介绍" name="intro">
|
<div class="p-6">
|
<h3 class="text-lg font-medium mb-4">产品参数</h3>
|
<el-descriptions :column="2" border>
|
<el-descriptions-item label="品牌">{{ product.brand }}</el-descriptions-item>
|
<el-descriptions-item label="型号">{{ product.model }}</el-descriptions-item>
|
<el-descriptions-item label="功率">{{ product.power }}</el-descriptions-item>
|
<el-descriptions-item label="电压">{{ product.voltage }}</el-descriptions-item>
|
<el-descriptions-item label="转速">{{ product.speed }}</el-descriptions-item>
|
<el-descriptions-item label="防护等级">{{ product.protection }}</el-descriptions-item>
|
</el-descriptions>
|
|
<div class="mt-8">
|
<h3 class="text-lg font-medium mb-4">产品详情</h3>
|
<div class="space-y-4">
|
<img v-for="(img, index) in product.detailImages" :key="index" :src="img" class="w-full" alt="产品详情图" />
|
</div>
|
</div>
|
</div>
|
</el-tab-pane>
|
<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="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>
|
</el-tab-pane>
|
<el-tab-pane label="包装售后" name="service">
|
<div class="p-6">
|
<h3 class="text-lg font-medium mb-4">包装清单</h3>
|
<p class="text-gray-600">{{ product.package }}</p>
|
|
<h3 class="text-lg font-medium mt-6 mb-4">售后服务</h3>
|
<div class="text-gray-600">
|
<p>1. 本产品全国联保，享受三包服务</p>
|
<p>2. 质保期：12个月</p>
|
<p>3. 对于质量问题，提供免费维修服务</p>
|
</div>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
|
<!-- 购买确认对话框 -->
|
<el-dialog v-model="showBuyDialog" title="确认订单" width="500px">
|
<div class="p-4">
|
<div class="flex items-center gap-4 mb-6">
|
<el-image :src="product.image" class="w-20 h-20" />
|
<div>
|
<div class="font-medium">{{ product.name }}</div>
|
<div class="text-red-500 mt-2">¥{{ product.price }}</div>
|
</div>
|
</div>
|
|
<el-form :model="orderForm" label-width="100px">
|
<el-form-item label="收货人">
|
<el-input v-model="orderForm.name" placeholder="请输入收货人姓名" />
|
</el-form-item>
|
<el-form-item label="联系电话">
|
<el-input v-model="orderForm.phone" placeholder="请输入联系电话" />
|
</el-form-item>
|
<el-form-item label="收货地址">
|
<el-input v-model="orderForm.address" type="textarea" placeholder="请输入详细地址" />
|
</el-form-item>
|
</el-form>
|
</div>
|
<template #footer>
|
<div class="flex justify-between items-center">
|
<div class="text-lg">
|
实付款：<span class="text-red-500 font-medium">¥{{ product.price }}</span>
|
</div>
|
<div class="flex gap-2">
|
<el-button @click="showBuyDialog = false">取消</el-button>
|
<el-button type="primary" @click="confirmOrder">提交订单</el-button>
|
</div>
|
</div>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup lang="ts">
|
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, 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: '',
|
address: '',
|
});
|
|
// 从localStorage获取产品信息
|
const product = ref({
|
id: '',
|
name: '',
|
applicationCode: '',
|
quantity: 1,
|
price: '',
|
image: '',
|
brand: '',
|
model: '',
|
power: '',
|
voltage: '',
|
speed: '',
|
protection: '',
|
eecLevelIcon: EecLevel1,
|
package: '电机 × 1, 说明书 × 1, 合格证 × 1',
|
certificatePath: '',
|
specifications: {
|
产品型号: '',
|
额定功率: '',
|
额定电压: '',
|
防护等级: '',
|
绝缘等级: 'F级',
|
效率等级: '一级能效',
|
重量: '约12kg',
|
},
|
detailImages: [],
|
});
|
|
const handleBuyNow = () => {
|
// 创建订单商品信息
|
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 = () => {
|
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 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.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: {
|
产品型号: productData.Model,
|
生产企业: productData.CompanyName,
|
备案编号: productData.RecordNumber,
|
备案时间: productData.RecordTime,
|
能效等级: `${productData.EnergyEfficiencyClass}级`,
|
},
|
};
|
isPumpDetail.value = productData.Id.includes('Pupm') ? 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.Id.includes('FJ') ? 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: '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,
|
},
|
};
|
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>
|
:deep(.el-tabs__nav-wrap::after) {
|
height: 1px;
|
}
|
|
:deep(.el-descriptions__label) {
|
width: 120px;
|
font-weight: normal;
|
}
|
</style>
|
