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 | 166 ++++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 144 insertions(+), 22 deletions(-)
diff --git a/src/views/ProductDetail.vue b/src/views/ProductDetail.vue
index 83e41af..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,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">
+ <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>
- <!-- <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>
@@ -117,7 +128,7 @@
<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" />
+ <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">
@@ -180,8 +191,9 @@
</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';
@@ -189,10 +201,12 @@
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import pumpDetailInfo from './mock/DetailsInfo';
-import pumpDetailInfo_WQ from "./mock/DetailsInfo_WQ"
+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();
@@ -215,6 +229,7 @@
id: '',
name: '',
applicationCode: '',
+ quantity: 1,
price: '',
image: '',
brand: '',
@@ -239,17 +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) {
@@ -274,6 +385,7 @@
const EecLevelEnum = {
1: { name: '涓�绾ц兘鏁�', icon: EecLevel1 },
2: { name: '浜岀骇鑳芥晥', icon: EecLevel2 },
+ 3: { name: '浜岀骇鑳芥晥', icon: EecLevel3 },
};
const productDataRef = ref({});
@@ -294,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: '璇﹁鍘傚',
@@ -308,8 +422,15 @@
鑳芥晥绛夌骇: `${productData.EnergyEfficiencyClass}绾,
},
};
- isPumpDetail.value = productData.Id.includes('Pupm') ? true : false;
- isFan.value = productData.Id.includes('FJ') ? true : false;
+ 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';
@@ -323,7 +444,7 @@
isAdjustCoordUnitByUserSetting: false,
};
let pumpInfoData = pumpDetailInfo;
- if(product.value.model.includes('DSWQ')) {
+ if (product.value.model.includes('DSWQ')) {
pumpInfoData = pumpDetailInfo_WQ;
}
let pumpBaseInfo = {
@@ -333,10 +454,11 @@
SubID: 0,
ChartType: 3,
PumpStyle: 0,
- PumpName4File: 'DRL1-18S',
- CorpName: '涓煩鏉滅',
- PumpName: 'DRL1-18S',
- SeriesName: 'DRL',
+ PumpName4File: product.value.model,
+ CorpName: product.value.CompanyName,
+ PumpName: product.value.model,
+
+ SeriesName: product.value.ModelType,
CatalogName: '绔嬪紡澶氱骇娉�',
EecStauts: 0,
EecGrade: 0,
--
Gitblit v1.9.3