group_web_merchant/src/views/operationManagement/newActivity.vue

<template>
  <!-- 运营活动管理 - 新增/编辑页面 -->
  <div class="table-box" style="width: 100%; min-height: 100%; background-color: white">
    <div class="header">
      <el-button @click="goBack"> 返回 </el-button>
      <h2 class="title">{{ type == "add" ? "新建" : "编辑" }}活动</h2>
    </div>
    <div class="form-wrapper">
      <div class="form-wrapper-main">
        <el-form ref="ruleFormRef" :model="activityModel" :rules="rules" class="formBox" label-width="140px">
          <div class="form-content">
            <!-- 活动类型 -->
            <el-form-item label="活动类型" prop="activityType">
              <el-select v-model="activityModel.activityType" class="form-input" clearable placeholder="请选择">
                <el-option label="营销活动" :value="1" />
                <el-option label="评论有礼" :value="2" />
              </el-select>
            </el-form-item>

            <!-- 活动名称 -->
            <el-form-item label="活动名称" prop="activityName">
              <el-input v-model="activityModel.activityName" class="form-input" clearable maxlength="50" placeholder="请输入" />
            </el-form-item>

            <!-- 活动时间 -->
            <el-form-item class="activity-time-item" label="活动时间" prop="activityTimeRange">
              <el-date-picker
                v-model="activityModel.activityTimeRange"
                :disabled-date="disabledDate"
                class="form-input"
                end-placeholder="结束日期"
                format="YYYY/MM/DD"
                range-separator="-"
                start-placeholder="开始日期"
                type="daterange"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>

            <!-- 评论有礼相关字段 -->
            <template v-if="activityModel.activityType === 1">
              <!-- 用户可参与次数 -->
              <el-form-item label="用户可参与次数" prop="participationLimit">
                <el-input v-model="activityModel.participationLimit" placeholder="请输入" maxlength="4" />
              </el-form-item>

              <!-- 活动规则 -->
              <el-form-item label="活动规则" prop="activityRule">
                <el-cascader
                  v-model="activityModel.activityRule"
                  :options="ruleCascaderOptions"
                  :props="cascaderProps"
                  class="form-input"
                  clearable
                  placeholder="请选择"
                  style="width: 100%"
                />
              </el-form-item>

              <!-- 优惠券 -->
              <el-form-item label="优惠券" prop="couponId">
                <el-select v-model="activityModel.couponId" class="form-input" clearable filterable placeholder="请选择">
                  <el-option v-for="item in couponList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>

              <!-- 优惠券发放数量 -->
              <el-form-item label="优惠券发放数量" prop="couponQuantity">
                <el-input v-model="activityModel.couponQuantity" placeholder="请输入" maxlength="5" />
              </el-form-item>
            </template>

            <!-- 营销活动相关字段 -->
            <template v-if="activityModel.activityType === 2">
              <!-- 报名时间 -->
              <el-form-item class="activity-time-item" label="报名时间" prop="signupTimeRange">
                <el-date-picker
                  v-model="activityModel.signupTimeRange"
                  :disabled-date="disabledDate"
                  class="form-input"
                  end-placeholder="结束日期"
                  format="YYYY/MM/DD"
                  range-separator="-"
                  start-placeholder="开始日期"
                  type="daterange"
                  value-format="YYYY-MM-DD"
                />
              </el-form-item>

              <!-- 活动限制人数 -->
              <el-form-item label="活动限制人数" prop="activityLimitPeople">
                <el-input v-model="activityModel.activityLimitPeople" placeholder="请输入" maxlength="6" />
              </el-form-item>

              <!-- 活动详情 -->
              <el-form-item label="活动详情" prop="activityDetails">
                <el-input
                  v-model="activityModel.activityDetails"
                  type="textarea"
                  :rows="6"
                  placeholder="请输入活动详情"
                  maxlength="1000"
                  show-word-limit
                />
              </el-form-item>
            </template>

            <!-- 上传图片方式 -->
            <el-form-item label="活动图片类型" prop="uploadImgType">
              <el-radio-group v-model="activityModel.uploadImgType">
                <el-radio :label="1"> 本地上传 </el-radio>
                <el-radio :label="2"> AI生成 </el-radio>
              </el-radio-group>
            </el-form-item>

            <!-- 图片描述（当选择使用描述时显示） -->
            <el-form-item v-if="activityModel.uploadImgType === 2" label="图片描述" prop="imgDescribe">
              <el-input
                v-model="activityModel.imgDescribe"
                type="textarea"
                :rows="4"
                placeholder="请输入图片描述"
                maxlength="500"
                show-word-limit
              />
            </el-form-item>

            <!-- 活动标题图 -->
            <el-form-item v-if="activityModel.uploadImgType === 1" label="活动标题图" prop="activityTitleImage">
              <div class="upload-item-wrapper">
                <div class="upload-area upload-area-horizontal-21-9" :class="{ 'upload-full': titleFileList.length >= 1 }">
                  <el-upload
                    v-model:file-list="titleFileList"
                    :accept="'.jpg,.jpeg,.png'"
                    :auto-upload="false"
                    :before-remove="handleBeforeRemove"
                    :disabled="hasUnuploadedImages"
                    :limit="1"
                    :on-change="handleTitleUploadChange"
                    :on-exceed="handleUploadExceed"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleTitleRemove"
                    :show-file-list="true"
                    list-type="picture-card"
                  >
                    <template #trigger>
                      <div v-if="titleFileList.length < 1" class="upload-trigger-card el-upload--picture-card">
                        <el-icon>
                          <Plus />
                        </el-icon>
                      </div>
                    </template>
                  </el-upload>
                </div>
                <div class="upload-hint">请上传21:9尺寸图片效果更佳,支持jpg、jpeg、png格式，上传图片不得超过20M</div>
              </div>
            </el-form-item>

            <!-- 活动详情图 -->
            <el-form-item v-if="activityModel.uploadImgType === 1" label="活动详情图" prop="activityDetailImage">
              <div class="upload-item-wrapper">
                <div class="upload-area upload-area-vertical" :class="{ 'upload-full': detailFileList.length >= 1 }">
                  <el-upload
                    v-model:file-list="detailFileList"
                    :accept="'.jpg,.jpeg,.png'"
                    :auto-upload="false"
                    :before-remove="handleBeforeRemove"
                    :disabled="hasUnuploadedImages"
                    :limit="1"
                    :on-change="handleDetailUploadChange"
                    :on-exceed="handleUploadExceed"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleDetailRemove"
                    :show-file-list="true"
                    list-type="picture-card"
                  >
                    <template #trigger>
                      <div v-if="detailFileList.length < 1" class="upload-trigger-card el-upload--picture-card">
                        <el-icon>
                          <Plus />
                        </el-icon>
                      </div>
                    </template>
                  </el-upload>
                </div>
                <div class="upload-hint">请上传竖版图片,支持jpg、jpeg、png格式，上传图片不得超过20M</div>
              </div>
            </el-form-item>
          </div>
        </el-form>
      </div>

      <!-- 底部按钮区域 -->
      <div class="button-container">
        <el-button @click="goBack"> 取消 </el-button>
        <el-button type="primary" @click="handleSubmit()"> 提交审核 </el-button>
      </div>
    </div>

    <!-- 图片预览 -->
    <el-image-viewer
      v-if="imageViewerVisible"
      :initial-index="imageViewerInitialIndex"
      :url-list="imageViewerUrlList"
      @close="imageViewerVisible = false"
    />
  </div>
