promotion：优化优惠劵的界面

Author: YunaiV

src/views/mall/promotion/coupon/formatter.ts

@@ -9,7 +9,7 @@ export const discountFormat = (row: CouponTemplateVO) => {
     return `￥${floatToFixed2(row.discountPrice)}`
   }
   if (row.discountType === PromotionDiscountTypeEnum.PERCENT.type) {
-    return `${row.discountPrice}%`
+    return `${row.discountPercent}%`
   }
   return '未知【' + row.discountType + '】'
 }

src/views/mall/promotion/coupon/index.vue

@@ -19,7 +19,7 @@
           @keyup="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="创建时间" prop="createTime">
+      <el-form-item label="领取时间" prop="createTime">
         <el-date-picker
           v-model="queryParams.createTime"
           value-format="YYYY-MM-DD HH:mm:ss"
@@ -50,12 +50,17 @@
 
     <!-- 列表 -->
     <el-table v-loading="loading" :data="list">
-      <el-table-column label="会员信息" align="center" prop="nickname" />
-      <!-- TODO 芋艿：以后支持头像，支持跳转 -->
-      <el-table-column label="优惠劵" align="center" prop="name" />
-      <el-table-column label="优惠券类型" align="center" prop="discountType">
+      <el-table-column label="会员昵称" align="center" min-width="100" prop="nickname" />
+      <el-table-column label="优惠券名称" align="center" min-width="140" prop="name" />
+      <el-table-column label="类型" align="center" prop="discountType">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.PROMOTION_PRODUCT_SCOPE" :value="scope.row.productScope" />
+        </template>
+      </el-table-column>
+      <el-table-column label="优惠" min-width="100" prop="discount">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE" :value="scope.row.discountType" />
+          {{ discountFormat(scope.row) }}
         </template>
       </el-table-column>
       <el-table-column label="领取方式" align="center" prop="takeType">
@@ -109,6 +114,7 @@
 import { deleteCoupon, getCouponPage } from '@/api/mall/promotion/coupon/coupon'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
+import { discountFormat } from '@/views/mall/promotion/coupon/formatter'
 
 defineOptions({ name: 'PromotionCoupon' })
 

src/views/mall/promotion/coupon/template/index.vue

@@ -19,7 +19,7 @@
           @keyup="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="优惠券类型" prop="discountType">
+      <el-form-item label="优惠类型" prop="discountType">
         <el-select
           v-model="queryParams.discountType"
           class="!w-240px"
@@ -71,32 +71,36 @@
         >
           <Icon class="mr-5px" icon="ep:plus" /> 新增
         </el-button>
-        <el-button
-          plain
-          type="success"
-          @click="$router.push('/promotion/coupon')"
-          v-hasPermi="['promotion:coupon:query']"
-        >
-          <Icon icon="ep:operation" class="mr-5px" />会员优惠劵
-        </el-button>
       </el-form-item>
     </el-form>
   </ContentWrap>
 
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list">
-      <el-table-column label="优惠券名称" align="center" prop="name" />
-      <el-table-column label="优惠券类型" align="center" prop="discountType">
+      <el-table-column label="优惠券名称" min-width="140" prop="name" />
+      <el-table-column label="类型" min-width="80" prop="productScope">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.PROMOTION_PRODUCT_SCOPE" :value="scope.row.productScope" />
+        </template>
+      </el-table-column>
+      <el-table-column label="优惠" min-width="100" prop="discount">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE" :value="scope.row.discountType" />
+          {{ discountFormat(scope.row) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="领取方式" min-width="100" prop="takeType">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.PROMOTION_COUPON_TAKE_TYPE" :value="scope.row.takeType" />
         </template>
       </el-table-column>
       <el-table-column
-        label="优惠金额 / 折扣"
+        label="使用时间"
         align="center"
-        prop="discount"
-        :formatter="discountFormat"
+        prop="validityType"
+        width="185"
+        :formatter="validityTypeFormat"
       />
       <el-table-column label="发放数量" align="center" prop="totalCount" />
       <el-table-column
@@ -111,13 +115,6 @@
         prop="takeLimitCount"
         :formatter="takeLimitCountFormat"
       />
-      <el-table-column
-        label="有效期限"
-        align="center"
-        prop="validityType"
-        width="190"
-        :formatter="validityTypeFormat"
-      />
       <el-table-column label="状态" align="center" prop="status">
         <template #default="scope">
           <el-switch