定制商品模板

zxl

2025-10-11 9cd81bdc901890d65846059ef109e06d4a424682

定制商品模板

 seller/src/api/goods-customeize-template.js

New file
@@ -0,0 +1,47 @@
import service from "../libs/axios";

export const getPage = (params) =>{
  return service({
    url: "/lmk/goodsCustomizeTemplate",
    method: "GET",
    params: params
  })
}

export const edit = (params) =>{
  return service({
    url: "/lmk/goodsCustomizeTemplate",
    method: "PUT",
    data: params
  })
}

export const add = (params) =>{
  return service({
    url: "/lmk/goodsCustomizeTemplate",
    method: "POST",
    data: params
  })
}


export const del = (params) =>{
  return service({
    url: "/lmk/goodsCustomizeTemplate/" +params,
    method: "DELETE",
  })
}

export const changeStatus = (params) =>{
  return service({
    url: "/lmk/goodsCustomizeTemplate/changeStatus/" +params,
    method: "PUT",
  })
}

export const detail = (params) =>{
  return service({
    url: "/lmk/goodsCustomizeTemplate/" +params,
    method: "GET",
  })
}

 seller/src/views/template/goodsCustomizeTemplate.vue

New file
@@ -0,0 +1,790 @@
<template>
  <div class="coupon-management">
    <!-- 搜索区域 -->
    <Card class="filter-container">
      <div class="filter-header">
        <Icon type="ios-search" size="18" />
        <span class="filter-title">筛选搜索</span>
        <div class="filter-actions">
          <Button type="primary" @click="getList" size="small">查询搜索</Button>
          <Button @click="handleResetSearch" size="small" style="margin-left: 10px;">重置</Button>
          <Button type="primary" @click="addModal" size="small" style="margin-left: 10px;">新增</Button>
        </div>
      </div>
      <div class="filter-content">
        <Form
          :model="listQuery"
          :label-width="90"
          class="search-form"
          inline
        >
          <FormItem label="模板名称">
            <Input
              v-model="listQuery.templateName"
              style="width: 180px;"
              clearable
              placeholder="请输入模板名称"
            >
            </Input>
          </FormItem>
          <FormItem label="启用状态:">
            <Select
              v-model="listQuery.status"
              placeholder="全部状态"
              clearable
              style="width: 180px"
            >
              <Option value="DISABLE">未启用</Option>
              <Option value="ENABLE">已起用</Option>
            </Select>
          </FormItem>


        </Form>
      </div>
    </Card>

    <!-- 表格区域 -->
    <Card class="table-container">
      <Table
        :loading="listLoading"
        border
        :columns="tableColumns"
        :data="list"
        ref="table"
        class="coupon-table"
      >
        <template slot-scope="{ row }" slot="action">
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="delTemplate(row)"
          >删除</Button
          >
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="updateTemplate(row)"
          >修改</Button
          >
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="changeStatus(row)"
          >{{ row.status ==='ENABLE' ? '禁用':'开启'}}</Button
          >
        </template>
      </Table>
    </Card>

    <!-- 分页区域 -->
    <div class="pagination-container">
      <Page
        :current="listQuery.pageNumber"
        :page-size="listQuery.pageSize"
        :total="total"
        :page-size-opts="[10, 20, 30, 50]"
        show-elevator
        show-sizer
        show-total
        @on-change="handleCurrentChange"
        @on-page-size-change="handleSizeChange"
      />
    </div>

    <Modal
      v-model="showModal"
      :title="modalTitle"
      width="800"
      :mask-closable="false"
    >
      <Form
        ref="form"
        :model="form"
        :label-width="90"
        class="search-form"
        :rules="formRules"
        inline>
        <Row>
          <Col :span="24">
            <FormItem label="模板名称" prop="templateName">
              <Input v-model="form.templateName" autocomplete="off"/>
            </FormItem>
          </Col>
          <Col :span="24">
            <FormItem label="选择新增标题">
              <Button type="primary" @click="addTitle('TEXT')">添加文字标题</Button>
              <Button type="primary" style="margin-left: 10px" @click="addTitle('IMAGE')">添加图片标题</Button>
            </FormItem>
          </Col>

          <Col :span="24">

            <!-- 已添加的标题列表 -->
            <div v-for="(title, index) in form.titles" :key="index" class="title-item">
              <card class="title-text">
                <Input v-model="title.templateTitle" placeholder="请输入文本标题" style="width: 300px; margin-top: 8px;"/>
                <Button  class="delete-btn" type="text" @click="removeTitle(index)" style="color: #ff4d4f;">删除</Button>
              </card>
