diff --git a/src/api/bonus.js b/src/api/bonus.js
index ee8dceb..a864bc6 100644
--- a/src/api/bonus.js
+++ b/src/api/bonus.js
@@ -4,10 +4,18 @@ export function getBonusList(params) {
     return request('/bonus/getBonusList', 'post', params)
 }
 
+export function getBonus(type_id) {
+    return request('/bonus/getBonus', 'post', { type_id })
+}
+
 export function addBonus(params) {
     return request('/bonus/addBonus', 'post', params)
 }
 
+export function updateBonus(params) {
+    return request('/bonus/updateBonus', 'post', params)
+}
+
 export function deleteBonus(id) {
     return request('/bonus/deleteBonus', 'get', { id })
 }
@@ -19,3 +27,11 @@ export function getUseBonusList(params) {
 export function deleteUseBonus(id) {
     return request('/bonus/deleteUseBonus', 'get', { id })
 }
+
+export function sendBonus(params) {
+    return request('/bonus/send', 'post', params)
+}
+
+export function getUseList(params) {
+    return request('/bonus/getUseList', 'post', params)
+}
diff --git a/src/pages/bonus/UseList.vue b/src/pages/bonus/UseList.vue
index ab9eb8f..e610108 100644
--- a/src/pages/bonus/UseList.vue
+++ b/src/pages/bonus/UseList.vue
@@ -2,7 +2,7 @@
 import { ref, reactive, watch, onMounted } from "vue";
 import { useRouter } from "vue-router";
 
-import { getUseBonusList, deleteUseBonus } from "@/api/bonus";
+import { getUseBonusList, getUseList,deleteUseBonus } from "@/api/bonus";
 
 const router = useRouter();
 
@@ -39,7 +39,7 @@ watch(
 );
 
 const onBack = () => {
-  router.back()
+  router.back();
 };
 
 const handleDelete = async (bonus) => {
@@ -49,64 +49,92 @@ const handleDelete = async (bonus) => {
   }
 };
 
+const dialogTableVisible = ref(false)
+
+const useData = ref([])
+
+const handleShowUsed =async (row)=> {
+  dialogTableVisible.value = true
+  const res = await getUseList({
+    bonus_id: row.bonus_id
+  });
+  useData.value = res.data
+}
+
+
 const reloadList = () => {
   initData(state.page, state.pageSize);
 };
 </script>
 
 <template>
-    <div class="main">
-      <!-- Breadcrumb: Start -->
-      <!-- <div class="breadcrumb-section"> -->
-      <el-page-header @back="onBack">
-        <template #breadcrumb>
-          <el-breadcrumb separator="/">
-            <el-breadcrumb-item> 電商管理中心 </el-breadcrumb-item>
-            <el-breadcrumb-item>優惠劵</el-breadcrumb-item>
-            <el-breadcrumb-item>優惠劵使用列表</el-breadcrumb-item>
-          </el-breadcrumb>
-        </template>
-        <template #content>
-          <span class="text-large font-600 mr-3"> 優惠劵使用列表 </span>
-        </template>
-      </el-page-header>
-      <!-- </div> -->
-      <!-- Breadcrumb: End -->
-      <hr />
-      <el-card>
-        <div>
-          <el-table :data="state.tableData" style="width: 100%">
-            <el-table-column prop="bonus_id" label="編號" />
-            <el-table-column prop="bonus_sn" label="優惠劵序號" />
-            <el-table-column prop="send_type" label="類型" width="150" />
-            <el-table-column prop="order_id" label="訂單編號" />
-            <el-table-column prop="user_id" label="使用會員" />
-            <el-table-column prop="used_time" label="使用時間" />
-            <el-table-column label="操作" align="center" width="80">
-              <template #default="scope">
-                <el-button
-                  type="danger"
-                  size="small"
-                  plain
-                  @click="handleDelete(scope.row)"
-                  >刪除</el-button
-                >
-              </template>
-            </el-table-column>
-          </el-table>
-          <div class="pagination-block">
-            <el-pagination
-              v-model:current-page="state.page"
-              v-model:page-size="state.pageSize"
-              :page-sizes="[10, 20, 50, 100]"
-              small="small"
-              layout="->,total, sizes, prev, pager, next, jumper"
-              :total="state.total"
-            />
-          </div>
+  <div class="main">
+    <!-- Breadcrumb: Start -->
+    <!-- <div class="breadcrumb-section"> -->
+    <el-page-header @back="onBack">
+      <template #breadcrumb>
+        <el-breadcrumb separator="/">
+          <el-breadcrumb-item> 電商管理中心 </el-breadcrumb-item>
+          <el-breadcrumb-item>優惠劵</el-breadcrumb-item>
+          <el-breadcrumb-item>優惠劵使用列表</el-breadcrumb-item>
+        </el-breadcrumb>
+      </template>
+      <template #content>
+        <span class="text-large font-600 mr-3"> 優惠劵使用列表 </span>
+      </template>
+    </el-page-header>
+    <!-- </div> -->
+    <!-- Breadcrumb: End -->
+    <hr />
+    <el-card>
+      <div>
+        <el-table :data="state.tableData" style="width: 100%">
+          <el-table-column prop="bonus_id" label="編號" />
+          <el-table-column prop="bonus_sn" label="優惠劵序號" />
+          <el-table-column prop="bonus_number" label="優惠劵數量" align="right"/>
+          <el-table-column prop="remain_number" label="剩餘數量" align="right"/>
+          <!-- <el-table-column prop="send_type" label="類型" width="150" /> -->
+          <el-table-column label="操作" align="center" width="180">
+            <template #default="scope">
+              <el-button
+                type="danger"
+                size="small"
+                plain
+                @click="handleShowUsed(scope.row)"
+                v-if="scope.row.remain_number < scope.row.bonus_number"
+                >查看</el-button
+              >
+              <el-button
+                type="danger"
+                size="small"
+                plain
+                @click="handleDelete(scope.row)"
+                >刪除</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="pagination-block">
+          <el-pagination
+            v-model:current-page="state.page"
+            v-model:page-size="state.pageSize"
+            :page-sizes="[10, 20, 50, 100]"
+            small="small"
+            layout="->,total, sizes, prev, pager, next, jumper"
+            :total="state.total"
+          />
         </div>
-      </el-card>
-    </div>
+      </div>
+    </el-card>
+  </div>
+
+  <el-dialog v-model="dialogTableVisible" title="使用紀錄">
+    <el-table :data="useData">
+      <el-table-column prop="sso_user_id" label="使用會員" width="150" />
+      <el-table-column prop="order_sn" label="訂單編號" width="200" />
+      <el-table-column prop="used_time" label="使用時間" />
+    </el-table>
+  </el-dialog>
 </template>
 
 <style lang="less" scoped></style>
diff --git a/src/pages/bonus/components/AddForm.vue b/src/pages/bonus/components/AddForm.vue
deleted file mode 100644
index ede9340..0000000
--- a/src/pages/bonus/components/AddForm.vue
+++ /dev/null
@@ -1,152 +0,0 @@
-<script setup>
-import { ref, reactive, computed } from "vue";
-
-import { addBonus } from "@/api/bonus";
-
-const props = defineProps({
-  show: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['update:show','reload']);
-
-const showDrawer = computed({
-  get: () => props.show,
-  set: (value) => {
-    emit("update:show", value);
-  },
-});
-
-const formRef = ref();
-
-const rules = reactive({
-  type_name: [{ required: true, message: "請輸入優惠劵名稱", trigger: "blur" }],
-  type_money: [{ required: true, message: "請輸入優惠劵金額", trigger: "blur" }],
-  send_type: [{ required: true, message: "請選擇發放方式", trigger: "change" }],
-});
-
-const form = reactive({
-  type_name: '',
-  type_money: 0,
-  send_type: 4,
-  min_amount: 0,
-  send_type: null,
-  user_bonus_max: 0,
-});
-
-const loading = ref(false);
-
-const handleClose = () => {
-  showDrawer.value = false;
-};
-
-const handleSubmit = async (formEl) => {
-  if (!formEl) return;
-
-  await formEl.validate(async (valid, fields) => {
-    if (!valid) return;
-
-    let res = await addBonus(form)
-    if(res.code === 200){
-      // 關閉抽屜
-      showDrawer.value = false;
-      // 重置表單
-      formRef.value.resetFields();
-
-      // emit reload event
-      emit('reload');
-
-      // 顥示提示訊息
-      return ElMessage.success('新增成功');
-    }
-    // 顯示錯誤提示訊息
-    return ElMessage.error(res.msg);
-  });
-};
-</script>
-
-<template>
-  <el-drawer v-model="showDrawer" size="50%" title="新增優惠劵">
-    <template #header>
-      <h4>新增優惠劵</h4>
-    </template>
-    <template #default>
-      <!-- <div v-loading="loading"> -->
-        <el-form
-          :model="form"
-          ref="formRef"
-          :rules="rules"
-          label-width="120px"
-        >
-          <el-form-item label="優惠劵名稱" prop="type_name">
-            <el-input v-model="form.type_name" />
-          </el-form-item>
-          <el-form-item label="優惠劵金額" prop="type_money">
-            <el-input v-model="form.type_money" />
-          </el-form-item>
-          <el-form-item label="最小訂單金額">
-            <el-input v-model="form.min_amount" />
-          </el-form-item>
-          <el-form-item label="發放方式" prop="send_type">
-            <el-radio-group v-model="form.send_type">
-              <!-- <el-radio :label="1">會員發放</el-radio> -->
-              <!-- <el-radio :label="2">商品發放</el-radio> -->
-              <!-- <el-radio :label="3">訂單方式</el-radio> -->
-              <el-radio :label="4">線下發放</el-radio>
-              <!-- <el-radio :label="5">線上發放</el-radio> -->
-              <!-- <el-radio :label="6">註冊發放</el-radio> -->
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="發放開始日">
-            <el-date-picker
-              v-model="form.send_start_date"
-              type="date"
-              format="YYYY-MM-DD"
-              value-format="YYYY-MM-DD"
-              placeholder="請選擇日期"
-            />
-          </el-form-item>
-          <el-form-item label="發放結束日">
-            <el-date-picker
-              v-model="form.send_end_date"
-              type="date"
-              format="YYYY-MM-DD"
-              value-format="YYYY-MM-DD"
-              placeholder="請選擇日期"
-            />
-          </el-form-item>
-          <el-form-item label="使用開始日" >
-            <el-date-picker
-              v-model="form.use_start_date"
-              type="date"
-              format="YYYY-MM-DD"
-              value-format="YYYY-MM-DD"
-              placeholder="請選擇日期"
-            />
-          </el-form-item>
-          <el-form-item label="使用結束日" >
-            <el-date-picker
-              v-model="form.use_end_date"
-              type="date"
-              format="YYYY-MM-DD"
-              value-format="YYYY-MM-DD"
-              placeholder="請選擇日期"
-            />
-          </el-form-item>
-        </el-form>
-      <!-- </div> -->
-    </template>
-    <template #footer>
-      <div style="flex: auto">
-        <el-button @click="handleClose">關閉</el-button>
-        <el-button type="primary" @click="handleSubmit(formRef)"
-          >送出</el-button
-        >
-      </div>
-    </template>
-  </el-drawer>
-</template>
-
-<style lang="less"></style>
diff --git a/src/pages/bonus/components/BonusForm.vue b/src/pages/bonus/components/BonusForm.vue
new file mode 100644
index 0000000..3829beb
--- /dev/null
+++ b/src/pages/bonus/components/BonusForm.vue
@@ -0,0 +1,200 @@
+<script setup>
+import { ref, reactive, watch, computed } from "vue";
+
+import { addBonus, getBonus, updateBonus } from "@/api/bonus";
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  edit_id: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const emit = defineEmits(["update:show", "update:edit_id", "reload"]);
+
+const showDrawer = computed({
+  get: () => props.show,
+  set: (value) => {
+    emit("update:show", value);
+  },
+});
+
+const formRef = ref();
+
+const rules = reactive({
+  type_name: [{ required: true, message: "請輸入優惠劵名稱", trigger: "blur" }],
+  type_money: [
+    { required: true, message: "請輸入優惠劵金額", trigger: "blur" },
+  ],
+  send_type: [{ required: true, message: "請選擇發放方式", trigger: "change" }],
+});
+
+const form = ref({
+  act: "insert",
+  type_id: 0,
+  type_name: "",
+  type_money: 0,
+  send_type: 4,
+  min_amount: 0,
+  user_bonus_max: 0,
+});
+
+const loading = ref(false);
+
+watch(
+  () => props.edit_id,
+  async (newVal) => {
+    console.log(newVal);
+    if (newVal > 0) {
+      let res = await getBonus(newVal);
+      if (res.code === 200) {
+        form.value = res.data;
+        form.value.act = "update";
+      }
+    } else {
+      form.value = {
+        act: "insert",
+        type_id: 0,
+        type_name: "",
+        type_money: 0,
+        send_type: 4,
+        min_amount: 0,
+        user_bonus_max: 0,
+      };
+    }
+  }
+);
+
+const handleClose = () => {
+  emit("update:edit_id", 0);
+  showDrawer.value = false;
+};
+
+const handleSubmit = async (formEl) => {
+  if (!formEl) return;
+
+  await formEl.validate(async (valid, fields) => {
+    if (!valid) return;
+
+    let res;
+    if (form.value.act === "update") {
+      res = await updateBonus(form.value);
+    } else {
+      res = await addBonus(form.value);
+    }
+
+    if (res.code === 200) {
+      // 關閉抽屜
+      showDrawer.value = false;
+      // 重置表單
+      formRef.value.resetFields();
+
+      // emit reload event
+      emit("reload");
+
+      // 顥示提示訊息
+      return ElMessage.success("操作成功");
+    }
+    // 顯示錯誤提示訊息
+    return ElMessage.error(res.msg);
+  });
+};
+</script>
+
+<template>
+  <el-drawer
+    v-model="showDrawer"
+    size="50%"
+    title="新增優惠劵"
+    @close="handleClose"
+  >
+    <template #header>
+      <h4>新增優惠劵</h4>
+    </template>
+    <template #default>
+      <!-- <div v-loading="loading"> -->
+      <el-form :model="form" ref="formRef" :rules="rules" label-width="120px">
+        <el-form-item label="優惠劵名稱" prop="type_name">
+          <el-input v-model="form.type_name" />
+        </el-form-item>
+        <el-form-item label="優惠劵金額" prop="type_money">
+          <el-input v-model="form.type_money" />
+        </el-form-item>
+        <el-form-item label="最小訂單金額">
+          <el-input v-model="form.min_amount" />
+        </el-form-item>
+        <el-form-item label="發放方式" prop="send_type">
+          <el-radio-group v-model="form.send_type">
+            <!-- <el-radio :label="1">會員發放</el-radio> -->
+            <!-- <el-radio :label="2">商品發放</el-radio> -->
+            <!-- <el-radio :label="3">訂單方式</el-radio> -->
+            <el-radio :label="4">線下發放</el-radio>
+            <!-- <el-radio :label="5">線上發放</el-radio> -->
+            <!-- <el-radio :label="6">註冊發放</el-radio> -->
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="發放開始日" v-show="form.send_type != 4">
+          <el-date-picker
+            v-model="form.send_start_date"
+            type="date"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+            placeholder="請選擇日期"
+          />
+        </el-form-item>
+        <el-form-item label="發放結束日" v-show="form.send_type != 4">
+          <el-date-picker
+            v-model="form.send_end_date"
+            type="date"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+            placeholder="請選擇日期"
+          />
+        </el-form-item>
+        <el-space fill>
+          <el-alert type="info" show-icon :closable="true">
+            <p>空白為立即可以使用</p>
+          </el-alert>
+          <el-form-item label="使用開始日">
+            <el-date-picker
+              v-model="form.use_start_date"
+              type="date"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              placeholder="請選擇日期"
+            />
+          </el-form-item>
+        </el-space>
+        <el-space fill>
+          <el-alert type="info" show-icon :closable="true">
+            <p>空白為永久可以使用</p>
+          </el-alert>
+          <el-form-item label="使用結束日">
+            <el-date-picker
+              v-model="form.use_end_date"
+              type="date"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              placeholder="請選擇日期"
+            />
+          </el-form-item>
+        </el-space>
+      </el-form>
+      <!-- </div> -->
+    </template>
+    <template #footer>
+      <div style="flex: auto">
+        <el-button @click="handleClose">關閉</el-button>
+        <el-button type="primary" @click="handleSubmit(formRef)"
+          >送出</el-button
+        >
+      </div>
+    </template>
+  </el-drawer>
+</template>
+
+<style lang="less"></style>
diff --git a/src/pages/bonus/components/EditForm.vue b/src/pages/bonus/components/EditForm.vue
deleted file mode 100644
index ed2a9a5..0000000
--- a/src/pages/bonus/components/EditForm.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<script setup>
-import { ref, reactive, computed } from "vue";
-
-import { addBonus } from "@/api/bonus";
-
-const props = defineProps({
-  show: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['update:show','reload']);
-
-const showDrawer = computed({
-  get: () => props.show,
-  set: (value) => {
-    emit("update:show", value);
-  },
-});
-
-const formRef = ref();
-
-const rules = reactive({
-  type_name: [{ required: true, message: "請輸入優惠劵名稱", trigger: "blur" }],
-  type_money: [{ required: true, message: "請輸入優惠劵金額", trigger: "blur" }],
-  send_type: [{ required: true, message: "請選擇發放方式", trigger: "change" }],
-});
-
-const form = reactive({
-  type_name: '',
-  type_money: 0,
-  min_amount: 0,
-  send_type: null,
-  user_bonus_max: 0,
-});
-
-const loading = ref(false);
-
-const handleClose = () => {
-  showDrawer.value = false;
-};
-
-const handleSubmit = async (formEl) => {
-  if (!formEl) return;
-
-  await formEl.validate(async (valid, fields) => {
-    if (!valid) return;
-
-    let res = await addBonus(form)
-    if(res.code === 200){
-      // 關閉抽屜
-      showDrawer.value = false;
-      // 重置表單
-      formRef.value.resetFields();
-
-      // emit reload event
-      emit('reload');
-      
-      // 顥示提示訊息
-      return ElMessage.success('新增成功');
-    }
-    // 顯示錯誤提示訊息
-    return ElMessage.error(res.msg);
-  });
-};
-</script>
-
-<template>
-  <el-drawer v-model="showDrawer" size="50%" title="新增優惠劵">
-    <template #header>
-      <h4>新增優惠劵</h4>
-    </template>
-    <template #default>
-      <!-- <div v-loading="loading"> -->
-        <el-form
-          :model="form"
-          ref="formRef"
-          :rules="rules"
-          label-width="120px"
-        >
-          <el-form-item label="優惠劵名稱" prop="type_name">
-            <el-input v-model="form.type_name" />
-          </el-form-item>
-          <el-form-item label="優惠劵金額" prop="type_money">
-            <el-input v-model="form.type_money" />
-          </el-form-item>
-          <el-form-item label="最小訂單金額">
-            <el-input v-model="form.min_amount" />
-          </el-form-item>
-          <el-form-item label="發放方式" prop="send_type">
-            <el-radio-group v-model="form.send_type">
-              <!-- <el-radio :label="1">會員發放</el-radio> -->
-              <!-- <el-radio :label="2">商品發放</el-radio> -->
-              <!-- <el-radio :label="3">訂單方式</el-radio> -->
-              <el-radio :label="4">線下發放</el-radio>
-              <!-- <el-radio :label="5">線上發放</el-radio> -->
-              <!-- <el-radio :label="6">註冊發放</el-radio> -->
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="發放開始日">
-            <el-date-picker
-              v-model="form.send_start_date"
-              type="date"
-              format="YYYY-MM-DD"
-              value-format="YYYY-MM-DD"
-              placeholder="請選擇日期"
-            />
-          </el-form-item>
-          <el-form-item label="發放結束日">
-            <el-date-picker
-              v-model="form.send_end_date"
-              type="date"
-              format="YYYY-MM-DD"
-              value-format="YYYY-MM-DD"
-              placeholder="請選擇日期"
-            />
-          </el-form-item>
-          <el-form-item label="使用開始日" >
-            <el-date-picker
-              v-model="form.use_start_date"
-              type="date"
-              format="YYYY-MM-DD"
-              value-format="YYYY-MM-DD"
-              placeholder="請選擇日期"
-            />
-          </el-form-item>
-          <el-form-item label="使用結束日" >
-            <el-date-picker
-              v-model="form.use_end_date"
-              type="date"
-              format="YYYY-MM-DD"
-              value-format="YYYY-MM-DD"
-              placeholder="請選擇日期"
-            />
-          </el-form-item>
-        </el-form>
-      <!-- </div> -->
-    </template>
-    <template #footer>
-      <div style="flex: auto">
-        <el-button @click="handleClose">關閉</el-button>
-        <el-button type="primary" @click="handleSubmit(formRef)"
-          >送出</el-button
-        >
-      </div>
-    </template>
-  </el-drawer>
-</template>
-
-<style lang="less"></style>
diff --git a/src/pages/bonus/components/SendBonus.vue b/src/pages/bonus/components/SendBonus.vue
index aa2df56..4b66812 100644
--- a/src/pages/bonus/components/SendBonus.vue
+++ b/src/pages/bonus/components/SendBonus.vue
@@ -1,11 +1,18 @@
 <script setup>
+import { ElMessage } from "element-plus";
 import { reactive, ref, computed } from "vue";
 
+import { sendBonus  } from "@/api/bonus";
+
 const props = defineProps({
   show: {
     type: Boolean,
     default: false,
   },
+  bonus_id: {
+    type: Number,
+    default: null,
+  },
 });
 
 const emit = defineEmits(["update:show", "reload"]);
@@ -17,39 +24,44 @@ const showDialog = computed({
   },
 });
 
-const dialogFormVisible = ref(false);
 const formLabelWidth = "140px";
 
+const formRef = ref(null);
 const form = reactive({
-  name: "",
-  region: "",
-  date1: "",
-  date2: "",
-  delivery: false,
-  type: [],
-  resource: "",
-  desc: "",
+  send_type: '1',
+  number: 1,
 });
+
+const handleSubmit = async () => {
+  let res = await sendBonus({type_id: props.bonus_id, ...form});
+  if(res.code === 200){
+    ElMessage.success('操作成功');
+    formRef.value.resetFields();
+    showDialog.value = false;  
+  }else{
+    ElMessage.error(res.message);
+  }
+};
 </script>
 
 <template>
   <el-dialog v-model="showDialog" title="發放優惠劵">
-    <el-form :model="form">
-      <el-form-item label="發放模式" :label-width="formLabelWidth">
-        <el-radio-group v-model="radio1" class="ml-4">
+    <el-form ref="formRef" :model="form">
+      <el-form-item label="建立模式" prop="send_type" :label-width="formLabelWidth">
+        <el-radio-group v-model="form.send_type" class="ml-4">
           <el-radio label="1" size="large">相同序號</el-radio>
           <el-radio label="2" size="large">不同序號</el-radio>
         </el-radio-group>
       </el-form-item>
 
-      <el-form-item label="發放數量" :label-width="formLabelWidth">
-        <el-input v-model="form.name" autocomplete="off" />
+      <el-form-item label="數量" prop="number" :label-width="formLabelWidth">
+        <el-input v-model="form.number" autocomplete="off" />
       </el-form-item>
     </el-form>
     <template #footer>
       <span class="dialog-footer">
         <el-button @click="showDialog = false">取消</el-button>
-        <el-button type="primary" @click="showDialog = false">
+        <el-button type="primary" @click="handleSubmit">
           確定
         </el-button>
       </span>
diff --git a/src/pages/bonus/index.vue b/src/pages/bonus/index.vue
index 39812e8..1e8217e 100644
--- a/src/pages/bonus/index.vue
+++ b/src/pages/bonus/index.vue
@@ -1,8 +1,7 @@
 <script setup>
 import { ref, reactive, watch, onMounted } from "vue";
 import { Plus } from "@element-plus/icons-vue";
-import AddForm from "./components/AddForm.vue";
-import EditForm from "./components/EditForm.vue";
+import BonusForm from "./components/BonusForm.vue";
 
 import SendBonus from "./components/SendBonus.vue";
 
@@ -51,6 +50,12 @@ watch(
   }
 );
 
+const edit_id = ref(0)
+const handleShowEdit = (type_id) => {
+  showAddDrawer.value = true;
+  edit_id.value = type_id
+};
+
 const handleDelete = async (bonus) => {
   let res = await deleteBonus(bonus.type_id);
   if (res.code === 200) {
@@ -61,6 +66,13 @@ const handleDelete = async (bonus) => {
 const reloadList = () => {
   initData(state.page, state.pageSize);
 };
+
+const send_bonus_id = ref(null);
+
+const handleSandBonus = (type_id) => {
+  showSendBonus.value = true;
+  send_bonus_id.value = type_id;
+};
 </script>
 
 <template>
@@ -102,16 +114,16 @@ const reloadList = () => {
             align="right"
             width="100"
           />
-          <el-table-column prop="send_count" label="發放數量" width="80" />
-          <el-table-column prop="use_count" label="使用數量" width="80" />
+          <el-table-column prop="bonus_number" label="發放數量" width="80" />
+          <el-table-column prop="remain_number" label="剩餘數量" width="80" />
           <el-table-column label="操作" align="center" width="280">
             <template #default="scope">
               <el-button
                 type="info"
                 size="small"
                 plain
-                @click="showSendBonus = true"
-                >發放</el-button
+                @click="handleSandBonus(scope.row.type_id)"
+                >建立</el-button
               >
               <el-button
                 type="info"
@@ -124,7 +136,7 @@ const reloadList = () => {
                 type="primary"
                 size="small"
                 plain
-                @click="showAddDrawer = true"
+                @click="handleShowEdit(scope.row.type_id)"
                 >編輯</el-button
               >
               <el-button
@@ -150,9 +162,8 @@ const reloadList = () => {
       </div>
     </el-card>
   </div>
-  <AddForm v-model:show="showAddDrawer" @reload="reloadList" />
-  <EditForm v-model:show="showEditDrawer" />
-  <SendBonus v-model:show="showSendBonus" />
+  <BonusForm v-model:show="showAddDrawer" v-model:edit_id="edit_id" @reload="reloadList" />
+  <SendBonus v-model:show="showSendBonus" :bonus_id="send_bonus_id"/>
 </template>
 
 <style lang="less" scoped></style>