ylrz_his_scrm_adminUI/src/views/components/his/couponDetails.vue

<template>
    <div style="background-color: #f0f2f5; padding-bottom: 20px; min-height: 100%; " >
      <div style="padding: 20px; background-color: #fff;">
         优惠劵详情
      </div>
<div class="contentx" v-if="item!=null">
        <div class="desct"> 优惠劵信息</div>
        <el-descriptions title="" :column="3" border>
          <el-descriptions-item label="标题"><span v-if="item!=null">{{item.title}}</span></el-descriptions-item>
          <el-descriptions-item label="面额"><span v-if="item!=null">{{item.price}}</span></el-descriptions-item>
          <el-descriptions-item label="数量"><span v-if="item!=null">{{item.number}}</span></el-descriptions-item>
           <el-descriptions-item label="卷类型"><span v-if="item!=null">{{item.couponType}}</span></el-descriptions-item>
          <el-descriptions-item label="最低消费金额可用"><span v-if="item!=null">{{item.minPrice}}</span></el-descriptions-item>
          <el-descriptions-item label="剩余数量"><span v-if="item!=null">{{item.remainNumber}}</span></el-descriptions-item>
          <el-descriptions-item label="有效期"><span v-if="item!=null">{{item.limitTime}}</span></el-descriptions-item>
          <el-descriptions-item label="状态"><span v-if="item!=null"> <dict-tag :options="statusOptions" :value="item.status"/></span></el-descriptions-item>
          <el-descriptions-item label="卷类型"><span v-if="item!=null"> <dict-tag :options="couponTypeOptions" :value="item.couponType"/></span></el-descriptions-item>
          <el-descriptions-item label="logo" v-if="item.logo">
            <template>
              <el-popover
                placement="right"
                title=""
                trigger="hover">
                <img slot="reference" :src="item.logo" width="50">
                <img :src="item.logo" style="max-width: 150px;">
              </el-popover>
            </template>
          </el-descriptions-item>
          <el-descriptions-item label="项目归属" v-if="item.projectId && (item.couponType === 5 || item.couponType === 6)">
            <dict-tag :options="projects" :value="item.projectId"/>
          </el-descriptions-item>
        </el-descriptions>
    </div>

    <!-- 积分商品展示 - 仅当优惠券类型为7时显示 -->
    <div class="contentx" v-if="item!=null && item.couponType === 7 && integralGoods">
        <div class="desct">免单积分商品</div>
        <el-table border width="100%" style="margin-top:5px;" :data="[integralGoods]">
            <el-table-column label="商品ID" align="center" prop="goodsId" />
            <el-table-column label="商品图片" align="center" width="100">
                <template slot-scope="scope">
                    <el-popover
                        placement="right"
                        title=""
                        trigger="hover">
                        <img slot="reference" :src="scope.row.imgUrl" width="50" v-if="scope.row.imgUrl">
                        <img :src="scope.row.imgUrl" style="max-width: 100px;" v-if="scope.row.imgUrl">
                        <div v-else style="width: 50px; height: 50px; background-color: #f5f5f5; display: flex; align-items: center; justify-content: center;">
                            <span style="color: #999; font-size: 12px;">无图片</span>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="商品名称" show-overflow-tooltip align="center" prop="goodsName" />
            <el-table-column label="商品编号" align="center" prop="barCode" />
            <el-table-column label="所需积分" align="center" prop="integral" />
            <el-table-column label="商品价格" align="center" prop="cash">
                <template slot-scope="scope">
                    <div v-if="scope.row.cash != null">
                        {{scope.row.cash.toFixed(2)}}
                    </div>
                    <div v-else>-</div>
                </template>
            </el-table-column>
            <el-table-column label="库存数量" align="center" prop="stock" />
            <el-table-column label="商品状态" align="center" prop="status">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
                        {{scope.row.status === 1 ? '上架' : '下架'}}
                    </el-tag>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <div class="contentx" v-if="item!=null">
            <div class="desct"> 优惠劵领取信息</div>
            <el-tabs type="card" v-model="actName" @tab-click="handleClickX">
              <el-tab-pane label="全部" name="10"></el-tab-pane>
              <el-tab-pane v-for="(item,index) in couponStatusOptions" :label="item.dictLabel" :name="item.dictValue"></el-tab-pane>
            </el-tabs>
            <el-table v-loading="loading" :data="userCouponList">
              <el-table-column label="券号" align="center" prop="couponCode" />
              <el-table-column label="会员昵称" align="center" prop="nickName" />
             <!-- <el-table-column label="会员电话" align="center" prop="phone" /> -->
              <el-table-column label="关联订单ID" align="center" prop="businessId" />
              <el-table-column label="订单类型" align="center" prop="businessType">
                <template slot-scope="scope">
                  <dict-tag :options="businessTypeOptions" :value="scope.row.businessType"/>
                </template>
              </el-table-column>
              <el-table-column label="状态" align="center" prop="status">
                <template slot-scope="scope">
                  <dict-tag :options="couponStatusOptions" :value="scope.row.status"/>
                </template>
              </el-table-column>
              <el-table-column label="创建时间" align="center" prop="createTime" width="180"/>
              <el-table-column label="使用时间" align="center" prop="useTime" width="180"/>
            </el-table>

            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
        </div>

    </div>
