ADD: 优惠券逻辑处理

src/composables/useCommon.js

@@ -139,7 +139,14 @@ export function useInitForm(opt = {}) {
             if (!valid) return
             formDrawerRef.value.showLoading()
 
-            const fun = editId.value ? opt.update(editId.value, form) : opt.create(form)
+            let body = {}
+            if (opt.beforeSubmit && typeof opt.beforeSubmit == "function"){
+                body = opt.beforeSubmit({ ...form })
+            } else {
+                body = form
+            }
+
+            const fun = editId.value ? opt.update(editId.value, body) : opt.create(body)
             fun.then((res) => {
                 console.log(res);
                 toast(drawerTitle.value + "成功")

src/pages/coupon/list.vue

 <template>
     <el-card shadow="never" class="border-0">
         <!-- 新增 | 刷新 -->
-        <ListHeader @create="handleCreate"  @refresh="getData" />
-       
+        <ListHeader @create="handleCreate" @refresh="getData" />
 
-        <el-table :data="tableData" stripe style="width: 100%" 
-        element-loading-text="加载中..." 
-        element-loading-spinner="el-icon-loading"
-        v-loading="loading">
+
+        <el-table :data="tableData" stripe style="width: 100%" element-loading-text="加载中..."
+            element-loading-spinner="el-icon-loading" v-loading="loading">
             <el-table-column label="优惠券名称" width="350">
                 <template #default="{ row }">
-                    <div class="border border-dashed py-2 px-4 rounded" 
-                    :class="row.statusText == '领取中' ? 'active' : 'inactive'">
+                    <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>
+                        <small>{{ row.start_time }} ~ {{ row.end_time }}</small>
                     </div>
                 </template>
             </el-table-column>
-            <el-table-column prop="statusText" label="状态"/>
+            <el-table-column prop="statusText" label="状态" />
             <el-table-column label="优惠">
                 <template #default="{ row }">
-                    {{ row.type ? "满减" : "折扣" }} {{ row.type ? ("¥" + row.value) :(row.value + "折") }}
+                    {{ row.type == 0 ? "满减" : "折扣" }} {{ row.type == 0 ? ("¥" + row.value) : (row.value + "折") }}
                 </template>
             </el-table-column>
             <el-table-column prop="total" label="发放数量" />
@@ -46,11 +44,50 @@
 
         <FormDrawer ref="formDrawerRef" :title="drawerTitle" @submit="handleSubmit">
             <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" :inline="false">
-                <el-form-item label="公告标题" prop="title">
-                    <el-input v-model="form.title" placeholder="公告标题"></el-input>
+                <el-form-item label="优惠券名称" prop="name">
+                    <el-input v-model="form.name" placeholder="优惠券名称" style="width: 50%;"></el-input>
+                </el-form-item>
+
+                <el-form-item label="类型" prop="type">
+                    <el-radio-group v-model="form.type" @change="">
+                        <el-radio :label="0">满减</el-radio>
+                        <el-radio :label="1">折扣</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+
+                <el-form-item label="面值" prop="value">
+                    <el-input v-model="form.value" placeholder="面值" style="width: 50%;">
+                        <template #append>{{ form.type ? "折" : "元" }}</template>
+                    </el-input>
+                </el-form-item>
+
+                <el-form-item label="发行量" prop="total">
+                    <el-input-number v-model="form.total" :min="1" :max="10000"></el-input-number>
+                </el-form-item>
+
+                
+                <el-form-item label="最低使用价格" prop="min_price">
+                    <el-input v-model="form.min_price" placeholder="最低使用价格" type="number"></el-input>
+                </el-form-item>
+
+                <el-form-item label="排序" prop="order">
+                    <el-input-number v-model="form.order" :min="1" :max="10000"></el-input-number>                
                 </el-form-item>
-                <el-form-item label="公告内容" prop="content">
-                    <el-input v-model="form.content" placeholder="公告内容" type="textarea" :rows="5"></el-input>
+
+                <el-form-item label="活动时间">
+                    <el-date-picker
+                       :editable="false"
+                        v-model="timerange"
+                        value-format="YYYY-MM-DD HH:mm:ss"
+                        type="datetimerange"
+                        range-separator="To"
+                        start-placeholder="开始时间"
+                        end-placeholder="结束时间"
+                        />
+                </el-form-item>
+
+                <el-form-item label="描述" prop="desc">
+                    <el-input v-model="form.desc" placeholder="描述" type="textarea" :rows="5"></el-input>
                 </el-form-item>
             </el-form>
 
@@ -62,6 +99,7 @@
 
 
 <script setup>
+import { computed } from 'vue'
 import {
     getCouponList,
     createCoupon,
@@ -73,16 +111,16 @@ import FormDrawer from "@/components/FormDrawer.vue"
 import ListHeader from "@/components/ListHeader.vue"
 import { useInitTable, useInitForm } from "@/composables/useCommon.js"
 
-function formStatus(row){
+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){
+    if (start_time > now) {
         s = "未开始"
-    } else if (end_time < now){
+    } else if (end_time < now) {
         s = "已结束"
-    } else if (end_time < now){
+    } else if (end_time < now) {
         s = "已失效"
     }
     return s
@@ -101,8 +139,8 @@ const {
 
 } = useInitTable({
     getList: getCouponList,
-    onGetListSuccess:(res)=>{
-        tableData.value = res.list.map(o=>{
+    onGetListSuccess: (res) => {
+        tableData.value = res.list.map(o => {
             // 转化优惠券状态
             o.statusText = formStatus(o)
             return o
@@ -127,30 +165,44 @@ const {
 } = useInitForm(
     {
         form: {
-            title: "",
-            content: ""
-        },
-        rules: {
-            title: [
-                {
-                    required: true,
-                    message: '公告标题不能为空',
-                    trigger: 'blur'
-                }
-            ],
-            content: [
-                {
-                    required: true,
-                    message: '公告内容不能为空',
-                    trigger: 'blur'
-                }
-            ]
+            name: "",
+            type: 0,
+            value:0,
+            total:100,
+            min_price:0,
+            start_time:null,
+            end_time:null,
+            order:50,
+            desc:""
         },
+        rules: {},
         getData,
         update: updateCoupon,
-        create: createCoupon
+        create: createCoupon,
+
+        beforeSubmit:(f)=>{
+            if(typeof f.start_time != "number"){
+                f.start_time = (new Date(f.start_time)).getTime()
+            }
+            if(typeof f.end_time != "number"){
+                f.end_time = (new Date(f.end_time)).getTime()
+            }
+
+            return f
+        }
     })
 
+
+const timerange = computed({
+    get(){
+        return form.start_time && form.end_time ?  [form.start_time, form.end_time] : []
+    },
+    set(val){
+        form.start_time = val[0]
+        form.end_time = val[1]
+    }
+})
+
 </script>
 
 <style scoped>