|
|
@@ -1,65 +1,94 @@
|
|
|
<template>
|
|
|
<div class="detail-container">
|
|
|
- <!-- 主图LOGO部分 -->
|
|
|
- <div class="logo-section flex left top">
|
|
|
- <div class="fw-600">主图LOGO：</div>
|
|
|
- <upload v-model="queryParams.logoImage"></upload>
|
|
|
- </div>
|
|
|
- <el-divider />
|
|
|
- <!-- 选择详情模板部分 -->
|
|
|
- <div class="template-section ">
|
|
|
- <div class="flex between">
|
|
|
- <span>选择详情模版</span>
|
|
|
- <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 style="padding: 20px;">
|
|
|
+ <!-- 主图LOGO部分 -->
|
|
|
+ <div class="logo-section flex left top">
|
|
|
+ <div class="section-title">
|
|
|
+ <img src="@/assets/images/Photography/zhuangshi.png" style="width: 32px; height: 32px;" />
|
|
|
+ 主图LOGO：
|
|
|
</div>
|
|
|
+ <upload :value="queryParams.logoImage" @input="onInput"></upload>
|
|
|
+ <router-link class="mar-left-20 " :to="{
|
|
|
+ name: 'PhotographySeniorDetail'
|
|
|
+ }">
|
|
|
+ <button class="generate-button button--primary1 mar-left-20" @click="generate">去高级详情</button>
|
|
|
+ </router-link>
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="template-list">
|
|
|
- <div v-for="(template, index) in visibleTemplates" :key="index" class="template-item"
|
|
|
- @click="queryParams.templateId = template.id">
|
|
|
- <div class="select-warp" :class="queryParams.templateId == template.id ? 'active' : ''">
|
|
|
- <el-icon color="#FFFFFF">
|
|
|
- <Select />
|
|
|
- </el-icon>
|
|
|
+
|
|
|
+ <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;" />
|
|
|
+ 选择详情模版
|
|
|
</div>
|
|
|
- <div class="template-info">
|
|
|
- <span class="mar-left-10">{{ template.templateId }}</span>
|
|
|
- <div class="template-view" @click="viewTemplate(template)">查看</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-list">
|
|
|
+ <div v-for="(template, index) in visibleTemplates" :key="index" class="template-item"
|
|
|
+ @click="queryParams.templateId = template.id">
|
|
|
+ <el-image :src="ossResize(test_image_url, {
|
|
|
+ m: 'lfit',
|
|
|
+ h: 360,
|
|
|
+ w: 500
|
|
|
+ })" fit="contain" class="cur-p" style="width: 100%; display: block;" />
|
|
|
+ <div class="select-warp" :class="queryParams.templateId == template.id ? 'active' : ''">
|
|
|
+ <el-icon color="#FFFFFF">
|
|
|
+ <Select />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ <div class="template-info">
|
|
|
+ <span class="mar-left-10 chaochu_1">{{ template.templateId }}</span>
|
|
|
+ <div class="template-view" @click="viewTemplate(template)">查看</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- 详情资料准备部分 -->
|
|
|
- <div class="data-prep-section">
|
|
|
+ <!-- 详情资料准备部分 -->
|
|
|
+ <div class="data-prep-section">
|
|
|
|
|
|
- <div class="flex-item left">详情资料准备 (2选1)</div>
|
|
|
- <div class="flex-item left">
|
|
|
- <el-radio-group v-model="queryParams.radio1" class="ml-4">
|
|
|
- <el-radio label="1" size="large">EXCEL文件选择</el-radio>
|
|
|
- <el-radio label="2" size="large">系统对接（和业务员联系）</el-radio>
|
|
|
- </el-radio-group>
|
|
|
- </div>
|
|
|
- <div v-if="dataPrepOption === 'excel'" class="excel-upload">
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="1"></el-col>
|
|
|
- <el-col :span="4">商品基础资料EXCEL文件选择：</el-col>
|
|
|
- <el-col :span="15">
|
|
|
- <el-input type="textarea" v-model="excelFilePath" />
|
|
|
- </el-col>
|
|
|
- <el-col :span="3">
|
|
|
- <el-button class="generate-button button--primary1" type="primary" @click="selectExcel">选择文件夹</el-button>
|
|
|
- </el-col>
|
|
|
-
|
|
|
- </el-row>
|
|
|
+ <div class="flex-item left">
|
|
|
+ <div class="section-title">
|
|
|
+ <img src="@/assets/images/Photography/zhuangshi.png" style="width: 32px; height: 32px;" />
|
|
|
+ 详情资料准备 (2选1)
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex-item left">
|
|
|
+ <el-radio-group v-model="queryParams.radio1" class="ml-4">
|
|
|
+ <el-radio label="1" size="large">EXCEL文件选择</el-radio>
|
|
|
+ <el-radio label="2" size="large">系统对接（和业务员联系）</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ <div v-if="queryParams.radio1 == '1'" class="excel-upload">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="1"></el-col>
|
|
|
+ <el-col :span="4">商品基础资料EXCEL文件选择：</el-col>
|
|
|
+ <el-col :span="18">
|
|
|
+ <div class="flex bottom">
|
|
|
+ <el-input type="textarea" v-model="excelFilePath" />
|
|
|
+ <el-button class="select-button button--primary1 mar-left-20" type="primary" @click="selectExcel">
|
|
|
+ <img src="@/assets/images/Photography/wenjian.png" style="width: 16px; margin-right: 4px;" />
|
|
|
+ 选择</el-button>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- 开始生成按钮 -->
|
|
|
- <button class="generate-button button--primary1" @click="generate">开始生成</button>
|
|
|
+ <!-- 开始生成按钮 -->
|
|
|
+ <button class="generate-button button--primary1" @click="generate">开始生成</button>
|
|
|
+ </div>
|
|
|
+ <el-dialog v-model="dialogVisible">
|
|
|
+ <img w-full :src="dialogImageUrl" alt="Preview Image" />
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -68,6 +97,8 @@
|
|
|
|
|
|
import { ref, computed, reactive } from 'vue';
|
|
|
import { Select } from '@element-plus/icons-vue'
|
|
|
+import { ossResize } from '@/utils/appfun'
|
|
|
+
|
|
|
|
|
|
|
|
|
import upload from '@/components/upload'
|
|
|
@@ -76,6 +107,8 @@ import upload from '@/components/upload'
|
|
|
import client from "@/stores/modules/client";
|
|
|
import icpList from '@/utils/ipc'
|
|
|
const clientStore = client();
|
|
|
+const test_image_url = ref('https://ossimg.valimart.net/uploads/vali_ai/20230927/169580582298394.png')
|
|
|
+
|
|
|
|
|
|
|
|
|
// 模拟数据
|
|
|
@@ -96,11 +129,11 @@ const templates = [
|
|
|
];
|
|
|
const itemsPerPage = 4; // 每页显示的模板数量
|
|
|
// 状态变量
|
|
|
-const currentPage = ref(1);
|
|
|
-const selectedTemplateIndex = ref(0);
|
|
|
const dataPrepOption = ref('excel');
|
|
|
const excelFilePath = ref('D:\\MyDocuments\\PythonCode\\MyPython\\red_dragonfly\\deal_pics\\auto_capture_V2\\auto_photo');
|
|
|
const totalPage = ref(3);
|
|
|
+const dialogVisible = ref(false);
|
|
|
+const dialogImageUrl = ref('');
|
|
|
|
|
|
const queryParams = reactive({
|
|
|
logoImage: '',
|
|
|
@@ -119,27 +152,35 @@ const visibleTemplates = computed(() => {
|
|
|
// 查看模板详情
|
|
|
const viewTemplate = (template) => {
|
|
|
console.log('查看模板详情', template);
|
|
|
+ // 展示大图
|
|
|
+ dialogVisible.value = true
|
|
|
+ dialogImageUrl.value = 'https://ossimg.valimart.net/uploads/vali_ai/20240312/171022217892595.png'
|
|
|
+
|
|
|
};
|
|
|
const onCurrentChange = (page) => {
|
|
|
queryParams.current = page;
|
|
|
};
|
|
|
const onSizeChange = (data) => {
|
|
|
-
|
|
|
};
|
|
|
-
|
|
|
// 开始生成操作
|
|
|
const generate = () => {
|
|
|
console.log('开始生成');
|
|
|
// 这里添加实际生成主图和详情的逻辑
|
|
|
+ console.log('queryParams', queryParams)
|
|
|
+ console.log('excelFilePath', excelFilePath)
|
|
|
};
|
|
|
+const onInput = (value) => {
|
|
|
+ console.log('value', value)
|
|
|
+ queryParams.logoImage = value
|
|
|
+}
|
|
|
|
|
|
-function selectExcel(){
|
|
|
+function selectExcel() {
|
|
|
clientStore.ipc.removeAllListeners(icpList.utils.openFile);
|
|
|
- clientStore.ipc.send(icpList.utils.openFile,{
|
|
|
+ clientStore.ipc.send(icpList.utils.openFile, {
|
|
|
filters: [
|
|
|
- { name: '支持xls,xlsx', extensions: ['xlsx','xls'] }
|
|
|
+ { name: '支持xls,xlsx', extensions: ['xlsx', 'xls'] }
|
|
|
],
|
|
|
- title:"选择基础文件资料"
|
|
|
+ title: "选择基础文件资料"
|
|
|
});
|
|
|
clientStore.ipc.on(icpList.utils.openFile, async (event, result) => {
|
|
|
excelFilePath.value = result
|
|
|
@@ -150,11 +191,9 @@ function selectExcel(){
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.detail-container {
|
|
|
- padding: 20px 0 20px 20px;
|
|
|
- max-width: 1200px;
|
|
|
background-color: #EAECED;
|
|
|
width: 100%;
|
|
|
-
|
|
|
+ min-width: 600px
|
|
|
}
|
|
|
|
|
|
.logo-section,
|
|
|
@@ -191,16 +230,14 @@ function selectExcel(){
|
|
|
.template-list {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
- gap: 10px;
|
|
|
+ gap: 20px;
|
|
|
margin-top: 10px;
|
|
|
|
|
|
|
|
|
.template-item {
|
|
|
- width: calc(25% - 34px);
|
|
|
+ width: calc(25% - 18px);
|
|
|
border: 1px solid #ccc;
|
|
|
border-radius: 10px;
|
|
|
- padding: 10px;
|
|
|
- height: 320px;
|
|
|
cursor: pointer;
|
|
|
background: #f0f0f0;
|
|
|
position: relative;
|
|
|
@@ -249,14 +286,39 @@ function selectExcel(){
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
+.select-button {
|
|
|
+ background: #DFE2E3 !important;
|
|
|
+ color: #3366FF !important;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ padding: 0 10px;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-right: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 550;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
.select-warp {
|
|
|
width: 18px;
|
|
|
height: 18px;
|
|
|
border-radius: 4px;
|
|
|
background-color: #fff;
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ left: 10px;
|
|
|
|
|
|
&.active {
|
|
|
background-color: #1677FF;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.section-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ color: #474747;
|
|
|
+}
|
|
|
</style>
|