</template>

<script lang="tsx" name="newActivity" setup>
/**
 * 运营活动管理 - 新增/编辑页面
 * 功能：支持运营活动的新增和编辑操作
 */
import { computed, nextTick, onMounted, reactive, ref, watch } from "vue";
import type { FormInstance, UploadFile, UploadProps } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import { useRoute, useRouter } from "vue-router";
import {
  addActivity,
  getActivityDetail,
  getActivityRuleOptions,
  getCouponList,
  updateActivity
} from "@/api/modules/operationManagement";
import { uploadContractImage } from "@/api/modules/licenseManagement";
import { localGet } from "@/utils";

// ==================== 响应式数据定义 ====================

// 路由相关
const router = useRouter();
const route = useRoute();

// 页面状态
const type = ref<string>(""); // 页面类型：add-新增, edit-编辑
const id = ref<string>(""); // 页面ID参数

// 表单引用
const ruleFormRef = ref<FormInstance>();

// 优惠券列表
const couponList = ref<any[]>([]);

// 文件上传相关
const titleFileList = ref<UploadFile[]>([]);
const detailFileList = ref<UploadFile[]>([]);
const titleImageUrl = ref<string>("");
const detailImageUrl = ref<string>("");
const pendingUploadFiles = ref<UploadFile[]>([]);
const uploading = ref(false);
const imageViewerVisible = ref(false);
const imageViewerUrlList = ref<string[]>([]);
const imageViewerInitialIndex = ref(0);

// 活动规则级联选择器选项
const ruleCascaderOptions = ref<any[]>([]);

// 级联选择器配置
const cascaderProps = {
  expandTrigger: "hover" as const,
  emitPath: true,
  disabled: (data: any) => {
    // 除了 "当用户 > 核销并评论 > 优惠券" 这个路径，其余选项不可选择
    if (data.disabled !== undefined) {
      return data.disabled;
    }
    return false;
  }
};

// 是否有未上传的图片
const hasUnuploadedImages = computed(() => {
  return (
    titleFileList.value.some(file => file.status === "ready" || file.status === "uploading") ||
    detailFileList.value.some(file => file.status === "ready" || file.status === "uploading")
  );
});

