ADD: 优惠券名称样式

src/pages/coupon/list.vue

@@ -10,7 +10,8 @@
         v-loading="loading">
             <el-table-column label="优惠券名称" width="350">
                 <template #default="{ row }">
-                    <div class="border border-dashed py-2 px-4 rounded">
+                    <div class="border border-dashed py-2 px-4 rounded" 
+                    :class="row.statusText == '领取中' ? 'active' : 'inactive'">
                         <h5 class="font-bold text-md">{{ row.name }}</h5>
                         <small>{{ row.start_time }} ~ {{row.end_time }}</small>
                     </div>
@@ -72,6 +73,22 @@ import FormDrawer from "@/components/FormDrawer.vue"
 import ListHeader from "@/components/ListHeader.vue"
 import { useInitTable, useInitForm } from "@/composables/useCommon.js"
 
+function formStatus(row){
+    let s = "领取中"
+    let start_time = (new Date(row.start_time)).getTime()
+    let now = (new Date()).getTime()
+    let end_time = (new Date(row.end_time)).getTime()
+    if(start_time > now){
+        s = "未开始"
+    } else if (end_time < now){
+        s = "已结束"
+    } else if (end_time < now){
+        s = "已失效"
+    }
+    return s
+
+}
+
 
 const {
     tableData,
@@ -84,6 +101,15 @@ const {
 
 } = useInitTable({
     getList: getCouponList,
+    onGetListSuccess:(res)=>{
+        tableData.value = res.list.map(o=>{
+            // 转化优惠券状态
+            o.statusText = formStatus(o)
+            return o
+        })
+        total.value = res.totalCount
+
+    },
     delete: deleteCoupon
 })
 
@@ -125,9 +151,14 @@ const {
         create: createCoupon
     })
 
+</script>
 
+<style scoped>
+.active {
+    @apply border-rose-200 bg-rose-50 text-red-400;
+}
 
-
-
-
-</script>
\ No newline at end of file
+.inactive {
+    @apply border-gray-200 bg-gray-50 text-gray-400;
+}
+</style>
\ No newline at end of file