<!--              <card v-if="title.contentType === 'IMAGE'" class="title-image">-->
<!--                <Upload-->
<!--                  v-if="!title.imgTempUrl"-->
<!--                  :before-upload="(file) => handleBeforeUpload(file,title)"-->
<!--                  :format="['jpg','jpeg','png','gif']"-->
<!--                  :max-size="20480"-->
<!--                  action=""-->
<!--                  accept="image/*"-->
<!--                >-->
<!--                  <Button icon="ios-cloud-upload-outline">上传封面图片</Button>-->
<!--                </Upload>-->
<!--                <div v-else class="upload-file-info">-->

<!--                  <Col :span="24">-->
<!--                    <img :src="title.imgTempUrl" alt="活动图片" class="preview-image-limit">-->
<!--                  </Col>-->
<!--                  <Button type="text" @click="handleRemoveImage(title)">删除</Button>-->
<!--                </div>-->

<!--                <Button class="delete-btn" type="text" @click="removeTitle(index)" style="color: #ff4d4f;">删除</Button>-->
<!--              </card>-->
            </div>
          </Col>
          <Col :span="24">
            <FormItem  label="模板图片" >
              <div style="display: flex; flex-wrap: wrap;">
                <vuedraggable :animation="200" :list="showListImages">
                  <div v-for="(item, __index) in showListImages" :key="__index"
                       class="demo-upload-list">
                    <template>
                      <img :src="item"/>
                      <div class="demo-upload-list-cover">
                        <div>
                          <Icon size="30" type="md-search" @click.native="handleViewGoodsPicture(item)"></Icon>
                          <Icon size="30" type="md-trash" @click.native="handleRemoveGoodsPicture(item)"></Icon>
                        </div>
                      </div>
                    </template>
                  </div>
                </vuedraggable>
              </div>
              <div style="width: 100%;display: flex;justify-content: start;margin-top: 10px;">
                <Button @click="handleCLickImg('goodsGalleryFiles')" type="primary">上传图片</Button>
              </div>
              <Modal v-model="goodsPictureVisible" title="View Image">
                <img v-if="goodsPictureVisible" :src="previewGoodsPicture" style="width: 100%"/>
              </Modal>
            </FormItem>
          </Col>

        </Row>


      </Form>
      <div slot="footer">
        <Button type="text" @click="showModal = false">关闭</Button>
        <Button type="primary" :loading="submitLoading" @click="saveOrUpdate">确认</Button>
      </div>
    </Modal>

    <Modal v-model="picModelFlag" width="1200px">
      <div class="demo-upload-list" v-for="(item,index) in showListImages">
        <template>
          <img :src="item">
          <div class="demo-upload-list-cover">
            <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
            <Icon type="ios-trash-outline" @click.native="handleRemove(null,index)"></Icon>
          </div>
        </template>
      </div>
      <div class="demo-upload-list">
        <Upload
          :before-upload="upLoadImg"
          accept="image/*"
          action="-"
          type="drag"
          style=" display: inline-block;width: 58px"
        >
          <div style="width: 58px;height:58px;line-height: 58px;">
            <Icon type="ios-camera" size="20"></Icon>
          </div>
        </Upload>
      </div>
    </Modal>
    <Modal v-model="visible" title="预览图片">
      <img v-if="visible" :src="previewPicture" style="width: 100%">
    </Modal>

  </div>
</template>
<script>

import { getPage,edit,add,del,changeStatus,detail } from "@/api/goods-customeize-template.js"
import vuedraggable from "vuedraggable";
import COS from "cos-js-sdk-v5";
import {getFileKey} from "@/utils/file.js";
import {getFilePreview, getSts} from "@/api/file";