// ==================== 表单验证规则 ====================
const rules = reactive({
  activityType: [{ required: true, message: "请选择活动类型", trigger: "change" }],
  activityName: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
  activityTimeRange: [
    { required: true, message: "请选择活动时间", trigger: "change" },
    {
      validator: (rule: any, value: any, callback: any) => {
        if (!value || !Array.isArray(value) || value.length !== 2) {
          callback(new Error("请选择活动时间"));
          return;
        }
        const [startTime, endTime] = value;
        if (!startTime || !endTime) {
          callback(new Error("请选择完整的活动时间"));
          return;
        }
        const start = new Date(startTime);
        const end = new Date(endTime);
        const today = new Date();
        today.setHours(0, 0, 0, 0);
        if (start < today) {
          callback(new Error("活动开始时间不能早于当前时间"));
          return;
        }
        if (start >= end) {
          callback(new Error("活动开始时间必须早于活动结束时间"));
          return;
        }
        callback();
      },
      trigger: "change"
    }
  ],
  participationLimit: [
    { required: true, message: "请输入用户可参与次数", trigger: "blur" },
    {
      validator: (rule: any, value: any, callback: any) => {
        if (activityModel.value.activityType === 1) {
          if (!value) {
            callback(new Error("请输入用户可参与次数"));
            return;
          }
          const numValue = Number(value);
          if (isNaN(numValue) || !Number.isInteger(numValue) || numValue <= 0) {
            callback(new Error("用户可参与次数必须为正整数"));
            return;
          }
          if (numValue > 9999) {
            callback(new Error("用户可参与次数必须小于9999"));
            return;
          }
        }
        callback();
      },
      trigger: "blur"
    }
  ],
  activityRule: [
    { required: true, message: "请选择活动规则", trigger: "change" },
    {
      validator: (rule: any, value: any, callback: any) => {
        if (activityModel.value.activityType === 1) {
          if (!value || !Array.isArray(value) || value.length < 2) {
            callback(new Error("请选择完整的活动规则（至少选择角色和行为）"));
            return;
          }
        }
        callback();
      },
      trigger: "change"
    }
  ],
  couponId: [
    { required: true, message: "请选择优惠券", trigger: "change" },
    {
      validator: (rule: any, value: any, callback: any) => {
        if (activityModel.value.activityType === 1) {
          if (!value) {
            callback(new Error("请选择优惠券"));
            return;
          }
        }
        callback();
      },
      trigger: "change"
    }
  ],
  couponQuantity: [
    { required: true, message: "请输入优惠券发放数量", trigger: "blur" },
    {
      validator: (rule: any, value: any, callback: any) => {
        if (activityModel.value.activityType === 1) {
          if (!value) {
            callback(new Error("请输入优惠券发放数量"));
            return;
          }
          const numValue = Number(value);
          if (isNaN(numValue) || !Number.isInteger(numValue) || numValue <= 0) {
            callback(new Error("优惠券发放数量必须为正整数"));
            return;
          }
          if (numValue > 99999) {
            callback(new Error("优惠券发放数量必须小于99999"));
            return;
          }
        }
        callback();
      },
      trigger: "blur"
    }
  ],
  signupTimeRange: [
    { required: true, message: "请选择报名时间", trigger: "change" },
    {
      validator: (rule: any, value: any, callback: any) => {
        if (activityModel.value.activityType === 2) {
          if (!value || !Array.isArray(value) || value.length !== 2) {
            callback(new Error("请选择报名时间"));
            return;
          }
          const [startTime, endTime] = value;
          if (!startTime || !endTime) {
            callback(new Error("请选择完整的报名时间"));
            return;
          }
          const start = new Date(startTime);
          const end = new Date(endTime);
          if (start >= end) {
            callback(new Error("报名开始时间必须早于报名结束时间"));
            return;
          }
        }
        callback();
      },
      trigger: "change"
    }
  ],
  activityLimitPeople: [
    { required: true, message: "请输入活动限制人数", trigger: "blur" },
    {
      validator: (rule: any, value: any, callback: any) => {
        if (activityModel.value.activityType === 2) {
          if (!value) {
            callback(new Error("请输入活动限制人数"));
            return;
          }
          const numValue = Number(value);
          if (isNaN(numValue) || !Number.isInteger(numValue) || numValue <= 0) {
            callback(new Error("活动限制人数必须为正整数"));
            return;
          }
          if (numValue > 999999) {
            callback(new Error("活动限制人数必须小于999999"));
            return;
          }
        }
        callback();
      },
      trigger: "blur"
    }
  ],
  activityDetails: [
    { required: true, message: "请输入活动详情", trigger: ["blur", "change"] },
    {
      validator: (rule: any, value: any, callback: any) => {
        if (activityModel.value.activityType === 2) {
          if (!value || value.trim() === "") {
            callback(new Error("请输入活动详情"));
            return;
          }
        }
        callback();
      },
      trigger: ["blur", "change"]
    }
  ],
  uploadImgType: [{ required: true, message: "请选择上传图片方式", trigger: "change" }],
  imgDescribe: [
    {
      required: true,
      validator: (rule: any, value: any, callback: any) => {
        if (activityModel.value.uploadImgType === 2) {
          if (!value || value.trim() === "") {
            callback(new Error("请输入图片描述"));
            return;
          }
        }
        callback();
      },
      trigger: ["blur", "change"]
    }
  ],
  activityTitleImage: [
    {
      required: true,
      validator: (rule: any, value: any, callback: any) => {
        if (activityModel.value.uploadImgType === 1) {
          if (!titleImageUrl.value) {
            callback(new Error("请上传活动标题图"));
            return;
          }
        }
        callback();
      },
      trigger: ["change", "blur"]
    }
  ],
  activityDetailImage: [
    {
      required: true,
      validator: (rule: any, value: any, callback: any) => {
        if (activityModel.value.uploadImgType === 1) {
          if (!detailImageUrl.value) {
            callback(new Error("请上传活动详情图"));
            return;
          }
        }
        callback();
      },
      trigger: ["change", "blur"]
    }
  ]
});

// ==================== 活动信息数据模型 ====================
const activityModel = ref<any>({
  // 活动类型：1-评论有礼，2-营销活动
  activityType: 2,
  // 活动宣传图（包含标题和详情）
  promotionImages: null,
  // 活动标题图片
  activityTitleImg: null,
  // 活动详情图片
  activityDetailImg: null,
  // 活动标题图（用于表单验证）
  activityTitleImage: null,
  // 活动详情图（用于表单验证）
  activityDetailImage: null,
  // 活动名称
  activityName: "",
  // 活动时间范围
  activityTimeRange: [],
  // 用户可参与次数（评论有礼）
  participationLimit: "",
  // 活动规则（级联选择器的值数组）（评论有礼）
  activityRule: [],
  // 优惠券ID（评论有礼）
  couponId: "",
  // 优惠券发放数量（评论有礼）
  couponQuantity: "",
  // 报名时间范围（营销活动）
  signupTimeRange: [],
  // 活动限制人数（营销活动）
  activityLimitPeople: "",
  // 活动详情（营销活动）
  activityDetails: "",
  // 上传图片方式：1-正常用户，2-使用描述
  uploadImgType: 1,
  // 图片描述（当uploadImgType为2时使用）
  imgDescribe: ""
});