</template>

<script>
import { listCoupon, getCoupon, delCoupon, addCoupon, updateCoupon, exportCoupon } from "@/api/his/coupon";
import { getListUserCoupon } from "@/api/his/userCoupon";
import { getIntegralGoods } from "@/api/his/integralGoods";
  export default {
    name: "coupon",
    props:["data"],
    data() {
      return {
        actName:"10",
        couponId:null,
        item:null,
        statusOptions: [],
        couponTypeOptions: [],
        businessTypeOptions:[],
        couponStatusOptions:[],
        total: 0,
        loading: true,
        // 会员优惠券表格数据
        userCouponList: [],
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          couponId: null,
        },
        // 积分商品数据
        integralGoods: null,
        // 项目数据
        projects: [],
      }
    },
    created() {
      this.getDicts("sys_coupon_type").then(response => {
        this.couponTypeOptions = response.data;
      });
      this.getDicts("sys_coupon_business_type").then(response => {
        this.businessTypeOptions = response.data;
      });
      this.getDicts("sys_company_status").then(response => {
        this.statusOptions = response.data;
      });
      this.getDicts("sys_coupon_status").then(response => {
        this.couponStatusOptions = response.data;
      });
      this.getDicts("sys_course_project").then(response => {
        this.projects = response.data || [];
      });
    },
    methods: {
      getList() {
        this.loading = true;
        getListUserCoupon(this.queryParams).then(response => {
          this.userCouponList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      handleClickX(tab, event) {
       if(tab.name=="10"){
         this.queryParams.status=null;
       }else{
         this.queryParams.status=tab.name;
       }
          this.queryParams.pageNum = 1;
          this.couponId = this.queryParams.couponId;
          this.getList();

      },
      getDetails(orderId) {
        this.item=null;
        this.couponId = orderId;
        this.integralGoods = null;
        getCoupon(orderId).then(response => {
            this.item = response.data;
            this.queryParams.couponId = orderId;
            this.getList();

            // 如果优惠券类型为7（积分商品免单券），获取积分商品详情
            if (this.item.couponType === 7 && this.item.freeGoodsId) {
              this.getIntegralGoodsDetails(this.item.freeGoodsId);
            }
        });
      },
      /** 获取积分商品详情 */
      getIntegralGoodsDetails(goodsId) {
        getIntegralGoods(goodsId).then(response => {
          this.integralGoods = response.data;
        }).catch(error => {
          console.error("获取积分商品详情失败:", error);
          this.integralGoods = null;
        });
      },
    }
  }
</script>
<style>
  .contentx{
      height: 100%;
      background-color: #fff;
      padding: 0px 20px 20px;


      margin: 20px;
  }
  .el-descriptions-item__label.is-bordered-label{
    font-weight: normal;
  }
  .el-descriptions-item__content {
    max-width: 150px;
    min-width: 100px;
  }
  .desct{
      padding-top: 20px;
      padding-bottom: 20px;
      color: #524b4a;
      font-weight: bold;
    }

</style>