diff --git a/src/layout/components/Aside.vue b/src/layout/components/Aside.vue
index 01dd813..33c5164 100644
--- a/src/layout/components/Aside.vue
+++ b/src/layout/components/Aside.vue
@@ -54,6 +54,20 @@
               <span slot="title">类别管理</span>
             </el-menu-item>
           </el-sub-menu>
+          <el-sub-menu index="4">
+            <template #title>
+              <el-icon><HomeFilled /></el-icon>
+              <span>优惠券管理</span>
+            </template>
+            <el-menu-item index="/AddCoupons">
+              <el-icon><Menu /></el-icon>
+              <span slot="title">添加优惠券</span>
+            </el-menu-item>
+            <el-menu-item index="/CouponCenter">
+              <el-icon><Menu /></el-icon>
+              <span slot="title">优惠券中心</span>
+            </el-menu-item>
+          </el-sub-menu>
 
           <el-sub-menu index="3">
             <template #title>
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 25ffd85..c435562 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -42,6 +42,16 @@ export const routes = [
                 path: '/OrderList',
                 name: '订单列表',
                 component: ()=> import("../views/Orders/OrderList.vue")
+            },
+            {
+                path: '/AddCoupons',
+                name:'添加优惠券',
+                component: ()=> import("../views/Coupons/AddCoupons.vue")
+            },
+            {
+                path: '/CouponCenter',
+                name:'优惠券中心',
+                component: ()=> import("../views/Coupons/CouponCenter.vue")
             }
         ]
     },
