From 23e535562d0b1411d1e17345ae2e8d6f18d1bbfa Mon Sep 17 00:00:00 2001 From: qiube <18969599531@163.com> Date: Fri, 26 Dec 2025 18:13:11 +0800 Subject: [PATCH] =?UTF-8?q?feat(order):=20=E4=BC=98=E5=8C=96=E5=88=9B?= =?UTF-8?q?=E5=BB=BA=E8=AE=A2=E5=8D=95=E9=A1=B5=E9=9D=A2=E7=9A=84=E5=9C=B0?= =?UTF-8?q?=E5=9D=80=E5=AD=97=E6=AE=B5=E5=92=8C=E5=BF=85=E5=A1=AB=E9=A1=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 调整新加坡、马来西亚、菲律宾、泰国、越南等国家的必填字段配置 - 将邮编和城市设为PayPal要求的必填项，越南使用省/市/郡/区/坊代替城市 - 重新排列表单字段顺序，优化移动端显示效果 - 添加更多地址信息按钮，将详细地址2放入折叠区域 - 实现地址组件自动更新功能，将省/州、市/郡、区/坊等信息拼接到详细地址1 - 更新国际化文本，添加更多和收起按钮的翻译 - 为创建订单和订单确认页面添加路由元信息，标记为不显示导航栏的客户页面 --- src/i18n/locales.js | 24 +- src/router/index.js | 6 +- src/utils/countryConfig.js | 25 +- src/views/CreateOrder.vue | 618 +++++++++++++++++++++--------------- src/views/OrderConfirm.vue | 156 ++++++++- src/views/ProductDetail.vue | 293 ++++++++++------- 6 files changed, 732 insertions(+), 390 deletions(-) diff --git a/src/i18n/locales.js b/src/i18n/locales.js index 5cda75c..3e6a0ba 100644 --- a/src/i18n/locales.js +++ b/src/i18n/locales.js @@ -30,6 +30,8 @@ const zh = { pleaseEnter: '请输入', optional: '可选', required: '必填', + more: '更多', + collapse: '收起', addressFormat: '地址格式', phoneCode: '国际区号', mustMatchId: '需与证件一致，支持当地语言+英文', @@ -234,6 +236,8 @@ const en = { pleaseEnter: 'Please enter', optional: 'Optional', required: 'Required', + more: 'More', + collapse: 'Collapse', addressFormat: 'Address Format', phoneCode: 'Phone Code', mustMatchId: 'Must match ID, supports local language + English', @@ -436,6 +440,8 @@ const may = { pleaseEnter: 'Sila masukkan', optional: 'Pilihan', required: 'Diperlukan', + more: 'Lebih Banyak', + collapse: 'Tutup', addressFormat: 'Format Alamat', phoneCode: 'Kod Telefon', mustMatchId: 'Mesti sepadan dengan ID, menyokong bahasa tempatan + Inggeris', @@ -633,9 +639,14 @@ const fil = { pleaseEnter: 'Mangyaring ipasok', optional: 'Opsiyonal', required: 'Kinakailangan', + more: 'Higit Pa', + collapse: 'Itago', addressFormat: 'Format ng Address', phoneCode: 'Phone Code', - mustMatchId: 'Dapat tumugma sa ID, sumusuporta sa lokal na wika + Ingles' + mustMatchId: 'Dapat tumugma sa ID, sumusuporta sa lokal na wika + Ingles', + // 占位符文本 + placeholderAddressLine1: 'Mangyaring ipasok ang numero ng bahay, kalye, gusali', + placeholderAddressLine2: 'Mangyaring ipasok ang sahig, numero ng unit (opsyonal)' }, product: { selectCurrency: 'Pumili ng Currency at Wika', @@ -779,6 +790,8 @@ const th = { pleaseEnter: 'กรุณากรอก', optional: 'ไม่บังคับ', required: 'จำเป็น', + more: 'เพิ่มเติม', + collapse: 'ย่อ', addressFormat: 'รูปแบบที่อยู่', phoneCode: 'รหัสโทรศัพท์', mustMatchId: 'ต้องตรงกับบัตรประชาชน รองรับภาษาท้องถิ่น + อังกฤษ', @@ -979,6 +992,8 @@ const vie = { pleaseEnter: 'Vui lòng nhập', optional: 'Tùy chọn', required: 'Bắt buộc', + more: 'Thêm', + collapse: 'Thu gọn', addressFormat: 'Định Dạng Địa Chỉ', phoneCode: 'Mã Điện Thoại', mustMatchId: 'Phải khớp với ID, hỗ trợ ngôn ngữ địa phương + tiếng Anh', @@ -1176,9 +1191,14 @@ const id = { pleaseEnter: 'Silakan masukkan', optional: 'Opsional', required: 'Diperlukan', + more: 'Lebih Banyak', + collapse: 'Tutup', addressFormat: 'Format Alamat', phoneCode: 'Kode Telepon', - mustMatchId: 'Harus sesuai dengan ID, mendukung bahasa lokal + Inggris' + mustMatchId: 'Harus sesuai dengan ID, mendukung bahasa lokal + Inggris', + // 占位符文本 + placeholderAddressLine1: 'Silakan masukkan nomor rumah, jalan, gedung', + placeholderAddressLine2: 'Silakan masukkan lantai, nomor unit (opsional)' }, product: { selectCurrency: 'Pilih Mata Uang dan Bahasa', diff --git a/src/router/index.js b/src/router/index.js index 9124d1c..378a294 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -44,12 +44,14 @@ const routes = [ { path: '/create-order', name: 'CreateOrder', - component: CreateOrder + component: CreateOrder, + meta: { isCustomerPage: true } // 标记为客户页面，不显示导航栏 }, { path: '/order/confirm', name: 'OrderConfirm', - component: () => import('../views/OrderConfirm.vue') + component: () => import('../views/OrderConfirm.vue'), + meta: { isCustomerPage: true } // 标记为客户页面，不显示导航栏 }, { path: '/paypal/success', diff --git a/src/utils/countryConfig.js b/src/utils/countryConfig.js index 4763762..7012f8f 100644 --- a/src/utils/countryConfig.js +++ b/src/utils/countryConfig.js @@ -25,8 +25,9 @@ export const countryConfigs = { phoneCode: '+65', postcodeLength: 6, postcodePattern: /^\d{6}$/, - requiredFields: ['shippingName', 'shippingPhone', 'shippingCountry', 'shippingCity', - 'shippingAddressLine1', 'shippingBlockNumber', 'shippingUnitNumber', 'shippingPostcode'], + // 新加坡：城市和邮编是PayPal要求必填的 + requiredFields: ['shippingName', 'shippingPhone', 'shippingCountry', + 'shippingCity', 'shippingAddressLine1', 'shippingBlockNumber', 'shippingUnitNumber', 'shippingPostcode'], specialFields: ['shippingBlockNumber', 'shippingUnitNumber'], fieldLabels: { shippingBlockNumber: '组屋号 (Block Number)', @@ -45,8 +46,9 @@ export const countryConfigs = { phoneCode: '+60', postcodeLength: 5, postcodePattern: /^\d{5}$/, - requiredFields: ['shippingName', 'shippingPhone', 'shippingCountry', 'shippingCity', - 'shippingStateMalaysia', 'shippingAddressLine1', 'shippingPostcode'], + // 马来西亚：城市和邮编是PayPal要求必填的；州属放入更多按钮中，改为非必填 + requiredFields: ['shippingName', 'shippingPhone', 'shippingCountry', + 'shippingCity', 'shippingAddressLine1', 'shippingPostcode'], specialFields: ['shippingStateMalaysia'], fieldLabels: { shippingStateMalaysia: '州属 (State)', @@ -64,8 +66,9 @@ export const countryConfigs = { phoneCode: '+63', postcodeLength: 4, postcodePattern: /^\d{4}$/, - requiredFields: ['shippingName', 'shippingPhone', 'shippingCountry', 'shippingCity', - 'shippingState', 'shippingBarangay', 'shippingAddressLine1', 'shippingPostcode'], + // 菲律宾：城市和邮编是PayPal要求必填的；省放入更多按钮中，改为非必填 + requiredFields: ['shippingName', 'shippingPhone', 'shippingCountry', + 'shippingCity', 'shippingBarangay', 'shippingAddressLine1', 'shippingPostcode'], specialFields: ['shippingBarangay'], fieldLabels: { shippingBarangay: 'Barangay（社区编号）', @@ -84,8 +87,9 @@ export const countryConfigs = { phoneCode: '+66', postcodeLength: 5, postcodePattern: /^\d{5}$/, - requiredFields: ['shippingName', 'shippingPhone', 'shippingCountry', 'shippingCity', - 'shippingState', 'shippingAddressLine1', 'shippingPostcode', 'shippingAddressThai'], + // 泰国：城市和邮编是PayPal要求必填的；府放入更多按钮中，改为非必填 + requiredFields: ['shippingName', 'shippingPhone', 'shippingCountry', + 'shippingCity', 'shippingAddressLine1', 'shippingAddressThai', 'shippingPostcode'], specialFields: ['shippingAddressThai', 'shippingAdministrativeArea'], fieldLabels: { shippingAddressThai: '泰文地址 (Thai Address)', @@ -105,8 +109,9 @@ export const countryConfigs = { phoneCode: '+84', postcodeLength: 5, postcodePattern: /^\d{5}$/, - requiredFields: ['shippingName', 'shippingPhone', 'shippingCountry', 'shippingProvince', - 'shippingDistrict', 'shippingWard', 'shippingAddressLine1', 'shippingPostcode'], + // 越南：使用省/市/郡/区/坊代替城市；邮编是PayPal要求必填的 + requiredFields: ['shippingName', 'shippingPhone', 'shippingCountry', + 'shippingProvince', 'shippingDistrict', 'shippingWard', 'shippingAddressLine1', 'shippingPostcode'], specialFields: ['shippingProvince', 'shippingDistrict', 'shippingWard'], fieldLabels: { shippingProvince: '省 (Tỉnh)', diff --git a/src/views/CreateOrder.vue b/src/views/CreateOrder.vue index 133d334..9705712 100644 --- a/src/views/CreateOrder.vue +++ b/src/views/CreateOrder.vue @@ -21,20 +21,20 @@ fit="cover" class="product-info-image" /> -
-
{{ productInfo.name }}
-
- SKU： - {{ productInfo.sku }} -
-
- {{ $t('product.unitPrice') }}： - {{ productInfo.currency }} {{ formatPrice(productInfo.price) }} - {{ $t('product.quantity') }}： - x{{ productInfo.quantity }} - {{ $t('order.subtotal') }}： - {{ productInfo.currency }} {{ formatPrice(productInfo.price * productInfo.quantity) }} -
+
{{ productInfo.name }}
+
+
+
+ SKU： + {{ productInfo.sku }} +
+
+ {{ $t('product.unitPrice') }}： + {{ productInfo.currency }} {{ formatPrice(productInfo.price) }} + {{ $t('product.quantity') }}： + x{{ productInfo.quantity }} + {{ $t('order.subtotal') }}： + {{ productInfo.currency }} {{ formatPrice(productInfo.price * productInfo.quantity) }}
@@ -76,50 +76,74 @@ {{ $t('order.shippingAddress') }} - - + + +
+ + + + + {{ currentCountryConfig.name }}{{ t('order.postcodeHint').replace('{0}', currentCountryConfig.postcodeLength) }} + +
- - + + +
+ + + +
- - - - - - - - - - - - - - + +