1

src/views/system/giftcoupon/batch.vue

@@ -10,38 +10,113 @@
       <!-- 商品信息配置区域 -->
       <el-form :model="form" :rules="rules" ref="form" label-width="120px" style="margin-bottom: 20px;">
         <el-row :gutter="20">
-          <el-col :span="12">
+          <el-col :span="24">
             <el-form-item label="商品链接/SKU" prop="materialUrl">
-              <el-input 
-                v-model="form.materialUrl" 
-                placeholder="请输入商品链接或SKU ID，必须先点击查询按钮获取商品信息"
-                @keyup.enter.native="queryProductInfo"
-              >
-                <el-button slot="append" icon="el-icon-search" @click="queryProductInfo" :loading="queryLoading">查询</el-button>
-              </el-input>
+              <el-input
+                type="textarea"
+                :rows="3"
+                v-model="form.materialUrl"
+                placeholder="请输入商品链接或SKU ID（每行一个，支持多个），点击查询按钮获取商品信息"
+              />
+              <div style="margin-top: 10px; text-align: right;">
+                <el-button type="primary" icon="el-icon-search" @click="queryProductInfo" :loading="queryLoading">查询商品</el-button>
+              </div>
               <div style="color: #E6A23C; font-size: 12px; margin-top: 5px;">
                 <i class="el-icon-warning"></i> 
-                <strong>重要：</strong>请先点击"查询"按钮获取商品信息（特别是SKU ID），然后再创建礼金。
+                <strong>重要：</strong>请输入商品链接或SKU ID，支持多行输入多个商品，点击查询后会显示商品列表供选择。
               </div>
             </el-form-item>
           </el-col>
-          <el-col :span="12">
-            <el-form-item label="商品名称">
-              <el-input v-model="form.skuName" placeholder="查询商品信息后自动填充" :disabled="true" />
-            </el-form-item>
-          </el-col>
         </el-row>
