feat(Photography): 重构详情页生成功能

- 新增服务内容多选功能，支持场景图、模特图和详情页生成- 优化主图LOGO和详情模板选择布局
- 添加国内电商平台多选功能
- 实现服务内容切换和一键上架逻辑
- 更新页面样式，调整组件布局和样式

frontend/src/views/Photography/detail.vue

@@ -4,31 +4,61 @@
 
   <div class="detail-container">
     <div>
-      <!-- 处理模式 -->
-      <div class="logo-section flex left top" >
-        <div class="section-title" style="margin-bottom: 0px;">
+      <!-- 顶部：勾选服务内容（多选） -->
+      <div class="service-section flex between top">
+        <div class="section-title">
           <img src="@/assets/images/Photography/zhuangshi.png" style="width: 32px; height: 32px;" />
-          处理模式：
-
-            <el-checkbox v-model="form.is_only_cutout"
-                         true-value="1"
-                         false-value="0"
-                         true-label="1"
-                         false-label="0"
-                         label="仅抠图模式"/>
-        <span class="flex left" style="font-weight: normal; font-size: 12px; color: #666">
-          <el-icon><QuestionFilled /></el-icon>
-          如您勾选仅抠图模式，将只做抠图处理，不再自动生成详情页。
-        </span>
+          勾选服务内容（多选）：
+        </div>
+        <div class="service-cards">
+          <div class="service-card" :class="{ active: form.services.includes('scene') }" @click="toggleService('scene')" v-log="{ describe: { action: '点击服务卡片', service: '场景图生成' } }">
+            <div class="service-checkbox" @click.stop>
+              <el-checkbox size="large" :model-value="form.services.includes('scene')" @change="toggleService('scene')" />
+            </div>
+            <div class="service-content">
+              <div class="service-image">
+                <img src="@/assets/images/Photography/cj.png" alt="场景图生成" />
+                <div class="service-icon">
+                  <el-icon><EditPen /></el-icon>
+                </div>
+              </div>
+              <div class="service-name">场景图生成</div>
+            </div>
+          </div>
+          <div class="service-card" :class="{ active: form.services.includes('model') }" @click="toggleService('model')" v-log="{ describe: { action: '点击服务卡片', service: '模特图生成' } }">
+            <div class="service-checkbox" @click.stop>
+              <el-checkbox size="large" :model-value="form.services.includes('model')" @change="toggleService('model')" />
+            </div>
+            <div class="service-content">
+              <div class="service-image">
+                <img src="@/assets/images/Photography/mt.png" alt="模特图生成" />
+                <div class="service-icon">
+                  <el-icon><EditPen /></el-icon>
+                </div>
+              </div>
+              <div class="service-name">模特图生成</div>
+            </div>
+          </div>
+          <div class="service-card" :class="{ active: form.services.includes('detail') }" @click="toggleService('detail')" v-log="{ describe: { action: '点击服务卡片', service: '详情页生成' } }">
+            <div class="service-checkbox" @click.stop>
+              <el-checkbox size="large" :model-value="form.services.includes('detail')" @change="toggleService('detail')" />
+            </div>
+            <div class="service-content">
+              <div class="service-image">
+                <img src="@/assets/images/Photography/xq.png" alt="详情页生成" />
+              </div>
+              <div class="service-name">详情页生成</div>
+            </div>
+          </div>
         </div>
       </div>
 
-      <template v-if="form.is_only_cutout == 0">
       <!-- 主图LOGO部分 -->
+<!--
       <div class="logo-section flex left top" >
         <div class="section-title" style="margin-bottom: 0px;">
           <img src="@/assets/images/Photography/zhuangshi.png" style="width: 32px; height: 32px;" />
-          主图LOGO：
+          主图LOGO 与 选择详情模板：
         </div>
       </div>
       <div class="logo-section flex left top multi-line">
@@ -43,6 +73,7 @@
         ></upload>
         <upload @input="onInput"></upload>
       </div>
+-->
 
       <el-divider />
 <!--      &lt;!&ndash; 图片抠图与货号图生成 &ndash;&gt;
@@ -89,40 +120,85 @@
       </div>
       <el-divider />-->
 
-      <!-- 选择详情模板部分 -->
-      <div class="template-section ">
-        <div class="flex between">
-          <div class="section-title">
-            <img src="@/assets/images/Photography/zhuangshi.png" style="width: 32px; height: 32px;" />
-            选择详情模版
+      <!-- 主图LOGO 与 选择详情模板：左右布局 -->
+      <div class="logo-template-row">
+        <!-- 左：主图LOGO -->
+        <div class="logo-col">
+          <div class="logo-section flex left top" >
+            <div class="section-title" style="margin-bottom: 0px;">
+              <img src="@/assets/images/Photography/zhuangshi.png" style="width: 32px; height: 32px;" />
+              主图LOGO：
+            </div>
           </div>