diff --git a/src/views/Coupons/AddCoupons.vue b/src/views/Coupons/AddCoupons.vue
new file mode 100644
index 0000000..186804a
--- /dev/null
+++ b/src/views/Coupons/AddCoupons.vue
@@ -0,0 +1,134 @@
+<template>
+  <el-form ref="resetFormData" :model="form" label-width="auto" style="width: 750px" size="large">
+    <el-form-item label="添加优惠券图片">
+      <el-upload
+          action="#"
+          list-type="picture-card"
+          :auto-upload="false"
+          multiple="true"
+          :on-remove="handleRemove"
+          @change="(event: any) => handleChange(event, 0)"
+          limit="1" >
+        <el-icon>
+          <Plus />
+        </el-icon>
+      </el-upload>
+    </el-form-item>
+  </el-form>
+  <el-form :model="form" label-width="auto" style="max-width: 600px">
+    <el-form-item label="优惠券名称">
+      <el-input v-model="form.name" />
+    </el-form-item>
+    <el-form-item label="兑换积分">
+      <el-input v-model="form.requirePoints" />
+    </el-form-item>
+    <el-form-item label="满减金额">
+      <el-input v-model="form.conditionAmount" />
+    </el-form-item>
+    <el-form-item label="发放数量">
+      <el-input v-model="form.totalNum" />
+    </el-form-item>
+    <el-form-item label="限量领取">
+      <el-input v-model="form.limitNum" />
+    </el-form-item>
+    <el-form-item label="使用范围">
+      <el-input v-model="form.useScope" />
+    </el-form-item>
+    <el-form-item label="开始日期">
+      <el-date-picker
+          v-model="form.startTime"
+          type="datetime"
+          placeholder="Pick a Date"
+          format="YYYY-MM-DD hh:mm:ss"
+          value-format="YYYY-MM-DD hh:mm:ss"
+      />
+    </el-form-item>
+    <el-form-item label="截至日期">
+      <el-date-picker
+          v-model="form.endTime"
+          type="datetime"
+          placeholder="Pick a Date"
+          format="YYYY-MM-DD hh:mm:ss"
+          value-format="YYYY-MM-DD hh:mm:ss"
+      />
+    </el-form-item>
+    <el-form-item label="使用说明">
+      <el-input v-model="form.description" type="textarea" />
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="AddCoupon">提交</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script lang="ts" setup>
+import { ref,onMounted} from 'vue'
+import {Plus} from "@element-plus/icons-vue";
+import {ElMessage, type UploadProps} from "element-plus";
+import myAxios from "@/api/myAxios";
+
+
+const fileSimple = ref()
+const form = ref({
+  name: '',
+  conditionAmount:0,//满减金额
+  totalNum:0,
+  requirePoints:0,//兑换积分
+  residueNum:0,//剩余数量
+  limitNum:0,//限量领取
+  useScope:'',//使用范围
+  startTime: '',
+  endTime: '',
+  description:'',//使用说明
+  image:''
+})
+onMounted(() => {
+
+})
+const AddCoupon = async () => {
+  const values = Object.values(form.value);
+  if (values.some(value => value === null || value === undefined || value === '')) {
+    ElMessage({
+      type: 'warning',
+      message: '请检查表单数据是否完整填写'
+    });
+    return;
+  }
+  const res = await myAxios.post('/coupon/add', {...form.value });
+  if (res.data.code === 1) {
+    ElMessage({
+      type: 'success',
+      message: "提交成功"
+    });
+  } else {
+    ElMessage.error("服务错误");
+  }
+  console.log(form.value.startTime)
+}
+
+const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
+  console.log(uploadFile, uploadFiles)
+}
+//上传图片
+const handleChange = async (file: any, flag: number) => {
+  fileSimple.value = file
+  let formData = new FormData()
+  formData.append("file", fileSimple.value.raw)
+  const res = await myAxios({
+    url: '/file/upload/server/not_login',
+    method: 'post',
+    headers: {
+      'content-Type': 'multipart/form-data'
+    },
+    data: {
+      biz: "test",
+      file: formData.get("file")
+    }
+  })
+  // console.log(res.data,123213213213)
+  if (res.data.code === 1) {
+    form.value.image = res.data.data
+  }
+
+}
+</script>
diff --git a/src/views/Coupons/CouponCenter.vue b/src/views/Coupons/CouponCenter.vue
new file mode 100644
index 0000000..21e09ae
--- /dev/null
+++ b/src/views/Coupons/CouponCenter.vue
@@ -0,0 +1,252 @@
+<template>
+  <!--  搜索-->
+  <div>
+    <el-input style="width: 200px; height: 30px; margin-right: 10px;" suffix-icon="Search" placeholder="请输入商品名称"
+              v-model="Couponsname"></el-input>
+    <el-button class="ml-5" type="primary" @click="load" style="height: 25px;">搜索</el-button>
+    <el-button type="warning" @click="reset" style="height:25px">重置</el-button>
+  </div>
+  <!--  批量删除-->
+  <div style="margin: 15px 0">
+    <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
+                   title="您确定批量删除这些数据吗？" @confirm="delBatch" width=180>
+      <template #reference>
+        <el-button style="height: 25px" class="ml-5" type="danger">批量删除 <el-icon style="margin-left: 5px;">
+          <Remove />
+        </el-icon></el-button>
+      </template>
+    </el-popconfirm>
+  </div>
+  <!--  数据展示-->
+  <el-table :data="tableData" border stripe header-cell-class-name="headerBg"
+            :cell-style="{ 'text-align': 'center', 'font-size': '16px' }" @selection-change="handleSelectionChange"
+            :header-cell-style="{ 'text-align': 'center' }">
+    <el-table-column type="selection" width="55"></el-table-column>
+    <el-table-column prop="id" label="编号" width="80"></el-table-column>
+    <el-table-column prop="goodImg" label="优惠券图片">
+      <template #default="scope">
+        <div>
+          <img :src="scope.row.image" alt="" style="height: 50px;">
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column prop="name" label="优惠券名称"></el-table-column>
+    <el-table-column prop="conditionAmount" label="满减金额" width="180"></el-table-column>
+    <el-table-column prop="totalNum" label="发放数量"></el-table-column>
+    <el-table-column prop="requirePoints" label="兑换积分"></el-table-column>
+    <el-table-column prop="residueNum" label="剩余数量"></el-table-column>
+    <el-table-column prop="limitNum" label="限量领取"></el-table-column>
+    <el-table-column prop="useScope" label="使用范围"></el-table-column>
+    <el-table-column prop="startTime" label="生效时间"></el-table-column>
+    <el-table-column prop="endTime" label="截止时间"></el-table-column>
+    <el-table-column label="操作" width="250px">
+      <template #default="scope">
+        <el-button size="small" @click="ReviseOrView(scope.$index, scope.row , 0)">
+          详情
+        </el-button>
+        <el-button size="small" @click="ReviseOrView(scope.$index, scope.row, 1)">
+          编辑
+        </el-button>
+        <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
+                       title="是否确认删除" @confirm="deleteCoupons(scope.row.id)" width=180>
+          <template #reference>
+            <el-button  class="ml-5" type="danger">删除</el-button>
+          </template>
+        </el-popconfirm>
+        <el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info" icon-color="red"
+                       title="您确定删除吗？">
+        </el-popconfirm>
+      </template>
+    </el-table-column>
+  </el-table>
+  <!--  分页-->
+  <div style="padding: 10px 0">
+    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                   :current-page="searchParams.current" :page-size="searchParams.pageSize" :page-sizes="[5, 10, 15, 20]"
+                   :small="null" :disabled="null" :background="null" layout="total, sizes, prev, pager, next, jumper"
+                   :total="total" />
+  </div>
+  <!--  详情，编辑-->
+  <el-dialog v-model="DialogVisible" :title="title">
+    <el-form label-width="100px" :disabled="disabled">
+      <el-form-item label="优惠券编号">
+        <el-input v-model="editForm.id" disabled></el-input>
+      </el-form-item>
+      <el-form-item label="优惠券图片">
+        <div v-if="editForm.image">
+          <img :src="editForm.image" alt="优惠券图片" class="thumbnail" style="width: 100px; height: 100px;" />
+        </div>
+        <el-upload
+            action="#"
+            list-type="picture-card"
+            :auto-upload="false"
+            multiple="true"
+            :on-remove="handleRemove"
+            @change="(event: any) => handleChange(event, 0)"
+            limit="1" >
+          <el-icon>
+            <Plus/>
+          </el-icon>
+        </el-upload>
+      </el-form-item>
+      <el-form-item label="优惠券名称">
+        <el-input v-model="editForm.name"></el-input>
+      </el-form-item>
+      <el-form-item label="满减金额">
+        <el-input v-model="editForm.conditionAmount"></el-input>
+      </el-form-item>
+      <el-form-item label="兑换积分">
+        <el-input v-model="editForm.requirePoints"></el-input>
+      </el-form-item>
+      <el-form-item label="发放数量">
+        <el-input v-model="editForm.totalNum"></el-input>
+      </el-form-item>
+      <el-form-item label="限量领取">
+        <el-input v-model="editForm.limitNum"></el-input>
+      </el-form-item>
+      <el-form-item label="使用范围">
+        <el-input type="textarea" v-model="editForm.useScope"></el-input>
+      </el-form-item>
+      <el-form-item label="发放时间">
+        <el-input type="textarea" v-model="editForm.startTime"></el-input>
+      </el-form-item>
+      <el-form-item label="截止时间">
+        <el-input type="textarea" v-model="editForm.endTime"></el-input>
+      </el-form-item>
+      <el-form-item label="使用说明">
+        <el-input type="textarea" v-model="editForm.description"></el-input>
+      </el-form-item>
+    </el-form>
+    <template #footer >
+      <span class="dialog-footer">
+        <el-button @click="DialogVisible = false" :disabled="disabled">取消</el-button>
+        <el-button type="primary" @click="saveEdit" :disabled="disabled">确认</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import {onMounted, ref} from "vue";
+import myAxios from "@/api/myAxios";
+import {ElMessage, type UploadProps} from "element-plus";
+
+onMounted(() => {
+  getCouponsList()
+})
+
+const handleSelectionChange = (row: any) => {
+  id.value = JSON.parse(JSON.stringify(row));
+}
+const DialogVisible = ref(false)
+const total = ref(0)
+const tableData : any= ref([])
+const Couponsname = ref('')
+const title = ref('')
+const editForm : any = ref({})
+const fileSimple = ref()
+const disabled = ref(true)
+const searchParams: any = ref({ //分页
+  current: 1,
+  pageSize: 5
+})
+//删除图片
+const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
+  console.log(uploadFile, uploadFiles)
+}
+//处理行数大小变化
+const handleSizeChange = (newSize: any) => {
+  searchParams.value.pageSize = newSize //新的页面数
+  getCouponsList()
+}
+//处理当前表格变化
+const handleCurrentChange = (Current: any) => {
+  searchParams.value.current = Current
+  getCouponsList()
+}
+const delBatch =()=>{
+  //批量删除
+}
+//重置搜索
+const reset = () => {
+  Couponsname.value = '';
+}
+//搜索
+const load =()=>{
+
+}
+const saveEdit = async () => { //编辑商品
+  const res = await myAxios.post('/coupon/update',{...editForm.value})
+  if( res.data.code === 1 ) {
+    ElMessage({
+      type: 'success',
+      message: '更新成功'
+    })
+    DialogVisible.value = false
+  } else {
+    ElMessage.error('更新失败，请检查字段')
+  }
+}
+const ReviseOrView = (index: number, row: any , flag : number) => {
+  //flag值不同显示不同内容  disabled开启和关闭
+  flag ?  (title.value = "编辑商品" , disabled.value = false) : (title.value = "商品详情" , disabled.value = true)
+  DialogVisible.value = true;
+  editForm.value = row;
+};
+const getCouponsList = async ()=> {
+  try {
+    const res = await myAxios.post('/coupon/list/page', {...searchParams.value})
+    console.log(res)
+    if (res.data.code === 1) {
+      tableData.value = res.data.data.records;
+      total.value = parseInt(res.data.data.total)
+    }else {
+      ElMessage({
+        type: 'error',
+        message: '获取数据失败'
+      })
+    }
+  }catch (error){
+    ElMessage({
+      type: 'error',
+      message: '发生错误'
+    })
+  }
+}
+const handleChange = async (file: any, flag: number) => {
+  fileSimple.value = file
+  let formData = new FormData()  //这一步很重要 创建一个FormData对象
+  formData.append("file", fileSimple.value.raw)  //fileSimple.value.raw 才是文件主体  将其以文件的格式插入formData
+  const res = await myAxios({   //编写请求，与以前的请求不同，这一次要指定好头部类型和文件类型
+    url: '/file/upload/server/not_login',
+    method: 'post',
+    headers: {
+      'content-Type': 'multipart/form-data'
+    },
+    data: {
+      biz: "test",
+      file: formData.get("file") // 取出formData对象中的file
+    }
+  })
+  if (res.data.code === 1) {
+    editForm.value.image = res.data.data
+  }
+}
+const deleteCoupons = async (index: number) => {
+  console.log(typeof index)
+  const res = await myAxios.post('/coupon/delete', { id: index })
+  console.log(res)
+  if (res.data.code === 1) {
+    ElMessage({
+      type: 'success',
+      message: '删除成功',
+    })
+    getCouponsList()
+  }
+}
+
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index fa76bc9..e191a6d 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,384 +1,252 @@
 <template>