// ==================== 日期选择器禁用规则 ====================

// 禁用日期（不能早于今天）
const disabledDate = (time: Date) => {
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  return time.getTime() < today.getTime();
};

// ==================== 图片参数转换函数 ====================

/**
 * 图片URL转换为upload组件的参数
 * @param imageUrl 图片URL
 * @returns UploadFile对象
 */
const handleImageParam = (imageUrl: string): UploadFile => {
  // 使用split方法以'/'为分隔符将URL拆分成数组
  const parts = imageUrl.split("/");
  // 取数组的最后一项，即图片名称
  const imageName = parts[parts.length - 1];
  return {
    uid: Date.now() + Math.random(),
    name: imageName,
    status: "success",
    percentage: 100,
    url: imageUrl
  } as unknown as UploadFile;
};

// ==================== 文件上传相关函数 ====================

/**
 * 检查文件是否在排队中（未上传）
 */
const isFilePending = (file: any): boolean => {
  if (file.status === "ready") {
    return true;
  }
  if (pendingUploadFiles.value.some(item => item.uid === file.uid)) {
    return true;
  }
  return false;
};

/**
 * 图片上传 - 删除前确认
 */
const handleBeforeRemove = async (uploadFile: any, uploadFiles: any[]): Promise<boolean> => {
  if (isFilePending(uploadFile)) {
    ElMessage.warning("图片尚未上传，请等待上传完成后再删除");
    return false;
  }
  try {
    await ElMessageBox.confirm("确定要删除这张图片吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    });
    return true;
  } catch {
    return false;
  }
};

/**
 * 活动标题图片上传 - 移除图片回调
 */
const handleTitleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  const file = uploadFile as any;
  const imageUrl = file.url;

  if (imageUrl) {
    titleImageUrl.value = "";
    activityModel.value.activityTitleImg = null;
    activityModel.value.activityTitleImage = null;
    // 触发表单验证
    nextTick(() => {
      ruleFormRef.value?.validateField("activityTitleImage");
    });
  }

  if (file.url && file.url.startsWith("blob:")) {
    URL.revokeObjectURL(file.url);
  }
  titleFileList.value = [...uploadFiles];
  ElMessage.success("图片已删除");
};

/**
 * 活动详情图片上传 - 移除图片回调
 */
const handleDetailRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  const file = uploadFile as any;
  const imageUrl = file.url;

  if (imageUrl) {
    detailImageUrl.value = "";
    activityModel.value.activityDetailImg = null;
    activityModel.value.activityDetailImage = null;
    // 触发表单验证
    nextTick(() => {
      ruleFormRef.value?.validateField("activityDetailImage");
    });
  }

  if (file.url && file.url.startsWith("blob:")) {
    URL.revokeObjectURL(file.url);
  }
  detailFileList.value = [...uploadFiles];
  ElMessage.success("图片已删除");
};

/**
 * 上传文件超出限制提示
 */
const handleUploadExceed: UploadProps["onExceed"] = () => {
  ElMessage.warning("最多只能上传1张图片");
};

/**
 * 活动标题图片上传 - 文件变更
 */
const handleTitleUploadChange: UploadProps["onChange"] = async (uploadFile, uploadFiles) => {
  if (uploadFile.raw) {
    const fileType = uploadFile.raw.type.toLowerCase();
    const fileName = uploadFile.name.toLowerCase();
    const validTypes = ["image/jpeg", "image/jpg", "image/png"];
    const validExtensions = [".jpg", ".jpeg", ".png"];

    const isValidType = validTypes.includes(fileType) || validExtensions.some(ext => fileName.endsWith(ext));

    if (!isValidType) {
      // 从文件列表中移除不符合类型的文件
      const index = titleFileList.value.findIndex((f: any) => f.uid === uploadFile.uid);
      if (index > -1) {
        titleFileList.value.splice(index, 1);
      }
      // 从 uploadFiles 中移除
      const uploadIndex = uploadFiles.findIndex((f: any) => f.uid === uploadFile.uid);
      if (uploadIndex > -1) {
        uploadFiles.splice(uploadIndex, 1);
      }
      // 如果文件有 blob URL，释放它
      if (uploadFile.url && uploadFile.url.startsWith("blob:")) {
        URL.revokeObjectURL(uploadFile.url);
      }
      ElMessage.warning("只支持上传 JPG、JPEG 和 PNG 格式的图片");
      return;
    }

    // 检查文件大小，不得超过20M
    const maxSize = 20 * 1024 * 1024; // 20MB
    if (uploadFile.raw.size > maxSize) {
      // 从文件列表中移除超过大小的文件
      const index = titleFileList.value.findIndex((f: any) => f.uid === uploadFile.uid);
      if (index > -1) {
        titleFileList.value.splice(index, 1);
      }
      // 从 uploadFiles 中移除
      const uploadIndex = uploadFiles.findIndex((f: any) => f.uid === uploadFile.uid);
      if (uploadIndex > -1) {
        uploadFiles.splice(uploadIndex, 1);
      }
      // 如果文件有 blob URL，释放它
      if (uploadFile.url && uploadFile.url.startsWith("blob:")) {
        URL.revokeObjectURL(uploadFile.url);
      }
      ElMessage.warning("上传图片不得超过20M");
      return;
    }
  }

  const existingIndex = titleFileList.value.findIndex((f: any) => f.uid === uploadFile.uid);
  if (existingIndex === -1) {
    titleFileList.value.push(uploadFile);
  }

  const readyFiles = titleFileList.value.filter(file => file.status === "ready");
  if (readyFiles.length) {
    readyFiles.forEach(file => {
      if (!pendingUploadFiles.value.some(item => item.uid === file.uid)) {
        pendingUploadFiles.value.push(file);
      }
    });
  }
  processUploadQueue("title");
};