export default {
  name: 'GoodsCustomizeTemplate',
  components: {vuedraggable},
  data() {
    return {
      // 预览图片路径
      previewPicture: "",
      visible:false,
      picModelFlag: false, // 图片选择器
      goodsPictureVisible: false,
      showListImages: [],
      listImages: [],
      previewGoodsPicture: "",
      selectedFormBtnName: "", // 点击图片绑定form

      //新增
      modalTitle:"",
      showModal:false,

      list: [],
      total: 0,
      listLoading: false,
      submitLoading: false,

      listQuery: {
        pageNumber: 1,
        pageSize: 10,
        templateName:"",
        status:"",
      },
      form:{
        titles: []
      },
      // 表单验证规则
      formRules: {
        templateName:[
          {required:true,message:"模板名不能为空",trigger:"blur"}
        ]
      },

      // 表头配置
      tableColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '模板名称',
          key: 'templateName',
          align: 'center',
          ellipsis: true,
          tooltip: true
        },
        {
          title: '启用状态',
          key: 'status',
          width: 120,
          align: 'center',
          render: (h, params) => {
            const status = params.row.status;
            const color = status === 'ENABLE' ? 'success' : status === 'DISABLE' ? 'default' : 'warning';
            const text = status === 'ENABLE' ? '启用' : status === 'DISABLE' ? '未启用' : '未知';

            return h('Tag', {
              props: {
                color: color
              }
            }, text);
          }
        },
        {
          title: '操作',
          slot: 'action',
          width: 200,
          align: 'center'
        },
      ]
    }
  },
  methods: {
    changeStatus(row){
      changeStatus(row.id).then(res =>{
        if (res.code ===200 ){
          this.$Message.success(res.msg)
        }
        this.getList()
      })

    },
    async updateTemplate(row){
      this.showModal = true;
      this.modalTitle = "修改模板";

      await detail(row.id).then(res =>{
        if (res.code === 200){
          this.form = {
            id: res.data.id,
            templateName:  res.data.templateName || '', // 确保不为undefined
            titles:  res.data.titles || [] // 标题列表
          };
          this.form.titles.map((i) =>{
            i.id = null;
            return i
          })
          this.listImages = res.data.listImages.map((i) => {
            return i.imgUrl
          });

        }
      })
      const stsInfo = await getSts();
      const endpoint = stsInfo.data.endpoint;
      console.log()
      this.showListImages = this.listImages.map((i) => {
        if (i!=null&&i.indexOf('http')===-1)
          return endpoint+'/'+i;
        else return i;
      })

    },
    delTemplate(row){
      del(row.id).then(res =>{
        if (res.code === 200){
          this.$Message.success(res.msg)
        }
        this.getList()
      })
    },
    async upLoadImg(file) {
      console.log("打印上传1")
      if (this.listImages.length >= 10) {
        this.$Message.error("图片上传不能超过10个");
        return;
      }
      console.log("打印上传2")
      try {
        // 获取文件上传临时密钥
        const sts = await getSts();
        const cos = new COS({
          getAuthorization: async function (options, callback) {
            callback({
              TmpSecretId: sts.data.tmpSecretId,
              TmpSecretKey: sts.data.tmpSecretKey,
              SecurityToken: sts.data.sessionToken,
              // 建议返回服务器时间作为签名的开始时间，避免客户端本地时间偏差过大导致签名错误
              StartTime: sts.data.stsStartTime, // 时间戳，单位秒，如：1580000000
              ExpiredTime: sts.data.stsEndTime,// 时间戳，单位秒，如：1580000000
              ScopeLimit: true, // 细粒度控制权限需要设为 true，会限制密钥只在相同请求时重复使用
            });
          }
        })
        const fileKey = getFileKey(file.name)
        const upData = await cos.uploadFile({
          Bucket: sts.data.bucket,
          Region: sts.data.region,
          Key: fileKey,
          Body: file, // 要上传的文件对象。
          SliceSize: 1024 * 1024 * 5,
          onProgress: function (progressData) {
            console.log('上传进度：', progressData);
          },
        });
        console.log("上传成功", upData)
        this.$nextTick(() => {
          this.listImages.push(fileKey);
          this.showListImages.push(sts.data.endpoint + "/" + fileKey);

        })

      } catch (e) {
        console.log("上传失败", upData)
        return false;
      } finally {

      }
      return false;
    },
    handleView(url) {
      this.previewPicture = url;
      this.visible = true;
    },
    handleRemove(item, index) {
      if (!item) {
        this.listImages.splice(index, 1);
        this.showListImages.splice(index, 1);

      } else {
        console.log('移除测试',item, index);
        item.splice(index, 1)
      }
      this.previewPicture = "";
    },

    handleCLickImg(val, index) {
      this.picModelFlag = true;
      this.selectedFormBtnName = val;
    },
    handleViewGoodsPicture(url) {
      this.previewGoodsPicture = url;
      this.goodsPictureVisible = true;
    },
    // 移除商品图片
    handleRemoveGoodsPicture(file) {
      // this.baseInfoForm.goodsGalleryFiles =
      //   this.baseInfoForm.goodsGalleryFiles.filter((i) => i !== file);
    },

    addTitle(type){
      this.form.titles.push(
        {
          contentType: type,
          templateTitle: '',
          imgTempUrl:null,//图片临时地址
          file:null,
        });
    },
    // 移除标题
    removeTitle(index) {
      this.form.titles.splice(index, 1);
    },

    saveOrUpdate() {
      const submitData = {
        ...this.form,
        listImages: this.listImages,
      };

      console.log(submitData)

      const isTitlesValid = (titles) => {
        console.log("进入判断")
        // 数组本身为null/undefined或空数组
        if (!titles || titles.length === 0) return false;
        // 检查每个元素的有效性
        return titles.every(title => {
          // 基础校验：必须是对象且包含contentType
          if (!title || typeof title !== 'object' || !title.contentType) return false;

            return title.templateTitle !== null
              && title.templateTitle !== undefined
              && title.templateTitle.trim() !== '';
          // 未知类型
          return false;
        });
      };

      const isImagesValid = (images) => {
        if (!images || images.length === 0) return false;
        return images.some(img => img && (typeof img === 'string' ? img.trim() !== '' : true));
      };

      this.$refs.form.validate(async (valid) => {
        if (valid) {
          try {
            // 先处理所有图片上传（等待异步完成）
            this.submitLoading = true;

            // 上传完成后再验证
            if (!isTitlesValid(submitData.titles)) {
              this.$Message.error('请确保所有标题都填写完整（文本标题不能为空，图片标题需上传成功）');
              this.submitLoading = false;
              return;
            }

            if (!isImagesValid(submitData.listImages)) {
              this.$Message.error('请添加有效的图片（至少一张图片）');
              this.submitLoading = false;
              return;
            }

            // 验证通过，提交数据
            const api = this.form.id ? edit : add;
            const res = await api(submitData);

            if (res.code === 200) {
              this.$Message.success(res.msg);
              this.modelShow = false;
              this.getList();
            } else {
              this.$Message.error(res.msg);
            }
          } catch (error) {
            this.$Message.error('提交失败，请重试');
            console.error(error);
          } finally {
            this.submitLoading = false;
            this.showModal = false;
          }
        }
      });
    },
    addModal(){
      this.form = {
        titles: []
      };
      this.showModal = true;
      this.modalTitle = "新增模板";
      this.showListImages =[];
      this.listImages =[];
    },
    detail(row){
      console.log(row)
    },

    // 获取列表数据
    getList() {
      this.listLoading = true;
      // 模拟API调用
      getPage(this.listQuery).then(res =>{
        this.listLoading = false;
        this.list = res.data;
        this.total = res.total;
      })
    },

    // 重置搜索条件
    handleResetSearch() {
      this.listQuery = {
        pageNumber: 1,
        pageSize: 10,
        storeName: "",
        couponName: "",
        generateStatus: "",
        status: ""
      };
      this.getList();
    },

    // 分页大小改变
    handleSizeChange(size) {
      this.listQuery.pageSize = size;
      this.listQuery.pageNumber = 1;
      this.getList();
    },

    // 当前页码改变
    handleCurrentChange(pageNumber) {
      this.listQuery.pageNumber = pageNumber;
      this.getList();
    },

    // 提交表单
    handleSubmit() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
        }
      });
    }
  },
  mounted() {
    this.getList();
  }
}
</script>