-          <div class="template-pagination">
-            <el-pagination background layout="prev, pager, next" v-model:current-page="queryParams.current"
-              v-model:page-size.sync="queryParams.size" :total="totalPage" @current-change="onCurrentChange"
-              @size-change="onSizeChange" />
+          <div class="logo-section flex left top multi-line">
+            <upload v-for="item,index in logoList"   :value="item" :key="item"
+                    v-show="item"
+                    @input="onRemove(index)"
+                    class="mar-right-10 upload-item"
+                    :class="{
+                        active: item === form.logo_path
+                    }"
+                    @click.native="form.logo_path = item"
+            ></upload>
+            <upload @input="onInput"></upload>
           </div>
         </div>
 
-        <div class="template-list">
-          <div v-for="(template, index) in visibleTemplates" :key="index" class="template-item"
-            @click="form.selectTemplate = template" v-log="{ describe: { action: '点击选择详情模板', template_name: template.template_name } }">
-            <el-image :src="template.template_cover_image" fit="contain" class="cur-p"
-              style="width: 100%; display: block;" />
-            <div class="select-warp" :class="form.selectTemplate.id == template.id ? 'active' : ''">
-              <el-icon color="#FFFFFF">
-                <Select />
-              </el-icon>
+        <!-- 右：选择详情模板 -->
+        <div class="template-col">
+          <div class="template-section ">
+            <div class="flex between">
+              <div class="section-title">
+                <img src="@/assets/images/Photography/zhuangshi.png" style="width: 32px; height: 32px;" />
+                选择详情模版
+              </div>
+              <div class="template-pagination">
+                <el-pagination background layout="prev, pager, next" v-model:current-page="queryParams.current"
+                  v-model:page-size.sync="queryParams.size" :total="totalPage" @current-change="onCurrentChange"
+                  @size-change="onSizeChange" />
+              </div>
             </div>
-            <div class="template-info">
-              <span class="mar-left-10 chaochu_1">{{ template.template_name }}</span>
-              <div class="template-view" @click="viewTemplate(template)" v-log="{ describe: { action: '点击查看模板详情', template_name: template.template_name } }">查看</div>
+
+            <div class="template-list">
+              <div v-for="(template, index) in visibleTemplates" :key="index" class="template-item"
+                @click="form.selectTemplate = template" v-log="{ describe: { action: '点击选择详情模板', template_name: template.template_name } }">
+                <el-image :src="template.template_cover_image" fit="contain" class="cur-p"
+                  style="width: 100%; display: block;" />
+                <div class="select-warp" :class="form.selectTemplate.id == template.id ? 'active' : ''">
+                  <el-icon color="#FFFFFF">
+                    <Select />
+                  </el-icon>
+                </div>
+                <div class="template-info">
+                  <span class="mar-left-10 chaochu_1">{{ template.template_name }}</span>
+                  <div class="template-view" @click="viewTemplate(template)" v-log="{ describe: { action: '点击查看模板详情', template_name: template.template_name } }">查看</div>
+                </div>
+              </div>
+            </div>
+
+            <div class="template-tips c-333 fs-14 line-20 te-l mar-top-20 flex left">
+              <el-icon><WarningFilled /></el-icon>
+              <span class="mar-left-10">该模版图片顺序说明：{{form.selectTemplate.template_image_order}}</span>
             </div>
-          </div>
-        </div>
 
-        <div class="template-tips c-333 fs-14 line-20 te-l mar-top-20 flex left">
-          <el-icon><WarningFilled /></el-icon>
-          <span class="mar-left-10">该模版图片顺序说明：{{form.selectTemplate.template_image_order}}</span>
+            <!-- 模板下：一键上架 和 国内电商平台（多选） -->
+            <div class="publish-section flex left" v-if="onlineStores.length">
+              <div class="form-item flex left">
+                <div class="fw-b">一键上架：</div>
+               </div>
+              <div class="form-item flex left mar-top-10">
+                <div class="label">国内电商平台：</div>
+                <el-select  v-model="domesticPlatforms" multiple placeholder="请选择平台" style="min-width: 200px;">
+                  <el-option
+                    v-for="store in onlineStores"
+                    :key="store"
+                    :label="store"
+                    :value="store"
+                  />
+                </el-select>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
       <el-divider />
@@ -193,7 +269,6 @@
           </div>
         </div>
       </div>
-      </template>
     </div>
     <!-- 底部按钮 -->
     <div class="footer">
@@ -234,7 +309,7 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 
 import headerBar from '@/components/header-bar/index.vue'
 import { ref, computed, reactive, onMounted } from 'vue';
-import { Select } from '@element-plus/icons-vue'
+import { Select, EditPen } from '@element-plus/icons-vue'
 import upload from '@/components/upload'
 import client from "@/stores/modules/client";
 import icpList from '@/utils/ipc'