/**
 * 活动详情图片上传 - 文件变更
 */
const handleDetailUploadChange: UploadProps["onChange"] = async (uploadFile, uploadFiles) => {
  if (uploadFile.raw) {
    const fileType = uploadFile.raw.type.toLowerCase();
    const fileName = uploadFile.name.toLowerCase();
    const validTypes = ["image/jpeg", "image/jpg", "image/png"];
    const validExtensions = [".jpg", ".jpeg", ".png"];

    const isValidType = validTypes.includes(fileType) || validExtensions.some(ext => fileName.endsWith(ext));

    if (!isValidType) {
      // 从文件列表中移除不符合类型的文件
      const index = detailFileList.value.findIndex((f: any) => f.uid === uploadFile.uid);
      if (index > -1) {
        detailFileList.value.splice(index, 1);
      }
      // 从 uploadFiles 中移除
      const uploadIndex = uploadFiles.findIndex((f: any) => f.uid === uploadFile.uid);
      if (uploadIndex > -1) {
        uploadFiles.splice(uploadIndex, 1);
      }
      // 如果文件有 blob URL，释放它
      if (uploadFile.url && uploadFile.url.startsWith("blob:")) {
        URL.revokeObjectURL(uploadFile.url);
      }
      ElMessage.warning("只支持上传 JPG、JPEG 和 PNG 格式的图片");
      return;
    }

    // 检查文件大小，不得超过20M
    const maxSize = 20 * 1024 * 1024; // 20MB
    if (uploadFile.raw.size > maxSize) {
      // 从文件列表中移除超过大小的文件
      const index = detailFileList.value.findIndex((f: any) => f.uid === uploadFile.uid);
      if (index > -1) {
        detailFileList.value.splice(index, 1);
      }
      // 从 uploadFiles 中移除
      const uploadIndex = uploadFiles.findIndex((f: any) => f.uid === uploadFile.uid);
      if (uploadIndex > -1) {
        uploadFiles.splice(uploadIndex, 1);
      }
      // 如果文件有 blob URL，释放它
      if (uploadFile.url && uploadFile.url.startsWith("blob:")) {
        URL.revokeObjectURL(uploadFile.url);
      }
      ElMessage.warning("上传图片不得超过20M");
      return;
    }
  }

  const existingIndex = detailFileList.value.findIndex((f: any) => f.uid === uploadFile.uid);
  if (existingIndex === -1) {
    detailFileList.value.push(uploadFile);
  }

  const readyFiles = detailFileList.value.filter(file => file.status === "ready");
  if (readyFiles.length) {
    readyFiles.forEach(file => {
      if (!pendingUploadFiles.value.some(item => item.uid === file.uid)) {
        pendingUploadFiles.value.push(file);
      }
    });
  }
  processUploadQueue("detail");
};

/**
 * 处理上传队列 - 逐个上传文件
 */
const processUploadQueue = async (type: string) => {
  if (uploading.value || pendingUploadFiles.value.length === 0) {
    return;
  }
  const file = pendingUploadFiles.value.shift();
  if (file) {
    await uploadSingleFile(file, type);
    processUploadQueue(type);
  }
};

/**
 * 单文件上传图片
 */
const uploadSingleFile = async (file: UploadFile, uploadType: string) => {
  if (!file.raw) {
    return;
  }
  const rawFile = file.raw as File;
  const formData = new FormData();
  formData.append("file", rawFile);
  formData.append("user", "text");
  file.status = "uploading";
  file.percentage = 0;
  uploading.value = true;

  try {
    const result: any = await uploadContractImage(formData);
    if (result?.code === 200 && result.data) {
      let imageUrl = result.data[0];
      if (!imageUrl) {
        throw new Error("上传成功但未获取到图片URL");
      }

      file.status = "success";
      file.percentage = 100;
      file.url = imageUrl;
      file.response = { url: imageUrl };

      if (uploadType === "title") {
        titleImageUrl.value = imageUrl;
        activityModel.value.activityTitleImg = { url: imageUrl };
        activityModel.value.activityTitleImage = imageUrl;
        // 触发表单验证
        nextTick(() => {
          ruleFormRef.value?.validateField("activityTitleImage");
        });
      } else if (uploadType === "detail") {
        detailImageUrl.value = imageUrl;
        activityModel.value.activityDetailImg = { url: imageUrl };
        activityModel.value.activityDetailImage = imageUrl;
        // 触发表单验证
        nextTick(() => {
          ruleFormRef.value?.validateField("activityDetailImage");
        });
      }
    } else {
      throw new Error(result?.msg || "图片上传失败");
    }
  } catch (error: any) {
    // 上传失败时保持进度条为 0
    file.percentage = 0;
    // 不要设置 file.status = "fail"，直接移除文件，避免显示错误占位图
    if (file.url && file.url.startsWith("blob:")) {
      URL.revokeObjectURL(file.url);
    }
    // 从文件列表中移除失败的文件
    const index =
      uploadType === "title"
        ? titleFileList.value.findIndex((f: any) => f.uid === file.uid)
        : detailFileList.value.findIndex((f: any) => f.uid === file.uid);
    if (index > -1) {
      if (uploadType === "title") {
        titleFileList.value.splice(index, 1);
      } else {
        detailFileList.value.splice(index, 1);
      }
    }
    // Error message handled by global upload method, except for specific business logic errors
    if (error?.message && error.message.includes("未获取到图片URL")) {
      ElMessage.error(error.message);
    }
  } finally {
    uploading.value = false;
    // 触发视图更新
    if (uploadType === "title") {
      titleFileList.value = [...titleFileList.value];
    } else {
      detailFileList.value = [...detailFileList.value];
    }
  }
};

