From 49ab96a40dd2e95cde3e455b07f990e49bbc9cee Mon Sep 17 00:00:00 2001
From: tanghaolin <1723298894@qq.com>
Date: 星期二, 22 四月 2025 17:36:46 +0800
Subject: [PATCH] 修改申报流程界面
---
src/views/ProductDetail.vue | 268 +++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 246 insertions(+), 22 deletions(-)
diff --git a/src/views/ProductDetail.vue b/src/views/ProductDetail.vue
index fcbc128..c2b209f 100644
--- a/src/views/ProductDetail.vue
+++ b/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,10 +26,9 @@
<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>
</div>
</div>
@@ -37,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>
@@ -61,8 +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="primary" size="large" @click="handleBuyNow">绔嬪嵆璐拱</el-button>
</div>
</div>
</div>
@@ -90,13 +104,36 @@
</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="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">
- <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" 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">
@@ -154,19 +191,33 @@
</template>
<script setup lang="ts">
-import EecLevel1 from '@/assets/icons/energy1.png';
-import EecLevel2 from '@/assets/icons/energy2.png';
-import { Check } from '@element-plus/icons-vue';
-import { ElMessage } from 'element-plus';
-import { onMounted, ref } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+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, 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: '',
@@ -178,6 +229,7 @@
id: '',
name: '',
applicationCode: '',
+ quantity: 1,
price: '',
image: '',
brand: '',
@@ -188,6 +240,7 @@
protection: '',
eecLevelIcon: EecLevel1,
package: '鐢垫満 脳 1, 璇存槑涔� 脳 1, 鍚堟牸璇� 脳 1',
+ certificatePath: '',
specifications: {
浜у搧鍨嬪彿: '',
棰濆畾鍔熺巼: '',
@@ -201,12 +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) {
@@ -222,7 +376,7 @@
address: orderForm.value,
};
localStorage.setItem('currentOrder', JSON.stringify(orderInfo));
-
+
ElMessage.success('璁㈠崟鎻愪氦鎴愬姛');
showBuyDialog.value = false;
// 璺宠浆鍒版敮浠橀〉闈�
@@ -231,6 +385,7 @@
const EecLevelEnum = {
1: { name: '涓�绾ц兘鏁�', icon: EecLevel1 },
2: { name: '浜岀骇鑳芥晥', icon: EecLevel2 },
+ 3: { name: '浜岀骇鑳芥晥', icon: EecLevel3 },
};
const productDataRef = ref({});
@@ -240,6 +395,7 @@
if (savedProduct) {
const productData = JSON.parse(savedProduct);
productDataRef.value = productData;
+
// 鍚堝苟榛樿鍊煎拰淇濆瓨鐨勪骇鍝佹暟鎹�
product.value = {
...product.value,
@@ -248,15 +404,17 @@
applicationCode: productData.RecordNumber,
price: productData.Price,
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: '璇﹁鍘傚',
protection: '璇﹁鍘傚',
detailImages: [`${SERVE_URL}${productData.PhysicalPicturePath}`],
specifications: {
- ...product.value.specifications,
浜у搧鍨嬪彿: productData.Model,
鐢熶骇浼佷笟: productData.CompanyName,
澶囨缂栧彿: productData.RecordNumber,
@@ -264,8 +422,74 @@
鑳芥晥绛夌骇: `${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();
});
+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>
--
Gitblit v1.9.3