@@ -302,7 +377,7 @@ const form = reactive({
   dataType: '1', // 1: 选择excel文件 2: 系统对接
   logo_path: '', // 主图LOGO
   excel_path: '', // 商品基础资料EXCEL文件选择
-  is_only_cutout:0, //是否仅抠图模式
+  services: ['detail'], // 勾选服务内容（多选）默认包含详情页生成
 })
 onMounted(() => {
   // 页面访问埋点
@@ -331,6 +406,7 @@ const viewTemplate = (template) => {
 const getCompanyTemplates = async () => {
   const { data } = await getCompanyTemplatesApi()
   templates.value = data.list
+  onlineStores.value = data.online_stores || [] // 获取电商平台列表
   // 默认选中第一个模板
   if (templates.value.length > 0) {
     form.selectTemplate = templates.value[0]
@@ -350,6 +426,24 @@ const downloadExcel =  () => {
     document.body.removeChild(a);
   }, 1000);
 }
+// 服务内容切换
+const toggleService = (key: string) => {
+  const idx = form.services.indexOf(key)
+  if (idx > -1) form.services.splice(idx, 1)
+  else form.services.push(key)
+}
+
+// 国内电商平台多选与一键上架
+const domesticPlatforms = ref<string[]>([])
+const onlineStores = ref<any[]>([]) // 从接口获取的电商平台列表
+const publishToPlatforms = () => {
+  if (!domesticPlatforms.value.length) {
+    ElMessage.warning('请选择至少一个电商平台')
+    return
+  }
+  clickLog({ describe: { action: '点击一键上架', platforms: domesticPlatforms.value } }, route)
+  // 具体上架逻辑按后续接口对接
+}
 
 
 
@@ -368,7 +462,7 @@ const generate = async function () {
   clickLog({
     describe: {
       action: '点击开始生成详情页',
-      is_only_cutout: form.is_only_cutout,
+      services: form.services,
       dataType: form.dataType,
       template_name: form.selectTemplate.template_name,
       goods_count: goods_art_nos.value.length,
@@ -376,12 +470,9 @@ const generate = async function () {
     }
   }, route);
 
-  if(form.is_only_cutout == 0 ){
-
-    if ( form.dataType == '1'  && !form.excel_path) {
-      ElMessage.error('请上传商品基础资料')
-      return
-    }
+  if ( form.dataType == '1'  && !form.excel_path) {
+    ElMessage.error('请上传商品基础资料')
+    return
   }
   const tokenInfoStore = tokenInfo();
   const token = tokenInfoStore.getToken; // 使用 getToken() 获取 token
@@ -394,12 +485,13 @@ const generate = async function () {
   })
   const params = {
     goods_art_no: JSON.parse(JSON.stringify(goods_art_nos.value)),
-    is_only_cutout: form.is_only_cutout || '0',
+    services: form.services,
     logo_path: form.logo_path || '',
     temp_name: form.selectTemplate.template_id || '',
     excel_path: form.dataType == '1' ? form.excel_path : '',
     template_image_order: form.selectTemplate.template_image_order,
     temp_list,
+    online_stores: domesticPlatforms.value, // 追加电商平台参数
     token,
     uuid: uuidStore.getUuid || ''
   }
@@ -652,12 +744,119 @@ const selectFolder = () => {
 
 }
 
+.service-section {
+  margin-bottom: 20px;
+  .service-cards {
+    display: flex;
+    gap: 60px;
+    margin-top: 16px;
+  }
+  .service-card {
+    width: 240px;
+    height: 140px;
+
+    border-radius: 8px;
+    background: #fff;
+    border: 1px solid #e0e0e0;
+    display: flex;
+    align-items: flex-start;
+    padding: 12px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    position: relative;
+
+    &:hover {
+      border-color: #2957FF;
+      box-shadow: 0 2px 8px rgba(41, 87, 255, 0.1);
+    }
+
+    &.active {
+      border: 3px solid #2957FF;
+      background: #f8f9ff;
+      box-shadow: 0 4px 12px rgba(41, 87, 255, 0.25);
+    }
+
+          .service-checkbox {
+        position: absolute;
+        left: -40px;
+        top: 10px;
+        width: 30px;
+        transform: scale(1.5);
+        z-index: 10;
+        ::v-deep{
+          .el-checkbox {
+            display: block;
+            margin-right: 0;
+          }
+          .el-checkbox__input {
+            cursor: pointer;
+          }
+        }
+      }
+
+    .service-content {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;;
+    }
+
+    .service-image {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: 4px;
+      }
+
+      .service-icon {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        width: 30px;
+        height: 30px;
+        background: #2957FF;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        font-size: 18px;
+      }
+    }
+
+    .service-name {
+      font-size: 14px;
+      color: #333;
+      font-weight: 500;
+      text-align: center;
+    }
+  }
+}
+
 .logo-section,
 .template-section,
 .data-prep-section {
   margin-bottom: 20px;
 }
 
+.logo-template-row {
+  display: flex;
+  gap: 24px;
+  align-items: flex-start;
+  .logo-col { flex: 1; min-width: 300px; }
+  .template-col { flex: 3; }
+}
+
 .logo-section {
   .upload-item {
     border: 2px solid rgba(0,0,0,0);
@@ -749,6 +948,13 @@ const selectFolder = () => {
   }
 }
 
+.publish-section {
+  .label {
+    min-width: 120px;
+    margin-right: 12px;
+  }
+}
+
 
 
 .excel-upload {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ZhiHuiYin",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "1、支持SmartShooter5软件控制相机",
   "main": "main.js",
   "scripts": {