-  <!-- <div>
-    <div>
-      <el-input style="width: 200px; height: 30px; margin-right: 10px;" suffix-icon="Search" placeholder="请输入商品名称" v-model="username"></el-input>
-      <el-form-item label="商品类型" style="width: 200px; margin-right: 10px;display: inline-block">
-        <el-select v-model="resources" placeholder="请选择">
-          <el-option label="材料包" value="材料包" />
-          <el-option label="手持物" value="手持物" />
-          <el-option label="头饰" value="头饰" />
-          <el-option label="定制" value="定制" />
-          <el-option label="积分兑换" value="积分兑换" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="商品状态" style="width: 200px;margin-right: 10px;display: inline-block">
-        <el-select v-model="Region" placeholder="请选择">
-          <el-option label="已上架" value="上架" />
-          <el-option label="已下架" value="下架" />
-        </el-select>
-      </el-form-item>
-      <el-button class="ml-5" type="primary" @click="load" style="height: 25px;">搜索</el-button>
-      <el-button type="warning" @click="reset" style="height:25px">重置</el-button>
-    </div>
-    <div style="margin: 15px 0">
-      <el-popconfirm
-          class="ml-5"
-          confirm-button-text='确定'
-          cancel-button-text='取消'
-          icon="InfoFilled"
-          icon-color="red"
-          title="您确定批量删除这些数据吗？"
-          @confirm="delBatch"
-          width=180
-      >
-        <template #reference>
-          <el-button style="height: 25px" class="ml-5" type="danger">批量删除 <el-icon style="margin-left: 5px;"><Remove /></el-icon></el-button>
-        </template>
-      </el-popconfirm>
-    </div>
-    <el-table :data="tableData" border stripe header-cell-class-name="headerBg" :cell-style="{textAlign: 'center'}"
-              @selection-change="handleSelectionChange" :header-cell-style="{'text-align': 'center'}"
-    >
-      <el-table-column type="selection" width="55"></el-table-column>
-      <el-table-column label="商品编号" width="80">
-        <template #default="scope">
-          <div>
-            <span style="align-items: center">{{ scope.row.selectedItems }}</span>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="商品图片">
-        <template #default="scope">
-          <div>
-            <img :src="scope.row.img" alt="" style="height: 50px;">
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="商品名称">
-        <template #default="scope">
-          <div>
-            <span style="margin-left: 10px">{{ scope.row.name }}</span>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="商品价格" width="180">
-        <template #default="scope">
-          <div>
-            <span style="margin-left: 10px">{{ scope.row.price }}</span>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="商品类型">
-        <template #default="scope">
-          <div>
-            <span style="margin-left: 10px">{{ scope.row.resource }}</span>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="商品数量">
-        <template #default="scope">
-          <div>
-            <span style="margin-left: 10px">{{ scope.row.quantity }}</span>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="商品状态">
-        <template #default="scope">
-          <div>
-            <span style="margin-left: 10px">{{ scope.row.state }}</span>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" width="250px">
-        <template #default="scope">
-          <el-button size="small" @click="handleView(scope.$index, scope.row)">
-            详情
-          </el-button>
-          <el-button size="small" @click="handleRevise(scope.$index, scope.row)">
-            编辑
-          </el-button>
-          <el-button size="small" @click="handleOff(scope.$index, scope.row)">
-            {{scope.row.attribute}}
-          </el-button>
-          <el-button
-              size="small"
-              type="danger"
-              @click="handleDelete(scope.$index, scope.row)"
-          >
-            删除
-          </el-button>
-          <el-popconfirm
-              confirm-button-text='确定'
-              cancel-button-text='取消'
-              icon="el-icon-info"
-              icon-color="red"
-              title="您确定删除吗？"
-          >
-          </el-popconfirm>
-        </template>
-      </el-table-column>
-    </el-table>
-    <div style="padding: 10px 0">
-      <el-pagination
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          :current-page="pageNum"
-          :page-size="pageSize"
-          :page-sizes="[2, 5, 10, 20]"
-          :small="null"
-          :disabled="null"
-          :background="null"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="total"
-      />
-    </div>
+<!--  搜索-->
+  <div>
+    <el-input style="width: 200px; height: 30px; margin-right: 10px;" suffix-icon="Search" placeholder="请输入商品名称"
+              v-model="Couponsname"></el-input>
+    <el-button class="ml-5" type="primary" @click="load" style="height: 25px;">搜索</el-button>
+    <el-button type="warning" @click="reset" style="height:25px">重置</el-button>
   </div>
