From ed745ee6a5a968f95c0c7ad425f753c14417a5a6 Mon Sep 17 00:00:00 2001
From: qiube <18969599531@163.com>
Date: Mon, 22 Dec 2025 11:37:35 +0800
Subject: [PATCH] =?UTF-8?q?feat(product):=20=E6=96=B0=E5=A2=9E=E5=95=86?=
 =?UTF-8?q?=E5=93=81=E5=88=9B=E5=BB=BA=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加商品创建表单，支持商品基本信息录入
- 实现多图片上传功能，支持主图和SKU图片上传
- 添加SKU配置模块，支持多个SKU的添加和管理
- 实现销售地区选择功能，支持多地区价格设置
- 添加物流信息配置，包括重量和尺寸设置
- 实现批量编辑功能，支持批量设置价格和库存
- 添加表单验证和提交逻辑，确保数据完整性
- 集成API接口，实现商品创建功能
- 添加页面路由配置，支持从商品管理页面跳转
---
 PRODUCT_DETAIL.md           |  130 ++++
 src/router/index.js         |    5 +
 src/views/ProductCreate.vue | 1424 +++++++++++++++++++++++++++++++++++
 3 files changed, 1559 insertions(+)
 create mode 100644 PRODUCT_DETAIL.md
 create mode 100644 src/views/ProductCreate.vue

diff --git a/PRODUCT_DETAIL.md b/PRODUCT_DETAIL.md
new file mode 100644
index 0000000..5b7a9f9
--- /dev/null
+++ b/PRODUCT_DETAIL.md
@@ -0,0 +1,130 @@
+# 商品详情页说明
+
+## 页面功能
+
+### 1. 商品展示区域
+- **左侧大图**：支持点击放大预览
+- **缩略图列表**：点击切换主图
+- **图片预览**：Element Plus图片预览功能
+
+### 2. 商品信息区域
+- **商品标题**：大字体，醒目展示
+- **商品副标题**：补充说明信息
+- **价格展示**：
+  - 现价（大字体，红色高亮）
+  - 原价（删除线，灰色）
+  - 节省金额提示
+
+### 3. 规格选择
+- **多规格支持**：颜色、尺寸等
+- **可视化选择**：标签式选择，选中高亮
+- **必选验证**：支付前验证所有规格已选择
+
+### 4. 数量选择
+- **数量输入框**：支持增减
+- **库存显示**：实时显示库存信息
+- **库存限制**：超过库存时禁用
+
+### 5. 服务保障
+- **7天无理由退货**
+- **正品保证**
+- **极速发货**
+
+### 6. 操作按钮
+- **立即购买**：橙色渐变按钮
+- **立即支付**：红色渐变按钮（主要支付按钮）
+- **悬停效果**：按钮有阴影和上浮动画
+
+### 7. 商品详情标签页
+- **商品详情**：HTML格式的商品描述
+- **规格参数**：表格形式展示参数
+- **用户评价**：评价列表展示
+
+## 样式特点
+
+### 参考主流电商设计
+1. **价格突出**：大字体、红色、渐变背景
+2. **图片展示**：大图+缩略图，支持预览
+3. **按钮设计**：渐变背景、阴影效果、悬停动画
+4. **卡片布局**：圆角、阴影、层次分明
+5. **响应式设计**：移动端自适应
+
+### 颜色方案
+- **主色调**：红色系（#f56c6c, #ff4757）
+- **辅助色**：橙色系（#ff9500, #ff6b00）
+- **背景色**：浅灰色（#f5f7fa）
+- **文字色**：深灰色（#333, #666）
+
+## 支付流程
+
+1. 用户选择商品规格和数量
+2. 点击"立即支付"按钮
+3. 系统自动生成订单号
+4. 调用后端API创建支付订单
+5. 跳转到收银台页面完成支付
+
+## 数据格式
+
+### 商品数据结构
+```javascript
+{
+  id: '1',
+  name: '商品名称',
+  subtitle: '商品副标题',
+  price: 20.00,
+  originalPrice: 25.00,
+  currency: 'USD',
+  stock: 100,
+  images: ['图片URL数组'],
+  specs: [
+    {
+      name: '规格名称',
+      options: [
+        { label: '选项标签', value: '选项值' }
+      ]
+    }
+  ],
+  description: 'HTML格式的商品描述',
+  params: [
+    { name: '参数名', value: '参数值' }
+  ],
+  reviews: [
+    {
+      user: '用户名',
+      rating: 5,
+      date: '日期',
+      content: '评价内容'
+    }
+  ]
+}
+```
+
+## 路由配置
+
+- **路径**：`/` 或 `/product/:id`
+- **组件**：`ProductDetail.vue`
+- **参数**：`id` - 商品ID（可选）
+
+## 使用示例
+
+### 访问商品详情页
+```
+http://localhost:3000/
+http://localhost:3000/product/1
+```
+
+### 从其他页面跳转
+```javascript
+router.push('/product/1')
+router.push({ path: '/product', params: { id: '1' } })
+```
+
+## 扩展建议
+
+1. **商品列表页**：创建商品列表，点击跳转到详情页
+2. **购物车功能**：添加购物车按钮和功能
+3. **商品推荐**：在详情页下方展示相关商品
+4. **图片轮播**：主图支持自动轮播
+5. **视频展示**：支持商品视频播放
+6. **分享功能**：添加商品分享功能
+
diff --git a/src/router/index.js b/src/router/index.js
index 814b1c0..e30db36 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -40,6 +40,11 @@ const routes = [
     path: '/manage/product',
     name: 'ProductManage',
     component: () => import('../views/ProductManage.vue')
+  },
+  {
+    path: '/manage/product/create',
+    name: 'ProductCreate',
+    component: () => import('../views/ProductCreate.vue')
   }
 ]
 
