group_web_merchant/src/views/operationManagement/activityDetail.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">运营活动详情</h2>
    </div>
    <div class="content">
      <!-- 左侧内容区域 -->
      <div class="contentLeft">
        <!-- 基础信息模块 -->
        <div class="model">
          <h3 style="font-weight: bold">基础信息：</h3>
          <!-- 活动名称 -->
          <div class="detail-item">
            <div class="detail-label">活动名称</div>
            <div class="detail-value">
              {{ activityModel.activityName || "--" }}
            </div>
          </div>
          <!-- 活动时间 -->
          <div class="detail-item">
            <div class="detail-label">活动时间</div>
            <div class="detail-value">
              <span v-if="activityModel.startTime && activityModel.endTime">
                {{ formatDate(activityModel.startTime) }} - {{ formatDate(activityModel.endTime) }}
              </span>
              <span v-else>--</span>
            </div>
          </div>
          <!-- 用户可参与次数 -->
          <div class="detail-item">
            <div class="detail-label">用户可参与次数</div>
            <div class="detail-value">
              {{ activityModel.participationLimit || "--" }}
            </div>
          </div>
          <!-- 活动规则 -->
          <div class="detail-item">
            <div class="detail-label">活动规则</div>
            <div class="detail-value">
              {{ getRuleDisplayText(activityModel.activityRule) || "--" }}
            </div>
          </div>
          <!-- 优惠券名称 -->
          <div class="detail-item">
            <div class="detail-label">优惠券</div>
            <div class="detail-value">
              {{ activityModel.couponName || "--" }}
            </div>
          </div>
          <!-- 优惠券发放数量 -->
          <div class="detail-item">
            <div class="detail-label">优惠券发放数量</div>
            <div class="detail-value">
              {{ activityModel.couponQuantity || "--" }}
            </div>
          </div>
          <!-- 状态 -->
          <div class="detail-item">
            <div class="detail-label">状态</div>
            <div class="detail-value">
              {{ getStatusLabel(activityModel.status) }}
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧内容区域 -->
      <div class="contentRight">
        <!-- 活动宣传图模块 -->
        <div class="model">
          <div class="promotion-images-container">
            <!-- 活动标题图 -->
            <div class="promotion-image-item">
              <h3 style="font-weight: bold">活动标题图：</h3>
              <div class="image-container">
                <div v-if="getImageUrl(activityModel.activityTitleImgUrl)" class="image-item">
                  <el-image
                    :src="getImageUrl(activityModel.activityTitleImgUrl)"
                    fit=""
                    class="promotion-image"
                    :preview-src-list="getPreviewImageList()"
                    :initial-index="0"
                  >
                    <template #error>
                      <div class="image-slot">
                        <el-icon><Picture /></el-icon>
                      </div>
                    </template>
                  </el-image>
                </div>
                <div v-else class="empty-text">--</div>
              </div>
            </div>
            <!-- 活动详情图 -->
            <div class="promotion-image-item">
              <h3 style="font-weight: bold">活动详情图：</h3>
              <div class="image-container">
                <div v-if="getImageUrl(activityModel.activityDetailImgUrl)" class="image-item">
                  <el-image
                    :src="getImageUrl(activityModel.activityDetailImgUrl)"
                    fit=""
                    class="promotion-image"
                    :preview-src-list="getPreviewImageList()"
                    :initial-index="getImageUrl(activityModel.activityTitleImgUrl) ? 1 : 0"
                  >
                    <template #error>
                      <div class="image-slot">
                        <el-icon><Picture /></el-icon>
                      </div>
                    </template>
                  </el-image>
                </div>
                <div v-else class="empty-text">--</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="tsx" name="activityDetail">
/**
 * 运营活动管理 - 详情页面
 * 功能：显示运营活动的详细信息
 */
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { Picture } from "@element-plus/icons-vue";
import { getActivityDetail } from "@/api/modules/operationManagement";

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

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

// 页面ID参数
const id = ref<string>("");

// ==================== 活动信息数据模型 ====================
const activityModel = ref<any>({
  // 活动名称
  activityName: "",
  // 活动开始时间
  startTime: "",
  // 活动结束时间
  endTime: "",
  // 用户可参与次数
  participationLimit: 0,
  // 活动规则
  activityRule: "",
  // 优惠券ID
  couponId: "",
  // 优惠券名称
  couponName: "",
  // 优惠券发放数量
  couponQuantity: 0,
  // 活动标题图片
  activityTitleImgUrl: null,
  // 活动详情图片
  activityDetailImgUrl: null,
  // 状态
  status: 0
});

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

/**
 * 组件挂载时初始化
 * 从路由参数中获取ID并加载详情数据
 */
onMounted(async () => {
  id.value = (route.query.id as string) || "";
  if (id.value) {
    await loadDetailData();
  } else {
    ElMessage.warning("缺少活动ID参数");
  }
});

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

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