-  <el-dialog v-model="detailDialogVisible" title="商品详情">
-    <el-form label-width="100px">
-      <el-form-item label="商品编号">
-        <el-input v-model="selectedProduct.selectedItems" disabled></el-input>
-      </el-form-item>
-      <el-form-item label="商品图片">
-        <div v-if="selectedProduct.img">
-          <img :src="selectedProduct.img" alt="类别图标" class="thumbnail" style="width: 100px; height: 100px;"/>
+<!--  批量删除-->
+  <div style="margin: 15px 0">
+    <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
+                   title="您确定批量删除这些数据吗？" @confirm="delBatch" width=180>
+      <template #reference>
+        <el-button style="height: 25px" class="ml-5" type="danger">批量删除 <el-icon style="margin-left: 5px;">
+          <Remove />
+        </el-icon></el-button>
+      </template>
+    </el-popconfirm>
+  </div>
+<!--  数据展示-->
+  <el-table :data="tableData" border stripe header-cell-class-name="headerBg"
+            :cell-style="{ 'text-align': 'center', 'font-size': '16px' }" @selection-change="handleSelectionChange"
+            :header-cell-style="{ 'text-align': 'center' }">
+    <el-table-column type="selection" width="55"></el-table-column>
+    <el-table-column prop="id" label="编号" width="80"></el-table-column>
+    <el-table-column prop="goodImg" label="优惠券图片">
+      <template #default="scope">
+        <div>
+          <img :src="scope.row.image" alt="" style="height: 50px;">
         </div>
