<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 @click="handleBack" style="cursor: pointer;">{{ product.modelType
|
}}</el-breadcrumb-item>
|
<el-breadcrumb-item>产品详情</el-breadcrumb-item>
|
</el-breadcrumb>
|
</div>
|
|
<div class="flex gap-8">
|
<!-- 左侧商品图片 -->
|
<div class="product-img-div 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" /> -->
|
<vue-image-zoomer class=" w-full h-[400px] border rounded-lg" :img-width="400" :show-message="false"
|
:regular="product.image" :zoom="product.image"></vue-image-zoomer>
|
</div>
|
|
<!-- 右侧商品信息 -->
|
<div class="flex flex-1 flex-col gap-[20px]">
|
<h1 class="text-[30px] font-medium" style="margin-bottom: unset">{{ product.name }}</h1>
|
|
<!-- 订货信息 -->
|
<div class="bg-gray-50 rounded-lg ">
|
<div class="text-gray-500 text-[20px] mb-[20px]">订货编码：{{ product.applicationCode }}</div>
|
<div class="flex items-center gap-2">
|
<span class="text-gray-500 text-[20px]">能效等级：</span>
|
<div class="flex items-center relative">
|
<img :src="EecLevelEnum[productDataRef.eec]?.icon" class="h-8" />
|
</div>
|
</div>
|
</div>
|
|
<!-- 价格区域 -->
|
<div class="">
|
<div class="flex items-baseline gap-2 text-[20px]">
|
<span class="text-gray-500">价格：</span>
|
<span class="text-2xl font-bold text-red-500">面议</span>
|
</div>
|
</div>
|
<!-- 购买按钮 -->
|
<div class="flex gap-4">
|
<!-- <div class="flex items-center">
|
<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 type="primary" size="large" color="#003a8f" @click="handleAddToCollect">加入收藏</el-button>
|
</div>
|
</div>
|
</div>
|
|
<!-- 商品详情 -->
|
<div class="mt-8">
|
<el-tabs v-model="activeTab" type="border-card" class="demo-tabs">
|
<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="showAddCollectDialog" title="选择收藏组" width="500px" align-center>
|
<template #header>
|
<span class="purchase-title">选择收藏组</span>
|
</template>
|
|
<div class="">
|
<div class="">
|
<el-input v-model="collectGroupNameSerch" placeholder="">
|
<template #append><el-button color="#003a8f" :icon="Search">搜索</el-button></template>
|
</el-input>
|
</div>
|
<div class="flex items-start flex-col max-h-[300px] min-h-[150px] py-[10px]"
|
style="overflow-y: auto; box-sizing: border-box;">
|
<!-- 收藏组 -->
|
<div class="collect-grp-div px-[10px]" v-for="item in collcetGroup" :key="item.id"
|
@mouseover="item.isSelected = true" @mouseleave="item.isSelected = false">
|
<div class="font-medium">{{ item?.name || "" }}</div>
|
<div class="text-red-500">{{ item.collectList?.length }}</div>
|
<div class="sure-btn" @click="addGroupBtn(item.id)" v-show="item.isSelected">确定</div>
|
</div>
|
</div>
|
<el-divider />
|
<div class="flex w-full">
|
<el-button v-show="!dispCreateInput" type="text" style="color: #003a8f;"
|
@click="dispCreateInput = true">+创建分组</el-button>
|
<div class="create-div" v-show="dispCreateInput">
|
<el-input v-model="collectForm.name" placeholder=""></el-input>
|
<div class="create-right-div">
|
<a class="cancel-btn-div" @click="dispCreateInput = false">取消</a>
|
<a class="create-btn-div" @click="createCollectGroup">创建</a>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script setup lang="ts">
|
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 { ElMessage } from 'element-plus';
|
import { onMounted, ref } from 'vue';
|
import { useRoute, useRouter } from 'vue-router';
|
import pumpDetailInfo from '@/views/mock/DetailsInfo';
|
import pumpDetailInfo_WQ from '@/views/mock/DetailsInfo_WQ';
|
import LXBChart from '@/components/Chart/LXBChart.vue';
|
import MultiSpeedChart from '@/components/Chart/MultiSpeedChart.vue';
|
import prop from '@/views/components/prop.vue';
|
import { useCollectStore } from '@/stores/useCollectStore';
|
import { VueImageZoomer } from 'vue-image-zoomer';
|
import 'vue-image-zoomer/dist/style.css';
|
|
const route = useRoute();
|
const router = useRouter();
|
|
const lxbChartCtrl = ref();
|
const multiSpeedChartCtrl = ref();
|
const propCtrl = ref();
|
const activeTab = ref('intro');
|
const showAddCollectDialog = ref(false);
|
const collectGroupNameSerch = ref('');
|
const dispCreateInput = ref(false);
|
|
const isPumpDetail = ref(false);
|
const isFan = ref(false);
|
const collectForm = ref({
|
name: '',
|
});
|
|
// 从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 EecLevelEnum = {
|
1: { name: '一级能效', icon: EecLevel1 },
|
2: { name: '二级能效', icon: EecLevel2 },
|
3: { name: '二级能效', icon: EecLevel3 },
|
};
|
const collcetGroup = ref([]);
|
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,
|
sid: productData.seriesID,
|
|
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,
|
modelType: productData.ModelType,
|
|
power: '详询厂家',
|
voltage: '详询厂家',
|
speed: '详询厂家',
|
protection: '详询厂家',
|
detailImages: [`${SERVE_URL}${productData.PhysicalPicturePath}`],
|
specifications: {
|
产品型号: productData.Model,
|
生产企业: productData.CompanyName,
|
备案编号: productData.RecordNumber,
|
备案时间: productData.RecordTime,
|
能效等级: `${productData.EnergyEfficiencyClass}级`,
|
},
|
};
|
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();
|
initCollectGroupData();
|
});
|
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);
|
};
|
// 初始化收藏分组数据
|
const initCollectGroupData = () => {
|
const collectStore = useCollectStore();
|
collcetGroup.value = collectStore.items.map(item => {
|
return {
|
...item,
|
isSelected: false
|
}
|
});
|
console.log(collcetGroup.value, 356);
|
}
|
|
|
// 添加商品到购物车
|
const addItemToCart = () => {
|
try {
|
const collectStore = useCollectStore();
|
const newCartItem = {
|
sid: product.value.sid,
|
addID: product.value.id,
|
addTime: new Date().toLocaleString(),
|
name: product.value.name,
|
image: product.value.image,
|
companyName: product.value.brand,
|
model: product.value.model,
|
};
|
collectStore.addToCollect(newCartItem);
|
ElMessage.success('已添加到收藏');
|
} catch (error) {
|
console.log(err)
|
}
|
|
};
|
|
const handleAddToCollect = () => {
|
showAddCollectDialog.value = true;
|
};
|
|
const handleViewCurve = () => {
|
window.open('http://www.xpump.net/V4/#/CN/Target/DOOCH/Pump/Index/C69S4/8978', '_blank');
|
};
|
|
const handleBack = () => {
|
router.go(-1);
|
}
|
|
// 创建收藏分组
|
const createCollectGroup = () => {
|
let groupItem = {
|
id: new Date().getTime(),
|
name: collectForm.value.name,
|
collectList: [],
|
}
|
collcetGroup.value.push(groupItem)
|
dispCreateInput.value = false;
|
|
|
};
|
// 确定添加到分组
|
const addGroupBtn = (id: string) => {
|
const collectStore = useCollectStore();
|
const newCartItem = {
|
sid: product.value.sid,
|
addID: product.value.id,
|
addTime: new Date().toLocaleString(),
|
name: product.value.name,
|
image: product.value.image,
|
companyName: product.value.brand,
|
model: product.value.model,
|
flow: productDataRef.value.flow,
|
head: productDataRef.value.head,
|
speed: productDataRef.value.speed,
|
eta: productDataRef.value.eta,
|
eec: productDataRef.value.eec
|
};
|
for (let i = 0; i < collcetGroup.value.length; i++) {
|
const item = collcetGroup.value[i];
|
if (item.id === id) {
|
const hasCollectItem = collectStore.isExistCollectItem(item)
|
if (hasCollectItem) {
|
ElMessage.warning('该商品已存在，请勿重复添加');
|
return;
|
}
|
item.collectList.push(newCartItem)
|
}
|
}
|
collectStore.setCollectItems(collcetGroup.value);
|
showAddCollectDialog.value = false;
|
ElMessage.success('添加到收藏分组成功');
|
|
}
|
</script>
|
|
<style scoped>
|
.demo-tabs {
|
height: 100%;
|
display: flex;
|
}
|
|
.purchase-title {
|
font-size: 16px;
|
color: #333;
|
font-weight: 500;
|
margin: 10px 0;
|
}
|
|
.create-div {
|
border-radius: 8px;
|
position: relative;
|
width: 400px;
|
height: 32px;
|
padding: 0 4px;
|
border: 1px solid var(--theme-color);
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
display: flex;
|
|
:deep(.el-input__wrapper) {
|
height: 32px;
|
padding: 0 4px 0 8px;
|
width: 200px;
|
display: inline-block;
|
vertical-align: top;
|
border-radius: 4px;
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
float: right;
|
box-shadow: none;
|
background-color: transparent;
|
}
|
|
.create-right-div {
|
display: -webkit-box;
|
display: -ms-flexbox;
|
display: flex;
|
-webkit-box-align: center;
|
-ms-flex-align: center;
|
align-items: center;
|
-webkit-box-pack: justify;
|
-ms-flex-pack: justify;
|
justify-content: space-between;
|
width: 190px;
|
height: 100%;
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
|
.cancel-btn-div {
|
line-height: 16px;
|
padding: 4px 17px;
|
font-size: 12px;
|
display: inline-block;
|
border: 1px solid var(--theme-color);
|
border-radius: 4px;
|
text-align: center;
|
vertical-align: top;
|
color: var(--theme-color);
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
cursor: pointer;
|
}
|
|
.create-btn-div {
|
line-height: 16px;
|
padding: 4px 17px;
|
font-size: 12px;
|
display: inline-block;
|
border: 1px solid var(--theme-color);
|
border-radius: 4px;
|
text-align: center;
|
vertical-align: top;
|
color: var(--theme-color);
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
cursor: pointer;
|
color: #fff;
|
background: var(--theme-color);
|
}
|
}
|
}
|
|
.collect-grp-div {
|
position: relative;
|
width: 100%;
|
height: 36px;
|
line-height: 36px;
|
font-size: 14px;
|
color: #333;
|
border-radius: 4px;
|
border: 1px solid transparent;
|
cursor: pointer;
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
overflow: hidden;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.sure-btn {
|
display: block;
|
width: 80px;
|
height: 30px;
|
background: #003a8f;
|
color: #fff;
|
text-align: center;
|
line-height: 30px;
|
margin-top: 2px;
|
border-radius: 4px;
|
position: absolute;
|
right: 10px;
|
top: 0;
|
}
|
|
&:hover {
|
border: 1px solid #003a8f;
|
background: #00398f2c;
|
color: #003a8f;
|
border-radius: 8px;
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
}
|
}
|
|
|
|
:deep(.el-input-group__append) {
|
background-color: var(--theme-color);
|
color: #fff;
|
}
|
|
:deep(.el-tabs__nav-wrap::after) {
|
height: 1px;
|
}
|
|
:deep(.el-descriptions__label) {
|
width: 120px;
|
font-weight: normal;
|
}
|
|
:deep(.el-tabs__content) {
|
height: 100%;
|
}
|
|
:deep(.el-tabs--border-card>.el-tabs__header) {
|
height: 64px;
|
line-height: 64px;
|
background-color: #f1f2f3;
|
padding: 0 15px;
|
/* border-bottom: unset; */
|
}
|
|
:deep(.el-tabs__nav-wrap) {
|
height: 100%;
|
}
|
|
:deep(.el-tabs__nav-scroll) {
|
height: 100%;
|
}
|
|
:deep(.el-tabs__nav) {
|
transform: translateX(0px);
|
height: 100%;
|
justify-content: center;
|
align-items: flex-end;
|
gap: 8px;
|
}
|
|
:deep(.el-tabs--border-card>.el-tabs__header .el-tabs__item:first-child) {
|
margin-left: -1px;
|
border-radius: 10px 10px 0 0;
|
color: var(--theme-color);
|
background-color: #879eb7;
|
font-size: 24px;
|
font-family: SourceHanSans-Bold;
|
justify-content: flex-end;
|
gap: 8px;
|
}
|
|
:deep(.el-tabs--border-card>.el-tabs__header .el-tabs__item+.el-tabs__item) {
|
border-radius: 10px 10px 0 0;
|
color: var(--theme-color);
|
background-color: #879eb7;
|
font-size: 24px;
|
font-family: SourceHanSans-Bold;
|
}
|
|
:deep(.el-tabs__header .el-tabs__item.is-active) {
|
background-color: #fff !important;
|
color: var(--theme-color);
|
font-size: 24px;
|
font-family: SourceHanSans-Bold;
|
border-radius: 10px 10px 0 0;
|
}
|
</style>
|
