1

src/views/system/giftcoupon/batch.vue

@@ -155,18 +155,20 @@
         <el-row :gutter="20">
           <el-col :span="24">
             <el-alert
-              type="info"
+              :type="detectedUrls.length > 0 ? 'success' : 'info'"
               :closable="false"
               style="margin-bottom: 10px;"
             >
               <template slot="title">
-                <span style="font-weight: bold;">批量创建说明：</span>
+                <span style="font-weight: bold; font-size: 16px;">
-                系统会自动解析文本中的京东商品URL，根据解析出的URL数量自动批量创建对应数量的礼金券并替换URL。
+                  <i :class="detectedUrls.length > 0 ? 'el-icon-success' : 'el-icon-info'"></i>
-                <span v-if="detectedUrls.length > 0" style="color: #409EFF; font-weight: bold;">
+                  批量创建说明：
-                  当前文本中已识别到 <strong style="font-size: 16px;">{{ detectedUrls.length }}</strong> 个URL，将创建 <strong style="font-size: 16px;">{{ detectedUrls.length }}</strong> 张礼金券。
                 </span>
-                <span v-else style="color: #909399;">
+                <span v-if="detectedUrls.length > 0" style="color: #67C23A; font-weight: bold; font-size: 18px;">
-                  请在下方文本框中输入包含京东商品链接的文本内容。
+                  ✅ 已识别到 <strong style="font-size: 22px; color: #E6A23C;">{{ detectedUrls.length }}</strong> 个URL，将批量创建 <strong style="font-size: 22px; color: #E6A23C;">{{ detectedUrls.length }}</strong> 张礼金券！
+                </span>
+                <span v-else style="color: #909399; font-size: 14px;">
+                  系统会自动解析文本中的京东商品URL，根据解析出的URL数量自动批量创建对应数量的礼金券并替换URL。请在下方文本框中输入包含京东商品链接的文本内容。
                 </span>
               </template>
             </el-alert>
@@ -175,23 +177,44 @@
       </el-form>
 
       <!-- 文本输入区域 -->
-      <el-divider content-position="left">文本内容</el-divider>
+      <el-divider content-position="left">
+        <span style="font-size: 16px; font-weight: bold;">
+          <i class="el-icon-edit"></i> 文本内容
+          <el-tag v-if="detectedUrls.length > 0" type="success" size="medium" style="margin-left: 10px;">
+            已检测到 {{ detectedUrls.length }} 个URL
+          </el-tag>
+        </span>
+      </el-divider>
       <el-form-item label="输入文本" style="margin-bottom: 10px;">
+        <div v-if="selectedProducts.length > 0" style="margin-bottom: 10px; padding: 10px; background: #f0f9ff; border: 1px solid #409EFF; border-radius: 4px;">
+          <i class="el-icon-success" style="color: #67C23A;"></i>
+          <span style="color: #409EFF; font-weight: bold;">已选择 {{ selectedProducts.length }} 个商品，现在请粘贴您的推广文案（包含京东链接）</span>
+        </div>
         <el-input
           type="textarea"
-          :rows="10"
+          :rows="12"
           v-model="content"
-          placeholder="请输入包含京东商品链接的文本内容，系统会自动识别URL并替换为包含礼金的推广链接"
+          placeholder="请将您的完整推广文案粘贴到这里（包含emoji、商品描述、京东链接等所有内容）&#10;&#10;示例：&#10;🔴【商品名称】活动时间～&#10;✅优惠券信息&#10;1️⃣商品1&#10;下单：https://u.jd.com/xxxxx&#10;👉优惠详情&#10;&#10;系统会自动识别所有京东链接并替换为包含礼金的推广链接"
           style="margin-bottom: 10px;"
+          @focus="handleTextareaFocus"
         />
-        <div style="color: #909399; font-size: 12px; margin-bottom: 10px;">
+        <div style="color: #E6A23C; font-size: 13px; margin-bottom: 10px; font-weight: bold;">
-          <i class="el-icon-info"></i> 
+          <i class="el-icon-warning"></i> 
-          系统会自动识别文本中的京东链接（包括 https://item.jd.com、u.jd.com 等格式），并批量创建对应数量的礼金券进行替换
+          直接粘贴完整文案即可！支持识别 https://item.jd.com、https://u.jd.com、u.jd.com 等所有京东链接格式
         </div>
-        <div style="text-align: right;">
+        <div style="text-align: right; padding: 10px; background: #f5f7fa; border-radius: 4px;">
-          <span style="color: #909399; margin-right: 10px;">已识别URL数量: <strong style="color: #409EFF;">{{ detectedUrls.length }}</strong></span>
+          <span style="font-size: 16px; font-weight: bold; margin-right: 20px;">
-          <el-button type="primary" @click="handleReplace" :loading="processing" :disabled="detectedUrls.length === 0 || selectedProducts.length === 0">
+            已识别URL数量: <strong style="color: #E6A23C; font-size: 20px;">{{ detectedUrls.length }}</strong>
-            <i class="el-icon-magic-stick"></i> 批量创建并替换
+          </span>
+          <el-button 
+            type="primary" 
+            size="medium"
+            @click="handleReplace" 
+            :loading="processing" 
+            :disabled="detectedUrls.length === 0 || selectedProducts.length === 0"
+            style="font-size: 16px; padding: 12px 24px;"
+          >
+            <i class="el-icon-magic-stick"></i> 批量创建并替换 ({{ detectedUrls.length }}个)
           </el-button>
         </div>
       </el-form-item>
@@ -387,9 +410,18 @@ export default {
               // 默认全选所有商品
               this.$nextTick(() => {
                 this.selectAllProducts()
+                // 如果只有一个商品，自动滚动到文本输入区域
+                if (products.length === 1) {
+                  setTimeout(() => {
+                    window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })
+                  }, 300)
+                }
               })
               
-              this.$modal.msgSuccess(`查询成功，找到 ${products.length} 个商品，已默认全选`)
+              this.$modal.msgSuccess({
+                message: `✅ 查询成功！找到 ${products.length} 个商品，已默认全选。现在请在下方"输入文本"框中粘贴您的推广文案。`,
+                duration: 5000
+              })
             } else {
               this.$modal.msgWarning('未找到商品信息，请检查链接是否正确')
             }
@@ -699,11 +731,18 @@ export default {
       }
     },
     
+    /** 文本框获得焦点 */
+    handleTextareaFocus() {
+      if (this.selectedProducts.length === 0) {
+        this.$modal.msgWarning('请先查询商品并选择要推广的商品')
+      }
+    },
+    
     /** 复制到剪贴板 */
     copyToClipboard(text) {
       if (navigator.clipboard && navigator.clipboard.writeText) {
         navigator.clipboard.writeText(text).then(() => {
-          this.$modal.msgSuccess('复制成功')
+          this.$modal.msgSuccess('✅ 复制成功！可以直接发送给用户了')
         }).catch(() => {
           this.fallbackCopyToClipboard(text)
         })