-      </el-form-item>
-      <el-form-item label="商品名称">
-        <el-input v-model="selectedProduct.name" disabled></el-input>
-      </el-form-item>
-      <el-form-item label="商品价格">
-        <el-input v-model="selectedProduct.price" disabled></el-input>
-      </el-form-item>
-      <el-form-item label="商品类型">
-        <el-select v-model="selectedProduct.resource" placeholder="请选择" disabled>
-          <el-option label="材料包" value="材料包" />
-          <el-option label="手持物" value="手持物" />
-          <el-option label="头饰" value="头饰" />
-          <el-option label="定制" value="定制" />
-          <el-option label="积分兑换" value="积分兑换" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="商品数量">
-        <el-input v-model="selectedProduct.quantity" disabled></el-input>
-      </el-form-item>
-      <el-form-item label="商品状态">
-        <el-select v-model="selectedProduct.state" placeholder="请选择" disabled>
-          <el-option label="上架" value="上架" />
-          <el-option label="下架" value="下架" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="是否为限定产品">
-        <el-select v-model="selectedProduct.region" placeholder="请选择" disabled>
-          <el-option label="是" value="是" />
-          <el-option label="否" value="否" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="商品标签">
-        <el-input v-model="selectedProduct.label" disabled></el-input>
-      </el-form-item>
-      <el-form-item label="商品描述">
-        <el-input type="textarea" v-model="selectedProduct.desc" disabled></el-input>
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button @click="detailDialogVisible = false">取消</el-button>
-      </span>
-    </template>
-  </el-dialog>
-
-  <el-dialog v-model="editDialogVisible" title="商品编辑">
-    <el-form label-width="100px">
-      <el-form-item label="商品编号">
-        <el-input v-model="editForm.selectedItems"></el-input>
-      </el-form-item>
-      <el-form-item label="商品图片">
-        <el-upload action="#" list-type="picture" :auto-upload="false">
-          <el-icon><Plus /></el-icon>
-          <template #file="{ file }">
-            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
+      </template>
+    </el-table-column>
+    <el-table-column prop="name" label="优惠券名称"></el-table-column>
+    <el-table-column prop="conditionAmount" label="满减金额" width="180"></el-table-column>
+    <el-table-column prop="totalNum" label="发放数量"></el-table-column>
+    <el-table-column prop="requirePoints" label="兑换积分"></el-table-column>
+    <el-table-column prop="residueNum" label="剩余数量"></el-table-column>
+    <el-table-column prop="limitNum" label="限量领取"></el-table-column>
+    <el-table-column prop="useScope" label="使用范围"></el-table-column>
+    <el-table-column prop="startTime" label="生效时间"></el-table-column>
+    <el-table-column prop="endTime" label="截止时间"></el-table-column>
+    <el-table-column label="操作" width="250px">
+      <template #default="scope">
+        <el-button size="small" @click="ReviseOrView(scope.$index, scope.row , 0)">
+          详情
+        </el-button>
+        <el-button size="small" @click="ReviseOrView(scope.$index, scope.row, 1)">
+          编辑
+        </el-button>
+        <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
+                       title="是否确认删除" @confirm="deleteCoupons(scope.row.id)" width=180>
+          <template #reference>
+            <el-button  class="ml-5" type="danger">删除</el-button>
           </template>