diff --git a/src/views/ProductCreate.vue b/src/views/ProductCreate.vue
new file mode 100644
index 0000000..8456a29
--- /dev/null
+++ b/src/views/ProductCreate.vue
@@ -0,0 +1,1424 @@
+<template>
+  <div class="product-create">
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <span>新增商品</span>
+          <el-button @click="goBack">返回</el-button>
+        </div>
+      </template>
+
+      <el-form
+        ref="formRef"
+        :model="form"
+        :rules="rules"
+        label-width="120px"
+        label-position="left"
+      >
+        <el-form-item label="商品名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入商品名称" />
+        </el-form-item>
+
+        <el-form-item label="商品价格" prop="price">
+          <el-input-number
+            v-model="form.price"
+            :precision="2"
+            :min="0.01"
+            :max="999999.99"
+            placeholder="请输入商品价格"
+            style="width: 100%"
+          />
+        </el-form-item>
+
+        <el-form-item label="主图" prop="mainImages">
+          <div class="image-upload-section">
+            <!-- 多图片上传 -->
+            <el-upload
+              class="image-uploader-multiple"
+              :http-request="handleMainImagesUpload"
+              :on-remove="handleMainImageRemove"
+              :file-list="mainImageFileList"
+              :before-upload="beforeUpload"
+              multiple
+              list-type="picture-card"
+              :limit="10"
+              accept="image/*"
+            >
+              <el-icon class="uploader-icon-multiple"><Plus /></el-icon>
+            </el-upload>
+            <div class="upload-tip">
+              点击上传主图（支持jpg、png、gif等，最大10MB，最多10张）
+            </div>
+            <!-- 图片预览列表 -->
+            <div v-if="form.mainImages && form.mainImages.length > 0" class="image-preview-list">
+              <div
+                v-for="(image, index) in form.mainImages"
+                :key="index"
+                class="image-preview-item"
+              >
+                <el-image
+                  :src="image"
+                  class="preview-image"
+                  fit="cover"
+                  :preview-src-list="form.mainImages"
+                  :initial-index="index"
+                />
+                <div class="image-actions">
+                  <el-button
+                    type="danger"
+                    :icon="Delete"
+                    circle
+                    size="small"
+                    @click="removeMainImage(index)"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-form-item>
+
+        <el-form-item label="店铺ID" prop="shopId">
+          <el-input-number
+            v-model="form.shopId"
+            :min="1"
+            placeholder="请输入店铺ID"
+            style="width: 100%"
+          />
+        </el-form-item>
+
+        <el-form-item label="商品状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio label="ACTIVE">上架</el-radio>
+            <el-radio label="INACTIVE">下架</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item label="销售地区" prop="salesRegions">
+          <el-checkbox-group v-model="form.salesRegions">
+            <el-checkbox label="MY">马来西亚 (MYR)</el-checkbox>
+            <el-checkbox label="PH">菲律宾 (PHP)</el-checkbox>
+            <el-checkbox label="TH">泰国 (THB)</el-checkbox>
+            <el-checkbox label="VN">越南 (VND)</el-checkbox>
+            <el-checkbox label="SG">新加坡 (SGD)</el-checkbox>
+            <el-checkbox label="US">美国 (USD)</el-checkbox>
+            <el-checkbox label="CN">中国 (CNY)</el-checkbox>
+            <el-checkbox label="EU">欧洲 (EUR)</el-checkbox>
+            <el-checkbox label="GB">英国 (GBP)</el-checkbox>
+          </el-checkbox-group>
+          <div class="form-tip">
+            提示：选择该商品将在哪些地区销售，批量设置价格时会显示对应地区的价格输入框
+          </div>
+        </el-form-item>
+
+        <!-- 物流信息（商品级别，所有SKU共享） -->
+        <el-divider content-position="left">
+          <span style="color: #f56c6c">*</span>
+          <span>物流信息</span>
+        </el-divider>
+        
+        <el-form-item label="包裹重量" required>
+          <el-row :gutter="10" style="width: 100%">
+            <el-col :span="16">
+              <el-input-number
+                v-model="form.weightValue"
+                :precision="2"
+                :min="0"
+                placeholder="请输入重量"
+                style="width: 100%"
+              />
+            </el-col>
+            <el-col :span="8">
+              <el-select v-model="form.weightUnit" style="width: 100%">
+                <el-option label="克(g)" value="g" />
+                <el-option label="千克(kg)" value="kg" />
+                <el-option label="磅(lb)" value="lb" />
+              </el-select>
+            </el-col>
+          </el-row>
+        </el-form-item>
+
+        <el-form-item label="包裹尺寸" required>
+          <el-row :gutter="10" style="width: 100%">
+            <el-col :span="6">
+              <el-input-number
+                v-model="form.sizeLength"
+                :precision="2"
+                :min="0"
+                placeholder="长"
+                style="width: 100%"
+              />
+            </el-col>
+            <el-col :span="6">
+              <el-input-number
+                v-model="form.sizeWidth"
+                :precision="2"
+                :min="0"
+                placeholder="宽"
+                style="width: 100%"
+              />
+            </el-col>
+            <el-col :span="6">
+              <el-input-number
+                v-model="form.sizeHeight"
+                :precision="2"
+                :min="0"
+                placeholder="高"
+                style="width: 100%"
+              />
+            </el-col>
+            <el-col :span="6">
+              <el-select v-model="form.sizeUnit" style="width: 100%">
+                <el-option label="厘米(cm)" value="cm" />
+                <el-option label="米(m)" value="m" />
+                <el-option label="英寸(in)" value="in" />
+              </el-select>
+            </el-col>
+          </el-row>
+        </el-form-item>
+
+        <el-divider>SKU信息</el-divider>
+
+        <!-- SKU新增模块 -->
+        <el-card shadow="never" class="sku-add-module-card" style="margin-bottom: 20px">
+          <template #header>
+            <div class="sku-module-header">
+              <span class="module-title">SKU配置</span>
+            </div>
+          </template>
+          
+          <!-- SKU配置列表 -->
+          <div class="sku-config-list">
+            <div 
+              v-for="(skuItem, skuIndex) in form.skus" 
+              :key="skuIndex"
+              class="sku-config-item"
+            >
+              <div class="sku-config-content">
+                <!-- SKU描述编辑 -->
+                <div class="sku-description-section">
+                  <el-input
+                    v-model="skuItem.sku"
+                    type="textarea"
+                    :rows="2"
+                    placeholder='例如：【✅性价比首选】浅水蓝+浅水蓝+米白色【⭐️毛巾实惠3条装】'
+                    maxlength="2000"
+                    show-word-limit
+                    class="sku-description-input"
+                  />
+                </div>
+                
+                <!-- SKU图片关联 -->
+                <div class="sku-images-section">
+                  <div class="section-label">SKU图片关联</div>
+                  <div class="sku-image-wrapper">
+                    <!-- 已上传的图片 -->
+                    <div 
+                      v-if="skuItem.skuImage"
+                      class="sku-image-item"
+                    >
+                      <el-image
+                        :src="skuItem.skuImage"
+                        fit="cover"
+                        class="sku-preview-image"
+                      >
+                        <template #error>
+                          <div class="image-slot">
+                            <el-icon><Picture /></el-icon>
+                          </div>
+                        </template>
+                      </el-image>
+                      <div class="image-actions">
+                        <el-button
+                          type="danger"
+                          :icon="Delete"
+                          circle
+                          size="small"
+                          @click="removeSkuImage(skuIndex)"
+                        />
+                      </div>
+                    </div>
+                    
+                    <!-- 上传按钮 -->
+                    <div 
+                      v-else
+                      class="sku-upload-item"
+                    >
+                      <el-upload
+                        :action="''"
+                        :http-request="(options) => handleSkuImageUpload(options, skuIndex)"
+                        :show-file-list="false"
+                        :before-upload="beforeUpload"
+                        accept="image/*"
+                        class="sku-image-uploader"
+                      >
+                        <div class="upload-placeholder">
+                          <el-icon class="upload-icon"><Plus /></el-icon>
+                          <div class="upload-text">上传图片</div>
+                        </div>
+                      </el-upload>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              
+              <!-- 删除按钮 -->
+              <div class="sku-actions">
+                <el-button
+                  type="danger"
+                  :icon="Delete"
+                  circle
+                  @click="removeSku(skuIndex)"
+                  :disabled="form.skus.length <= 1"
+                  title="删除SKU"
+                />
+              </div>
+            </div>
+          </div>
+          
+          <!-- 添加SKU按钮 -->
+          <div class="add-sku-button-wrapper">
+            <el-button
+              type="primary"
+              :icon="Plus"
+              @click="addSku"
+              class="add-sku-btn"
+            >
+              添加选项
+            </el-button>
+          </div>
+        </el-card>
+
+        <el-form-item label="SKU列表" prop="skus">
+          <!-- 批量编辑按钮 -->
+          <div class="sku-list-header" v-if="form.salesRegions && form.salesRegions.length > 0">
+            <el-button 
+              type="primary" 
+              @click="showBatchEdit = !showBatchEdit"
+              class="batch-edit-toggle-btn"
+            >
+              <el-icon style="margin-right: 5px">
+                <ArrowDown v-if="!showBatchEdit" />
+                <ArrowUp v-else />
+              </el-icon>
+              {{ showBatchEdit ? '收起批量编辑' : '批量编辑' }}
+            </el-button>
+          </div>
+          
+          <!-- 批量操作区域（可折叠） -->
+          <el-collapse-transition>
+            <el-card 
+              v-show="showBatchEdit && form.salesRegions && form.salesRegions.length > 0" 
+              shadow="never" 
+              class="batch-operation-card" 
+              style="margin-bottom: 20px"
+            >
+              <div class="batch-operation-content">
+                <div class="batch-regions-grid">
+                  <div 
+                    v-for="region in selectedSalesRegions" 
+                    :key="region.code"
+                    class="batch-region-item"
+                  >
+                    <div class="region-label-wrapper">
+                      <span class="region-code-badge">{{ region.code }}</span>
+                      <span class="region-name-text">{{ region.name }}</span>
+                    </div>
+                    <el-input-number
+                      v-model="batchRegionPrices[region.code]"
+                      :precision="2"
+                      :min="0"
+                      placeholder="价格"
+                      style="width: 100%"
+                      size="small"
+                    />
+                  </div>
+                </div>
+                
+                <div class="batch-actions-row">
+                  <div class="batch-stock-wrapper">
+                    <span class="batch-label">批量设置库存：</span>
+                    <el-input-number
+                      v-model="batchStock"
+                      :min="0"
+                      placeholder="库存数量"
+                      style="width: 180px"
+                    />
+                  </div>
+                  
+                  <el-button 
+                    type="primary" 
+                    size="default"
+                    @click="applyAllBatchSettings"
+                    class="batch-apply-btn"
+                  >
+                    应用批量设置
+                  </el-button>
+                </div>
+              </div>
+            </el-card>
+          </el-collapse-transition>
+          
+          <el-alert
+            v-if="!form.salesRegions || form.salesRegions.length === 0"
+            type="info"
+            :closable="false"
+            style="margin-bottom: 20px"
+          >
+            请先在商品信息中选择销售地区，批量设置功能将根据选择的地区显示对应的价格输入框
+          </el-alert>
+          <div class="sku-table-wrapper">
+            <div class="sku-table-container">
+              <el-table 
+                :data="form.skus" 
+                border
+                class="sku-table"
+              >
+              <el-table-column label="SKU" min-width="300" fixed="left">
+                <template #default="{ row, $index }">
+                  <el-input
+                    v-model="row.sku"
+                    type="textarea"
+                    :rows="2"
+                    placeholder='例如：【✅性价比首选】浅水蓝+浅水蓝+米白色【⭐️毛巾实惠3条装】'
+                    maxlength="2000"
+                    show-word-limit
+                    style="width: 100%"
+                  />
+                </template>
+              </el-table-column>
+              
+              <el-table-column 
+                v-for="region in selectedSalesRegions" 
+                :key="region.code"
+                :label="`*${region.code} 定价`"
+                width="150"
+                align="center"
+              >
+                <template #default="{ row }">
+                  <el-input-number
+                    v-model="row.regionPrices[region.code]"
+                    :precision="2"
+                    :min="0"
+                    style="width: 100%"
+                    placeholder="0.00"
+                  />
+                </template>
+              </el-table-column>
+              
+              <el-table-column label="*商品库存" width="150" align="center" fixed="right">
+                <template #default="{ row }">
+                  <el-input-number
+                    v-model="row.stock"
+                    :min="0"
+                    style="width: 100%"
+                    placeholder="库存"
+                  />
+                </template>
+              </el-table-column>
+              
+              <el-table-column label="操作" width="100" align="center" fixed="right">
+                <template #default="{ $index }">
+                  <el-button
+                    type="danger"
+                    link
+                    @click="removeSku($index)"
+                    :disabled="form.skus.length <= 1"
+                  >
+                    删除
+                  </el-button>
+                </template>
+              </el-table-column>
+              </el-table>
+            </div>
+            
+          </div>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="primary" @click="submitForm" :loading="submitting">
+            创建商品
+          </el-button>
+          <el-button @click="resetForm">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { Plus, Delete, ArrowDown, ArrowUp, Picture } from '@element-plus/icons-vue'
+import request from '../api/request'
+
+const router = useRouter()
+const submitting = ref(false)
+const formRef = ref()
+
+// 主图文件列表（用于el-upload组件）
+const mainImageFileList = ref([])
+
+// 表单数据
+const form = reactive({
+  name: '',
+  price: null,
+  mainImage: '', // 兼容字段，取mainImages的第一个
+  mainImages: [], // 主图列表
+  status: 'ACTIVE',
+  shopId: null,
+  salesRegions: [], // 销售地区列表，如：['MY', 'PH', 'TH', 'VN']
+  // 物流信息（商品级别，所有SKU共享）
+  weightValue: null,
+  weightUnit: 'g',
+  sizeLength: null,
+  sizeWidth: null,
+  sizeHeight: null,
+  sizeUnit: 'cm',
+  skus: [
+    {
+      sku: '', // SKU描述
+      regionPrices: {}, // 按地区存储价格，如：{ 'MY': 100, 'PH': 200 }
+      stock: 0,
+      skuImage: '', // SKU图片
+      status: 'ACTIVE'
+    }
+  ]
+})
+
+// 地区到货币的映射
+const regionCurrencyMap = {
+  'MY': { code: 'MY', name: '马来西亚', currency: 'MYR' },
+  'PH': { code: 'PH', name: '菲律宾', currency: 'PHP' },
+  'TH': { code: 'TH', name: '泰国', currency: 'THB' },
+  'VN': { code: 'VN', name: '越南', currency: 'VND' },
+  'SG': { code: 'SG', name: '新加坡', currency: 'SGD' },
+  'US': { code: 'US', name: '美国', currency: 'USD' },
+  'CN': { code: 'CN', name: '中国', currency: 'CNY' },
+  'EU': { code: 'EU', name: '欧洲', currency: 'EUR' },
+  'GB': { code: 'GB', name: '英国', currency: 'GBP' }
+}
+
+// 批量操作相关
+const batchStock = ref(null)
+const batchRegionPrices = ref({}) // 按地区存储批量价格，如：{ 'MY': 100, 'PH': 200 }
+const showBatchEdit = ref(false) // 控制批量编辑模块的显示/隐藏
+
+// 计算已选择的销售地区信息
+const selectedSalesRegions = computed(() => {
+  if (!form.salesRegions || form.salesRegions.length === 0) {
+    return []
+  }
+  return form.salesRegions
+    .map(regionCode => regionCurrencyMap[regionCode])
+    .filter(Boolean)
+})
+
+// 监听销售地区变化，初始化批量价格对象和SKU的regionPrices
+watch(() => form.salesRegions, (newRegions, oldRegions) => {
+  // 清空之前的批量价格
+  batchRegionPrices.value = {}
+  // 为每个新选择的地区初始化价格
+  if (newRegions && newRegions.length > 0) {
+    newRegions.forEach(regionCode => {
+      if (regionCurrencyMap[regionCode]) {
+        batchRegionPrices.value[regionCode] = null
+      }
+    })
+  }
+  
+  // 更新所有SKU的regionPrices结构
+  form.skus.forEach(sku => {
+    if (!sku.regionPrices) {
+      sku.regionPrices = {}
+    }
+    // 移除已取消选择的地区
+    if (oldRegions && oldRegions.length > 0) {
+      oldRegions.forEach(oldRegion => {
+        if (!newRegions || !newRegions.includes(oldRegion)) {
+          delete sku.regionPrices[oldRegion]
+        }
+      })
+    }
+    // 为新选择的地区初始化价格
+    if (newRegions && newRegions.length > 0) {
+      newRegions.forEach(regionCode => {
+        if (sku.regionPrices[regionCode] === undefined) {
+          sku.regionPrices[regionCode] = null
+        }
+      })
+    }
+  })
+}, { immediate: true })
+
+// 应用所有批量设置（价格、库存和SKU后缀）
+const applyAllBatchSettings = () => {
+  let hasPriceUpdate = false
+  let hasStockUpdate = false
+  const updatedRegions = []
+  
+  // 批量应用地区价格
+  Object.keys(batchRegionPrices.value).forEach(regionCode => {
+    const price = batchRegionPrices.value[regionCode]
+    if (price !== null && price > 0) {
+      form.skus.forEach(sku => {
+        if (!sku.regionPrices) {
+          sku.regionPrices = {}
+        }
+        sku.regionPrices[regionCode] = price
+      })
+      hasPriceUpdate = true
+      updatedRegions.push(regionCode)
+      // 清空已应用的价格
+      batchRegionPrices.value[regionCode] = null
+    }
+  })
+  
+  // 批量应用库存
+  let stockValue = null
+  if (batchStock.value !== null && batchStock.value >= 0) {
+    stockValue = batchStock.value
+    form.skus.forEach(sku => {
+      sku.stock = batchStock.value
+    })
+    hasStockUpdate = true
+    batchStock.value = null
+  }
+  
+  // 显示成功消息
+  const messages = []
+  if (hasPriceUpdate) {
+    const regionNames = updatedRegions.join('、')
+    messages.push(`价格（${regionNames}）`)
+  }
+  if (hasStockUpdate) {
+    messages.push(`库存（${stockValue}）`)
+  }
+  
+  if (messages.length > 0) {
+    ElMessage.success(`已批量更新 ${form.skus.length} 个SKU的 ${messages.join('、')}`)
+  } else {
+    ElMessage.warning('请填写要批量设置的价格或库存')
+  }
+}
+
+// 表单验证规则
+const rules = {
+  name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
+  price: [{ required: true, message: '请输入商品价格', trigger: 'blur' }],
+  shopId: [{ required: true, message: '请输入店铺ID', trigger: 'blur' }],
+  skus: [
+    { required: true, message: '至少需要一个SKU', trigger: 'change' },
+    {
+      validator: (rule, value, callback) => {
+        if (!value || value.length === 0) {
+          callback(new Error('至少需要一个SKU'))
+        } else {
+          callback()
+        }
+      },
+      trigger: 'change'
+    }
+  ]
+}
+
+// 添加SKU
+const addSku = () => {
+  const newSku = {
+    sku: '', // SKU描述
+    regionPrices: {}, // 按地区存储价格
+    stock: 0,
+    skuImage: '', // SKU图片（单张）
+    status: 'ACTIVE'
+  }
+  
+  // 为已选择的销售地区初始化价格
+  if (form.salesRegions && form.salesRegions.length > 0) {
+    form.salesRegions.forEach(regionCode => {
+      newSku.regionPrices[regionCode] = null
+    })
+  }
+  
+  form.skus.push(newSku)
+}
+
+// 删除SKU
+const removeSku = (index) => {
+  if (form.skus.length > 1) {
+    form.skus.splice(index, 1)
+  }
+}
+
+// 自定义多图片上传（单个文件上传）
+const handleMainImagesUpload = async (options) => {
+  const { file, onSuccess, onError } = options
+  
+  try {
+    // 验证文件
+    const isValid = beforeUpload(file)
+    if (!isValid) {
+      onError(new Error('文件验证失败'))
+      return
+    }
+    
+    // 检查是否超过限制
+    if (form.mainImages.length >= 10) {
+      ElMessage.warning('最多只能上传10张图片')
+      onError(new Error('超过图片数量限制'))
+      return
+    }
+    
+    // 创建FormData（单个文件）
+    const formData = new FormData()
+    formData.append('file', file)
+    
+    // 上传文件（使用相对路径，baseURL已包含/api）
+    const response = await request.post('/product/upload/image', formData)
+    
+    if (response.code === '0000' && response.data) {
+      const uploadedUrl = response.data.url || response.data.fileName
+      
+      if (uploadedUrl) {
+        form.mainImages.push(uploadedUrl)
+        
+        // 更新mainImage为第一张图片（兼容）
+        if (form.mainImages.length === 1) {
+          form.mainImage = uploadedUrl
+        }
+        
+        // 更新文件列表
+        mainImageFileList.value.push({
+          name: file.name,
+          url: uploadedUrl,
+          status: 'success',
+          response: response
+        })
+        
+        onSuccess(response, file)
+        ElMessage.success('图片上传成功')
+      } else {
+        onError(new Error('未获取到图片URL'))
+        ElMessage.error('图片上传失败：未获取到图片URL')
+      }
+    } else {
+      onError(new Error(response.message || '图片上传失败'))
+      ElMessage.error(response.message || '图片上传失败')
+    }
+  } catch (error) {
+    console.error('图片上传失败:', error)
+    onError(error)
+    ElMessage.error('图片上传失败: ' + (error.message || '未知错误'))
+  }
+}
+
+// SKU图片上传
+const handleSkuImageUpload = async (options, skuIndex) => {
+  const { file, onSuccess, onError } = options
+  
+  try {
+    // 验证文件
+    const isValid = beforeUpload(file)
+    if (!isValid) {
+      onError(new Error('文件验证失败'))
+      return
+    }
+    
+    // 创建FormData（单个文件）
+    const formData = new FormData()
+    formData.append('file', file)
+    
+    // 上传文件（使用相对路径，baseURL已包含/api）
+    const response = await request.post('/product/upload/image', formData)
+    
+    if (response.code === '0000' && response.data) {
+      const uploadedUrl = response.data.url || response.data.fileName
+      
+      if (uploadedUrl) {
+        form.skus[skuIndex].skuImage = uploadedUrl
+        onSuccess(response, file)
+        ElMessage.success('图片上传成功')
+      } else {
+        onError(new Error('未获取到图片URL'))
+        ElMessage.error('图片上传失败：未获取到图片URL')
+      }
+    } else {
+      onError(new Error(response.message || '图片上传失败'))
+      ElMessage.error(response.message || '图片上传失败')
+    }
+  } catch (error) {
+    console.error('SKU图片上传失败:', error)
+    onError(error)
+    ElMessage.error('图片上传失败: ' + (error.message || '未知错误'))
+  }
+}
+
+// 删除SKU图片
+const removeSkuImage = (skuIndex) => {
+  form.skus[skuIndex].skuImage = ''
+  ElMessage.success('图片已删除')
+}
+
+// 删除主图
+const handleMainImageRemove = (file, fileList) => {
+  // 从mainImages中移除对应的URL
+  if (file.url) {
+    const index = form.mainImages.indexOf(file.url)
+    if (index > -1) {
+      form.mainImages.splice(index, 1)
+    }
+  } else if (file.response && file.response.data && file.response.data.url) {
+    // 处理上传成功的文件
+    const url = file.response.data.url
+    const index = form.mainImages.indexOf(url)
+    if (index > -1) {
+      form.mainImages.splice(index, 1)
+    }
+  }
+  
+  // 更新mainImage
+  if (form.mainImages.length > 0) {
+    form.mainImage = form.mainImages[0]
+  } else {
+    form.mainImage = ''
+  }
+  
+  // 更新文件列表
+  mainImageFileList.value = fileList
+}
+
+// 手动删除主图
+const removeMainImage = (index) => {
+  form.mainImages.splice(index, 1)
+  // 更新mainImage
+  if (form.mainImages.length > 0) {
+    form.mainImage = form.mainImages[0]
+  } else {
+    form.mainImage = ''
+  }
+  // 更新文件列表
+  mainImageFileList.value = mainImageFileList.value.filter((_, i) => i !== index)
+}
+
+// 上传前验证
+const beforeUpload = (file) => {
+  const isImage = file.type.startsWith('image/')
+  const isLt10M = file.size / 1024 / 1024 < 10
+
+  if (!isImage) {
+    ElMessage.error('只能上传图片文件!')
+    return false
+  }
+  if (!isLt10M) {
+    ElMessage.error('图片大小不能超过10MB!')
+    return false
+  }
+  
+  // 检查是否超过限制
+  if (form.mainImages.length >= 10) {
+    ElMessage.warning('最多只能上传10张图片')
+    return false
+  }
+  
+  return true
+}
+
+// 提交表单
+const submitForm = async () => {
+  if (!formRef.value) return
+
+  await formRef.value.validate(async (valid) => {
+    if (!valid) {
+      ElMessage.error('请填写完整信息')
+      return
+    }
+
+    submitting.value = true
+
+    try {
+      // 验证物流信息（商品级别）
+      if (!form.weightValue || form.weightValue <= 0) {
+        ElMessage.error('请填写包裹重量')
+        submitting.value = false
+        return
+      }
+      if (!form.sizeLength || !form.sizeWidth || !form.sizeHeight || 
+          form.sizeLength <= 0 || form.sizeWidth <= 0 || form.sizeHeight <= 0) {
+        ElMessage.error('请填写完整的包裹尺寸（长、宽、高）')
+        submitting.value = false
+        return
+      }
+      
+      // 转换重量：统一转换为克(g)
+      let weightInGrams = null
+      if (form.weightValue != null && form.weightValue > 0) {
+        if (form.weightUnit === 'g') {
+          weightInGrams = form.weightValue
+        } else if (form.weightUnit === 'kg') {
+          weightInGrams = form.weightValue * 1000
+        } else if (form.weightUnit === 'lb') {
+          weightInGrams = form.weightValue * 453.592
+        }
+      }
+      
+      // 转换尺寸：统一转换为厘米(cm)，并生成JSON
+      let sizeJson = null
+      if (form.sizeLength != null && form.sizeWidth != null && form.sizeHeight != null) {
+        let length = form.sizeLength
+        let width = form.sizeWidth
+        let height = form.sizeHeight
+        
+        // 转换为厘米
+        if (form.sizeUnit === 'm') {
+          length = length * 100
+          width = width * 100
+          height = height * 100
+        } else if (form.sizeUnit === 'in') {
+          length = length * 2.54
+          width = width * 2.54
+          height = height * 2.54
+        }
+        
+        sizeJson = JSON.stringify({
+          length: parseFloat(length.toFixed(2)),
+          width: parseFloat(width.toFixed(2)),
+          height: parseFloat(height.toFixed(2)),
+          unit: 'cm'
+        })
+      }
+      
+      // 构建请求数据
+      const requestData = {
+        name: form.name,
+        price: form.price,
+        // 优先使用mainImages，如果没有则使用mainImage（兼容）
+        mainImages: form.mainImages.length > 0 ? form.mainImages : (form.mainImage ? [form.mainImage] : []),
+        mainImage: form.mainImages.length > 0 ? form.mainImages[0] : form.mainImage, // 兼容字段
+        status: form.status,
+        shopId: form.shopId,
+        skus: form.skus.flatMap(sku => {
+          // 为每个有价格的地区创建一个SKU记录
+          const skuRecords = []
+          
+          if (sku.regionPrices && Object.keys(sku.regionPrices).length > 0) {
+            Object.keys(sku.regionPrices).forEach(regionCode => {
+              const price = sku.regionPrices[regionCode]
+              if (price !== null && price > 0) {
+                const region = regionCurrencyMap[regionCode]
+                if (region) {
+                  skuRecords.push({
+                    sku: sku.sku, // SKU描述
+                    price: price,
+                    currency: region.currency,
+                    stock: sku.stock,
+                    skuImage: sku.skuImage || null, // SKU图片
+                    // 所有SKU共享商品级别的重量和尺寸
+                    weight: weightInGrams,
+                    size: sizeJson,
+                    // 销售属性和规格描述设为null（简化SKU，不需要这些字段）
+                    salesAttrs: null,
+                    specification: null,
+                    status: sku.status
+                  })
+                }
+              }
+            })
+          }
+          
+          // 如果没有地区价格，至少创建一个默认SKU
+          if (skuRecords.length === 0) {
+            skuRecords.push({
+              sku: sku.sku,
+              price: 0,
+              currency: form.salesRegions && form.salesRegions.length > 0 
+                ? regionCurrencyMap[form.salesRegions[0]].currency 
+                : 'USD',
+              stock: sku.stock,
+              skuImage: sku.skuImage || null, // SKU图片
+              weight: weightInGrams,
+              size: sizeJson,
+              salesAttrs: null,
+              specification: null,
+              status: sku.status
+            })
+          }
+          
+          return skuRecords
+        })
+      }
+
+      const response = await request.post('/product', requestData)
+
+      if (response.code === '0000') {
+        ElMessage.success('商品创建成功')
+        router.push('/manage/product')
+      } else {
+        ElMessage.error(response.message || '商品创建失败')
+      }
+    } catch (error) {
+      console.error('创建商品失败:', error)
+      ElMessage.error(error.response?.data?.message || '商品创建失败，请稍后重试')
+    } finally {
+      submitting.value = false
+    }
+  })
+}
+
+// 重置表单
+const resetForm = () => {
+  if (formRef.value) {
+    formRef.value.resetFields()
+  }
+  form.name = ''
+  form.price = null
+  form.mainImage = ''
+  form.mainImages = []
+  form.status = 'ACTIVE'
+  form.shopId = null
+  form.salesRegions = []
+  // 重置物流信息
+  form.weightValue = null
+  form.weightUnit = 'g'
+  form.sizeLength = null
+  form.sizeWidth = null
+  form.sizeHeight = null
+  form.sizeUnit = 'cm'
+  form.skus = [
+    {
+      sku: '', // SKU描述
+      regionPrices: {}, // 按地区存储价格
+      stock: 0,
+      skuImage: '', // SKU图片
+      status: 'ACTIVE'
+    }
+  ]
+  
+  // 为SKU初始化regionPrices
+  if (form.salesRegions && form.salesRegions.length > 0) {
+    form.skus[0].regionPrices = {}
+    form.salesRegions.forEach(regionCode => {
+      form.skus[0].regionPrices[regionCode] = null
+    })
+  }
+  
+  mainImageFileList.value = []
+  
+  // 重置批量操作状态
+  batchStock.value = null
+  batchRegionPrices.value = {}
+  showBatchEdit.value = false
+}
+
+// 返回
+const goBack = () => {
+  router.push('/manage/product')
+}
+</script>
+
+<style scoped>
+.product-create {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+/* 图片上传 */
+.image-upload-section {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.upload-tip {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 10px;
+}
+
+.form-tip {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 5px;
+  line-height: 1.5;
+}
+
+/* 多图片上传样式 */
+.image-uploader-multiple {
+  width: 100%;
+}
+
+.image-uploader-multiple :deep(.el-upload-list--picture-card) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.image-uploader-multiple :deep(.el-upload--picture-card) {
+  width: 120px;
+  height: 120px;
+  line-height: 120px;
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+}
+
+.uploader-icon-multiple {
+  font-size: 28px;
+  color: #8c939d;
+}
+
+/* 图片预览列表 */
+.image-preview-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.image-preview-item {
+  position: relative;
+  width: 120px;
+  height: 120px;
+  border: 1px solid #e4e7ed;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.preview-image {
+  width: 100%;
+  height: 100%;
+}
+
+.image-actions {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.image-preview-item:hover .image-actions {
+  opacity: 1;
+}
+
+/* 批量操作区域 */
+.batch-operation-card {
+  background: linear-gradient(135deg, #f0f9ff 0%, #e6f4ff 100%);
+  border: 1px solid #b3d8ff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
+}
+
+/* SKU列表头部 */
+.sku-list-header {
+  margin-bottom: 15px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.batch-edit-toggle-btn {
+  font-weight: 500;
+}
+
+.batch-operation-content {
+  padding: 20px;
+}
+
+.batch-regions-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 15px;
+  margin-bottom: 20px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #d4e8ff;
+}
+
+.batch-region-item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.region-label-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.region-code-badge {
+  display: inline-block;
+  padding: 4px 10px;
+  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+  color: #fff;
+  border-radius: 4px;
+  font-weight: 600;
+  font-size: 14px;
+  min-width: 40px;
+  text-align: center;
+  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
+}
+
+.region-name-text {
+  font-size: 13px;
+  color: #606266;
+  font-weight: 500;
+}
+
+.batch-actions-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 15px;
+}
+
+.batch-stock-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.batch-label {
+  font-size: 14px;
+  color: #606266;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.batch-apply-btn {
+  padding: 10px 24px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+/* SKU新增模块样式 */
+.sku-add-module-card {
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+}
+
+.sku-module-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.module-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.sku-config-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.sku-config-item {
+  display: flex;
+  gap: 15px;
+  padding: 20px;
+  background: #fafafa;
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+  transition: all 0.3s;
+}
+
+.sku-config-item:hover {
+  border-color: #409eff;
+  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
+}
+
+.sku-config-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.sku-description-section {
+  width: 100%;
+}
+
+.sku-description-input {
+  width: 100%;
+}
+
+.sku-images-section {
+  width: 100%;
+}
+
+.section-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: #606266;
+  margin-bottom: 10px;
+}
+
+.sku-image-wrapper {
+  display: flex;
+  gap: 12px;
+}
+
+.sku-image-item {
+  position: relative;
+  width: 120px;
+  height: 120px;
+  border: 1px solid #e4e7ed;
+  border-radius: 6px;
+  overflow: hidden;
+  transition: all 0.3s;
+}
+
+.sku-image-item:hover {
+  border-color: #409eff;
+  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
+}
+
+.sku-preview-image {
+  width: 100%;
+  height: 100%;
+}
+
+.image-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: #f5f7fa;
+  color: #909399;
+}
+
+.sku-image-item .image-actions {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.sku-image-item:hover .image-actions {
+  opacity: 1;
+}
+
+.sku-upload-item {
+  width: 120px;
+  height: 120px;
+}
+
+.sku-image-uploader {
+  width: 100%;
+  height: 100%;
+}
+
+.sku-image-uploader :deep(.el-upload) {
+  width: 100%;
+  height: 100%;
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s;
+}
+
+.sku-image-uploader :deep(.el-upload:hover) {
+  border-color: #409eff;
+}
+
+.upload-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: #fafafa;
+  color: #8c939d;
+}
+
+.upload-icon {
+  font-size: 28px;
+  margin-bottom: 8px;
+}
+
+.upload-text {
+  font-size: 12px;
+  margin-bottom: 4px;
+}
+
+
+.sku-actions {
+  display: flex;
+  align-items: flex-start;
+  padding-top: 5px;
+}
+
+.add-sku-button-wrapper {
+  display: flex;
+  justify-content: center;
+  padding-top: 10px;
+  border-top: 1px solid #e4e7ed;
+}
+
+.add-sku-btn {
+  font-weight: 500;
+}
+
+/* SKU表格样式 */
+.sku-table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: visible;
+  position: relative;
+}
+
+.sku-table-container {
+  margin-top: 10px;
+  min-width: 100%;
+}
+
+.sku-table {
+  width: 100%;
+  min-width: 800px;
+  table-layout: auto;
+}
+
+.sku-table :deep(.el-table__cell) {
+  padding: 10px;
+}
+
+.sku-table :deep(.el-textarea__inner) {
+  border: none;
+  padding: 0;
+  resize: none;
+}
+
+/* 横向滚动条样式优化 */
+.sku-table-wrapper::-webkit-scrollbar {
+  height: 8px;
+}
+
+.sku-table-wrapper::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+.sku-table-wrapper::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+
+.sku-table-wrapper::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+</style>
+