<style scoped lang="less">
.preview-image-limit{
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: block;
}
.delete-btn {
  position: absolute; /* 绝对定位 */
  top: 12px; /* 距离顶部的距离 */
  right: 12px; /* 距离右侧的距离 */
  padding: 4px 8px; /* 调整按钮大小 */
  line-height: 1; /* 调整行高 */
}
.title-item {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #e9e9e9;
}

.title-type-selector {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.type-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 20px;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
  transition: all 0.3s;

  &:hover {
    background-color: #f5f7fa;
  }

  span {
    margin-top: 10px;
  }
}
.coupon-management {
  padding: 16px;
  background: #f5f7f9;
  min-height: 100vh;
}

.filter-container {
  margin-bottom: 16px;

  .filter-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;

    .filter-title {
      margin-left: 8px;
      font-weight: 600;
      font-size: 16px;
    }

    .filter-actions {
      margin-left: auto;
    }
  }

  .filter-content {
    .search-form {
      /deep/ .ivu-form-item {
        margin-bottom: 16px;
        margin-right: 16px;
      }
    }
  }
}

.operation-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);

  .operation-info {
    color: #999;
    font-size: 14px;
  }
}

.table-container {
  margin-bottom: 16px;

  .coupon-table {
    /deep/ .ivu-table-cell {
      padding: 8px 12px;
    }

    .action-btns {
      display: flex;
      justify-content: center;

      button {
        margin: 0 2px;
      }
    }
  }
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  background: #fff;
  padding: 12px 16px;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

// 响应式调整
@media (max-width: 768px) {
  .coupon-management {
    padding: 8px;
  }

  .filter-content .search-form {
    /deep/ .ivu-form-item {
      width: 100%;
      margin-right: 0;

      .ivu-form-item-content {
        width: 100%;

        .ivu-input, .ivu-select {
          width: 100% !important;
        }
      }
    }
  }

  .operation-container {
    flex-direction: column;
    align-items: flex-start;

    .add-btn {
      margin-bottom: 8px;
    }
  }

  .action-btns {
    flex-direction: column;

    button {
      margin: 2px 0 !important;
      width: 100%;
    }
  }
}
.demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  margin-right: 4px;
}

.demo-upload-list img {
  width: 100%;
  height: 100%;
}

.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .6);
}

.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}

.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
</style>