+        </el-popconfirm>
+        <el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info" icon-color="red"
+                       title="您确定删除吗？">
+        </el-popconfirm>
+      </template>
+    </el-table-column>
+  </el-table>
+<!--  分页-->
+  <div style="padding: 10px 0">
+    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                   :current-page="searchParams.current" :page-size="searchParams.pageSize" :page-sizes="[5, 10, 15, 20]"
+                   :small="null" :disabled="null" :background="null" layout="total, sizes, prev, pager, next, jumper"
+                   :total="total" />
+  </div>
+<!--  详情，编辑-->
+  <el-dialog v-model="DialogVisible" :title="title">
+    <el-form label-width="100px" :disabled="disabled">
+      <el-form-item label="优惠券编号">
+        <el-input v-model="editForm.id" disabled></el-input>
+      </el-form-item>
+      <el-form-item label="优惠券图片">
+        <div v-if="editForm.image">
+          <img :src="editForm.image" alt="优惠券图片" class="thumbnail" style="width: 100px; height: 100px;" />
+        </div>
+        <el-upload
+            action="#"
+            list-type="picture-card"
+            :auto-upload="false"
+            multiple="true"
+            :on-remove="handleRemove"
+            @change="(event: any) => handleChange(event, 0)"
+            limit="1" >
+          <el-icon>
+            <Plus/>
+          </el-icon>
         </el-upload>
       </el-form-item>
-      <el-form-item label="商品名称">
+      <el-form-item label="优惠券名称">
         <el-input v-model="editForm.name"></el-input>
       </el-form-item>
-      <el-form-item label="商品价格">
-        <el-input v-model="editForm.price"></el-input>
+      <el-form-item label="满减金额">
+        <el-input v-model="editForm.conditionAmount"></el-input>
       </el-form-item>
-      <el-form-item label="商品类型">
-        <el-select v-model="editForm.resource" placeholder="请选择">
-          <el-option label="材料包" value="材料包" />
-          <el-option label="手持物" value="手持物" />
-          <el-option label="头饰" value="头饰" />
-          <el-option label="定制" value="定制" />
-          <el-option label="积分兑换" value="定制" />
-        </el-select>
+      <el-form-item label="兑换积分">
+        <el-input v-model="editForm.requirePoints"></el-input>
       </el-form-item>
-      <el-form-item label="商品数量">
-        <el-input v-model="editForm.quantity"></el-input>
+      <el-form-item label="发放数量">
+        <el-input v-model="editForm.totalNum"></el-input>
       </el-form-item>