/**
 * 图片预览
 */
const handlePictureCardPreview = (file: any) => {
  if (isFilePending(file)) {
    ElMessage.warning("图片尚未上传，请等待上传完成后再预览");
    return;
  }
  if (file.status === "uploading" && file.url) {
    imageViewerUrlList.value = [file.url];
    imageViewerInitialIndex.value = 0;
    imageViewerVisible.value = true;
    return;
  }
  const allFiles = [...titleFileList.value, ...detailFileList.value];
  const urlList = allFiles
    .filter((item: any) => item.status === "success" && (item.url || item.response?.data))
    .map((item: any) => item.url || item.response?.data);
  const currentIndex = urlList.findIndex((url: string) => url === (file.url || file.response?.data));
  if (currentIndex < 0) {
    ElMessage.warning("图片尚未上传完成，无法预览");
    return;
  }
  imageViewerUrlList.value = urlList;
  imageViewerInitialIndex.value = currentIndex;
  imageViewerVisible.value = true;
};

// ==================== 监听器 ====================

/**
 * 监听活动类型变化，切换时清除相关数据并重新验证
 */
watch(
  () => activityModel.value.activityType,
  (newVal, oldVal) => {
    // 如果 oldVal 为空或 undefined，说明是初始化，不处理
    if (oldVal === undefined || oldVal === null || oldVal === "") return;
    // 如果新旧值相同，不处理
    if (newVal === oldVal) return;

    nextTick(() => {
      if (newVal === 1) {
        // 切换到评论有礼：清除营销活动相关字段
        activityModel.value.signupTimeRange = [];
        activityModel.value.activityLimitPeople = "";
        activityModel.value.activityDetails = "";
        // 清除营销活动字段的验证状态
        ruleFormRef.value?.clearValidate(["signupTimeRange", "activityLimitPeople", "activityDetails"]);
      } else if (newVal === 2) {
        // 切换到营销活动：清除评论有礼相关字段
        activityModel.value.participationLimit = "";
        activityModel.value.activityRule = [];
        activityModel.value.couponId = "";
        activityModel.value.couponQuantity = "";
        // 清除评论有礼字段的验证状态
        ruleFormRef.value?.clearValidate(["participationLimit", "activityRule", "couponId", "couponQuantity"]);
      }
    });
  },
  { immediate: false }
);

/**
 * 监听上传图片方式变化，切换时清除相关数据并重新验证
 */
watch(
  () => activityModel.value.uploadImgType,
  (newVal, oldVal) => {
    if (oldVal === undefined) return; // 初始化时不处理

    nextTick(() => {
      if (newVal === 2) {
        // 切换到使用描述：清除图片数据
        titleFileList.value = [];
        detailFileList.value = [];
        titleImageUrl.value = "";
        detailImageUrl.value = "";
        activityModel.value.activityTitleImg = null;
        activityModel.value.activityDetailImg = null;
        activityModel.value.activityTitleImage = null;
        activityModel.value.activityDetailImage = null;
        // 清除图片字段的验证
        ruleFormRef.value?.clearValidate(["activityTitleImage", "activityDetailImage"]);
        // 验证描述字段
        ruleFormRef.value?.validateField("imgDescribe");
      } else if (newVal === 1) {
        // 切换到正常用户：清除描述数据
        activityModel.value.imgDescribe = "";
        // 清除描述字段的验证
        ruleFormRef.value?.clearValidate("imgDescribe");
        // 验证图片字段
        ruleFormRef.value?.validateField(["activityTitleImage", "activityDetailImage"]);
      }
    });
  }
);

// ==================== 生命周期钩子 ====================

/**
 * 组件挂载时初始化
 */
