|
|
@@ -1,372 +1,399 @@
|
|
|
<template>
|
|
|
<BlueHeaderBar />
|
|
|
+ <div class="bg-F5F6F7 detail-page">
|
|
|
+ <div class="page—wrap max-w-full">
|
|
|
+ <!-- 服务标签页 -->
|
|
|
+ <div class="service-tabs">
|
|
|
+ <div
|
|
|
+ class="service-tab"
|
|
|
+ :class="{
|
|
|
+ 'active': form.services.includes('is_product_scene'),
|
|
|
+ 'disabled': false
|
|
|
+ }"
|
|
|
+ @click="toggleService('is_product_scene')"
|
|
|
+ v-log="{ describe: { action: '点击服务标签', service: '场景图生成' } }"
|
|
|
+ >
|
|
|
+ <el-checkbox
|
|
|
+ :model-value="form.services.includes('is_product_scene')"
|
|
|
+ @change="toggleService('is_product_scene')"
|
|
|
+ @click.stop
|
|
|
+ class="tab-checkbox"
|
|
|
+ />
|
|
|
+ <div class="tab-content">
|
|
|
+ <div class="tab-img flex">
|
|
|
+ <img src="@/assets/images/detail/cjt.svg" alt="场景图生成" class="tab-icon" />
|
|
|
+ </div>
|
|
|
+ <span class="tab-name">场景图生成</span>
|
|
|
+ </div>
|
|
|
+ <div class="tab-edit-btn" @click.stop="openScenePromptDialog" v-if="form.services.includes('is_product_scene')" v-log="{ describe: { action: '点击编辑场景图', service: '场景图生成-弹窗' } }">
|
|
|
+ <el-icon><EditPen /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 服务标签页 -->
|
|
|
- <div class="service-tabs">
|
|
|
- <div
|
|
|
- class="service-tab"
|
|
|
- :class="{
|
|
|
- 'active': form.services.includes('is_product_scene'),
|
|
|
- 'disabled': false
|
|
|
- }"
|
|
|
- @click="toggleService('is_product_scene')"
|
|
|
- v-log="{ describe: { action: '点击服务标签', service: '场景图生成' } }"
|
|
|
- >
|
|
|
- <el-checkbox
|
|
|
- :model-value="form.services.includes('is_product_scene')"
|
|
|
- @change="toggleService('is_product_scene')"
|
|
|
- @click.stop
|
|
|
- class="tab-checkbox"
|
|
|
- />
|
|
|
- <img src="@/assets/images/Photography/cj.png" alt="场景图生成" class="tab-icon" />
|
|
|
- <span class="tab-name">场景图生成</span>
|
|
|
- <div class="tab-edit-btn" @click.stop="openScenePromptDialog" v-if="form.services.includes('is_product_scene')" v-log="{ describe: { action: '点击编辑场景图', service: '场景图生成-弹窗' } }">
|
|
|
- <el-icon><EditPen /></el-icon>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div
|
|
|
- class="service-tab"
|
|
|
- :class="{
|
|
|
- 'active': form.services.includes('is_upper_footer'),
|
|
|
- 'disabled': false
|
|
|
- }"
|
|
|
- @click="toggleService('is_upper_footer')"
|
|
|
- v-log="{ describe: { action: '点击服务标签', service: '模特图生成' } }"
|
|
|
- >
|
|
|
- <el-checkbox
|
|
|
- :model-value="form.services.includes('is_upper_footer')"
|
|
|
- @change="toggleService('is_upper_footer')"
|
|
|
- @click.stop
|
|
|
- class="tab-checkbox"
|
|
|
- />
|
|
|
- <img src="@/assets/images/Photography/mt.png" alt="模特图生成" class="tab-icon" />
|
|
|
- <span class="tab-name">模特图生成</span>
|
|
|
- <div class="tab-edit-btn" @click.stop="openModelDialog" v-if="form.services.includes('is_upper_footer')" v-log="{ describe: { action: '点击编辑模特图', service: '模特图生成-弹窗' } }">
|
|
|
- <el-icon><EditPen /></el-icon>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div
|
|
|
- class="service-tab"
|
|
|
- :class="{
|
|
|
- 'active': form.services.includes('is_detail'),
|
|
|
- 'disabled': false
|
|
|
- }"
|
|
|
- @click="toggleService('is_detail')"
|
|
|
- v-log="{ describe: { action: '点击服务标签', service: '详情页生成' } }"
|
|
|
- >
|
|
|
- <el-checkbox
|
|
|
- :model-value="form.services.includes('is_detail')"
|
|
|
- @change="toggleService('is_detail')"
|
|
|
- @click.stop
|
|
|
- class="tab-checkbox"
|
|
|
- />
|
|
|
- <img src="@/assets/images/Photography/xq.png" alt="详情页生成" class="tab-icon" />
|
|
|
- <span class="tab-name">详情页生成</span>
|
|
|
- </div>
|
|
|
+ <div
|
|
|
+ class="service-tab"
|
|
|
+ :class="{
|
|
|
+ 'active': form.services.includes('is_upper_footer'),
|
|
|
+ 'disabled': false
|
|
|
+ }"
|
|
|
+ @click="toggleService('is_upper_footer')"
|
|
|
+ v-log="{ describe: { action: '点击服务标签', service: '模特图生成' } }"
|
|
|
+ >
|
|
|
+ <el-checkbox
|
|
|
+ :model-value="form.services.includes('is_upper_footer')"
|
|
|
+ @change="toggleService('is_upper_footer')"
|
|
|
+ @click.stop
|
|
|
+ class="tab-checkbox"
|
|
|
+ />
|
|
|
+ <div class="tab-content">
|
|
|
+ <div class="tab-img flex">
|
|
|
+ <img src="@/assets/images/detail/mtt.svg" alt="模特图生成" class="tab-icon" />
|
|
|
+ </div>
|
|
|
+ <span class="tab-name">模特图生成</span>
|
|
|
+ </div>
|
|
|
+ <div class="tab-edit-btn" @click.stop="openModelDialog" v-if="form.services.includes('is_upper_footer')" v-log="{ describe: { action: '点击编辑模特图', service: '模特图生成-弹窗' } }">
|
|
|
+ <el-icon><EditPen /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 未开发的功能 -->
|
|
|
- <div class="service-tab disabled" title="功能开发中">
|
|
|
- <img src="@/assets/images/Photography/zhuangshi.png" alt="详情页模板自定义" class="tab-icon" />
|
|
|
- <span class="tab-name">详情页模板自定义</span>
|
|
|
- </div>
|
|
|
+ <div
|
|
|
+ class="service-tab"
|
|
|
+ :class="{
|
|
|
+ 'active': form.services.includes('is_detail'),
|
|
|
+ 'disabled': false
|
|
|
+ }"
|
|
|
+ @click="toggleService('is_detail')"
|
|
|
+ v-log="{ describe: { action: '点击服务标签', service: '详情页生成' } }"
|
|
|
+ >
|
|
|
+ <el-checkbox
|
|
|
+ :model-value="form.services.includes('is_detail')"
|
|
|
+ @change="toggleService('is_detail')"
|
|
|
+ @click.stop
|
|
|
+ class="tab-checkbox"
|
|
|
+ />
|
|
|
+ <div class="tab-content">
|
|
|
+ <div class="tab-img flex">
|
|
|
+ <img src="@/assets/images/detail/xqy.svg" alt="详情页生成" class="tab-icon" />
|
|
|
+ </div>
|
|
|
+ <span class="tab-name">详情页生成</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="service-tab disabled" title="功能开发中">
|
|
|
- <img src="@/assets/images/Photography/zhuangshi.png" alt="白底图批量导出" class="tab-icon" />
|
|
|
- <span class="tab-name">白底图批量导出</span>
|
|
|
- </div>
|
|
|
+ <!-- 未开发的功能 -->
|
|
|
+ <div class="service-tab disabled" title="功能开发中">
|
|
|
|
|
|
- <div class="service-tab disabled" title="功能开发中">
|
|
|
- <img src="@/assets/images/Photography/zhuangshi.png" alt="产品图册生成" class="tab-icon" />
|
|
|
- <span class="tab-name">产品图册生成</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="tab-content">
|
|
|
+ <div class="tab-img flex">
|
|
|
+ <img src="@/assets/images/detail/xqmb.svg" alt="详情页模板自定义" class="tab-icon" />
|
|
|
+ </div>
|
|
|
+ <span class="tab-name">详情页模板自定义</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="detail-container">
|
|
|
- <div class="detail-content">
|
|
|
+ <div class="service-tab disabled" title="功能开发中">
|
|
|
+ <div class="tab-content">
|
|
|
+ <div class="tab-img flex">
|
|
|
+ <img src="@/assets/images/detail/bdt.svg" alt="白底图批量导出" class="tab-icon" />
|
|
|
+ </div>
|
|
|
+ <span class="tab-name">白底图批量导出</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 主图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 与 选择详情模板：
|
|
|
+ <div class="service-tab disabled" title="功能开发中">
|
|
|
+ <div class="tab-content">
|
|
|
+ <div class="tab-img flex">
|
|
|
+ <img src="@/assets/images/detail/cptc.svg" alt="产品图册生成" class="tab-icon" />
|
|
|
+ </div>
|
|
|
+ <span class="tab-name">产品图册生成</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <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>
|
|
|
--->
|
|
|
-
|
|
|
- <el-divider />
|
|
|
-<!-- <!– 图片抠图与货号图生成 –>
|
|
|
- <div class="section">
|
|
|
- <div class="section-title">
|
|
|
- <img src="@/assets/images/Photography/zhuangshi.png" style="width: 32px; height: 32px;" />
|
|
|
- 图片抠图与货号图生成
|
|
|
- </div>
|
|
|
- <div class="section-content">
|
|
|
- <div v-if="showTips" class="instruction-out flex top left">
|
|
|
- <img style="fill: #000" src="@/assets/images/xinxi.svg" />
|
|
|
- <ol class="instruction-list">
|
|
|
- <li>请在下方确认图片拍摄过程中的顺序，确保所有拍摄的图片的顺序一致。</li>
|
|
|
- <li>使用中英文语号分隔。</li>
|
|
|
- <li>图片的名称不能随意修改，否则无法正常生成详情页。</li>
|
|
|
- <li>现有图片名称有：俯视、侧视、后视、鞋底、内里</li>
|
|
|
- </ol>
|
|
|
- <el-icon @click="showTips = false" class="close-icon">
|
|
|
- <Close />
|
|
|
- </el-icon>
|
|
|
+
|
|
|
+ <div class="detail-container">
|
|
|
+ <div class="detail-content">
|
|
|
+
|
|
|
+ <!-- 主图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 与 选择详情模板：
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <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 class="form-item">
|
|
|
- <div class="label">货号文件夹：</div>
|
|
|
- <div class="folder-warp">
|
|
|
- <div class="folder-input">
|
|
|
- <el-input style="width: 60%;" v-model="folderPath" type="textarea" :rows="2" readonly
|
|
|
- placeholder="请选择货号文件夹" />
|
|
|
- <el-button class="check-button" type="primary" @click="selectFolder">
|
|
|
- <img src="@/assets/images/Photography/wenjian.png" style="width: 14px; " />
|
|
|
- 选择目标文件夹</el-button>
|
|
|
+ <!-- <!– 图片抠图与货号图生成 –>
|
|
|
+ <div class="section">
|
|
|
+ <div class="section-title">
|
|
|
+ <img src="@/assets/images/Photography/zhuangshi.png" style="width: 32px; height: 32px;" />
|
|
|
+ 图片抠图与货号图生成
|
|
|
+ </div>
|
|
|
+ <div class="section-content">
|
|
|
+ <div v-if="showTips" class="instruction-out flex top left">
|
|
|
+ <img style="fill: #000" src="@/assets/images/xinxi.svg" />
|
|
|
+ <ol class="instruction-list">
|
|
|
+ <li>请在下方确认图片拍摄过程中的顺序，确保所有拍摄的图片的顺序一致。</li>
|
|
|
+ <li>使用中英文语号分隔。</li>
|
|
|
+ <li>图片的名称不能随意修改，否则无法正常生成详情页。</li>
|
|
|
+ <li>现有图片名称有：俯视、侧视、后视、鞋底、内里</li>
|
|
|
+ </ol>
|
|
|
+ <el-icon @click="showTips = false" class="close-icon">
|
|
|
+ <Close />
|
|
|
+ </el-icon>
|
|
|
</div>
|
|
|
- <div class="hint">
|
|
|
- <el-icon>
|
|
|
- <Warning />
|
|
|
- </el-icon> <text>选择货号的上级文件夹</text>
|
|
|
+
|
|
|
+ <!– 货号文件夹 –>
|
|
|
+ <!– <div class="form-item">
|
|
|
+ <div class="label">货号文件夹：</div>
|
|
|
+ <div class="folder-warp">
|
|
|
+ <div class="folder-input">
|
|
|
+ <el-input style="width: 60%;" v-model="folderPath" type="textarea" :rows="2" readonly
|
|
|
+ placeholder="请选择货号文件夹" />
|
|
|
+ <el-button class="check-button" type="primary" @click="selectFolder">
|
|
|
+ <img src="@/assets/images/Photography/wenjian.png" style="width: 14px; " />
|
|
|
+ 选择目标文件夹</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="hint">
|
|
|
+ <el-icon>
|
|
|
+ <Warning />
|
|
|
+ </el-icon> <text>选择货号的上级文件夹</text>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ –>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
- –>
|
|
|
+ <el-divider />-->
|
|
|
+
|
|
|
+ <!-- 左右布局 -->
|
|
|
+ <div class="main-layout">
|
|
|
+ <!-- 左侧：选择详情模板 -->
|
|
|
+ <div class="left-panel">
|
|
|
+ <div :class="['template-section', { 'template-section--disabled': !isDetailServiceSelected }]">
|
|
|
+ <div class="section-header">
|
|
|
+ <div class="section-title">
|
|
|
+ 选择详情模版
|
|
|
+ </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>
|
|
|
- </div>
|
|
|
- <el-divider />-->
|
|
|
-
|
|
|
- <!-- 左右布局 -->
|
|
|
- <div class="main-layout">
|
|
|
- <!-- 左侧：选择详情模板 -->
|
|
|
- <div class="left-panel">
|
|
|
- <div :class="['template-section', { 'template-section--disabled': !isDetailServiceSelected }]">
|
|
|
- <div class="section-header">
|
|
|
- <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 class="template-list">
|
|
|
+ <div
|
|
|
+ v-for="(template, index) in visibleTemplates"
|
|
|
+ :key="index"
|
|
|
+ class="template-item"
|
|
|
+ @click="handleTemplateItemClick(template)"
|
|
|
+ v-log="{ describe: { action: '点击选择详情模板', template_name: template.template_name } }"
|
|
|
+ >
|
|
|
+ <el-image :src="template.template_preview_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.stop="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?.split(',').length || 5}}张标准视角的商品图:{{form.selectTemplate?.template_image_order || '俯视、侧视、后跟、鞋底、内里'}}。请确保图片清晰度高,背景干净。</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="template-list">
|
|
|
- <div
|
|
|
- v-for="(template, index) in visibleTemplates"
|
|
|
- :key="index"
|
|
|
- class="template-item"
|
|
|
- @click="handleTemplateItemClick(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>
|
|
|
+ <!-- 右侧：LOGO、详情资料准备、一键上架 -->
|
|
|
+ <div class="right-panel">
|
|
|
+ <!-- 主图LOGO -->
|
|
|
+ <div class="right-section">
|
|
|
+ <div class="section-title">
|
|
|
+ <img src="@/assets/images/Photography/zhuangshi.png" style="width: 32px; height: 32px;" />
|
|
|
+ 主图LOGO
|
|
|
</div>
|
|
|
- <div class="template-info">
|
|
|
- <span class="mar-left-10 chaochu_1">{{ template.template_name }}</span>
|
|
|
- <div class="template-view" @click.stop="viewTemplate(template)" v-log="{ describe: { action: '点击查看模板详情', template_name: template.template_name } }">查看</div>
|
|
|
+ <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="selectLogo(item)"
|
|
|
+ ></upload>
|
|
|
+ <upload @input="onInput"></upload>
|
|
|
</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?.split(',').length || 5}}张标准视角的商品图:{{form.selectTemplate?.template_image_order || '俯视、侧视、后跟、鞋底、内里'}}。请确保图片清晰度高,背景干净。</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <!-- 详情资料准备 -->
|
|
|
+ <div class="right-section">
|
|
|
+ <div class="section-title">
|
|
|
+ <img src="@/assets/images/Photography/zhuangshi.png" style="width: 32px; height: 32px;" />
|
|
|
+ 详情资料准备
|
|
|
+ </div>
|
|
|
+ <div class="data-prep-content">
|
|
|
+ <el-radio-group v-model="form.dataType" class="ml-4">
|
|
|
+ <el-radio label="1" size="large">Excel上传</el-radio>
|
|
|
+ <el-radio label="2" size="large">系统对接</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+
|
|
|
+ <div v-if="form.dataType == '1'" class="excel-upload-section">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ class="select-file-btn"
|
|
|
+ @click="selectExcel"
|
|
|
+ v-log="{ describe: { action: '点击选择Excel文件' } }"
|
|
|
+ >
|
|
|
+ <img src="@/assets/images/Photography/wenjian.png" style="width: 16px; margin-right: 4px;" />
|
|
|
+ 点击选择文件
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ class="download-link"
|
|
|
+ @click="downloadExcel"
|
|
|
+ v-log="{ describe: { action: '点击下载Excel模板' } }"
|
|
|
+ >
|
|
|
+ 下载商品基础资料模版
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 右侧：LOGO、详情资料准备、一键上架 -->
|
|
|
- <div class="right-panel">
|
|
|
- <!-- 主图LOGO -->
|
|
|
- <div class="right-section">
|
|
|
- <div class="section-title">
|
|
|
- <img src="@/assets/images/Photography/zhuangshi.png" style="width: 32px; height: 32px;" />
|
|
|
- 主图LOGO
|
|
|
- </div>
|
|
|
- <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="selectLogo(item)"
|
|
|
- ></upload>
|
|
|
- <upload @input="onInput"></upload>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <!-- 一键上架平台 -->
|
|
|
+ <div
|
|
|
+ class="right-section"
|
|
|
+ :class="{ 'publish-section--disabled': !canUsePublishSection }"
|
|
|
+ v-if="onlineStoreTempList.length || onlineStoreTempListForeign.length"
|
|
|
+ >
|
|
|
+ <div class="section-title">
|
|
|
+ <img src="@/assets/images/Photography/zhuangshi.png" style="width: 32px; height: 32px;" />
|
|
|
+ 一键上架平台
|
|
|
+ </div>
|
|
|
+ <div class="publish-content">
|
|
|
+ <div class="form-item" v-if="onlineStoreTempList.length">
|
|
|
+ <div class="label">国内电商平台：</div>
|
|
|
+ <el-select
|
|
|
+ v-model="domesticPlatforms"
|
|
|
+ multiple
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width: 100%;"
|
|
|
+ :disabled="!canUsePublishSection"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="store in onlineStoreTempList"
|
|
|
+ :key="store.show_name"
|
|
|
+ :label="store.show_name"
|
|
|
+ :value="store.online_store_name"
|
|
|
+ :disabled="!store.channel_status"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="form-item" v-if="onlineStoreTempListForeign.length">
|
|
|
+ <div class="label">跨境电商平台：</div>
|
|
|
+ <el-select
|
|
|
+ v-model="foreignPlatforms"
|
|
|
+ multiple
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width: 100%;"
|
|
|
+ :disabled="!canUsePublishSection"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="store in onlineStoreTempListForeign"
|
|
|
+ :key="store.show_name"
|
|
|
+ :label="store.show_name"
|
|
|
+ :value="store.online_store_name"
|
|
|
+ :disabled="!store.channel_status"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 详情资料准备 -->
|
|
|
- <div class="right-section">
|
|
|
- <div class="section-title">
|
|
|
- <img src="@/assets/images/Photography/zhuangshi.png" style="width: 32px; height: 32px;" />
|
|
|
- 详情资料准备
|
|
|
- </div>
|
|
|
- <div class="data-prep-content">
|
|
|
- <el-radio-group v-model="form.dataType" class="ml-4">
|
|
|
- <el-radio label="1" size="large">Excel上传</el-radio>
|
|
|
- <el-radio label="2" size="large">系统对接</el-radio>
|
|
|
- </el-radio-group>
|
|
|
|
|
|
- <div v-if="form.dataType == '1'" class="excel-upload-section">
|
|
|
+ <!-- 底部按钮 -->
|
|
|
+ <div class="footer">
|
|
|
<el-button
|
|
|
- type="primary"
|
|
|
- class="select-file-btn"
|
|
|
- @click="selectExcel"
|
|
|
- v-log="{ describe: { action: '点击选择Excel文件' } }"
|
|
|
+ v-loading="requesting"
|
|
|
+ class="button--primary1 footer-button"
|
|
|
+ type="primary"
|
|
|
+ @click="generate"
|
|
|
+ v-log="{ describe: { action: '点击开始生成详情页' } }"
|
|
|
>
|
|
|
- <img src="@/assets/images/Photography/wenjian.png" style="width: 16px; margin-right: 4px;" />
|
|
|
- 点击选择文件
|
|
|
- </el-button>
|
|
|
- <el-button
|
|
|
- type="text"
|
|
|
- class="download-link"
|
|
|
- @click="downloadExcel"
|
|
|
- v-log="{ describe: { action: '点击下载Excel模板' } }"
|
|
|
- >
|
|
|
- 下载商品基础资料模版
|
|
|
+ 开始生成→
|
|
|
</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <!-- 一键上架平台 -->
|
|
|
- <div
|
|
|
- class="right-section"
|
|
|
- :class="{ 'publish-section--disabled': !canUsePublishSection }"
|
|
|
- v-if="onlineStoreTempList.length || onlineStoreTempListForeign.length"
|
|
|
- >
|
|
|
+ <!-- 详情高级配置 -->
|
|
|
+ <!-- <div class="section">
|
|
|
<div class="section-title">
|
|
|
<img src="@/assets/images/Photography/zhuangshi.png" style="width: 32px; height: 32px;" />
|
|
|
- 一键上架平台
|
|
|
+ 详情高级配置
|
|
|
</div>
|
|
|
- <div class="publish-content">
|
|
|
- <div class="form-item" v-if="onlineStoreTempList.length">
|
|
|
- <div class="label">国内电商平台：</div>
|
|
|
- <el-select
|
|
|
- v-model="domesticPlatforms"
|
|
|
- multiple
|
|
|
- placeholder="请选择"
|
|
|
- style="width: 100%;"
|
|
|
- :disabled="!canUsePublishSection"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="store in onlineStoreTempList"
|
|
|
- :key="store.show_name"
|
|
|
- :label="store.show_name"
|
|
|
- :value="store.online_store_name"
|
|
|
- :disabled="!store.channel_status"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
+ <div class="section-content">
|
|
|
+ <!– 图片顺序 –>
|
|
|
+ <div class="form-item">
|
|
|
+ <div class="label">图片顺序：</div>
|
|
|
+ <el-input v-model="imageOrder" placeholder="请输入图片顺序" class="specific-page-input">
|
|
|
+ <template #append>
|
|
|
+ <el-button class="explain-btn" link type="primary">说明</el-button>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
</div>
|
|
|
- <div class="form-item" v-if="onlineStoreTempListForeign.length">
|
|
|
- <div class="label">跨境电商平台：</div>
|
|
|
- <el-select
|
|
|
- v-model="foreignPlatforms"
|
|
|
- multiple
|
|
|
- placeholder="请选择"
|
|
|
- style="width: 100%;"
|
|
|
- :disabled="!canUsePublishSection"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="store in onlineStoreTempListForeign"
|
|
|
- :key="store.show_name"
|
|
|
- :label="store.show_name"
|
|
|
- :value="store.online_store_name"
|
|
|
- :disabled="!store.channel_status"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
+
|
|
|
+ <!– 同款检验 –>
|
|
|
+ <!– <div class="form-item">
|
|
|
+ <div class="label">同款检验：</div>
|
|
|
+ <el-checkbox v-model="checkSimilar">同款下货号必须齐全</el-checkbox>
|
|
|
+ </div>
|
|
|
+ –>
|
|
|
+ <!– 可指定页面独修改 –>
|
|
|
+ <!– <div class="form-item">
|
|
|
+ <div class="label">可指定页面独修改：</div>
|
|
|
+ <el-input v-model="specificPage" placeholder="请输入入需要单独修改的页面，示例：4:1 (需修改模版的编号：第一张)"
|
|
|
+ class="specific-page-input">
|
|
|
+ <template #append>
|
|
|
+ <el-button class="explain-btn" link type="primary">说明</el-button>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
</div>
|
|
|
+ –>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <el-divider />-->
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 详情高级配置 -->
|
|
|
-<!-- <div class="section">
|
|
|
- <div class="section-title">
|
|
|
- <img src="@/assets/images/Photography/zhuangshi.png" style="width: 32px; height: 32px;" />
|
|
|
- 详情高级配置
|
|
|
- </div>
|
|
|
- <div class="section-content">
|
|
|
- <!– 图片顺序 –>
|
|
|
- <div class="form-item">
|
|
|
- <div class="label">图片顺序：</div>
|
|
|
- <el-input v-model="imageOrder" placeholder="请输入图片顺序" class="specific-page-input">
|
|
|
- <template #append>
|
|
|
- <el-button class="explain-btn" link type="primary">说明</el-button>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </div>
|
|
|
|
|
|
- <!– 同款检验 –>
|
|
|
- <!– <div class="form-item">
|
|
|
- <div class="label">同款检验：</div>
|
|
|
- <el-checkbox v-model="checkSimilar">同款下货号必须齐全</el-checkbox>
|
|
|
- </div>
|
|
|
-–>
|
|
|
- <!– 可指定页面独修改 –>
|
|
|
- <!– <div class="form-item">
|
|
|
- <div class="label">可指定页面独修改：</div>
|
|
|
- <el-input v-model="specificPage" placeholder="请输入入需要单独修改的页面，示例：4:1 (需修改模版的编号：第一张)"
|
|
|
- class="specific-page-input">
|
|
|
- <template #append>
|
|
|
- <el-button class="explain-btn" link type="primary">说明</el-button>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </div>
|
|
|
- –>
|
|
|
- </div>
|
|
|
</div>
|
|
|
- <el-divider />-->
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 底部按钮 -->
|
|
|
- <div class="footer">
|
|
|
- <el-button
|
|
|
- v-loading="requesting"
|
|
|
- class="button--primary1 footer-button"
|
|
|
- type="primary"
|
|
|
- @click="generate"
|
|
|
- v-log="{ describe: { action: '点击开始生成详情页' } }"
|
|
|
- >
|
|
|
- 开始生成→
|
|
|
- </el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
-
|
|
|
<loading-dialog v-if="loadingDialogVisible" v-model="loadingDialogVisible" :requesting="requesting" :progress="progress" :message="message"
|
|
|
:disabled-button="disabledButton" :use-new-progress="useNewProgress" :progress-steps="progressSteps" @button-click="handleComplete" :on-open-folder="openOutputDir">
|
|
|
<template v-if="partErrList && partErrList.length > 0" #errList>
|
|
|
@@ -587,7 +614,7 @@ const INTERVAL = ref<number | NodeJS.Timeout | null>(null);
|
|
|
|
|
|
// 状态变量
|
|
|
const totalPage = ref(0);
|
|
|
-const itemsPerPage = 4; // 每页显示的模板数量
|
|
|
+const itemsPerPage = 3; // 每页显示的模板数量
|
|
|
const dialogVisible = ref(false);
|
|
|
const dialogImageUrl = ref('');
|
|
|
const queryParams = reactive({ // 分页查询参数
|
|
|
@@ -1598,30 +1625,44 @@ const selectFolder = () => {
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
// 服务标签页样式
|
|
|
+.detail-page {
|
|
|
+ height: calc(100vh - 50px);
|
|
|
+}
|
|
|
.service-tabs {
|
|
|
display: flex;
|
|
|
gap: 10px;
|
|
|
padding: 20px;
|
|
|
- background: #fff;
|
|
|
- border-bottom: 1px solid #e8e8e8;
|
|
|
- margin-top: 50px;
|
|
|
|
|
|
.service-tab {
|
|
|
display: flex;
|
|
|
+ flex: 1;
|
|
|
align-items: center;
|
|
|
- gap: 8px;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 10px;
|
|
|
padding: 10px 20px;
|
|
|
- border: 2px solid #e8e8e8;
|
|
|
+ border: 1px solid #e8e8e8;
|
|
|
border-radius: 8px;
|
|
|
cursor: pointer;
|
|
|
transition: all 0.3s;
|
|
|
position: relative;
|
|
|
background: #fff;
|
|
|
+ height: 140px;
|
|
|
|
|
|
.tab-checkbox {
|
|
|
margin-right: 0;
|
|
|
+ position: absolute;
|
|
|
+ left: 10px;
|
|
|
+ top:10px;
|
|
|
}
|
|
|
|
|
|
+ .tab-img {
|
|
|
+ width: 48px;
|
|
|
+ height: 48px;
|
|
|
+ background: #EFF6FF;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin: 0 auto 5px;
|
|
|
+
|
|
|
+ }
|
|
|
.tab-icon {
|
|
|
width: 24px;
|
|
|
height: 24px;
|
|
|
@@ -1630,13 +1671,13 @@ const selectFolder = () => {
|
|
|
.tab-name {
|
|
|
font-size: 14px;
|
|
|
color: #333;
|
|
|
+ font-weight: 500;
|
|
|
}
|
|
|
|
|
|
.tab-edit-btn {
|
|
|
position: absolute;
|
|
|
- right: 8px;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
+ right: 10px;
|
|
|
+ top:10px;
|
|
|
width: 24px;
|
|
|
height: 24px;
|
|
|
display: flex;
|
|
|
@@ -1664,11 +1705,11 @@ const selectFolder = () => {
|
|
|
|
|
|
&.active {
|
|
|
border-color: #2957FF;
|
|
|
- background: #F0F5FF;
|
|
|
+ border-bottom: 4px solid #2957FF;
|
|
|
}
|
|
|
|
|
|
&.disabled {
|
|
|
- opacity: 0.5;
|
|
|
+ opacity: 0.8;
|
|
|
cursor: not-allowed;
|
|
|
background: #f5f5f5;
|
|
|
}
|
|
|
@@ -1677,8 +1718,7 @@ const selectFolder = () => {
|
|
|
|
|
|
.detail-container {
|
|
|
background: #F5F6F7;
|
|
|
- min-height: calc(100vh - 130px);
|
|
|
- padding: 20px;
|
|
|
+ padding: 0 20px 20px 20px;
|
|
|
|
|
|
.detail-content {
|
|
|
max-width: 100%;
|
|
|
@@ -1686,7 +1726,6 @@ const selectFolder = () => {
|
|
|
width: 100%;
|
|
|
min-width: 600px;
|
|
|
overflow: hidden;
|
|
|
- padding-bottom: 100px; // 为底部按钮留出空间
|
|
|
|
|
|
}
|
|
|
|
|
|
@@ -1804,7 +1843,7 @@ const selectFolder = () => {
|
|
|
|
|
|
.template-section {
|
|
|
background: #fff;
|
|
|
- padding: 20px;
|
|
|
+ padding: 10px 20px 20px;
|
|
|
border-radius: 8px;
|
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
|
|
|
|
@@ -1812,7 +1851,6 @@ const selectFolder = () => {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- margin-bottom: 20px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -1856,7 +1894,9 @@ const selectFolder = () => {
|
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
|
|
|
|
.section-title {
|
|
|
- margin-bottom: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333333;
|
|
|
}
|
|
|
|
|
|
.data-prep-content {
|
|
|
@@ -1939,7 +1979,30 @@ const selectFolder = () => {
|
|
|
text-align: center;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
+.template-pagination {
|
|
|
+ background: #EFF3F6;
|
|
|
+ padding:2px 0;
|
|
|
+ border-radius:5px;
|
|
|
+ ::v-deep {
|
|
|
+ .is-active {
|
|
|
+ background: #fff !important;
|
|
|
+ color: #2957FF !important;
|
|
|
+ font-size: 14px !important;
|
|
|
+ font-weight: normal !important;
|
|
|
+ border-radius: 2px !important;
|
|
|
+ }
|
|
|
+ .number {
|
|
|
+ margin: 0px !important;
|
|
|
+ }
|
|
|
|
|
|
+ .btn-prev {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .btn-next {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
.template-pagination button {
|
|
|
margin-right: 5px;
|
|
|
}
|
|
|
@@ -1965,14 +2028,16 @@ const selectFolder = () => {
|
|
|
|
|
|
|
|
|
.template-item {
|
|
|
- width: calc(25% - 18px);
|
|
|
+ flex:1;
|
|
|
border: 1px solid #ccc;
|
|
|
border-radius: 10px;
|
|
|
cursor: pointer;
|
|
|
background: #f0f0f0;
|
|
|
position: relative;
|
|
|
+ height: 700px;
|
|
|
overflow: hidden;
|
|
|
|
|
|
+
|
|
|
.template-info {
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
@@ -2055,7 +2120,6 @@ const selectFolder = () => {
|
|
|
align-items: center;
|
|
|
gap: 8px;
|
|
|
font-weight: bold;
|
|
|
- margin-bottom: 16px;
|
|
|
color: #474747;
|
|
|
}
|
|
|
|
|
|
@@ -2166,10 +2230,6 @@ const selectFolder = () => {
|
|
|
padding: 20px;
|
|
|
background: #fff;
|
|
|
border-top: 1px solid #e8e8e8;
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
z-index: 100;
|
|
|
|
|
|
.footer-button {
|
