group_web_merchant/src/views/ticketManagement/couponDetail.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">
              {{ couponModel.name || "--" }}
            </div>
          </div>
          <!-- 面值 -->
          <div class="detail-item">
            <div class="detail-label">面值(元)</div>
            <div class="detail-value">
              {{ formatCurrency(couponModel.nominalValue, 2, "￥") }}
            </div>
          </div>
          <!-- 开始领取时间 -->
          <div class="detail-item">
            <div class="detail-label">开始领取时间</div>
            <div class="detail-value">
              {{ couponModel.beginGetDate ? formatDate(couponModel.beginGetDate) : "--" }}
            </div>
          </div>
          <!-- 结束领取时间 -->
          <div class="detail-item">
            <div class="detail-label">结束领取时间</div>
            <div class="detail-value">
              {{ couponModel.endGetDate ? formatDate(couponModel.endGetDate) : "--" }}
            </div>
          </div>
          <!-- 有效期 -->
          <div class="detail-item">
            <div class="detail-label">有效期</div>
            <div class="detail-value">
              {{ couponModel.specifiedDay ? `${couponModel.specifiedDay}天` : "--" }}
            </div>
          </div>
          <!-- 库存 -->
          <div class="detail-item">
            <div class="detail-label">库存</div>
            <div class="detail-value">
              {{ couponModel.singleQty || "--" }}
            </div>
          </div>
        </div>
        <!-- 领取规则模块 -->
        <div class="model">
          <h3 style="font-weight: bold">领取规则：</h3>
          <!-- 用户领取规则 -->
          <div class="detail-item">
            <div class="detail-label">用户领取规则</div>
            <div class="detail-value">
              {{ getClaimRuleText() }}
            </div>
          </div>
          <!-- 用户是否需要收藏店铺领取 -->
          <div class="detail-item">
            <div class="detail-label">用户是否需要收藏店铺领取</div>
            <div class="detail-value">
              {{ couponModel.attentionCanReceived === 1 ? "是" : couponModel.attentionCanReceived === 0 ? "否" : "--" }}
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧内容区域 -->
      <div class="contentRight">
        <!-- 使用规则模块 -->
        <div class="model">
          <h3 style="font-weight: bold">使用规则：</h3>
          <!-- 是否有低消 -->
          <div class="detail-item">
            <div class="detail-label">是否有低消</div>
            <div class="detail-value">
              {{ couponModel.hasMinimumSpend === 1 ? "是" : couponModel.hasMinimumSpend === 0 ? "否" : "--" }}
            </div>
          </div>
          <!-- 最低消费金额 -->
          <div class="detail-item" v-if="couponModel.hasMinimumSpend === 1">
            <div class="detail-label">最低消费金额</div>
            <div class="detail-value">
              {{ formatCurrency(couponModel.minimumSpendingAmount, 2, "￥") }}
            </div>
          </div>
          <!-- 补充说明 -->
          <div class="detail-item">
            <div class="detail-label">补充说明</div>
            <div class="detail-value" v-html="couponModel.supplementaryInstruction || '--'" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="tsx" name="couponManagementDetail">
/**
 * 优惠券管理 - 详情页面
 * 功能：显示优惠券的详细信息
 */
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { getCouponDetail } from "@/api/modules/couponManagement";
import { formatCurrency } from "@/utils/formatCurrency";

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

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

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

// ==================== 优惠券信息数据模型 ====================
const couponModel = ref<any>({
  // 优惠券名称
  name: "",
  // 面值(元)
  nominalValue: "",
  // 开始领取时间
  beginGetDate: "",
  // 结束领取时间
  endGetDate: "",
  // 有效期
  specifiedDay: "",
  // 库存
  singleQty: "",
  // 用户领取规则：day-每日一领，week-每周一领，month-每月一领
  claimRule: "day",
  // 用户是否需要收藏店铺领取：1-是，0-否
  attentionCanReceived: 0,
  // 是否有低消：1-是，0-否
  hasMinimumSpend: 0,
  // 最低消费金额
  minimumSpendingAmount: "",
  // 补充说明
  supplementaryInstruction: ""
});

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

/**
 * 组件挂载时初始化
 * 从路由参数中获取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 getCouponDetail({ counponId: id.value });
    if (res && res.code == 200) {
      // 合并主数据
      couponModel.value = { ...couponModel.value, ...res.data };
      // 根据最低消费金额设置是否有低消
      const amount = Number(couponModel.value.minimumSpendingAmount);
      if (!isNaN(amount) && amount > 0) {
        couponModel.value.hasMinimumSpend = 1;
      } else {
        couponModel.value.hasMinimumSpend = 0;
      }
    } 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 getClaimRuleText = () => {
  const ruleMap: Record<string, string> = {
    day: "每日一领",
    week: "每周一领",
    month: "每月一领"
  };
  return ruleMap[couponModel.value.claimRule] || "--";
};
</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: 98%;
  padding: 0 12px;
  margin: 24px auto;

  /* 左侧内容区域 */
  .contentLeft {
    width: 50%;
    padding-right: 12px;
  }

  /* 右侧内容区域 */
  .contentRight {
    width: 50%;
    padding-left: 12px;
  }
}

/* 模块容器 */
.model {
  margin-bottom: 50px;
  h3 {
    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;
  min-width: 200px;
  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;
}
.empty-text {
  color: #909399;
}
</style>