group_web_merchant/src/views/dynamicManagement/friendCouponDetail.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.storeName || "--" }}
            </div>
          </div>
          <!-- 类型 -->
          <div class="detail-item">
            <div class="detail-label">类型</div>
            <div class="detail-value">
              {{ getCouponTypeText(couponModel.couponType) }}
            </div>
          </div>
          <!-- 优惠券名称 -->
          <div class="detail-item">
            <div class="detail-label">优惠券名称</div>
            <div class="detail-value">
              {{ couponModel.couponName || couponModel.name || "--" }}
            </div>
          </div>
          <!-- 面值 -->
          <div class="detail-item">
            <div class="detail-label">面值</div>
            <div class="detail-value" v-if="couponId">
              {{ formatCurrency(couponModel.nominalValue, 2, "￥") }}
            </div>
            <div class="detail-value" v-else>
              {{ formatCurrency(couponModel.nominalValue ?? couponModel.price, 2, "￥") }}
            </div>
          </div>
          <!-- 数量 -->
          <div class="detail-item">
            <div class="detail-label">数量</div>
            <div class="detail-value">
              {{ couponModel.couponNum ?? couponModel.singleQty ?? "--" }}
            </div>
          </div>
          <!-- 结束时间 -->
          <div class="detail-item">
            <div class="detail-label">结束时间</div>
            <div class="detail-value" v-if="couponId">
              {{ couponModel.endGetDate || "--" }}
            </div>
            <div class="detail-value" v-else>
              {{ couponModel.endDate || "--" }}
            </div>
          </div>
          <!-- 有效期 -->
          <div class="detail-item">
            <div class="detail-label">有效期</div>
            <div class="detail-value">
              {{ couponModel.validityPeriod || couponModel.endDate || "--" }}
            </div>
          </div>
          <!-- 最低消费金额（保留原有） -->
          <div class="detail-item">
            <div class="detail-label">最低消费金额</div>
            <div class="detail-value">
              {{ formatCurrency(couponModel.minimumSpendingAmount, 2, "￥") }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

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

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

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

// 优惠券类型（好友赠我 friendMessage / 我赠好友 myGift）
const type = ref<string>("");

// ==================== 优惠券信息数据模型 ====================
const couponModel = ref<any>({
  // 账户名称（赠送人/接收人）
  acName: "",
  // 优惠券名称
  couponName: "",
  // 优惠券数量
  couponNum: 0,
  // 删除标志
  deleteFlag: 0,
  // 结束日期
  endDate: "",
  // ID
  id: 0,
  // 图片URL
  imgUrl: "",
  // 详细列表
  lifeDiscountCouponFriendRuleDetailVos: [],
  // 最低消费金额
  minimumSpendingAmount: 0,
  // 金额上限
  moneyHigh: 0,
  // 金额下限
  moneyLow: 0,
  // 面值
  nominalValue: 0,
  // 状态
  status: "",
  // 店铺ID
  storeId: 0,
  // 店铺名称
  storeName: ""
});

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

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

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

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

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

/**
 * 加载详情数据
 */
const loadDetailData = async () => {
  try {
    if (voucherId.value) {
      const res: any = await getCouponDetail({
        id: voucherId.value
      });
      if (res.code === 200) {
        couponModel.value = res.data;
        console.log(couponModel.value, "couponModel.value");
      } else {
        ElMessage.error(res.msg);
      }
    } else if (couponId.value) {
      // 使用 couponId 获取详情数据
      const res: any = await getFriendCouponDetail({
        counponId: couponId.value
      });

      if (res.code === 200) {
        couponModel.value = res.data;
      } else {
        ElMessage.error(res.msg);
      }
    }
  } catch (error) {
    ElMessage.error("加载详情数据出错");
  }
};

/**
 * 获取优惠券类型文案
 */
const getCouponTypeText = (type: number | string | undefined) => {
  const typeMap: Record<string, string> = { "1": "折扣券", "2": "满减券" };
  return type != null ? (typeMap[String(type)] ?? String(type)) : "--";
};

/**
 * 获取状态文本
 */
const getStatusText = () => {
  const statusMap: Record<string, string> = {
    "0": "未使用",
    "1": "已使用",
    "2": "已过期"
  };
  return statusMap[couponModel.value.status] || "--";
};
</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;
  }
}

/* 详情项样式 */
.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;
}

/* 详情卡片样式 */
.detail-card {
  padding: 16px;
  margin-bottom: 16px;
  background-color: #f5f7fa;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}
</style>