-      <el-form-item label="商品状态">
-        <el-select v-model="editForm.state"  disabled>
-          <el-option label="上架" value="上架" />
-          <el-option label="下架" value="下架" />
-        </el-select>
+      <el-form-item label="限量领取">
+        <el-input v-model="editForm.limitNum"></el-input>
       </el-form-item>
-      <el-form-item label="是否为限定产品">
-        <el-select v-model="editForm.region" placeholder="请选择">
-          <el-option label="是" value="是" />
-          <el-option label="否" value="否" />
-        </el-select>
+      <el-form-item label="使用范围">
+        <el-input type="textarea" v-model="editForm.useScope"></el-input>
       </el-form-item>
-      <el-form-item label="商品标签">
-        <el-input v-model="editForm.label"></el-input>
+      <el-form-item label="发放时间">
+        <el-input type="textarea" v-model="editForm.startTime"></el-input>
       </el-form-item>
-      <el-form-item label="商品描述">
-        <el-input type="textarea" v-model="editForm.desc"></el-input>
+      <el-form-item label="截止时间">
+        <el-input type="textarea" v-model="editForm.endTime"></el-input>
+      </el-form-item>
+      <el-form-item label="使用说明">
+        <el-input type="textarea" v-model="editForm.description"></el-input>
       </el-form-item>
     </el-form>
-    <template #footer>
+    <template #footer >
       <span class="dialog-footer">
-        <el-button @click="editDialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="saveEdit">保存</el-button>
+        <el-button @click="DialogVisible = false" :disabled="disabled">取消</el-button>
+        <el-button type="primary" @click="saveEdit" :disabled="disabled">确认</el-button>
       </span>
     </template>
-  </el-dialog> -->
+  </el-dialog> 
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
+import {onMounted, ref} from "vue";
+import myAxios from "@/api/myAxios";
+import {ElMessage, type UploadProps} from "element-plus";
+
+onMounted(() => {
+  getCouponsList()
+})
 
-// import { ElMessage } from 'element-plus';
-// import { ref, onMounted } from 'vue';
-// const pageNum = ref(0);
-// const pageSize = ref(0);
-// const total = ref(0);
-// const selectedItems = ref([]);
-// onMounted(() => {
-//   load();
-// });
 // const handleSelectionChange = (row: any) => {