onMounted(async () => {
  id.value = (route.query.id as string) || "";
  type.value = (route.query.type as string) || "";

  // 加载优惠券列表
  try {
    const params = {
      storeId: localGet("createdId"),
      groupType: localGet("businessSection"),
      couponType: "2",
      couponStatus: "1",
      couponsFromType: 1,
      pageNum: 1,
      pageSize: 99999
    };
    const res: any = await getCouponList(params);
    if (res && res.code == 200) {
      couponList.value = res.data?.discountList?.records || [];
    }
  } catch (error) {
    console.error("加载优惠券列表失败:", error);
  }

  // 加载活动规则级联选择器选项
  try {
    const res: any = await getActivityRuleOptions();
    console.log("ruleCascaderOptions:", res.data);
    if (res && res.code == 200) {
      ruleCascaderOptions.value = res.data || [];
    }
  } catch (error) {
    console.error("加载活动规则选项失败:", error);
  }

  // 编辑模式下加载数据
  if (type.value != "add" && id.value) {
    try {
      const res: any = await getActivityDetail({ id: id.value });
      if (res && res.code == 200) {
        activityModel.value = { ...activityModel.value, ...res.data };
        // 处理活动时间范围
        if (res.data.startTime && res.data.endTime) {
          activityModel.value.activityTimeRange = [res.data.startTime, res.data.endTime];
        }
        // 加载活动规则（评论有礼）
        if (res.data.activityRule) {
          activityModel.value.activityRule = res.data.activityRule.split(",");
        } else {
          activityModel.value.activityRule = [];
        }
        // 加载报名开始时间（营销活动）
        if (res.data.signupStartTime) {
          activityModel.value.signupStartTime = res.data.signupStartTime;
        }
        // 加载报名结束时间（营销活动）
        if (res.data.signupEndTime) {
          activityModel.value.signupEndTime = res.data.signupEndTime;
        }
        // 加载活动限制人数（营销活动）
        if (res.data.activityLimitPeople !== undefined) {
          activityModel.value.activityLimitPeople = res.data.activityLimitPeople;
        }
        // 加载活动详情（营销活动）
        if (res.data.activityDetails) {
          activityModel.value.activityDetails = res.data.activityDetails;
        }
        // 加载上传图片方式
        if (res.data.uploadImgType !== undefined) {
          activityModel.value.uploadImgType = res.data.uploadImgType;
        } else {
          activityModel.value.uploadImgType = 1; // 默认为正常用户
        }
        // 加载图片描述
        if (res.data.imgDescribe) {
          activityModel.value.imgDescribe = res.data.imgDescribe;
        } else {
          activityModel.value.imgDescribe = "";
        }
        // 根据上传图片方式决定是否加载图片数据
        if (activityModel.value.uploadImgType === 1) {
          // 如果有标题图片，添加到文件列表
          if (res.data.activityTitleImgUrl) {
            const titleImgUrl = res.data.activityTitleImgUrl;
            if (titleImgUrl) {
              titleImageUrl.value = titleImgUrl;
              activityModel.value.activityTitleImg = res.data.activityTitleImgUrl;
              activityModel.value.activityTitleImage = titleImgUrl;
              const titleFile = handleImageParam(titleImgUrl);
              titleFileList.value = [titleFile];
            }
          }
          // 如果有详情图片，添加到文件列表
          if (res.data.activityDetailImgUrl) {
            const detailImgUrl = res.data.activityDetailImgUrl;
            if (detailImgUrl) {
              detailImageUrl.value = detailImgUrl;
              activityModel.value.activityDetailImg = res.data.activityDetailImgUrl;
              activityModel.value.activityDetailImage = detailImgUrl;
              const detailFile = handleImageParam(detailImgUrl);
              detailFileList.value = [detailFile];
            }
          }
        }
      }
    } catch (error) {
      console.error("加载活动详情失败:", error);
      ElMessage.error("加载活动详情失败");
    }
  }
  await nextTick();
  ruleFormRef.value?.clearValidate();
});

// ==================== 事件处理函数 ====================

/**
 * 返回上一页
 */
const goBack = () => {
  router.go(-1);
};

/**
 * 提交表单
 */
const handleSubmit = async () => {
  if (!ruleFormRef.value) return;

  // 如果选择正常用户方式且有未上传的图片，阻止提交
  if (activityModel.value.uploadImgType === 1 && hasUnuploadedImages.value) {
    ElMessage.warning("请等待图片上传完成后再提交");
    return;
  }

  await ruleFormRef.value.validate(async valid => {
    if (valid) {
      const [startTime, endTime] = activityModel.value.activityTimeRange || [];
      const auditParam = {
        text: `${activityModel.value.activityName}, ${activityModel.value.imgDescribe || ""}`,
        image_urls: [titleImageUrl.value, detailImageUrl.value]
      };
      const params: any = {
        activityType: activityModel.value.activityType,
        activityName: activityModel.value.activityName,
        startTime: startTime,
        endTime: endTime,
        uploadImgType: activityModel.value.uploadImgType,
        storeId: localGet("createdId"),
        groupType: localGet("businessSection"),
        status: 1, // 1-待审核
        auditParam: JSON.stringify(auditParam)
      };

      // 根据活动类型添加不同的字段，确保只提交对应类型的字段
      if (activityModel.value.activityType === 1) {
        // 评论有礼：只添加评论有礼相关字段
        params.participationLimit = activityModel.value.participationLimit;
        params.activityRule = activityModel.value.activityRule.join(",");
        params.couponId = activityModel.value.couponId;
        params.couponQuantity = activityModel.value.couponQuantity;
        // 确保不包含营销活动的字段
        delete params.signupStartTime;
        delete params.signupEndTime;
        delete params.activityLimitPeople;
        delete params.activityDetails;
      } else if (activityModel.value.activityType === 2) {
        // 营销活动：只添加营销活动相关字段
        const [signupStartTime, signupEndTime] = activityModel.value.signupTimeRange || [];
        params.signupStartTime = signupStartTime;
        params.signupEndTime = signupEndTime;
        params.activityLimitPeople = activityModel.value.activityLimitPeople;
        params.activityDetails = activityModel.value.activityDetails;
        // 确保不包含评论有礼的字段
        delete params.participationLimit;
        delete params.activityRule;
        delete params.couponId;
        delete params.couponQuantity;
      }

      // 根据上传图片方式设置不同的参数
      if (activityModel.value.uploadImgType === 1) {
        // 正常用户：上传图片
        params.activityTitleImg = {
          imgUrl: titleImageUrl.value,
          imgSort: 0,
          storeId: localGet("createdId")
        };
        params.activityDetailImg = {
          imgUrl: detailImageUrl.value,
          imgSort: 0,
          storeId: localGet("createdId")
        };
      } else if (activityModel.value.uploadImgType === 2) {
        // 使用描述：提交描述文本，但依然保留图片字段，imgUrl为空
        params.imgDescribe = activityModel.value.imgDescribe;
        params.activityTitleImg = {
          imgUrl: "",
          imgSort: 0,
          storeId: localGet("createdId")
        };
        params.activityDetailImg = {
          imgUrl: "",
          imgSort: 0,
          storeId: localGet("createdId")
        };
      }

      try {
        let res: any;
        if (type.value == "add") {
          res = await addActivity(params);
        } else {
          params.id = id.value;
          res = await updateActivity(params);
        }

        if (res && res.code == 200) {
          ElMessage.success(type.value == "add" ? "新增成功" : "编辑成功");
          goBack();
        } else {
          ElMessage.error(res?.msg || "操作失败");
        }
      } catch (error) {
        console.error("提交失败:", error);
        ElMessage.error("操作失败");
      }
    }
  });
};
</script>

