lilishop-ui/manager/src/views/promotions/coupon-activity/coupon-info.vue

<template>
  <div class="detail-page">
    <t-card style="margin-bottom: 12px">
      <div class="detail-section">
        <div class="detail-title">优惠券活动详情</div>
        <div class="detail-grid">
          <div class="detail-row">
            <div class="label">活动名称</div>
            <div class="value">{{ couponActivity.promotionName }}</div>
          </div>
          <div class="detail-row">
            <div class="label">活动类型</div>
            <div class="value">
              <span v-if="couponActivity.couponActivityType === 'REGISTERED'">新人发券</span>
              <span v-else-if="couponActivity.couponActivityType === 'AUTO_COUPON'">自动发券</span>
              <span v-else>精确发券</span>
            </div>
          </div>
          <div class="detail-row" v-if="couponActivity.couponFrequencyEnum">
            <div class="label">领取频率</div>
            <div class="value">
              <span v-if="couponActivity.couponFrequencyEnum === 'DAY'">每日</span>
              <span v-else-if="couponActivity.couponFrequencyEnum === 'WEEK'">每周一次</span>
              <span v-else>每月一次</span>
            </div>
          </div>
          <div class="detail-row" v-if="couponActivity.couponActivityType === 'SPECIFY' || couponActivity.couponActivityType === 'AUTO_COUPON'">
            <div class="label">活动范围</div>
            <div class="value">
              <span v-if="couponActivity.activityScope === 'ALL'">全部会员</span>
              <span v-else>指定会员</span>
            </div>
          </div>
          <div class="detail-row">
            <div class="label">活动时间</div>
            <div class="value">{{ couponActivity.startTime }}～{{ couponActivity.endTime }}</div>
          </div>
          <div class="detail-row">
            <div class="label">活动状态</div>
            <div class="value">
              <t-tag v-if="couponActivity.promotionStatus === 'NEW'" theme="primary" size="small" variant="light">未开始</t-tag>
              <t-tag v-else-if="couponActivity.promotionStatus === 'START'" theme="success" size="small" variant="light">已开始</t-tag>
              <t-tag v-else-if="couponActivity.promotionStatus === 'END'" theme="danger" size="small" variant="light">已结束</t-tag>
              <t-tag v-else-if="couponActivity.promotionStatus === 'CLOSE'" theme="danger" size="small" variant="light">已关闭</t-tag>
              <t-tag v-else size="small" variant="light">未知</t-tag>
            </div>
          </div>
        </div>
      </div>
    </t-card>

    <t-card style="margin-bottom: 12px">
      <div class="detail-section">
        <div class="detail-title">优惠券列表</div>
        <t-table :columns="couponColumn" :data="couponData" rowKey="id"></t-table>
      </div>
    </t-card>

    <t-card v-if="couponActivity.activityScopeInfo && memberData.length > 0">
      <div class="detail-section">
        <div class="detail-title">会员列表</div>
        <t-table :columns="memberColumn" :data="memberData" rowKey="id"></t-table>
      </div>
    </t-card>

    <div class="mt_10" style="display: flex; justify-content: flex-end">
      <t-button variant="text" @click="back">返回活动列表</t-button>
    </div>
  </div>
</template>

<script>
import { getCouponActivity } from "@/api/promotion";
import { MessagePlugin } from "tdesign-vue";

export default {
  name: "coupon-activity-info",
  data() {
    return {
      id: this.$route.query.id, //表单id
      couponActivity: {}, //券活动
      couponColumn: [
        { title: "优惠券名称", colKey: "couponName" },
        { title: "优惠券金额", colKey: "price", cell: (h, { row }) => row.couponType === 'DISCOUNT' ? h('div', [row.couponDiscount + '折']) : row.couponType === 'PRICE' ? h('priceColorScheme', { props: { value: row.price, color: this.$mainColor } }) : h('div', ['未知']) },
        { title: "优惠券类型", colKey: "couponType", cell: (h, { row }) => row.couponType === 'DISCOUNT' ? h('div', ['打折']) : row.couponType === 'PRICE' ? h('div', ['减免现金']) : h('div', ['未知']) },
        { title: "赠送数量", colKey: "num" },
      ],
      couponData: [],
      memberColumn: [
        { title: "会员id", colKey: "id" },
        { title: "昵称", colKey: "nickName" },
      ],
      memberData: [],
    };
  },
  mounted() {
    this.getCouponActivity();
  },
  methods: {
    //获取优惠券活动
    getCouponActivity() {
      getCouponActivity(this.id).then((res) => {
        this.couponActivity = res.result;
        this.couponData = this.couponActivity.couponActivityItems;
        this.memberData = JSON.parse(this.couponActivity.activityScopeInfo);
      });
    },
    back() {
      this.$store.commit("removeTag", "coupon-activity");
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.detail-title {
  margin-bottom: 10px;
  padding: 0 10px;
  border: 1px solid #ddd;
  background-color: #f8f8f8;
  font-weight: bold;
  color: #333;
  font-size: 14px;
  line-height: 40px;
  text-align: left;
}
.detail-grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  grid-row-gap: 12px;
  grid-column-gap: 16px;
}
.detail-row .label {
  color: #666;
}
.detail-row .value {
  color: #333;
}
</style>