+
+        <!-- 商品列表展示 -->
+        <el-card v-if="productList.length > 0" shadow="never" style="margin-bottom: 20px;">
+          <div slot="header">
+            <span style="font-weight: bold;">查询结果（共 {{ productList.length }} 个商品）</span>
+            <span style="color: #909399; font-size: 12px; margin-left: 10px;">请选择一个商品用于批量创建礼金</span>
+          </div>
+          <el-table 
+            :data="productList" 
+            border 
+            highlight-current-row
+            @current-change="handleProductSelect"
+            style="width: 100%"
+          >
+            <el-table-column type="index" label="序号" width="60" />
+            <el-table-column label="商品名称" prop="skuName" min-width="300" show-overflow-tooltip>
+              <template slot-scope="scope">
+                <div>
+                  <div style="font-weight: bold; margin-bottom: 5px;">{{ scope.row.skuName || scope.row.title || scope.row.productName || scope.row.cleanSkuName || '-' }}</div>
+                  <div v-if="scope.row.cleanSkuName && scope.row.cleanSkuName !== scope.row.skuName" style="color: #909399; font-size: 12px;">
+                    清理后名称：{{ scope.row.cleanSkuName }}
+                  </div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="商品类型" width="100">
+              <template slot-scope="scope">
+                <el-tag :type="(scope.row.owner === 'g' || (!scope.row.popId && scope.row.owner !== 'pop')) ? 'success' : 'warning'">
+                  {{ (scope.row.owner === 'g' || (!scope.row.popId && scope.row.owner !== 'pop')) ? '自营' : 'POP' }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="SKU ID" prop="skuId" width="150" show-overflow-tooltip>
+              <template slot-scope="scope">
+                {{ scope.row.skuId || scope.row.skuid || '-' }}
+              </template>
+            </el-table-column>
+            <el-table-column label="价格" width="120">
+              <template slot-scope="scope">
+                <span v-if="scope.row.price">¥{{ formatPrice(scope.row.price) }}</span>
+                <span v-else style="color: #909399;">-</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="佣金" width="100">
+              <template slot-scope="scope">
+                <span v-if="scope.row.commission">{{ scope.row.commission }}%</span>
+                <span v-else style="color: #909399;">-</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="100">
+              <template slot-scope="scope">
+                <el-button 
+                  type="primary" 
+                  size="mini" 
+                  @click="selectProduct(scope.row)"
+                  :disabled="form.selectedProduct && form.selectedProduct === scope.row"
+                >
+                  {{ form.selectedProduct && form.selectedProduct === scope.row ? '已选中' : '选择' }}
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+
+        <!-- 已选商品信息展示 -->
+        <el-card v-if="form.selectedProduct" shadow="never" style="margin-bottom: 20px;">
+          <div slot="header">
+            <span style="font-weight: bold;">已选商品信息</span>
+          </div>
+          <el-descriptions :column="3" border>
+            <el-descriptions-item label="商品名称" :span="3">
+              {{ form.skuName }}
+            </el-descriptions-item>
+            <el-descriptions-item label="商品类型">
+              <el-tag :type="form.owner === 'g' ? 'success' : 'warning'">
+                {{ form.owner === 'g' ? '自营' : 'POP' }}
+              </el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item label="SKU ID">
+              {{ form.selectedProduct.skuId || form.selectedProduct.skuid || '-' }}
+            </el-descriptions-item>
+            <el-descriptions-item label="商品价格">
+              <span v-if="form.selectedProduct.price">¥{{ formatPrice(form.selectedProduct.price) }}</span>
+              <span v-else>-</span>
+            </el-descriptions-item>
+          </el-descriptions>
+        </el-card>
+
         <el-row :gutter="20">
-          <el-col :span="8">
-            <el-form-item label="商品类型">
-              <el-input :value="form.owner === 'g' ? '自营' : (form.owner === 'pop' ? 'POP' : '未查询')" disabled>
-                <template slot="prepend">
-                  <i :class="form.owner === 'g' ? 'el-icon-success' : (form.owner === 'pop' ? 'el-icon-warning' : 'el-icon-question')" 
-                     :style="{color: form.owner === 'g' ? '#67C23A' : (form.owner === 'pop' ? '#409EFF' : '#909399')}"></i>
-                </template>
-              </el-input>
-            </el-form-item>
-          </el-col>
           <el-col :span="8">
             <el-form-item label="礼金金额(元)" prop="amount">
               <el-input-number v-model="form.amount" :min="1" :max="50" :precision="2" :step="0.01" style="width: 100%" />
@@ -91,7 +166,7 @@
         </div>
         <div style="text-align: right;">
           <span style="color: #909399; margin-right: 10px;">已识别URL数量: <strong style="color: #409EFF;">{{ detectedUrls.length }}</strong></span>
-          <el-button type="primary" @click="handleReplace" :loading="processing" :disabled="detectedUrls.length === 0 || !form.queryResult">
+          <el-button type="primary" @click="handleReplace" :loading="processing" :disabled="detectedUrls.length === 0 || !form.selectedProduct">
             <i class="el-icon-magic-stick"></i> 批量创建并替换
           </el-button>
         </div>
@@ -204,10 +279,12 @@ export default {
         materialUrl: '',
         skuName: '',
         owner: 'g',
-        amount: 1.8,  // 默认1元
-        quantity: 12,  // 默认每个礼金数量为1
-        queryResult: null  // 保存查询到的商品信息
+        amount: 1.8,  // 默认1.8元
+        quantity: 12,  // 默认每个礼金数量为12
+        queryResult: null,  // 保存查询到的商品信息
+        selectedProduct: null  // 用户选中的商品
       },
+      productList: [],  // 查询到的商品列表
       rules: {
         materialUrl: [{ required: true, message: '请输入商品链接或SKU', trigger: 'blur' }],
         amount: [{ required: true, message: '请输入礼金金额', trigger: 'blur' }],
@@ -238,11 +315,14 @@ export default {
       }
       
       this.queryLoading = true
+      this.productList = []
+      this.form.selectedProduct = null
+      this.form.queryResult = null
+      
       try {
         const res = await generatePromotionContent({ promotionContent: materialUrl })
         
         if (res && res.code === 200) {
-          let productInfo = null
           try {
             let resultStr = res.data || res.msg
             let parsed = null
@@ -252,41 +332,85 @@ export default {
               parsed = resultStr
             }
             
+            console.log('解析后的数据：', parsed)
+            
+            // 解析商品数组
+            let products = []
             if (Array.isArray(parsed) && parsed.length > 0) {
-              productInfo = parsed[0]
+              // 格式1：直接是数组
+              products = parsed
             } else if (parsed && typeof parsed === 'object') {
+              // 格式2：对象中包含list数组
               if (parsed.list && Array.isArray(parsed.list) && parsed.list.length > 0) {
-                productInfo = parsed.list[0]
-              } else if (parsed.data && Array.isArray(parsed.data) && parsed.data.length > 0) {
-                productInfo = parsed.data[0]
-              } else if (parsed.materialUrl || parsed.owner || parsed.skuName) {
-                productInfo = parsed
+                products = parsed.list
+              } 
+              // 格式3：对象中包含data数组
+              else if (parsed.data && Array.isArray(parsed.data) && parsed.data.length > 0) {
+                products = parsed.data
+              }
+              // 格式4：对象本身包含商品信息（单个商品）
+              else if (parsed.materialUrl || parsed.owner || parsed.skuName) {
+                products = [parsed]
               }
             }
             
-            if (productInfo) {
-              this.form.queryResult = productInfo
-              this.form.skuName = productInfo.skuName || productInfo.title || productInfo.productName || productInfo.cleanSkuName || ''
-              const ownerValue = productInfo.owner || (productInfo.popId ? 'pop' : 'g') || 'g'
-              this.form.owner = ownerValue === 'p' ? 'pop' : (ownerValue === 'pop' ? 'pop' : 'g')
+            console.log('解析到的商品列表：', products)
+            
+            if (products.length > 0) {
+              this.productList = products
               
-              this.$modal.msgSuccess('商品信息查询成功：' + (this.form.owner === 'g' ? '自营' : 'POP'))
+              // 如果只有一个商品，自动选中
+              if (products.length === 1) {
+                this.selectProduct(products[0])
+              }
+              
+              this.$modal.msgSuccess(`查询成功，找到 ${products.length} 个商品，请选择一个用于创建礼金`)
             } else {
               this.$modal.msgWarning('未找到商品信息，请检查链接是否正确')
             }
           } catch (e) {
+            console.error('解析商品信息失败', e)
             this.$modal.msgWarning('返回数据格式异常：' + e.message)
           }
         } else {
           this.$modal.msgError('查询商品信息失败：' + (res.msg || '未知错误'))
         }
       } catch (e) {
+        console.error('查询商品信息异常', e)
         this.$modal.msgError('查询失败：' + (e.message || '未知错误'))
       } finally {
         this.queryLoading = false
       }
     },
     
+    /** 选择商品 */
+    selectProduct(product) {
+      this.form.selectedProduct = product
+      this.form.queryResult = product
+      this.form.skuName = product.skuName || product.title || product.productName || product.cleanSkuName || ''
+      const ownerValue = product.owner || (product.popId ? 'pop' : 'g') || 'g'
+      this.form.owner = ownerValue === 'p' ? 'pop' : (ownerValue === 'pop' ? 'pop' : 'g')
+      
+      this.$modal.msgSuccess('已选择商品：' + this.form.skuName + '（' + (this.form.owner === 'g' ? '自营' : 'POP') + '）')
+    },
+    
+    /** 表格行选择变化 */
+    handleProductSelect(currentRow) {
+      if (currentRow) {
+        this.selectProduct(currentRow)
+      }
+    },
+    
+    /** 格式化价格 */
+    formatPrice(price) {
+      if (!price) return '0.00'
+      // 如果价格是分为单位，转换为元
+      if (typeof price === 'number' && price > 1000) {
+        return (price / 100).toFixed(2)
+      }
+      return Number(price).toFixed(2)
+    },
+    
     /** 检测文本中的URL */
     detectUrls(text) {
       if (!text || text.trim().length === 0) {
@@ -317,8 +441,8 @@ export default {
       this.$refs.form.validate(async (valid) => {
         if (!valid) return
         
-        if (!this.form.queryResult) {
-          this.$modal.msgWarning('请先查询商品信息')
+        if (!this.form.selectedProduct || !this.form.queryResult) {
+          this.$modal.msgWarning('请先查询商品信息并选择一个商品')
           return
         }