-//   selectedItems.value = JSON.parse(JSON.stringify(row));
-// };
-// const username = ref('');
-// const detailDialogVisible = ref(false);
-// const editDialogVisible = ref(false);
-// const resources = ref('');
-// const Region = ref('');
-// let selectedProduct = ref('');
-// let editForm = ref({
-//   selectedItems: '',
-//   img: '',
-//   name: '',
-//   price: '',
-//   resource: '',
-//   quantity: '',
-//   state: '',
-//   attribute:'',
-//   region: '',
-//   label: '',
-//   desc: '',
-// });
-// const handleView = (index: number, row: any) => {
-//   selectedProduct = row;
-//   detailDialogVisible.value = true;
-// };
-// const handleRevise = (index: number, row: any) => {
-//   selectedProduct = row;
-//   editDialogVisible.value = true;
-//   editForm.value = row;
-// };
-// const handleOff = (index: number, row: any) => {
-//   if (row.attribute === '上架') {
-//     row.state = '上架';
-//     row.attribute = '下架';
-//   } else if (row.attribute === '下架') {
-//     row.state = '下架';
-//     row.attribute = '上架';
-//   }
-// };
-// const handleDelete = (index: number, row: any) => {
-//   const confirmDelete = window.confirm('您确定要删除该商品吗？');
-//   if (confirmDelete) {
-//     tableData.value = tableData.value.filter((item, i) => i!== index);
-//     ElMessage({
-//       message: '删除成功',
-//       type: 'success',
-//     });
-//   }
-// };
+//   id.value = JSON.parse(JSON.stringify(row));
+// }
+const DialogVisible = ref(false)
+const total = ref(0)
+const tableData : any= ref([])
+const Couponsname = ref('')
+const title = ref('')
+const editForm : any = ref({})
+const fileSimple = ref()
+const disabled = ref(true)
+const searchParams: any = ref({ //分页
+  current: 1,
+  pageSize: 5
+})
+//删除图片
+const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
+  console.log(uploadFile, uploadFiles)
+}
+//处理行数大小变化
+const handleSizeChange = (newSize: any) => {
+  searchParams.value.pageSize = newSize //新的页面数
+  getCouponsList()
+}
+//处理当前表格变化
+const handleCurrentChange = (Current: any) => {
+  searchParams.value.current = Current
+  getCouponsList()
+}
+const delBatch =()=>{
+  //批量删除
+}
+//重置搜索
+const reset = () => {
+  Couponsname.value = '';
+}
+//搜索
+const load =()=>{
 
-// const tableData = [
-//   {
-//     selectedItems: '001',
-//     img: 'https://s21.ax1x.com/2024/10/24/pAdzjZ6.png',
-//     name: '随便起的',
-//     price: '300rmb',
-//     resource: '头饰',
-//     quantity: '10',
-//     state: '上架',
-//     region: '是',
-//     label: '送礼好物',
-//     desc: '描述',
-//     attribute:'下架',
-//   },
-// ];
-// const list = {
-//   region: '',
-//   label: [],
-//   desc: '',
-// };
-// const reset = () => {
-//   username.value = '';
-//   resources.value = '';
-//   Region.value = '';
-// };
-// const saveEdit = () => {
-//   const indexToUpdate = tableData.findIndex(item => item.selectedItems === editForm.value.selectedItems);
-//   if (indexToUpdate!== -1) {
-//     tableData[indexToUpdate] = {
-//       ...tableData[indexToUpdate],
-//       ...editForm.value,
-//     };
-//     ElMessage({
-//       message: '编辑成功',
-//       type: 'success',
-//     });
-//     editDialogVisible.value = false;
-//   };
-// };
+}
+const saveEdit = async () => { //编辑商品
+  const res = await myAxios.post('/coupon/update',{...editForm.value})
+  if( res.data.code === 1 ) {
+    ElMessage({
+      type: 'success',
+      message: '更新成功'
+    })
+    DialogVisible.value = false
+  } else {
+    ElMessage.error('更新失败，请检查字段')
+  }
+}
+const ReviseOrView = (index: number, row: any , flag : number) => {
+  //flag值不同显示不同内容  disabled开启和关闭
+  flag ?  (title.value = "编辑商品" , disabled.value = false) : (title.value = "商品详情" , disabled.value = true)
+  DialogVisible.value = true;
+  editForm.value = row;
+};
+const getCouponsList = async ()=> {
+  try {
+    const res = await myAxios.post('/coupon/list/page', {...searchParams.value})
+    console.log(res)
+    if (res.data.code === 1) {
+      tableData.value = res.data.data.records;
+      total.value = parseInt(res.data.data.total)
+    }else {
+      ElMessage({
+        type: 'error',
+        message: '获取数据失败'
+      })
+    }
+  }catch (error){
+    ElMessage({
+      type: 'error',
+      message: '发生错误'
+    })
+  }
+}
+const handleChange = async (file: any, flag: number) => {
+  fileSimple.value = file
+  let formData = new FormData()  //这一步很重要 创建一个FormData对象
+  formData.append("file", fileSimple.value.raw)  //fileSimple.value.raw 才是文件主体  将其以文件的格式插入formData
+  const res = await myAxios({   //编写请求，与以前的请求不同，这一次要指定好头部类型和文件类型
+    url: '/file/upload/server/not_login',
+    method: 'post',
+    headers: {
+      'content-Type': 'multipart/form-data'
+    },
+    data: {
+      biz: "test",
+      file: formData.get("file") // 取出formData对象中的file
+    }
+  })
+  if (res.data.code === 1) {
+ editForm.value.image = res.data.data
+  }
+}
+const deleteCoupons = async (index: number) => {
+  console.log(typeof index)
+  const res = await myAxios.post('/coupon/delete', { id: index })
+  console.log(res)
+  if (res.data.code === 1) {
+    ElMessage({
+      type: 'success',
+      message: '删除成功',
+    })
+    getCouponsList()
+  }
+}
 
-// const load = async () => {
-//   await instance.get('/admin/findAllUsers').then(res => {
-//     console.log(res.data.data);
-//     res.data.data.forEach(item => {
-//       console.log(item);
-//     });
-//     tableData.value = res.data.data;
-//   });
-// };
-// const delBatchSuccess = () => {
-//   ElMessage({
-//     message: '批量删除成功',
-//     type: 'success',
-//   });
-// };
-// const delBatch = async () => {
-//   await instance.post('').then(res => {
-//     if (res.data.code === '200') {
-//       load();
-//     } else {
-//       ElMessage({
-//         message: '批量删除失败',
-//         type: 'error',
-//       });
-//     }
-//   });
-// };
 </script>
 
-<style scoped>
-.headerBg {
-  background-color: #eee!important;
-}
+<style>
+
 </style>
\ No newline at end of file