From 2839044a1269268e277f23f66cf2b86dcf85de3b Mon Sep 17 00:00:00 2001
From: tanghaolin <1723298894@qq.com>
Date: 星期日, 09 三月 2025 13:53:27 +0800
Subject: [PATCH] 修改购物车功能
---
src/views/CartPage.vue | 14
src/views/SPump/Select/ByPara2/components/selPumpCatalog.vue | 2
src/views/IndustrialSoftware.vue | 81 ++++++
src/components/AppHeader.vue | 26 +
src/views/SPump/Detail/byParas/components/detailBody.vue | 9
src/stores/useCartStore.ts | 2
index.html | 2
public/static/Config/globalConfig.js | 2
src/views/ProductDetail.vue | 4
src/views/OrderInfo.vue | 556 +++++++++++++++++++++++++++++----------------
src/views/SPump/Select/ByPara2/components/selPumpSeries.vue | 2
src/views/Login.vue | 6
12 files changed, 476 insertions(+), 230 deletions(-)
diff --git a/index.html b/index.html
index ab26773..a7fe92b 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,7 @@
</head>
<body>
<div id="app"></div>
- <script type="module" src="/static/Config/globalConfig.js?v=250306"></script>
+ <script type="module" src="/static/Config/globalConfig.js?v=250308"></script>
<script type="module" src="/static/Config/pageConfig.js?v=250306"></script>
<script type="module" src="/static/Config/pointToleranceConfig.js?v=250306"></script>
<script type="module" src="/src/main.ts"></script>
diff --git a/public/static/Config/globalConfig.js b/public/static/Config/globalConfig.js
index 004dfb4..cd3b4e6 100644
--- a/public/static/Config/globalConfig.js
+++ b/public/static/Config/globalConfig.js
@@ -1,7 +1,7 @@
window.globalConfig = {
WebApiUrl: {
MainUrl: 'http://www.xpump.net/ecpspapi/',
- FileUrl: 'http://desmi.xpump.net/file/',
+ FileUrl: 'http://www.xpump.net/file/DataECP/',
},
UnitSetting: {
CN: {
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index ecacc46..74f36e6 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -32,8 +32,8 @@
<!-- Add shopping cart icon here -->
<div class="flex items-center gap-4" @click="goToCart">
<el-badge :value="cartCount" :max="99" class="cart-badge">
- <el-button class="flex items-center" link >
- <el-icon class="text-xl"><ShoppingCart /></el-icon>
+ <el-button class="flex items-center" link>
+ <el-icon class="text-lg" style="font-size: 20px;"><ShoppingCart /></el-icon>
</el-button>
</el-badge>
</div>
@@ -103,14 +103,32 @@
};
const linkClick = () => {
- router.push('/select-selpara');
+ if (userInfo.value.Token) {
+ router.push('/select-selpara');
+ } else {
+ loginStore.logOut();
+ router.replace({
+ path: '/login',
+ query: { redirectPath: route.fullPath },
+ });
+ }
};
// 浠� Pinia store 鑾峰彇璐墿杞︽暟閲�
const cartCount = computed(() => cartStore.cartItemCount);
const goToCart = () => {
- router.push('/cart');
+ if (userInfo.value.Token) {
+ router.push('/cart');
+ } else {
+ loginStore.logOut();
+ router.replace({
+ path: '/login',
+ query: { redirectPath: route.fullPath },
+ });
+ return
+ }
+
};
</script>
diff --git a/src/stores/useCartStore.ts b/src/stores/useCartStore.ts
index b1b4207..a4384ba 100644
--- a/src/stores/useCartStore.ts
+++ b/src/stores/useCartStore.ts
@@ -8,6 +8,8 @@
quantity: number;
image: string;
selected: boolean;
+ companyName: string;
+ model: string;
}
export const useCartStore = defineStore({
diff --git a/src/views/CartPage.vue b/src/views/CartPage.vue
index 02c3505..b912a9f 100644
--- a/src/views/CartPage.vue
+++ b/src/views/CartPage.vue
@@ -1,15 +1,15 @@
<template>
<div class="container mx-auto px-4 py-8">
- <div class="bg-white rounded-lg shadow">
+ <div class="bg-white rounded-lg shadow h-[780px]">
<!-- 璐墿杞﹀ご閮� -->
<div class="p-4 border-b">
<h1 class="text-xl font-medium">璐墿杞�</h1>
</div>
<!-- 璐墿杞︿富浣� -->
- <div class="p-4">
+ <div class="p-4" style="height: calc(100% - 58px); box-sizing: border-box;">
<!-- 琛ㄥご -->
- <div class="flex items-center pb-4 border-b text-gray-500 text-sm">
+ <div class="flex items-center pb-4 border-b text-gray-500 text-sm" style=" background-color: #f4f4f4; box-sizing: border-box; padding: 10px 15px;">
<div class="w-12">
<el-checkbox v-model="allSelected" />
</div>
@@ -24,8 +24,8 @@
<el-empty v-if="!cartItems.length" description="璐墿杞﹁繕鏄┖鐨�" />
<!-- 鍟嗗搧鍒楄〃 -->
- <div v-else>
- <div v-for="item in cartItems" :key="item.addID" class="flex items-center py-4 border-b">
+ <div v-else style=" height: calc(100% - 116px);overflow: auto;">
+ <div v-for="item in cartItems" :key="item.addID" class="flex items-center border-b" style="padding: 1rem;">
<div class="w-12">
<el-checkbox
v-model="item.selected"
@@ -60,7 +60,7 @@
<!-- 璐墿杞﹀簳閮� -->
<div v-if="cartItems.length" class="flex justify-between items-center mt-4 py-4">
<div class="flex items-center gap-4">
- <el-checkbox v-model="allSelected">鍏ㄩ��</el-checkbox>
+ <!-- <el-checkbox v-model="allSelected">鍏ㄩ��</el-checkbox> -->
<el-button type="text" @click="removeSelected">鍒犻櫎閫変腑</el-button>
</div>
<div class="flex items-center gap-4">
@@ -68,7 +68,7 @@
宸查�夊晢鍝� <span class="text-red-500">{{ selectedCount }}</span> 浠�
</div>
<div class="text-gray-500">
- 鍚堣锛�<span class="text-red-500 text-xl font-medium">楼{{ totalPrice.toFixed(2) }}</span>
+ 鍚堣锛�<span class=" text-lg font-bold" style="color: #16b5cb;font-size: large;">楼{{ totalPrice.toFixed(2) }}</span>
</div>
<el-button
type="primary"
diff --git a/src/views/IndustrialSoftware.vue b/src/views/IndustrialSoftware.vue
index 6e3050c..d502cab 100644
--- a/src/views/IndustrialSoftware.vue
+++ b/src/views/IndustrialSoftware.vue
@@ -7,6 +7,25 @@
<div class="w-100 h-100" style="background-color: #fff">
<!-- 椤堕儴鍒嗙被鑿滃崟 -->
<div class="rounded-lg shadow" style="background-color: #f6f7f9; margin-bottom: 10px">
+ <!-- 鎼滅储妗� -->
+ <div class="border-b p-4 border-bottom-dashed-1 box-border" style="padding: 10px">
+
+ <div class="flex items-center gap-4">
+ <span class="text-gray-500" >鏌ヨ锛�</span>
+ <el-input
+ v-model="searchQuery"
+ placeholder="璇疯緭鍏ュ叕鍙稿悕绉�/鍨嬪彿/浜у搧鍚嶇О"
+ class="!w-[300px]"
+ clearable
+ @input="handleSearch"
+ >
+ <template #prefix>
+ <el-icon><Search /></el-icon>
+ </template>
+ </el-input>
+ </div>
+ </div>
+
<!-- 绫诲瀷 -->
<div class="border-b p-4 border-bottom-dashed-1 box-border" style="padding: 10px">
<div class="flex items-center">
@@ -71,7 +90,7 @@
<img :src="app.PhysicalPicturePath" :alt="app.Model" class="object-contain mx-auto goods-img" />
<!-- <div class="goods-company">{{ app.CompanyName }}</div> -->
</div>
- <div class="goods-name" style="font-size: 14px;font-weight:bold" :title="app.Model">浜у搧鍚嶇О:{{ app.ModelType }}</div>
+ <div class="goods-name" style="font-size: 14px; font-weight: bold" :title="app.Model">浜у搧鍚嶇О:{{ app.ModelType }}</div>
<!-- 浜у搧 -->
<div class="goods-name" :title="app.Model">鍘傚鍚嶇О锛歿{ app.CompanyName }}</div>
<!-- 鍨嬪彿 -->
@@ -87,7 +106,9 @@
<div class="flex items-center eec-level-div">
<img :src="EecLevelEnum[app.EnergyEfficiencyClass].icon" />
<span class="eec-numb">{{ app.EnergyEfficiencyClass }}</span>
- <span class="eec-level-name" @click="handleCertificateClick(app)">{{ EecLevelEnum[app.EnergyEfficiencyClass].name }}</span>
+ <span class="eec-level-name" @click="handleCertificateClick(app)">{{
+ EecLevelEnum[app.EnergyEfficiencyClass].name
+ }}</span>
</div>
</div>
@@ -96,7 +117,7 @@
<span class="text-gray-400 text-sm">{{ app.date }}</span>
</div> -->
<div class="flex justify-between gap-4">
- <div class="link-btn text-nowrap" @click="handleBuyClick(app.id)">
+ <div class="link-btn text-nowrap" @click="handleBuyClick(app.Id)">
<svg
t="1739504206748"
class="svg-size-style"
@@ -215,10 +236,22 @@
<script setup lang="ts">
import EecLevel1 from '@/assets/icons/energy_level_1.svg';
import EecLevel2 from '@/assets/icons/energy_level_2.svg';
-import { onMounted, ref } from 'vue';
-import { useRouter } from 'vue-router';
+import { onMounted, ref, computed } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { useLogin } from '@/stores/useLogin';
import axios from 'axios';
+import { ElMessage } from 'element-plus';
+import { Search } from '@element-plus/icons-vue';
+
const router = useRouter();
+const route = useRoute();
+const loginStore = useLogin();
+
+// 鑾峰彇鐢ㄦ埛淇℃伅
+const userInfo = computed(() => {
+ const UserInfo = loginStore.getUserInfo();
+ return UserInfo ? UserInfo : null;
+});
// 鍒嗙被閫夐」
const type = [
@@ -272,6 +305,9 @@
currentPage: 1,
pageSize: 12,
});
+
+// 鎼滅储鐩稿叧
+const searchQuery = ref('');
onMounted(() => {
initComanyData();
@@ -343,20 +379,38 @@
});
};
const filterProduct = () => {
+ // 鍏堟寜绫诲瀷绛涢��
filterProductData.value = allEecProduct.value.filter((item) => {
return item.Type === typeSelect.value;
});
+ // 鎼滅储绛涢��
+ if (searchQuery.value) {
+ const query = searchQuery.value.toLowerCase();
+ filterProductData.value = filterProductData.value.filter((item) => {
+ return (
+ item.CompanyName.toLowerCase().includes(query) ||
+ item.Model.toLowerCase().includes(query) ||
+ item.ModelType.toLowerCase().includes(query)
+ );
+ });
+ }
+
+ // 鑳芥晥绛夌骇绛涢��
if (EecSelect.value !== 0) {
filterProductData.value = filterProductData.value.filter((item) => {
return item.EnergyEfficiencyClass === EecSelect.value;
});
}
+
+ // 鍘傚晢绛涢��
if (factorySelect.value !== '-99') {
filterProductData.value = filterProductData.value.filter((item) => {
return factoryIncludeType.value.includes(item.Type);
});
}
+
+ // 娉电被鍨嬬壒娈婃帓搴�
if (typeSelect.value === 1) {
filterProductData.value.sort((a: any, b: any) => {
const aContainsDSWQ = a.Model.includes('DSWQ');
@@ -377,6 +431,7 @@
}
});
}
+
dispEecProduct.value = getSelectPageData(filterProductData.value);
};
const handleCurrentChange = (val: number) => {
@@ -413,12 +468,20 @@
const handleBuyClick = (productId: string) => {
// 鎵惧埌褰撳墠鐐瑰嚮鐨勪骇鍝�
- const currentProduct = dispEecProduct.value.find((item) => item.id === productId);
+ const currentProduct = dispEecProduct.value.find((item) => item.Id === productId);
if (currentProduct) {
// 淇濆瓨浜у搧淇℃伅鍒發ocalStorage
localStorage.setItem('currentProduct', JSON.stringify(currentProduct));
}
- router.push(`/product/${currentProduct.Id}`);
+ if (userInfo.value&& userInfo.value.Token) {
+ router.push(`/product/${currentProduct.Id}`);
+ } else {
+ loginStore.logOut();
+ router.replace({
+ path: '/login',
+ query: { redirectPath: route.fullPath },
+ });
+ }
};
const handleCertificateClick = (row: any) => {
dialogVisibleCertifcate.value = true;
@@ -428,6 +491,10 @@
EecSelect.value = tag;
filterProduct();
};
+
+const handleSearch = () => {
+ filterProduct();
+};
</script>
<style lang="scss" scoped>
diff --git a/src/views/Login.vue b/src/views/Login.vue
index f6e5a49..fe50635 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -1,5 +1,5 @@
<template>
- <div class="login-container min-h-screen flex items-center justify-center">
+ <div class="login-container min-h-screen flex items-center justify-center" v-loading="loading">
<div class="login-background"></div>
<div class="login-content max-w-md w-full relative z-10">
<!-- 鐧诲綍琛ㄥ崟 -->
@@ -79,6 +79,7 @@
password: [{ required: true, message: '璇疯緭鍏ュ瘑鐮�', trigger: 'blur' }],
// captcha: [{ required: true, message: '璇疯緭鍏ラ獙璇佺爜', trigger: 'blur' }],
};
+const loading = ref(false);
const logingTipsEmun= {
"-1": "璐︽埛涓嶅瓨鍦�",
@@ -103,8 +104,10 @@
LoginName: loginForm.username,
PassWord: loginForm.password,
};
+ loading.value = true;
login(form_data)
.then((res) => {
+ loading.value = false;
let data = res.data.Data;
if (res.data.Code !== 0) {
ElMessage.error(res.data.Message);
@@ -125,6 +128,7 @@
router.replace(redirect);
})
.catch((err) => {
+ loading.value = false;
ElMessage.error(err);
});
};
diff --git a/src/views/OrderInfo.vue b/src/views/OrderInfo.vue
index b3abe83..4e231ed 100644
--- a/src/views/OrderInfo.vue
+++ b/src/views/OrderInfo.vue
@@ -1,255 +1,411 @@
<template>
- <div class="container mx-auto px-4 py-8">
- <div class="bg-white rounded-lg shadow">
- <!-- 璁㈠崟澶撮儴 -->
- <div class="p-4 border-b">
- <h1 class="text-xl font-medium">纭璁㈠崟</h1>
+ <div class="container mx-auto py-8">
+ <div class="bg-white rounded-sm">
+ <div class="border-b border-[#f2f2f2]">
+ <h2 class="text-[16px] font-bold px-6 py-4">鏀惰揣浜轰俊鎭�</h2>
</div>
-
- <!-- 鏀惰揣鍦板潃 -->
- <div class="p-4 border-b">
- <div class="flex justify-between items-center mb-4">
- <h2 class="text-lg">鏀惰揣鍦板潃</h2>
+ <div class="p-6">
+ <div class="flex items-center justify-between mb-4">
<el-button type="primary" link @click="showAddressDialog = true">
- {{ selectedAddress ? '淇敼鍦板潃' : '娣诲姞鍦板潃' }}
+ 鏂板鏀惰揣鍦板潃
</el-button>
</div>
-
- <div v-if="selectedAddress" class="bg-gray-50 p-4 rounded">
- <div class="flex justify-between">
+ <div class="bg-[#f5f5f5] rounded p-4" v-if="selectedAddress">
+ <div class="flex items-center justify-between">
<div>
<span class="font-medium">{{ selectedAddress.name }}</span>
- <span class="ml-4 text-gray-600">{{ selectedAddress.phone }}</span>
+ <span class="ml-4 text-gray-500">{{ selectedAddress.phone }}</span>
</div>
- <el-tag size="small" v-if="selectedAddress.isDefault">榛樿鍦板潃</el-tag>
+ <el-tag size="small" type="success" effect="plain" v-if="selectedAddress.isDefault">榛樿鍦板潃</el-tag>
</div>
- <div class="mt-2 text-gray-600">{{ selectedAddress.address }}</div>
+ <div class="text-gray-600 mt-2">{{ selectedAddress.fullAddress }}</div>
</div>
- <el-empty v-else description="璇锋坊鍔犳敹璐у湴鍧�" />
- </div>
-
- <!-- 鍟嗗搧鍒楄〃 -->
- <div class="p-4 border-b">
- <h2 class="text-lg mb-4">鍟嗗搧娓呭崟</h2>
- <div class="space-y-4">
- <div v-for="item in selectedItems" :key="item.addID" class="flex items-center">
- <el-image :src="item.image" class="w-20 h-20 object-cover rounded" />
- <div class="flex-1 ml-4">
- <div class="text-sm">{{ item.name }}</div>
- <div class="text-gray-500 text-sm mt-1">鏁伴噺锛歿{ item.quantity }}</div>
- </div>
- <div class="text-red-500">楼{{ (item.price * item.quantity).toFixed(2) }}</div>
- </div>
- </div>
- </div>
-
- <!-- 璁㈠崟淇℃伅 -->
- <div class="p-4 border-b">
- <h2 class="text-lg mb-4">璁㈠崟淇℃伅</h2>
- <el-form :model="orderForm" label-width="100px">
- <el-form-item label="鏀粯鏂瑰紡">
- <el-radio-group v-model="orderForm.paymentMethod">
- <el-radio label="wechat">寰俊鏀粯</el-radio>
- <el-radio label="alipay">鏀粯瀹�</el-radio>
- </el-radio-group>
- </el-form-item>
- <el-form-item label="澶囨敞">
- <el-input v-model="orderForm.remark" type="textarea" placeholder="璇疯緭鍏ヨ鍗曞娉�" />
- </el-form-item>
- </el-form>
- </div>
-
- <!-- 璁㈠崟閲戦 -->
- <div class="p-4">
- <div class="flex justify-end items-center">
- <div class="text-gray-500">
- 鍏� <span class="text-red-500">{{ totalQuantity }}</span> 浠跺晢鍝侊紝
- 鎬昏锛�<span class="text-red-500 text-xl font-medium">楼{{ totalAmount.toFixed(2) }}</span>
- </div>
- <el-button type="primary" class="ml-4" @click="submitOrder" :loading="submitting">
- 鎻愪氦璁㈠崟
- </el-button>
+ <div v-else class="bg-[#f5f5f5] text-center py-4 text-gray-500">
+ 璇锋坊鍔犳敹璐у湴鍧�
</div>
</div>
</div>
- <!-- 鍦板潃閫夋嫨瀵硅瘽妗� -->
- <el-dialog v-model="showAddressDialog" title="閫夋嫨鏀惰揣鍦板潃" width="600px">
- <div class="space-y-4">
- <div v-for="address in addressList" :key="address.id"
- class="p-4 border rounded cursor-pointer hover:border-primary"
- :class="{ 'border-primary': selectedAddress?.id === address.id }"
- @click="selectAddress(address)"
- >
- <div class="flex justify-between">
- <div>
- <span class="font-medium">{{ address.name }}</span>
- <span class="ml-4 text-gray-600">{{ address.phone }}</span>
- </div>
- <el-tag size="small" v-if="address.isDefault">榛樿鍦板潃</el-tag>
- </div>
- <div class="mt-2 text-gray-600">{{ address.address }}</div>
+ <!-- 鏀粯鏂瑰紡 -->
+ <div class="bg-white rounded-sm">
+ <div class="border-b border-[#f2f2f2]">
+ <h2 class="text-[16px] font-bold px-6 py-4">鏀粯鏂瑰紡</h2>
+ </div>
+ <div class="p-6">
+ <div class="bg-[#f5f5f5] rounded p-4">
+ <el-radio-group v-model="paymentMethod">
+ <el-radio label="online">鍦ㄧ嚎鏀粯</el-radio>
+ </el-radio-group>
</div>
</div>
- <template #footer>
- <el-button @click="showAddressDialog = false">鍙栨秷</el-button>
- <el-button type="primary" @click="addNewAddress">鏂板鍦板潃</el-button>
- </template>
- </el-dialog>
+ </div>
- <!-- 鏂板鍦板潃瀵硅瘽妗� -->
- <el-dialog v-model="showNewAddressDialog" title="鏂板鏀惰揣鍦板潃" width="500px">
- <el-form :model="newAddress" :rules="addressRules" ref="addressFormRef" label-width="100px">
- <el-form-item label="鏀惰揣浜�" prop="name">
- <el-input v-model="newAddress.name" placeholder="璇疯緭鍏ユ敹璐т汉濮撳悕" />
- </el-form-item>
- <el-form-item label="鎵嬫満鍙风爜" prop="phone">
- <el-input v-model="newAddress.phone" placeholder="璇疯緭鍏ユ墜鏈哄彿鐮�" />
- </el-form-item>
- <el-form-item label="璇︾粏鍦板潃" prop="address">
- <el-input v-model="newAddress.address" type="textarea" placeholder="璇疯緭鍏ヨ缁嗗湴鍧�" />
- </el-form-item>
- <el-form-item>
- <el-checkbox v-model="newAddress.isDefault">璁句负榛樿鍦板潃</el-checkbox>
- </el-form-item>
- </el-form>
- <template #footer>
- <el-button @click="showNewAddressDialog = false">鍙栨秷</el-button>
- <el-button type="primary" @click="saveAddress">淇濆瓨</el-button>
- </template>
- </el-dialog>
+ <!-- 閰嶉�佹柟寮� -->
+ <div class="bg-white rounded-sm">
+ <div class="border-b border-[#f2f2f2]">
+ <h2 class="text-[16px] font-bold px-6 py-4">閰嶉�佹柟寮�</h2>
+ </div>
+ <div class="p-6">
+ <div class="bg-[#f5f5f5] rounded p-4">
+ <div class="flex items-center justify-between">
+ <div class="flex items-center gap-6">
+ <el-radio-group v-model="deliveryMethod">
+ <el-radio label="sf">椤轰赴閫熻繍</el-radio>
+ <el-radio label="zt">涓�氬揩閫�</el-radio>
+ <el-radio label="yd">闊佃揪蹇��</el-radio>
+ <el-radio label="ems">EMS</el-radio>
+ </el-radio-group>
+ </div>
+ <!-- <div class="text-gray-500 text-sm">
+ <i class="el-icon-time mr-1"></i>
+ 閰嶉�佹椂闂达細棰勮3鏈�10鏃�(鍛ㄤ竴) 09:00-15:00 閫佽揪
+ </div> -->
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- 鍙戠エ淇℃伅 -->
+ <div class="bg-white rounded-sm">
+ <div class="border-b border-[#f2f2f2]">
+ <h2 class="text-[16px] font-bold px-6 py-4">鍙戠エ淇℃伅</h2>
+ </div>
+ <div class="p-6">
+ <div class="flex items-center justify-between mb-4">
+ <div class="flex items-center gap-4">
+ <el-radio-group v-model="invoiceForm.needInvoice" class="flex items-center">
+ <el-radio :label="false">涓嶅紑鍙戠エ</el-radio>
+ <el-radio :label="true">寮�鍙戠エ</el-radio>
+ </el-radio-group>
+ </div>
+ </div>
+ <div v-if="invoiceForm.needInvoice" class="bg-[#f5f5f5] rounded p-4">
+ <el-form :model="invoiceForm" label-width="100px">
+ <el-form-item label="鍙戠エ鎶ご">
+ <div class="flex items-center gap-4" style="flex-direction: column;">
+ <el-radio-group v-model="invoiceForm.type" class="mb-4">
+ <el-radio label="personal">涓汉</el-radio>
+ <el-radio label="company">鍗曚綅</el-radio>
+ </el-radio-group>
+
+ <template v-if="invoiceForm.type === 'personal'">
+ <div class="w-full">
+ <el-input v-model="invoiceForm.personalName" placeholder="璇峰～鍐欎釜浜哄鍚�" />
+ </div>
+ </template>
+
+ <template v-if="invoiceForm.type === 'company'">
+ <div class="space-y-4">
+ <el-input v-model="invoiceForm.title" placeholder="璇峰～鍐欏崟浣嶅悕绉�" />
+ <el-input v-model="invoiceForm.taxNumber" placeholder="璇峰～鍐欑撼绋庝汉璇嗗埆鍙�" />
+ <div class="flex gap-4">
+ <el-input v-model="invoiceForm.address" placeholder="璇峰～鍐欏崟浣嶅湴鍧�" />
+ <el-input v-model="invoiceForm.phone" placeholder="璇峰～鍐欏崟浣嶇數璇�" />
+ </div>
+ <div class="flex gap-4">
+ <el-input v-model="invoiceForm.bank" placeholder="璇峰～鍐欏紑鎴烽摱琛�" />
+ <el-input v-model="invoiceForm.bankAccount" placeholder="璇峰～鍐欓摱琛岃处鍙�" />
+ </div>
+ </div>
+ </template>
+ </div>
+ </el-form-item>
+ </el-form>
+ </div>
+ </div>
+ </div>
+
+ <!-- 鍟嗗搧娓呭崟 -->
+ <div class="bg-white rounded-sm">
+ <div class="border-b border-[#f2f2f2]">
+ <h2 class="text-[16px] font-bold px-6 py-4">鍟嗗搧娓呭崟</h2>
+ </div>
+ <div class="p-6">
+ <div class="rounded overflow-hidden">
+ <div class="bg-[#f5f5f5] p-4 flex items-center text-gray-500 text-sm">
+ <div class="flex-1">鍟嗗搧淇℃伅</div>
+ <div class="w-[160px] text-center">鍗曚环</div>
+ <div class="w-[160px] text-center">鏁伴噺</div>
+ <div class="w-[160px] text-center">灏忚</div>
+ </div>
+ <div v-for="item in selectedItems" :key="item.addID" class="p-4 flex items-center border-t border-[#f0f0f0] hover:bg-[#f5f5f5]">
+ <div class="flex-1 flex items-center gap-4">
+ <el-image :src="item.image" class="w-20 h-20 object-cover border" />
+ <div class="flex-1">
+ <div class="text-base font-medium mb-2 line-clamp-2">{{ item.name }}</div>
+ <div class="text-gray-500 text-[12px] mb-1">鍘傚晢锛歿{ item.companyName }}</div>
+ <div class="text-gray-500 text-[12px]">鍨嬪彿锛歿{ item.model }}</div>
+ </div>
+ </div>
+ <div class="w-[160px] text-center">楼{{ item.price.toFixed(2) }}</div>
+ <div class="w-[160px] text-center">{{ item.quantity }}</div>
+ <div class="w-[160px] text-center text-[#e4393c] font-medium">楼{{ (item.price * item.quantity).toFixed(2) }}</div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- 璁㈠崟閲戦 -->
+ <div class="bg-white rounded-sm">
+ <div class="border-b border-[#f2f2f2]">
+ <h2 class="text-[16px] font-bold px-6 py-4">璁㈠崟閲戦</h2>
+ </div>
+ <div class="p-6">
+ <div class="flex justify-end">
+ <div class="w-[400px] space-y-3">
+ <div class="flex justify-between text-gray-600">
+ <span>鍟嗗搧鎬婚锛�</span>
+ <span>楼{{ totalAmount.toFixed(2) }}</span>
+ </div>
+ <div class="flex justify-between text-gray-600">
+ <span>杩愯垂锛�</span>
+ <span>楼{{ shippingFee.toFixed(2) }}</span>
+ </div>
+ <div class="flex justify-between items-center pt-4 border-t text-xl">
+ <span>搴斾粯閲戦锛�</span>
+ <span class="text-[#e4393c] font-bold">楼{{ finalAmount.toFixed(2) }}</span>
+ </div>
+ <div class="flex justify-end mt-4">
+ <el-button
+ type="danger"
+ size="large"
+ class="w-[180px]"
+ @click="submitOrder"
+ >
+ 鎻愪氦璁㈠崟
+ </el-button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
+
+ <!-- 鏂板鍦板潃瀵硅瘽妗� -->
+ <el-dialog v-model="showAddressDialog" title="鏂板鏀惰揣鍦板潃" width="500px" destroy-on-close>
+ <el-form :model="addressForm" label-width="80px">
+ <el-form-item label="鏀惰揣浜�">
+ <el-input v-model="addressForm.name" placeholder="璇疯緭鍏ユ敹璐т汉濮撳悕" />
+ </el-form-item>
+ <el-form-item label="鎵嬫満鍙风爜">
+ <el-input v-model="addressForm.phone" placeholder="璇疯緭鍏ユ墜鏈哄彿鐮�" />
+ </el-form-item>
+ <el-form-item label="鎵�鍦ㄥ湴鍖�">
+ <el-cascader
+ v-model="addressForm.region"
+ :options="regionOptions"
+ placeholder="璇烽�夋嫨鎵�鍦ㄥ湴鍖�"
+ />
+ </el-form-item>
+ <el-form-item label="璇︾粏鍦板潃">
+ <el-input
+ v-model="addressForm.detail"
+ type="textarea"
+ placeholder="璇疯緭鍏ヨ缁嗗湴鍧�"
+ />
+ </el-form-item>
+ <el-form-item>
+ <el-checkbox v-model="addressForm.isDefault">璁句负榛樿鍦板潃</el-checkbox>
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <div class="flex justify-end gap-2">
+ <el-button @click="showAddressDialog = false">鍙栨秷</el-button>
+ <el-button type="primary" @click="saveAddress">淇濆瓨</el-button>
+ </div>
+ </template>
+ </el-dialog>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
+import { CreditCard, Money } from '@element-plus/icons-vue';
import { useCartStore } from '@/stores/useCartStore';
-
+import wechat from '@/assets/icons/wechat-pay.svg';
+import alipay from '@/assets/icons/alipay.svg';
const router = useRouter();
const cartStore = useCartStore();
// 閫変腑鐨勫晢鍝�
const selectedItems = computed(() => {
- if(cartStore.items.length == 0)return []
return cartStore.items.filter(item => item.selected);
});
-// 鎬绘暟閲�
-const totalQuantity = computed(() => {
- return selectedItems.value.reduce((sum, item) => sum + item.quantity, 0);
-});
-
-// 鎬婚噾棰�
-const totalAmount = computed(() => {
- return selectedItems.value.reduce((sum, item) => sum + item.price * item.quantity, 0);
-});
-
-// 璁㈠崟琛ㄥ崟
-const orderForm = ref({
- paymentMethod: 'wechat',
- remark: ''
-});
-
-// 鍦板潃鐩稿叧
+// 鏀惰揣鍦板潃鐩稿叧
const showAddressDialog = ref(false);
-const showNewAddressDialog = ref(false);
const selectedAddress = ref(null);
-const addressList = ref([
- {
- id: 1,
- name: '寮犱笁',
- phone: '13800138000',
- address: '涓婃捣甯傛郸涓滄柊鍖洪檰瀹跺槾',
- isDefault: true
- }
-]);
-
-// 鏂板鍦板潃琛ㄥ崟
-const addressFormRef = ref();
-const newAddress = ref({
+const addressForm = ref({
name: '',
phone: '',
- address: '',
+ region: [],
+ detail: '',
isDefault: false
});
-// 鍦板潃楠岃瘉瑙勫垯
-const addressRules = {
- name: [{ required: true, message: '璇疯緭鍏ユ敹璐т汉濮撳悕', trigger: 'blur' }],
- phone: [
- { required: true, message: '璇疯緭鍏ユ墜鏈哄彿鐮�', trigger: 'blur' },
- { pattern: /^1[3-9]\d{9}$/, message: '璇疯緭鍏ユ纭殑鎵嬫満鍙风爜', trigger: 'blur' }
- ],
- address: [{ required: true, message: '璇疯緭鍏ヨ缁嗗湴鍧�', trigger: 'blur' }]
-};
+// 鏀粯鏂瑰紡
+const paymentMethod = ref('online');
-// 閫夋嫨鍦板潃
-const selectAddress = (address) => {
- selectedAddress.value = address;
- showAddressDialog.value = false;
-};
+// 閰嶉�佹柟寮�
+const deliveryMethod = ref('sf');
-// 娣诲姞鏂板湴鍧�
-const addNewAddress = () => {
- showAddressDialog.value = false;
- showNewAddressDialog.value = true;
-};
+// 鍙戠エ淇℃伅
+const invoiceForm = ref({
+ needInvoice: false,
+ type: 'personal',
+ personalName: '',
+ title: '',
+ taxNumber: '',
+ address: '',
+ phone: '',
+ bank: '',
+ bankAccount: ''
+});
+
+// 閲戦璁＄畻
+const totalAmount = computed(() => {
+ return selectedItems.value.reduce((total, item) => total + item.price * item.quantity, 0);
+});
+
+const shippingFee = computed(() => {
+ return deliveryMethod.value === 'express' ? 0 : 0;
+});
+
+const finalAmount = computed(() => {
+ return totalAmount.value + shippingFee.value;
+});
// 淇濆瓨鍦板潃
-const saveAddress = async () => {
- if (!addressFormRef.value) return;
+const saveAddress = () => {
+ if (!addressForm.value.name || !addressForm.value.phone || !addressForm.value.detail) {
+ ElMessage.warning('璇峰～鍐欏畬鏁寸殑鍦板潃淇℃伅');
+ return;
+ }
+ // 杩欓噷搴旇璋冪敤API淇濆瓨鍦板潃
+ selectedAddress.value = {
+ name: addressForm.value.name,
+ phone: addressForm.value.phone,
+ fullAddress: addressForm.value.detail,
+ isDefault: addressForm.value.isDefault
+ };
- await addressFormRef.value.validate((valid, fields) => {
- if (valid) {
- const address = {
- id: Date.now(),
- ...newAddress.value
- };
-
- if (address.isDefault) {
- addressList.value.forEach(item => item.isDefault = false);
- }
-
- addressList.value.push(address);
- selectedAddress.value = address;
- showNewAddressDialog.value = false;
-
- // 閲嶇疆琛ㄥ崟
- newAddress.value = {
- name: '',
- phone: '',
- address: '',
- isDefault: false
- };
-
- ElMessage.success('鍦板潃娣诲姞鎴愬姛');
- }
- });
+ // 閲嶇疆琛ㄥ崟鍐呭
+ addressForm.value = {
+ name: '',
+ phone: '',
+ region: [],
+ detail: '',
+ isDefault: false
+ };
+
+ showAddressDialog.value = false;
+ ElMessage.success('鍦板潃淇濆瓨鎴愬姛');
};
// 鎻愪氦璁㈠崟
-const submitting = ref(false);
-const submitOrder = async () => {
+const submitOrder = () => {
if (!selectedAddress.value) {
ElMessage.warning('璇烽�夋嫨鏀惰揣鍦板潃');
return;
}
- submitting.value = true;
- try {
- // 杩欓噷娣诲姞鎻愪氦璁㈠崟鐨勯�昏緫
- await new Promise(resolve => setTimeout(resolve, 1000));
-
- // 娓呯┖宸查�夊晢鍝�
- const remainingItems = cartStore.cartItems.filter(item => !item.selected);
- cartStore.setCartItems(remainingItems);
-
- ElMessage.success('璁㈠崟鎻愪氦鎴愬姛');
- router.push('/payment');
- } finally {
- submitting.value = false;
- }
+ // 鍒涘缓璁㈠崟瀵硅薄
+ const order = {
+ orderNo: 'DD' + Date.now(),
+ items: selectedItems.value,
+ address: selectedAddress.value,
+ paymentMethod: '鍦ㄧ嚎鏀粯',
+ deliveryMethod: getDeliveryMethodName(deliveryMethod.value),
+ invoice: invoiceForm.value.needInvoice ? invoiceForm.value : null,
+ totalAmount: totalAmount.value,
+ shippingFee: shippingFee.value,
+ finalAmount: finalAmount.value,
+ createTime: new Date().toLocaleString()
+ };
+
+ // 淇濆瓨璁㈠崟淇℃伅
+ localStorage.setItem('currentOrder', JSON.stringify(order));
+
+ // 娓呴櫎璐墿杞︿腑宸蹭笅鍗曠殑鍟嗗搧
+ selectedItems.value.forEach(item => {
+ cartStore.removeFromCart(item.addID);
+ });
+
+ // 璺宠浆鍒版敮浠橀〉闈�
+ router.push('/payment');
};
+
+// 鑾峰彇閰嶉�佹柟寮忓悕绉�
+const getDeliveryMethodName = (method: string) => {
+ const methodMap = {
+ sf: '椤轰赴閫熻繍',
+ zt: '涓�氬揩閫�',
+ yd: '闊佃揪蹇��',
+ ems: 'EMS'
+ };
+ return methodMap[method] || method;
+};
+
+// 鍦板尯閫夐」鏁版嵁锛堢ず渚嬶級
+const regionOptions = ref([
+ {
+ value: 'shanghai',
+ label: '涓婃捣',
+ children: [
+ {
+ value: 'pudong',
+ label: '娴︿笢鏂板尯'
+ },
+ {
+ value: 'xuhui',
+ label: '寰愭眹鍖�'
+ }
+ ]
+ }
+ // 鍏朵粬鐪佸競鍖烘暟鎹�...
+]);
</script>
+
+<style scoped>
+:deep(.el-radio__input.is-checked .el-radio__inner) {
+ border-color: #e4393c;
+ background: #e4393c;
+}
+
+:deep(.el-radio__input.is-checked + .el-radio__label) {
+ color: #e4393c;
+}
+
+:deep(.el-button--primary) {
+ --el-button-bg-color: #e4393c;
+ --el-button-border-color: #e4393c;
+ --el-button-hover-bg-color: #f15b5f;
+ --el-button-hover-border-color: #f15b5f;
+}
+
+:deep(.el-button--primary.is-plain) {
+ --el-button-bg-color: #fff;
+ --el-button-border-color: #e4393c;
+ --el-button-hover-bg-color: #fff4f4;
+ --el-button-hover-border-color: #e4393c;
+ --el-button-text-color: #e4393c;
+}
+
+.line-clamp-2 {
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+}
+
+:deep(.el-form-item__label) {
+ color: #666;
+}
+
+:deep(.el-input) {
+ --el-input-border-color: #dcdfe6;
+ --el-input-hover-border-color: #c0c4cc;
+ --el-input-focus-border-color: #e4393c;
+}
+</style>
diff --git a/src/views/ProductDetail.vue b/src/views/ProductDetail.vue
index 72b3bc6..64c13b7 100644
--- a/src/views/ProductDetail.vue
+++ b/src/views/ProductDetail.vue
@@ -322,7 +322,9 @@
price: Number(product.value.price),
quantity: product.value.quantity,
image: product.value.image,
- selected: false
+ selected: false,
+ companyName: product.value.brand,
+ model: product.value.model,
};
cartStore.addToCart(newCartItem);
diff --git a/src/views/SPump/Detail/byParas/components/detailBody.vue b/src/views/SPump/Detail/byParas/components/detailBody.vue
index 7858e06..87fd27c 100644
--- a/src/views/SPump/Detail/byParas/components/detailBody.vue
+++ b/src/views/SPump/Detail/byParas/components/detailBody.vue
@@ -673,8 +673,7 @@
) {
state.mainSetting.seriesStructure3d.tabVisible = true;
let url =
- window.globalConfig.WebApiUrl.FileUrl +
- "Data/" +
+ window.globalConfig.WebApiUrl.FileUrl +
pumpInfoData.Struct3d.Info;
createAsyncTask().then(() => {
initSeriesStructureByThreeD(url);
@@ -1512,8 +1511,7 @@
else state.m_model3dSetting.IsHaveDim = isHaveDim;
state.m_model3dSetting.LawID = ok_bimFileLaw.ID;
state.m_model3dSetting.NextViewModelPath =
- window.globalConfig.WebApiUrl.FileUrl +
- "Data/" +
+ window.globalConfig.WebApiUrl.FileUrl +
"Series" +
state.m_pumpBaseInfo.SeriesID +
"/BIM/" +
@@ -1524,8 +1522,7 @@
ds_file_path = ds_file_path + ".rfa";
}
state.m_model3dSetting.CurrentDsModelPath =
- window.globalConfig.WebApiUrl.FileUrl +
- "Data/" +
+ window.globalConfig.WebApiUrl.FileUrl +
"Series" +
state.m_pumpBaseInfo.SeriesID +
"/BIM/" +
diff --git a/src/views/SPump/Select/ByPara2/components/selPumpCatalog.vue b/src/views/SPump/Select/ByPara2/components/selPumpCatalog.vue
index 07d3155..b08cd70 100644
--- a/src/views/SPump/Select/ByPara2/components/selPumpCatalog.vue
+++ b/src/views/SPump/Select/ByPara2/components/selPumpCatalog.vue
@@ -353,7 +353,7 @@
let ThumbnailImage = noneImg
if (catalog_info.ThumbnailImage == "" && seriesItem.ThumbnailImage != "") {
// console.log(catalog_info.ThumbnailImage, seriesItem.ThumbnailImage,362)
- ThumbnailImage = window.globalConfig.WebApiUrl.FileUrl + 'Data/' + seriesItem.ThumbnailImage;
+ ThumbnailImage = window.globalConfig.WebApiUrl.FileUrl + seriesItem.ThumbnailImage;
}
catalog_info.ThumbnailImage = ThumbnailImage
catalog_info.SeriesIDs.push(seriesItem.ID);
diff --git a/src/views/SPump/Select/ByPara2/components/selPumpSeries.vue b/src/views/SPump/Select/ByPara2/components/selPumpSeries.vue
index 5c85198..46cc0e5 100644
--- a/src/views/SPump/Select/ByPara2/components/selPumpSeries.vue
+++ b/src/views/SPump/Select/ByPara2/components/selPumpSeries.vue
@@ -217,7 +217,7 @@
let ThumbnailImage = noneImg
if (element.ThumbnailImage && element.ThumbnailImage != "") {
- ThumbnailImage = window.globalConfig.WebApiUrl.FileUrl + 'Data/' + element.ThumbnailImage
+ ThumbnailImage = window.globalConfig.WebApiUrl.FileUrl + element.ThumbnailImage
}
series_info.ThumbnailImage = ThumbnailImage
allInfoList.push(series_info);
--
Gitblit v1.9.3