From d914301ee38b49a93271594d4a5f18a61e7918bf Mon Sep 17 00:00:00 2001 From: qiube <18969599531@163.com> Date: Wed, 24 Dec 2025 17:38:33 +0800 Subject: [PATCH] =?UTF-8?q?feat(order):=20=E5=AE=9E=E7=8E=B0=E5=9B=BD?= =?UTF-8?q?=E9=99=85=E5=8C=96=E6=94=AF=E6=8C=81=E5=B9=B6=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E5=88=9B=E5=BB=BA=E8=AE=A2=E5=8D=95=E7=95=8C=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 将创建订单界面的所有静态文本替换为国际化标签 - 实现在移动端和桌面端的响应式表单布局 - 添加多语言国家名称显示功能 - 集成Vue I18n国际化框架到应用主入口 - 优化订单确认页面的国际化文本显示 - 移除导航菜单中的创建订单项 - 添加针对不同国家的地址字段验证规则 - 实现越南地址层级映射逻辑 - 添加货币代码自动设置国家功能 --- package-lock.json | 61 +++++ package.json | 1 + src/App.vue | 1 - src/main.js | 2 + src/views/CreateOrder.vue | 468 ++++++++++++++++++++++++++---------- src/views/OrderConfirm.vue | 303 ++++++++++++++++------- src/views/ProductDetail.vue | 363 +++++++++++++++++++++++----- 7 files changed, 929 insertions(+), 270 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3d2742f..ac75e6a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "axios": "^1.6.0", "element-plus": "^2.4.4", "vue": "^3.4.0", + "vue-i18n": "^9.8.0", "vue-router": "^4.2.5" }, "devDependencies": { @@ -467,6 +468,47 @@ "resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.10.tgz", "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==" }, + "node_modules/@intlify/core-base": { + "version": "9.14.5", + "resolved": "https://registry.npmmirror.com/@intlify/core-base/-/core-base-9.14.5.tgz", + "integrity": "sha512-5ah5FqZG4pOoHjkvs8mjtv+gPKYU0zCISaYNjBNNqYiaITxW8ZtVih3GS/oTOqN8d9/mDLyrjD46GBApNxmlsA==", + "dependencies": { + "@intlify/message-compiler": "9.14.5", + "@intlify/shared": "9.14.5" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "url": "https://github.com/sponsors/kazupon" + } + }, + "node_modules/@intlify/message-compiler": { + "version": "9.14.5", + "resolved": "https://registry.npmmirror.com/@intlify/message-compiler/-/message-compiler-9.14.5.tgz", + "integrity": "sha512-IHzgEu61/YIpQV5Pc3aRWScDcnFKWvQA9kigcINcCBXN8mbW+vk9SK+lDxA6STzKQsVJxUPg9ACC52pKKo3SVQ==", + "dependencies": { + "@intlify/shared": "9.14.5", + "source-map-js": "^1.0.2" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "url": "https://github.com/sponsors/kazupon" + } + }, + "node_modules/@intlify/shared": { + "version": "9.14.5", + "resolved": "https://registry.npmmirror.com/@intlify/shared/-/shared-9.14.5.tgz", + "integrity": "sha512-9gB+E53BYuAEMhbCAxVgG38EZrk59sxBtv3jSizNL2hEWlgjBjAw1AwpLHtNaeda12pe6W20OGEa0TwuMSRbyQ==", + "engines": { + "node": ">= 16" + }, + "funding": { + "url": "https://github.com/sponsors/kazupon" + } + }, "node_modules/@jridgewell/sourcemap-codec": { "version": "1.5.5", "resolved": "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz", @@ -1562,6 +1604,25 @@ } } }, + "node_modules/vue-i18n": { + "version": "9.14.5", + "resolved": "https://registry.npmmirror.com/vue-i18n/-/vue-i18n-9.14.5.tgz", + "integrity": "sha512-0jQ9Em3ymWngyiIkj0+c/k7WgaPO+TNzjKSNq9BvBQaKJECqn9cd9fL4tkDhB5G1QBskGl9YxxbDAhgbFtpe2g==", + "dependencies": { + "@intlify/core-base": "9.14.5", + "@intlify/shared": "9.14.5", + "@vue/devtools-api": "^6.5.0" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "url": "https://github.com/sponsors/kazupon" + }, + "peerDependencies": { + "vue": "^3.0.0" + } + }, "node_modules/vue-router": { "version": "4.6.4", "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.6.4.tgz", diff --git a/package.json b/package.json index 5212095..bc3a978 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "dependencies": { "vue": "^3.4.0", "vue-router": "^4.2.5", + "vue-i18n": "^9.8.0", "axios": "^1.6.0", "element-plus": "^2.4.4", "@element-plus/icons-vue": "^2.3.1" diff --git a/src/App.vue b/src/App.vue index dd26f6c..0b3bbf7 100644 --- a/src/App.vue +++ b/src/App.vue @@ -14,7 +14,6 @@ :default-active="activeIndex" router > - 创建订单 订单查询 商品管理 diff --git a/src/main.js b/src/main.js index 30c7e70..0cff274 100644 --- a/src/main.js +++ b/src/main.js @@ -4,6 +4,7 @@ import router from './router' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import * as ElementPlusIconsVue from '@element-plus/icons-vue' +import i18n from './i18n' const app = createApp(App) @@ -14,6 +15,7 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.use(router) app.use(ElementPlus) +app.use(i18n) // 添加错误处理 app.config.errorHandler = (err, instance, info) => { diff --git a/src/views/CreateOrder.vue b/src/views/CreateOrder.vue index 5be9c05..133d334 100644 --- a/src/views/CreateOrder.vue +++ b/src/views/CreateOrder.vue @@ -3,7 +3,7 @@ @@ -11,7 +11,7 @@
@@ -28,11 +28,11 @@ {{ 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) }}
@@ -44,239 +44,238 @@ ref="formRef" :model="form" :rules="rules" - label-width="120px" - label-position="left" + :label-width="isMobile ? 'auto' : '120px'" + :label-position="isMobile ? 'top' : 'left'" > - 客户信息 + {{ $t('order.customerInfo') }} - + - + - + - 收货地址 - + {{ $t('order.shippingAddress') }} + - + - + - - - - - - - - - - - - - + + + - + - + - + - + - + - + - - - - + + +
+ + + +
- - - - - - {{ currentCountryConfig.name }}邮编为{{ currentCountryConfig.postcodeLength }}位数字 - + +
+ + + + + {{ currentCountryConfig.name }}{{ t('order.postcodeHint').replace('{0}', currentCountryConfig.postcodeLength) }} + +
- + - + - + - 提交订单 + {{ $t('order.submit') }} - 返回 + {{ $t('order.back') }} @@ -286,10 +285,15 @@