<style lang="scss" scoped>
/* 页面容器 */
.table-box {
  display: flex;
  flex-direction: column;
  height: auto !important;
  min-height: 100%;
}

/* 头部区域 */
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 24px;
  background-color: #ffffff;
  border-bottom: 1px solid #e4e7ed;
  box-shadow: 0 2px 4px rgb(0 0 0 / 2%);
}
.title {
  flex: 1;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  text-align: center;
}

/* 表单内容区域 */
.form-content {
  padding: 24px;
  background-color: #ffffff;
}

/* 表单包装器 */
.form-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ffffff;
  .form-wrapper-main {
    width: 100%;
    max-width: 800px;
  }
}

/* 上传项容器 */
.upload-item-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
}
.upload-hint {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: #909399;
}

/* 规则表格容器 */
.rule-table-container {
  margin-top: 20px;
}

/* 底部按钮区域 */
.button-container {
  display: flex;
  gap: 20px;
  justify-content: center;
  padding-bottom: 15px;
  background-color: #ffffff;
}
.upload-area {
  width: 100%;
  :deep(.el-upload--picture-card) {
    width: 100%;
    height: 180px;
  }
  :deep(.el-upload-list--picture-card) {
    width: 100%;
    .el-upload-list__item {
      width: 100%;
      height: 180px;
      margin: 0;
    }
  }
  :deep(.el-upload-list--picture-card .el-upload-list__item:hover .el-upload-list__item-status-label) {
    display: inline-flex !important;
    opacity: 1 !important;
  }
  :deep(.el-upload-list__item.is-success:focus .el-upload-list__item-status-label) {
    display: inline-flex !important;
    opacity: 1 !important;
  }
  :deep(.el-upload-list--picture-card .el-icon--close-tip) {
    display: none !important;
  }
  &.upload-full {
    :deep(.el-upload--picture-card) {
      display: none !important;
    }
  }

  // 21:9横向图片样式
  &.upload-area-horizontal-21-9 {
    :deep(.el-upload--picture-card) {
      width: 100%;
      height: auto;
      aspect-ratio: 21 / 9;
    }
    :deep(.el-upload-list--picture-card) {
      width: 100%;
      .el-upload-list__item {
        width: 100%;
        height: auto;
        aspect-ratio: 21 / 9;
        margin: 0;
      }
    }
  }

  // 竖版图片样式
  &.upload-area-vertical {
    max-width: 300px;
    :deep(.el-upload--picture-card) {
      width: 100%;
      height: 400px;
      aspect-ratio: 3 / 4;
    }
    :deep(.el-upload-list--picture-card) {
      width: 100%;
      .el-upload-list__item {
        width: 100%;
        height: 400px;
        aspect-ratio: 3 / 4;
        margin: 0;
      }
    }
  }
}
.upload-trigger-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 28px;
  color: #8c939d;
}

/* el-upload 图片预览铺满容器 */
:deep(.el-upload-list--picture-card) {
  .el-upload-list__item {
    margin: 0;
    overflow: hidden;
    .el-upload-list__item-thumbnail {
      width: 100%;
      height: 100%;

      //object-fit: fill;
    }
  }
  .el-upload-list__item[data-status="ready"],
  .el-upload-list__item.is-ready {
    position: relative;
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.6;
    &::after {
      position: absolute;
      inset: 0;
      z-index: 1;
      content: "";
      background-color: rgb(0 0 0 / 30%);
    }
    .el-upload-list__item-actions {
      pointer-events: none;
      opacity: 0.5;
    }
  }
  .el-upload-list__item:hover .el-upload-list__item-status-label {
    display: inline-flex !important;
    opacity: 1 !important;
  }
  .el-upload-list__item.is-success:focus .el-upload-list__item-status-label {
    display: inline-flex !important;
    opacity: 1 !important;
  }
  .el-icon--close-tip {
    display: none !important;
  }
}
</style>