CameraMachine/frontend/src/views/Photography/detail.vue

<template>
  <div class="detail-container">
    <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="form.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>

      <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-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="form.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="form.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 class="data-prep-section">

        <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="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>
        <div v-if="form.dataType == '1'" class="excel-upload">
          <div class="flex bottom between">
            <div style="max-width: 160px;" class="mar-left-20">商品基础资料EXCEL文件选择：</div>
            <div class="flex bottom mar-left-20" style="flex-grow: 1;">
              <el-input type="textarea" v-model="form.excelFilePath" />
            </div>
            <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>
        </div>
      </div>

      <!-- 开始生成按钮 -->
      <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>

<script lang="ts" setup>


import { ref, computed, reactive } from 'vue';
import { Select } from '@element-plus/icons-vue'
import { ossResize } from '@/utils/appfun'
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')

// 模拟数据
const templates = [
  { id: 1101, templateId: '某某模版编号1', preview: '...' },
  { id: 1102, templateId: '某某模版编号2', preview: '...' },
  { id: 1103, templateId: '某某模版编号3', preview: '...' },
  { id: 1104, templateId: '某某模版编号4', preview: '...' },
  { id: 1105, templateId: '某某模版编号5', preview: '...' },
  { id: 1106, templateId: '某某模版编号6', preview: '...' },
  { id: 1107, templateId: '某某模版编号7', preview: '...' },
  { id: 1108, templateId: '某某模版编号8', preview: '...' },
  { id: 1109, templateId: '某某模版编号9', preview: '...' },
  { id: 1110, templateId: '某某模版编号10', preview: '...' },
  { id: 1111, templateId: '某某模版编号11', preview: '...' },
  { id: 1112, templateId: '某某模版编号12', preview: '...' },
];
// 状态变量
const totalPage = ref(3);
const itemsPerPage = 4; // 每页显示的模板数量
const dialogVisible = ref(false);
const dialogImageUrl = ref('');
const queryParams = reactive({ // 分页查询参数
  size: 1,
  current: 1,
})
const form = reactive({
  dataType: '1', // 1: 选择excel文件 2: 系统对接
  logoImage: '', // 主图LOGO
  templateId: 1101,
  excelFilePath: 'D:\\MyDocuments\\PythonCode\\MyPython\\red_dragonfly\\deal_pics\\auto_capture_V2\\auto_photo', // 商品基础资料EXCEL文件选择

})
// 计算属性，获取当前页可见的模板
const visibleTemplates = computed(() => {
  const startIndex = (queryParams.current - 1) * itemsPerPage;
  const data = templates.slice(startIndex, startIndex + itemsPerPage);
  return data
});
// 查看模板详情
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('queryParams', form)
};
const onInput = (value) => {
  form.logoImage = value
}

function selectExcel() {
  clientStore.ipc.removeAllListeners(icpList.utils.openFile);
  clientStore.ipc.send(icpList.utils.openFile, {
    filters: [
      { name: '支持xls,xlsx', extensions: ['xlsx', 'xls'] }
    ],
    title: "选择基础文件资料"
  });
  clientStore.ipc.on(icpList.utils.openFile, async (event, result) => {
    form.excelFilePath = result
    clientStore.ipc.removeAllListeners(icpList.utils.openFile);
  })
}
</script>

<style lang="scss" scoped>
.detail-container {
  background-color: #EAECED;
  width: 100%;
  min-width: 600px
}

.logo-section,
.template-section,
.data-prep-section {
  margin-bottom: 20px;
}

.logo-upload {
  border: 1px dashed #ccc;
  border-radius: 5px;
  padding: 50px 0;
  text-align: center;
  cursor: pointer;
}

.template-pagination button {
  margin-right: 5px;
}

.template-pagination span {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 5px;
  cursor: pointer;
}


.template-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 10px;


  .template-item {
    width: calc(25% - 18px);
    border: 1px solid #ccc;
    border-radius: 10px;
    cursor: pointer;
    background: #f0f0f0;
    position: relative;
    overflow: hidden;

    .template-info {
      position: absolute;
      bottom: 0;
      left: 0;
      background: rgba($color: #000000, $alpha: .3);
      width: 100%;
      height: 36px;
      line-height: 36px;
      color: #eee;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .template-view {
        background: #DFE2E3;
        color: #3366FF;
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        border-radius: 4px;
        margin-right: 10px;
        font-size: 14px;
      }
    }
  }
}



.excel-upload {
  width: 100%;
  background: #F7F7F7;
  padding: 20px 0;
}

.generate-button {
  padding: 10px 20px;
  color: white;
  border: none;
  border-radius: 5px;
  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>