From a7bd95478beb0e9a8a1e6e12c8bf05677e67ddf7 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期三, 19 三月 2025 11:48:30 +0800
Subject: [PATCH] 面议
---
src/views/OrderInfo.vue | 811 ++++++++++++++++++++++++---------------------------------
1 files changed, 346 insertions(+), 465 deletions(-)
diff --git a/src/views/OrderInfo.vue b/src/views/OrderInfo.vue
index 664e1ab..4e231ed 100644
--- a/src/views/OrderInfo.vue
+++ b/src/views/OrderInfo.vue
@@ -1,530 +1,411 @@
<template>
- <div class="container mx-auto px-4 py-8 max-w-6xl">
- <h1 class="text-2xl font-bold mb-6">濉啓骞舵牳瀵硅鍗曚俊鎭�</h1>
-
- <!-- 鏀惰揣浜轰俊鎭� -->
- <div class="bg-white p-6 rounded-lg shadow-sm mb-4">
- <div class="flex justify-between items-center mb-4">
- <h2 class="text-lg font-medium">鏀惰揣浜轰俊鎭�</h2>
- <el-button type="primary" link @click="showAddressDialog = true">鏂板鏀惰揣鍦板潃</el-button>
+ <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>
-
- <el-skeleton :loading="loading.addresses" :rows="3" animated>
- <template #default>
- <el-radio-group v-model="selectedAddress" class="w-full">
- <el-radio
- v-for="address in addresses"
- :key="address.id"
- :label="address.id"
- class="!flex p-4 border rounded-lg mb-2 hover:bg-gray-50"
- >
- <div class="flex-1">
- <div class="flex items-center gap-4">
- <span class="font-medium">{{ address.name }} {{ address.city }}</span>
- <span class="text-gray-600">{{ address.phone }}</span>
- <el-tag size="small" type="success" v-if="address.isDefault">榛樿鍦板潃</el-tag>
- </div>
- <div class="text-gray-600 mt-1">{{ address.fullAddress }}</div>
- </div>
- </el-radio>
- </el-radio-group>
- </template>
- </el-skeleton>
+ <div class="p-6">
+ <div class="flex items-center justify-between mb-4">
+ <el-button type="primary" link @click="showAddressDialog = true">
+ 鏂板鏀惰揣鍦板潃
+ </el-button>
+ </div>
+ <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-500">{{ selectedAddress.phone }}</span>
+ </div>
+ <el-tag size="small" type="success" effect="plain" v-if="selectedAddress.isDefault">榛樿鍦板潃</el-tag>
+ </div>
+ <div class="text-gray-600 mt-2">{{ selectedAddress.fullAddress }}</div>
+ </div>
+ <div v-else class="bg-[#f5f5f5] text-center py-4 text-gray-500">
+ 璇锋坊鍔犳敹璐у湴鍧�
+ </div>
+ </div>
</div>
<!-- 鏀粯鏂瑰紡 -->
- <div class="bg-white p-6 rounded-lg shadow-sm mb-4">
- <h2 class="text-lg font-medium mb-4">鏀粯鏂瑰紡</h2>
- <el-radio-group v-model="paymentMethod">
- <el-radio label="online" class="mr-6">鍦ㄧ嚎鏀粯</el-radio>
- <!-- <el-radio label="cod">璐у埌浠樻</el-radio> -->
- </el-radio-group>
+ <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>
</div>
- <!-- 閫佽揣娓呭崟 -->
- <div class="bg-white p-6 rounded-lg shadow-sm mb-4">
- <div class="flex justify-between items-center mb-4">
- <h2 class="text-lg font-medium">閫佽揣娓呭崟</h2>
- <div class="flex items-center gap-4">
- <el-tooltip content="浠锋牸璇存槑">
- <el-icon><InfoFilled /></el-icon>
- </el-tooltip>
- <!-- <el-link type="primary" @click="goToCart">杩斿洖淇敼璐墿杞�</el-link> -->
- </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="bg-blue-50 p-4 rounded-lg mb-4">
- <div class="flex justify-between mb-4">
- <div class="flex gap-4">
- <span>閰嶉�佹柟寮忥細</span>
- <el-radio-group v-model="deliveryMethod">
- <el-radio label="jd">椤轰赴蹇��</el-radio>
- <el-radio label="self">鐢抽�氬揩閫�</el-radio>
- <el-radio label="self">鍦嗛�氬揩閫�</el-radio>
- <el-radio label="self">閭斂蹇��</el-radio>
- </el-radio-group>
- </div>
- <!-- <el-link type="primary" @click="showDeliveryDialog = true">淇敼</el-link> -->
- </div>
- <div class="text-gray-600">閰嶉�佹椂闂达細{{ deliveryTime }}</div>
- </div>
-
- <!-- 鍟嗗搧鍒楄〃 -->
- <el-skeleton :loading="loading.products" :rows="2" animated>
- <template #default>
- <div v-for="product in products" :key="product.id" class="border-t py-4">
- <div class="text-gray-600 mb-4">鍟嗗锛歿{ product.shopName }}</div>
- <div class="flex gap-4">
- <el-image :src="product.image" style="width: 80px; height: 80px" fit="cover" :preview-src-list="[product.image]">
- <template #error>
- <div class="image-slot">
- <el-icon><Picture /></el-icon>
- </div>
- </template>
- </el-image>
- <div class="flex-1">
- <div class="flex justify-between">
- <div>
- <div class="font-medium">{{ product.name }}</div>
- <div class="text-gray-500 mt-1">鍘傚晢锛歿{ product.specs }}</div>
- </div>
- <div class="text-right">
- <div class="text-red-500">楼{{ product.price.toFixed(2) }}</div>
- <div class="text-gray-600">x{{ product.quantity }}</div>
- <div>{{ product.stock > 0 ? '鏈夎揣' : '鏃犺揣' }}</div>
- </div>
- </div>
- </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>
- </template>
- </el-skeleton>
+ </div>
+ </div>
</div>
<!-- 鍙戠エ淇℃伅 -->
- <div class="bg-white p-6 rounded-lg shadow-sm mb-4">
- <div class="flex justify-between items-center">
- <h2 class="text-lg font-medium">鍙戠エ淇℃伅</h2>
- <el-tooltip content="寮�浼佷笟鎶ご鍙戠エ闇�瑕佸～鍐欑撼绋庝汉璇嗗埆鍙凤紝浠ュ厤褰卞搷鎶ラ攢">
- <el-icon><InfoFilled /></el-icon>
- </el-tooltip>
+ <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="mt-4">
- <el-form
- v-if="invoice.type === 'company'"
- ref="invoiceForm"
- :model="invoice"
-
- label-width="120px"
- class="mt-4"
- >
- <el-form-item label="鍗曚綅鍚嶇О" prop="companyName">
- <el-input v-model="invoice.companyName" placeholder="璇疯緭鍏ュ崟浣嶅悕绉�"></el-input>
- </el-form-item>
-
- <el-form-item label="绾崇◣浜鸿瘑鍒彿" prop="taxNumber">
- <el-input v-model="invoice.taxNumber" placeholder="璇疯緭鍏ョ撼绋庝汉璇嗗埆鍙�"></el-input>
- </el-form-item>
-
- <div class="text-gray-500 text-sm mt-2">
- <el-icon class="mr-1"><InfoFilled /></el-icon>
- 鍙戠エ灏嗗湪璁㈠崟瀹屾垚鍚庤嚜鍔ㄥ紑鍏峰苟鍙戦�佽嚦璁㈠崟涓殑閭
+ <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>
- </el-form>
- </div>
- </div>
-
- <!-- 浼樻儬/绀煎搧鍗� -->
- <div class="bg-white p-6 rounded-lg shadow-sm mb-4">
- <el-collapse v-model="activeCollapse">
- <el-collapse-item title="浣跨敤浼樻儬/绀煎搧鍗�/鎶电敤" name="coupons">
- <el-skeleton :loading="loading.coupons" :rows="2" animated>
- <template #default>
- <div class="p-4" v-if="coupons.length">
- <div v-for="coupon in coupons" :key="coupon.id" class="mb-2">
- <el-checkbox v-model="coupon.selected"> {{ coupon.name }} - 浼樻儬{{ coupon.amount }}鍏� </el-checkbox>
- </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>
- <div class="p-4" v-else>鏆傛棤鍙敤浼樻儬</div>
- </template>
- </el-skeleton>
- </el-collapse-item>
- </el-collapse>
- </div>
-
- <!-- 璁㈠崟閲戦 -->
- <div class="bg-white p-6 rounded-lg shadow-sm">
- <div class="flex justify-end text-right">
- <div>
- <div class="flex justify-between gap-8 mb-2">
- <span>鍟嗗搧鎬婚锛�</span>
- <span>楼{{ orderAmount.subtotal.toFixed(2) }}</span>
- </div>
- <div class="flex justify-between gap-8 mb-2">
- <span>杩愯垂锛�</span>
- <span>楼{{ orderAmount.shipping.toFixed(2) }}</span>
- </div>
- <div class="flex justify-between gap-8 mb-2" v-if="orderAmount.discount > 0">
- <span>浼樻儬閲戦锛�</span>
- <span class="text-red-500">-楼{{ orderAmount.discount.toFixed(2) }}</span>
- </div>
- <div class="flex justify-between gap-8 text-lg font-medium text-red-500">
- <span>搴斾粯鎬婚锛�</span>
- <span>楼{{ orderAmount.total.toFixed(2) }}</span>
- </div>
- <div class="text-gray-500 text-sm mt-2">瀵勯�佽嚦锛歿{ selectedAddressText }}</div>
+ </el-form-item>
+ </el-form>
</div>
</div>
</div>
- <!-- 鎻愪氦璁㈠崟鎸夐挳 -->
- <div class="flex justify-end mt-6">
- <el-button type="success" size="large" :loading="loading.submit" @click="submitOrder"> 鎻愪氦璁㈠崟 </el-button>
+ <!-- 鍟嗗搧娓呭崟 -->
+ <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">
- <el-form :model="newAddress" :rules="addressRules" ref="addressForm">
- <el-form-item label="鏀惰揣浜�" prop="name">
- <el-input v-model="newAddress.name" />
+ <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="鎵嬫満鍙风爜" prop="phone">
- <el-input v-model="newAddress.phone" />
+ <el-form-item label="鎵嬫満鍙风爜">
+ <el-input v-model="addressForm.phone" placeholder="璇疯緭鍏ユ墜鏈哄彿鐮�" />
</el-form-item>
- <el-form-item label="鎵�鍦ㄥ湴鍖�" prop="region">
- <el-cascader v-model="newAddress.region" :options="regionOptions" placeholder="璇烽�夋嫨鎵�鍦ㄥ湴鍖�" />
+ <el-form-item label="鎵�鍦ㄥ湴鍖�">
+ <el-cascader
+ v-model="addressForm.region"
+ :options="regionOptions"
+ placeholder="璇烽�夋嫨鎵�鍦ㄥ湴鍖�"
+ />
</el-form-item>
- <el-form-item label="璇︾粏鍦板潃" prop="address">
- <el-input v-model="newAddress.address" type="textarea" :rows="2" />
+ <el-form-item label="璇︾粏鍦板潃">
+ <el-input
+ v-model="addressForm.detail"
+ type="textarea"
+ placeholder="璇疯緭鍏ヨ缁嗗湴鍧�"
+ />
</el-form-item>
<el-form-item>
- <el-checkbox v-model="newAddress.isDefault">璁句负榛樿鍦板潃</el-checkbox>
+ <el-checkbox v-model="addressForm.isDefault">璁句负榛樿鍦板潃</el-checkbox>
</el-form-item>
</el-form>
<template #footer>
- <span class="dialog-footer">
+ <div class="flex justify-end gap-2">
<el-button @click="showAddressDialog = false">鍙栨秷</el-button>
- <el-button type="primary" @click="saveAddress" :loading="loading.saveAddress"> 淇濆瓨 </el-button>
- </span>
- </template>
- </el-dialog>
-
- <!-- 鍙戠エ淇℃伅瀵硅瘽妗� -->
- <el-dialog v-model="showInvoiceDialog" title="鍙戠エ淇℃伅" width="500px">
- <el-form :model="invoice" :rules="invoiceRules" ref="invoiceForm">
- <el-form-item label="鍙戠エ绫诲瀷" prop="type">
- <el-radio-group v-model="invoice.type">
- <el-radio label="personal">涓汉</el-radio>
- <el-radio label="company">鍗曚綅</el-radio>
- </el-radio-group>
- </el-form-item>
- <template v-if="invoice.type === 'company'">
- <el-form-item label="鍗曚綅鍚嶇О" prop="companyName">
- <el-input v-model="invoice.companyName" />
- </el-form-item>
- <el-form-item label="绋庡彿" prop="taxNumber">
- <el-input v-model="invoice.taxNumber" />
- </el-form-item>
- </template>
- </el-form>
- <template #footer>
- <span class="dialog-footer">
- <el-button @click="showInvoiceDialog = false">鍙栨秷</el-button>
- <el-button type="primary" @click="saveInvoice" :loading="loading.saveInvoice"> 纭畾 </el-button>
- </span>
+ <el-button type="primary" @click="saveAddress">淇濆瓨</el-button>
+ </div>
</template>
</el-dialog>
</template>
<script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
-import { ElMessage, ElMessageBox } from 'element-plus';
-import { InfoFilled, Picture } from '@element-plus/icons-vue';
-import { SERVE_URL } from '@/constants';
-import type { FormInstance } from 'element-plus';
-
+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 loading = ref({
- addresses: false,
- products: false,
- coupons: false,
- submit: false,
- saveAddress: false,
- saveInvoice: false,
+// 閫変腑鐨勫晢鍝�
+const selectedItems = computed(() => {
+ return cartStore.items.filter(item => item.selected);
});
-// 鍦板潃鐩稿叧
-const addresses = ref([
- {
- id: 1,
- name: '涔夌淮娴佷綋绉戞妧鏈夐檺鍏徃',
- city: '涓婃捣',
- phone: '189****7818',
- fullAddress: '涓婃捣 闂佃鍖� 姹熸湀璺� 999鍙�',
- isDefault: true,
- },
-]);
-
-const selectedAddress = ref(1);
+// 鏀惰揣鍦板潃鐩稿叧
const showAddressDialog = ref(false);
-const showDeliveryDialog = ref(false);
-const addressForm = ref<FormInstance>();
-const newAddress = ref({
+const selectedAddress = ref(null);
+const addressForm = ref({
name: '',
phone: '',
region: [],
- address: '',
- isDefault: false,
+ detail: '',
+ isDefault: false
});
-// 鍦板尯閫夐」鏁版嵁
+// 鏀粯鏂瑰紡
+const paymentMethod = ref('online');
+
+// 閰嶉�佹柟寮�
+const deliveryMethod = ref('sf');
+
+// 鍙戠エ淇℃伅
+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 = () => {
+ 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
+ };
+
+ // 閲嶇疆琛ㄥ崟鍐呭
+ addressForm.value = {
+ name: '',
+ phone: '',
+ region: [],
+ detail: '',
+ isDefault: false
+ };
+
+ showAddressDialog.value = false;
+ ElMessage.success('鍦板潃淇濆瓨鎴愬姛');
+};
+
+// 鎻愪氦璁㈠崟
+const submitOrder = () => {
+ if (!selectedAddress.value) {
+ ElMessage.warning('璇烽�夋嫨鏀惰揣鍦板潃');
+ return;
+ }
+
+ // 鍒涘缓璁㈠崟瀵硅薄
+ 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: 'minhang',
- label: '闂佃鍖�',
- children: [
- {
- value: 'pujiang',
- label: '姹熸湀璺�',
- },
- ],
+ value: 'pudong',
+ label: '娴︿笢鏂板尯'
},
- ],
- },
-]);
-
-const addressRules = {
- name: [{ required: true, message: '璇疯緭鍏ユ敹璐т汉濮撳悕', trigger: 'blur' }],
- phone: [
- { required: true, message: '璇疯緭鍏ユ墜鏈哄彿鐮�', trigger: 'blur' },
- { pattern: /^1[3-9]\d{9}$/, message: '璇疯緭鍏ユ纭殑鎵嬫満鍙风爜', trigger: 'blur' },
- ],
- region: [{ required: true, message: '璇烽�夋嫨鎵�鍦ㄥ湴鍖�', trigger: 'change' }],
- address: [{ required: true, message: '璇疯緭鍏ヨ缁嗗湴鍧�', trigger: 'blur' }],
-};
-
-// 鏀粯鍜岄厤閫佹柟寮�
-const paymentMethod = ref('online');
-const deliveryMethod = ref('jd');
-const deliveryTime = ref('棰勮涓夊ぉ鍚庨�佽揪');
-
-// 鍟嗗搧鐩稿叧
-const products = ref([]);
-
-// 鍙戠エ鐩稿叧
-const showInvoiceDialog = ref(false);
-const invoiceForm = ref<FormInstance>();
-const invoice = ref({
- type: 'company',
- companyName: '',
- taxNumber: '',
-});
-const invoiceRules = {
- companyName: [{ required: true, message: '璇疯緭鍏ュ崟浣嶅悕绉�', trigger: 'blur' }],
- taxNumber: [{ required: true, message: '璇疯緭鍏ョ◣鍙�', trigger: 'blur' }],
-};
-
-// 浼樻儬鍒哥浉鍏�
-const activeCollapse = ref(['']);
-const coupons = ref([
- {
- id: 1,
- name: '鏂颁汉涓撲韩鍒�',
- amount: 5,
- selected: false,
- },
- {
- id: 2,
- name: '婊�30鍑�3鍏冨埜',
- amount: 3,
- selected: false,
- },
-]);
-
-// 璁㈠崟閲戦璁＄畻
-const orderAmount = computed(() => {
- const subtotal = products.value.reduce((sum, product) => {
- return sum + product.price * product.quantity;
- }, 0);
-
- const discount = coupons.value.filter((coupon) => coupon.selected).reduce((sum, coupon) => sum + coupon.amount, 0);
-
- return {
- subtotal,
- shipping: 0,
- discount,
- total: subtotal - discount,
- };
-});
-
-onMounted(() => {
- // 浠巐ocalStorage鑾峰彇浜у搧淇℃伅
- const savedProduct = localStorage.getItem('currentProduct');
- if (savedProduct) {
- const productData = JSON.parse(savedProduct);
-
- // 鍚堝苟榛樿鍊煎拰淇濆瓨鐨勪骇鍝佹暟鎹�
- let productItem = {
- id: productData.Id,
- name: productData.ModelType,
- applicationCode: productData.RecordNumber,
- price: productData.Price,
- image: `${SERVE_URL}${productData.PhysicalPicturePath}`,
- quantity: 1,
- stock: 999,
- shopName: productData.Model,
- specs: productData.CompanyName,
- 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}绾,
- },
- };
- console.log(productItem);
- products.value.push(productItem);
- }
-});
-
-// 閫変腑鍦板潃鏂囨湰
-const selectedAddressText = computed(() => {
- const address = addresses.value.find((addr) => addr.id === selectedAddress.value);
- if (!address) return '';
- return `${address.fullAddress} 鏀惰揣浜猴細${address.name} ${address.phone}`;
-});
-
-// 淇濆瓨鍦板潃
-const saveAddress = async () => {
- if (!addressForm.value) return;
-
- await addressForm.value.validate(async (valid) => {
- if (valid) {
- loading.value.saveAddress = true;
- try {
- // 妯℃嫙淇濆瓨鍦板潃
- const newAddr = {
- id: addresses.value.length + 1,
- name: newAddress.value.name,
- city: newAddress.value.region[0],
- phone: newAddress.value.phone,
- fullAddress: `${newAddress.value.region.join(' ')} ${newAddress.value.address}`,
- isDefault: newAddress.value.isDefault,
- };
-
- addresses.value.push(newAddr);
- showAddressDialog.value = false;
- ElMessage.success('鍦板潃淇濆瓨鎴愬姛');
-
- // 濡傛灉璁句负榛樿鍦板潃锛屾洿鏂板叾浠栧湴鍧�鐨勯粯璁ょ姸鎬�
- if (newAddr.isDefault) {
- addresses.value.forEach((addr) => {
- if (addr.id !== newAddr.id) {
- addr.isDefault = false;
- }
- });
- }
- } catch (error) {
- ElMessage.error('淇濆瓨鍦板潃澶辫触');
- } finally {
- loading.value.saveAddress = false;
+ {
+ value: 'xuhui',
+ label: '寰愭眹鍖�'
}
- }
- });
-};
-
-// 淇濆瓨鍙戠エ淇℃伅
-const saveInvoice = async () => {
- if (invoice.value.type === 'none' || !invoiceForm.value) {
- showInvoiceDialog.value = false;
- return;
+ ]
}
-
- await invoiceForm.value.validate(async (valid) => {
- if (valid) {
- loading.value.saveInvoice = true;
- try {
- // 妯℃嫙淇濆瓨鍙戠エ淇℃伅
- showInvoiceDialog.value = false;
- ElMessage.success('鍙戠エ淇℃伅淇濆瓨鎴愬姛');
- } finally {
- loading.value.saveInvoice = false;
- }
- }
- });
-};
-
-// 鎻愪氦璁㈠崟
-const submitOrder = async () => {
- // 琛ㄥ崟楠岃瘉
- if (!selectedAddress.value) {
- ElMessage.warning('璇烽�夋嫨鏀惰揣鍦板潃');
- return;
- }
-
- try {
- loading.value.submit = true;
-
- // 纭鎻愪氦
- await ElMessageBox.confirm(`纭鎻愪氦璁㈠崟锛熷簲浠橀噾棰濓細楼${orderAmount.value.total.toFixed(2)}`, '鎻愪氦璁㈠崟', {
- confirmButtonText: '纭',
- cancelButtonText: '鍙栨秷',
- type: 'warning',
- });
-
- // 妯℃嫙璁㈠崟鎻愪氦
- await new Promise((resolve) => setTimeout(resolve, 1000));
- const orderId = Math.floor(Math.random() * 1000000);
- ElMessage.success('璁㈠崟鎻愪氦鎴愬姛');
-
- // 鏍规嵁鏀粯鏂瑰紡璺宠浆
- if (paymentMethod.value === 'online') {
- router.push(`/payment?orderId=${orderId}`);
- } else {
- router.push(`/order/success?orderId=${orderId}`);
- }
- } catch (error) {
- if (error === 'cancel') return;
- ElMessage.error('鎻愪氦璁㈠崟澶辫触');
- } finally {
- loading.value.submit = false;
- }
-};
-
-// 杩斿洖璐墿杞�
-const goToCart = () => {
- router.push('/cart');
-};
+ // 鍏朵粬鐪佸競鍖烘暟鎹�...
+]);
</script>
<style scoped>
-:deep(.el-radio__input.is-checked + .el-radio__label) {
- color: inherit;
+:deep(.el-radio__input.is-checked .el-radio__inner) {
+ border-color: #e4393c;
+ background: #e4393c;
}
-.image-slot {
- display: flex;
- justify-content: center;
- align-items: center;
- width: 100%;
- height: 100%;
- background: #f5f7fa;
- color: #909399;
+: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>
--
Gitblit v1.9.3