// ==================== 数据加载函数 ====================

/**
 * 加载详情数据
 */
const loadDetailData = async () => {
  try {
    const res: any = await getActivityDetail({ id: id.value });
    if (res && res.code == 200) {
      // 合并主数据
      activityModel.value = { ...activityModel.value, ...res.data };
    } else {
      ElMessage.error("加载详情数据失败");
    }
  } catch (error) {
    console.error("加载详情数据出错:", error);
    ElMessage.error("加载详情数据出错");
  }
};

// ==================== 工具函数 ====================

/**
 * 格式化日期
 * @param date 日期字符串 (YYYY-MM-DD)
 * @returns 格式化后的日期字符串 (YYYY/MM/DD)
 */
const formatDate = (date: string) => {
  if (!date) return "--";
  return date.replace(/-/g, "/");
};

/**
 * 获取状态标签
 */
const getStatusLabel = (status: number) => {
  const statusMap: Record<number, string> = {
    1: "待审核",
    2: "未开始",
    3: "审核驳回",
    5: "进行中",
    6: "已下架",
    7: "已结束"
  };
  return statusMap[status] || "--";
};

/**
 * 获取活动规则显示文本
 */
const getRuleDisplayText = (ruleValue: any) => {
  if (!ruleValue) return "--";

  // 如果是字符串，尝试解析为数组
  let ruleArray: any[] = [];
  if (typeof ruleValue === "string") {
    try {
      ruleArray = JSON.parse(ruleValue);
    } catch {
      return ruleValue.replace(/,/g, " / ");
    }
  } else if (Array.isArray(ruleValue)) {
    ruleArray = ruleValue;
  } else {
    return ruleValue.replace(/,/g, " / ");
  }

  // 将数组转换为显示文本，用 " / " 连接
  if (ruleArray && ruleArray.length > 0) {
    return ruleArray.filter(item => item).join(" / ");
  }

  return "--";
};

/**
 * 获取图片URL（支持对象和字符串格式）
 */
const getImageUrl = (img: any): string => {
  if (!img) return "";
  if (typeof img === "string") return img;
  if (img.url) return img.url;
  return "";
};

/**
 * 获取预览图片列表
 */
const getPreviewImageList = () => {
  const list: string[] = [];
  const titleUrl = getImageUrl(activityModel.value.activityTitleImgUrl);
  const detailUrl = getImageUrl(activityModel.value.activityDetailImgUrl);
  if (titleUrl) {
    list.push(titleUrl);
  }
  if (detailUrl) {
    list.push(detailUrl);
  }
  return list;
};
</script>

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

/* 头部区域 */
.header {
  display: flex;
  align-items: 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;
}

/* 内容区域布局 */
.content {
  display: flex;
  flex: 1;
  column-gap: 24px;
  width: 100%;
  max-width: 800px;
  padding: 24px;
  margin: 0 auto;
  background-color: #ffffff;
  .contentLeft {
    width: 50%;
    padding-right: 12px;
  }
  .contentRight {
    width: 50%;
    padding-left: 12px;
  }
}

/* 模块容器 */
.model {
  margin-bottom: 50px;
  h3 {
    width: 100%;
    padding-bottom: 12px;
    margin: 0 0 20px;
    font-size: 16px;
    color: #303133;
    border-bottom: 2px solid #e4e7ed;
  }
}

/* 详情项样式 */
.detail-item {
  display: flex;
  align-items: flex-start;
  min-height: 32px;
  margin-bottom: 24px;
}
.detail-label {
  flex-shrink: 0;
  width: 140px;
  font-size: 14px;
  font-weight: 500;
  line-height: 32px;
  color: #606266;
}
.detail-value {
  flex: 1;
  font-size: 14px;
  line-height: 32px;
  color: #303133;
  word-break: break-word;
}

/* 活动宣传图容器 */
.promotion-images-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
}
.promotion-image-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  .image-label {
    font-size: 14px;
    font-weight: 500;
    color: #409eff;
  }
}

/* 图片容器样式 */
.image-container {
  width: 100%;
  min-height: 100px;
}
.image-item {
  width: 100%;
}
.promotion-image {
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgb(0 0 0 / 10%);
}
.empty-text {
  padding: 20px 0;
  font-size: 14px;
  color: #909399;
}

/* 活动标题图 - 21:9横向样式 */
.promotion-image-item:first-child {
  .image-container {
    width: 100%;
  }
  .image-item {
    width: 100%;
    aspect-ratio: 21 / 9;
  }
  .promotion-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

/* 活动详情图 - 竖版样式 */
.promotion-image-item:last-child {
  .image-container {
    width: 100%;
    max-width: 300px;
  }
  .image-item {
    width: 100%;
    aspect-ratio: 3 / 4;
  }
  .promotion-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
.image-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 200px;
  font-size: 30px;
  color: var(--el-text-color-placeholder);
  background: var(--el-fill-color-light);
}
</style>