新增拼团活动设置

src/api/market/ware.js

@@ -0,0 +1,67 @@
+import request from "@/utils/request";
+import { Market_BaseUrl } from "@/api/config";
+const baseURL = Market_BaseUrl + "/admin/ware";
+
+/**
+ * 拼团商品-新增
+ * @param {*} data 
+ * @returns 
+ */
+export function addGbWare(data) {
+  return request({
+    url: `${baseURL}/addGbWare`,
+    method: "post",
+    data,
+  });
+}
+
+/**
+ * 拼团商品-修改
+ * @param {*} data 
+ * @returns 
+ */
+export function updateGbWareById(data) {
+  return request({
+    url: `${baseURL}/updateGbWareById`,
+    method: "post",
+    data,
+  });
+}
+
+/**
+ * 拼团商品-列表
+ * @param {*} data 
+ * @returns 
+ */
+export function getGbWarePage(params) {
+  return request({
+    url: `${baseURL}/getGbWarePage`,
+    method: "get",
+    params,
+  });
+}
+
+/**
+ * 拼团商品-修改状态
+ * @param {*} data 
+ * @returns 
+ */
+export function editOnlineStatus(data) {
+  return request({
+    url: `${baseURL}/editOnlineStatus`,
+    method: "post",
+    data,
+  });
+}
+
+/**
+ * 拼团商品-删除
+ * @param {*} data 
+ * @returns 
+ */
+export function deleteGbWare(id) {
+  return request({
+    url: `${baseURL}/deleteGbWare/${id}`,
+    method: "DELETE"
+  });
+}

src/views/marketing_center/group_booking/components/addGroupGoods.vue

@@ -1,69 +1,76 @@
 <!-- 添加团购商品 -->
 <template>
   <div>
-    <el-dialog :title="form.id ? '编辑商品' : '添加商品'" width="800px" v-model="visible" @submit.prevent>
-      <el-form ref="formRef" :model="form" :rules="rules" label-position="right" label-width="120">
-        <el-form-item label="可用门店">
-          <el-radio-group v-model="form.useShopType">
-            <el-radio label="仅本店" value="only"></el-radio>
-            <el-radio label="全部门店" value="all"></el-radio>
-            <el-radio label="指定门店可用" value="custom"></el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item v-if="form.useShopType == 'custom'" prop="useShops">
-          <selectBranchs all v-model="form.useShops" />
-        </el-form-item>
-        <el-form-item label="商品名称" prop="wareName">
-          <div class="column">
-            <el-input v-model="form.wareName" placeholder="请输入商品名称" :maxlength="30" style="width: 300px;"></el-input>
-            <div>
-              <el-button link type="primary">导入已有商品信息</el-button>
+    <el-dialog :title="form.id ? '编辑商品' : '添加商品'" width="800px" v-model="visible" @submit.prevent @closed="resetHandle">
+      <div class="form_warap">
+        <el-form ref="formRef" :model="form" :rules="rules" label-position="right" label-width="120">
+          <el-form-item label="可用门店">
+            <el-radio-group v-model="form.useShopType" @change="useShopTypeChange">
+              <el-radio label="仅本店" value="only"></el-radio>
+              <el-radio label="全部门店" value="all"></el-radio>
+              <el-radio label="指定门店可用" value="custom"></el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-if="form.useShopType == 'custom'" prop="useShops">
+            <selectBranchs all v-model="form.useShops" />
+          </el-form-item>
+          <el-form-item label="商品名称" prop="wareName">
+            <div class="column">
+              <el-input v-model="form.wareName" placeholder="请输入商品名称" :maxlength="30" style="width: 300px;"></el-input>
+              <div>
+                <el-button link type="primary">导入已有商品信息</el-button>
+              </div>
             </div>
-          </div>
-        </el-form-item>
-        <el-form-item label="商品描述">
-          <el-input type="textarea" :rows="5" placeholder="请输入商品描述" :maxlength="50" show-password
-            v-model="form.wareDetail" style="width: 300px;"></el-input>
-        </el-form-item>
-        <el-form-item label="商品图片" prop="wareImgs">
-          <MultiImageUpload v-model="wareImgs" @uploadAllSuccess="wareImgsMultiOnSuccess" />
-        </el-form-item>
-        <el-form-item label="原价" prop="originalPrice">
-          <el-input v-model="form.originalPrice" placeholder="请输入商品原价" :maxlength="8"
-            @input="e => form.originalPrice = filterNumberInput(e)"></el-input>
-        </el-form-item>
-        <el-form-item label="拼团价" prop="groupPrice">
-          <el-input v-model="form.groupPrice" placeholder="请输入拼团价" :maxlength="8"
-            @input="e => form.groupPrice = filterNumberInput(e)"></el-input>
-        </el-form-item>
-        <el-form-item label="成团人数" prop="groupPeopleNum">
-          <el-input v-model="form.groupPeopleNum" placeholder="当参与人数达到成团人数才能完成拼团" :maxlength="8"
-            @input="e => form.groupPeopleNum = filterNumberInput(e, 1)"></el-input>
-        </el-form-item>
-        <el-form-item label="成团期限" prop="groupTimeoutHour">
-          <el-input v-model="form.groupTimeoutHour" placeholder="最小不低于1小时，最大不超过72小时" :maxlength="8"
-            @input="e => form.groupTimeoutHour = filterNumberInput(e, 1)"></el-input>
-        </el-form-item>
-        <el-form-item label="限购数量" prop="limitBuyNum">
-          <div class="center">
-            <el-switch v-model="limitBuyNumSwitch" @change="limitBuyNumSwitchChange"></el-switch>
-            <div class="ipt" v-if="limitBuyNumSwitch">
-              <el-input :maxlength="8" v-model="form.limitBuyNum" placeholder="每人最多购买次数"
-                @input="e => form.limitBuyNum = filterNumberInput(e, 1)"></el-input>
+          </el-form-item>
+          <el-form-item label="商品描述">
+            <el-input type="textarea" :rows="5" placeholder="请输入商品描述" :maxlength="50" show-password
+              v-model="form.wareDetail" style="width: 300px;"></el-input>
+          </el-form-item>
+          <el-form-item label="商品图片" prop="wareImgs">
+            <MultiImageUpload v-model="wareImgs" @uploadAllSuccess="wareImgsMultiOnSuccess" />
+          </el-form-item>
+          <el-form-item label="原价" prop="originalPrice">
+            <el-input v-model="form.originalPrice" placeholder="请输入商品原价" :maxlength="8"
+              @input="e => form.originalPrice = filterNumberInput(e)" style="width: 300px;"></el-input>
+          </el-form-item>
+          <el-form-item label="拼团价" prop="groupPrice">
+            <el-input v-model="form.groupPrice" placeholder="请输入拼团价" :maxlength="8"
+              @input="e => form.groupPrice = filterNumberInput(e)" style="width: 300px;"></el-input>
+          </el-form-item>
+          <el-form-item label="成团人数" prop="groupPeopleNum">
+            <el-input v-model="form.groupPeopleNum" placeholder="当参与人数达到成团人数才能完成拼团" :maxlength="8"
+              @input="e => form.groupPeopleNum = filterNumberInput(e, 1)" style="width: 300px;"></el-input>
+          </el-form-item>
+          <el-form-item label="成团期限" prop="groupTimeoutHour">
+            <el-input v-model="form.groupTimeoutHour" placeholder="最小不低于1小时，最大不超过72小时" :maxlength="8"
+              @input="e => form.groupTimeoutHour = filterNumberInput(e, 1)" style="width: 300px;"></el-input>
+          </el-form-item>
+          <el-form-item label="限购数量" prop="limitBuyNum">
+            <div class="center">
+              <el-switch v-model="limitBuyNumSwitch" @change="limitBuyNumSwitchChange"></el-switch>
+              <div class="ipt" v-if="limitBuyNumSwitch">
+                <el-input :maxlength="8" v-model="form.limitBuyNum" placeholder="每人最多购买次数"
+                  @input="e => form.limitBuyNum = filterNumberInput(e, 1)" style="width: 250px;"></el-input>
+              </div>
             </div>
-          </div>
-        </el-form-item>
-        <el-form-item label="上架状态">
-          <el-switch v-model="form.onlineStatus" :active-value="1" :inactive-value="0"></el-switch>
-        </el-form-item>
-        <el-form-item label="商品详情">
-          <MultiImageUpload v-model="wareCommentImgs" @upload-all-success="wareCommentImgsMultiOnSuccess" />
-        </el-form-item>
-      </el-form>
+          </el-form-item>
+          <el-form-item label="上架状态">
+            <el-switch v-model="form.onlineStatus" :active-value="1" :inactive-value="0"></el-switch>
+          </el-form-item>
+          <el-form-item label="商品详情">
+            <MultiImageUpload v-model="wareCommentImgs" @upload-all-success="wareCommentImgsMultiOnSuccess" />
+          </el-form-item>
+        </el-form>
+      </div>
       <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="visible = false">取 消</el-button>
-          <el-button type="primary" :loading="loading" @click="submitHandle">确 定</el-button>
+        <div class="dialog_footer">
+          <div class="btn">
+            <el-button size="large" @click="visible = false" style="width: 100%;">取 消</el-button>
+          </div>
+          <div class="btn">
+            <el-button size="large" type="primary" :loading="loading" @click="submitHandle" style="width: 100%;">确
+              定</el-button>
+          </div>
         </div>
       </template>
     </el-dialog>
@@ -73,14 +80,16 @@
 <script setup>
 import { ref } from 'vue'
 import { filterNumberInput } from '@/utils'
+import { addGbWare, updateGbWareById } from '@/api/market/ware'
 
-const visible = ref(true)
+const visible = ref(false)
 const limitBuyNumSwitch = ref(false) // 如果limitBuyNum = -10086 就是false，不限购，true为限购
 const loading = ref(false)
 const wareImgs = ref([])
 const wareCommentImgs = ref([])
 const formRef = ref(null)
-const form = ref({
+const formObj = {
+  id: '',
   useShopType: 'only',              // only-仅本店 all全部 /custom 指定
   useShops: '',                     // 可用门店（指定门店时存储门店ID，逗号分隔）
   wareName: '',                     // 商品名称
@@ -93,7 +102,8 @@ const form = ref({
   limitBuyNum: '',                  // 限购数量（每人最多购买次数） -10086
   onlineStatus: 1,                  // 上架状态（0下架 1上架）
   wareCommentImgs: '',              // 商品详情图片（多个用逗号分隔）
-})
+}
+const form = ref({ ...formObj })
 
 const rules = ref({
   useShops: [
@@ -203,26 +213,64 @@ function wareCommentImgsMultiOnSuccess(res) {
   form.value.wareCommentImgs = wareCommentImgs.value.join(',')
 }
 
+function useShopTypeChange(e) {
+  form.value.useShops = ''
+}
+
 // 提交保存
+const emits = defineEmits(['success'])
 function submitHandle() {
-  console.log('form.value===', form.value);
-  return
-  formRef.value.vaildate(async vaild => {
+  formRef.value.validate(async vaild => {
     try {
       if (vaild) {
         const data = { ...form.value }
         if (form.value.useShopType == 'custom') {
           data.useShops = form.value.useShops.join(',')
         }
+        loading.value = true
+        if (form.value.id) {
+          await updateGbWareById(data)
+        } else {
+          await addGbWare(data)
+        }
+        ElNotification({
+          title: '注意',
+          message: '保存成功',
+          type: 'success'
+        })
+        emits('success')
+        visible.value = false
       }
     } catch (error) {
       console.log(error);
     }
+    setTimeout(() => {
+      loading.value = false
+    }, 500);
   })
 }
 
-function show() {
+function resetHandle() {
+  form.value = { ...formObj }
+}
+
+function show(obj) {
   visible.value = true
+  if (obj && obj.id) {
+    console.log(obj);
+    form.value = { ...obj }
+    if (form.value.wareImgs != '') {
+      wareImgs.value = form.value.wareImgs.split(',')
+    }
+    if (form.value.wareCommentImgs != '') {
+      wareCommentImgs.value = form.value.wareCommentImgs.split(',')
+    }
+    if (form.value.limitBuyNum != -10086) {
+      limitBuyNumSwitch.value = true
+    } else {
+      limitBuyNumSwitch.value = false
+    }
+  }
 }
 
 defineExpose({
@@ -231,6 +279,11 @@ defineExpose({
 </script>
 
 <style scoped lang="scss">
+.form_warap {
+  height: 60vh;
+  overflow-y: auto;
+}
+
 .column {
   display: flex;
   flex-direction: column;
@@ -241,4 +294,13 @@ defineExpose({
   align-items: center;
   gap: 10px;
 }
+
+.dialog_footer {
+  display: flex;
+  gap: 14px;
+
+  .btn {
+    flex: 1;
+  }
+}
 </style>

src/views/marketing_center/group_booking/components/groupOrder.vue

@@ -0,0 +1,256 @@
+<!-- 拼团订单 -->
+<template>
+  <div>
+    <div class="row">
+      <el-form :model="queryForm" inline>
+        <el-form-item label="订单状态">
+          <el-select v-model="queryForm.status" style="width: 150px;">
+            <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="下单时间">
+          <el-date-picker style="width: 300px" v-model="confirmOrderTimes" type="daterange" range-separator="至"
+            start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD"
+            @change="confirmOrderTimesChange"></el-date-picker>
+        </el-form-item>
+        <el-form-item label="核销时间">
+          <el-date-picker style="width: 300px" v-model="checkoutOrderTimes" type="daterange" range-separator="至"
+            start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD"
+            @change="checkoutOrderTimesChange"></el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-input :maxlength="11" v-model="queryForm.phone" placeholder="请输入手机号"
+            @input="e => queryForm.phone = filterNumberInput(e, 1)"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-input v-model="queryForm.orderNo" placeholder="请输入订单号"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-input v-model="queryForm.groupNo" placeholder="请输入关联团单号"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="Search" :loading="tableData.loading" @click="searchHandle">搜索</el-button>
+          <el-button icon="Refresh" :loading="tableData.loading" @click="refreshHandle">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="row">
+      <div class="info_wrap">
+        <div class="item">
+          <div class="icon">
+            <img class="img" src="@/assets/fenxiao/3.png">
+          </div>
+          <div class="info">
+            <div>总订单数</div>
+            <div>{{ multiplyAndFormat(infoObj.successAmount || 0) }}</div>
+          </div>
+        </div>
+        <div class="item">
+          <div class="icon">
+            <img class="img" src="@/assets/fenxiao/4.png">
+          </div>
+          <div class="info">
+            <div>已支付金额（元）</div>
+            <div>{{ multiplyAndFormat(infoObj.pendingAmount || 0) }}</div>
+          </div>
+        </div>
+        <div class="item">
+          <div class="icon">
+            <img class="img" src="@/assets/fenxiao/5.png">
+          </div>
+          <div class="info">
+            <div>已退款金额（元）</div>
+            <div>{{ multiplyAndFormat(infoObj.balanceAmount || 0) }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="row mt14">
+      <el-table :data="tableData.list" stripe border v-loading="tableData.loading">
+        <el-table-column label="订单号" prop="orderNo"></el-table-column>
+        <el-table-column label="商品" prop="orderNo"></el-table-column>
+        <el-table-column label="购买用户" prop="orderNo"></el-table-column>
+        <el-table-column label="支付金额（元）" prop="orderNo"></el-table-column>
+        <el-table-column label="支付时间" prop="orderNo"></el-table-column>
+        <el-table-column label="下单门店" prop="orderNo"></el-table-column>
+        <el-table-column label="状态" prop="orderNo"></el-table-column>
+        <el-table-column label="团单号" prop="orderNo"></el-table-column>
+        <el-table-column label="成团时间" prop="orderNo"></el-table-column>
+        <el-table-column label="核销码" prop="orderNo"></el-table-column>
+        <el-table-column label="核销时间" prop="orderNo"></el-table-column>
+        <el-table-column label="操作" width="150">
+          <template v-slot="scope">
+            <el-button link type="primary">核销</el-button>
+            <el-button link type="danger">退款</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="row mt14">
+      <el-pagination v-model:current-page="tableData.page" v-model:page-size="tableData.size"
+        :page-sizes="[10, 20, 50, 100, 500]" background layout="total, sizes, prev, pager, next, jumper"
+        :total="tableData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import dayjs from 'dayjs'
+import { ref, reactive } from 'vue'
+import { filterNumberInput, multiplyAndFormat } from '@/utils'
+
+const statusList = ref([
+  {
+    label: '待成团',
+    value: 1,
+    type: 'info'
+  },
+  {
+    label: '待核销',
+    value: 2,
+    type: 'primary'
+  },
+  {
+    label: '已核销',
+    value: 3,
+    type: 'success'
+  },
+  {
+    label: '退款中',
+    value: 4,
+    type: 'warning'
+  },
+  {
+    label: '已退款',
+    value: 5,
+    type: 'info'
+  }
+])
+
+const confirmOrderTimes = ref([])
+const checkoutOrderTimes = ref([])
+const queryForm = reactive({
+  status: '',
+  orderStartTime: '',
+  orderEndTime: '',
+  checkoutStartTime: '',
+  checkoutEndTime: '',
+  phone: '',
+  orderNo: '',
+  groupNo: ''
+})
+
+// 搜索
+function searchHandle() {
+  tableData.page = 1
+  getTableData()
+}
+
+// 重置搜索
+function refreshHandle() {
+  confirmOrderTimes.value = []
+  checkoutOrderTimes.value = []
+
+  queryForm.status = ''
+  queryForm.orderStartTime = ''
+  queryForm.orderEndTime = ''
+  queryForm.checkoutStartTime = ''
+  queryForm.checkoutEndTime = ''
+  queryForm.phone = ''
+  queryForm.orderNo = ''
+  queryForm.groupNo = ''
+  searchHandle()
+}
+
+// 下单时间范围
+function confirmOrderTimesChange(value) {
+  if (value && value.length === 2) {
+    queryForm.orderStartTime = dayjs(value[0]).format('YYYY-MM-DD 00:00:00');
+    queryForm.orderEndTime = dayjs(value[1]).format('YYYY-MM-DD 23:59:59');
+  } else {
+    queryForm.orderStartTime = '';
+    queryForm.orderEndTime = '';
+  }
+}
+
+// 核销时间范围
+function checkoutOrderTimesChange(value) {
+  if (value && value.length === 2) {
+    queryForm.checkoutStartTime = dayjs(value[0]).format('YYYY-MM-DD 00:00:00');
+    queryForm.checkoutEndTime = dayjs(value[1]).format('YYYY-MM-DD 23:59:59');
+  } else {
+    queryForm.checkoutStartTime = '';
+    queryForm.checkoutEndTime = '';
+  }
+}
+
+const infoObj = reactive({})
+
+const tableData = reactive({
+  page: 1,
+  size: 10,
+  total: 0,
+  list: [],
+  loading: false
+})
+
+// 分页大小发生变化
+function handleSizeChange(e) {
+  tableData.size = e;
+  getTableData();
+}
+
+// 分页发生变化
+function handleCurrentChange(e) {
+  tableData.page = e;
+  getTableData();
+}
+
+async function getTableData() {
+  try {
+
+  } catch (error) {
+    console.log(error);
+  }
+}
+
+onMounted(() => {
+  getTableData()
+})
+</script>
+
+<style scoped lang="scss">
+.row {
+  &.mt14 {
+    margin-top: 14px;
+  }
+}
+
+.info_wrap {
+  display: flex;
+  gap: 48px;
+
+  .item {
+    display: flex;
+    align-items: center;
+    border: 1px solid #D9D9D9;
+    border-radius: 8px;
+    padding: 0 10px;
+
+    .icon {
+      width: 44px;
+      height: 44px;
+
+      .img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .info {
+      flex: 1;
+      padding: 10px;
+    }
+  }
+}
+</style>

src/views/marketing_center/group_booking/components/groupPage.vue

@@ -7,7 +7,7 @@
           <el-button type="primary" icon="Plus" @click="addGroupGoodsRef.show()">添加</el-button>
         </el-form-item>
         <el-form-item label="上架状态">
-          <el-select v-model="queryForm.status" style="width: 100px;">
+          <el-select v-model="queryForm.onlineStatus" style="width: 100px;">
             <el-option :label="item.label" :value="item.value" v-for="item in statusList" :key="item.value"></el-option>
           </el-select>
         </el-form-item>
@@ -17,7 +17,7 @@
             @change="selectTimeChange"></el-date-picker>
         </el-form-item>
         <el-form-item label="商品名称">
-          <el-input v-model="queryForm.name" placeholder="请输入商品名称"></el-input>
+          <el-input v-model="queryForm.wareName" placeholder="请输入商品名称"></el-input>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" icon="Search" :loading="tableData.loading" @click="searchHandle">搜索</el-button>
@@ -27,29 +27,60 @@
     </div>
     <div class="row mt14">
       <el-table :data="tableData.list" stripe border v-loading="tableData.loading">
-        <el-table-column label="商品图片"></el-table-column>
-        <el-table-column label="商品名称"></el-table-column>
-        <el-table-column label="原价（元）"></el-table-column>
-        <el-table-column label="拼团价（元）"></el-table-column>
-        <el-table-column label="成团期限（小时）"></el-table-column>
-        <el-table-column label="成团人数"></el-table-column>
-        <el-table-column label="上架状态"></el-table-column>
-        <el-table-column label="创建时间"></el-table-column>
-        <el-table-column label="操作">
+        <el-table-column label="商品图片">
           <template v-slot="scope">
-            <el-button link type="primary">编辑</el-button>
-            <el-button link type="danger">删除</el-button>
+            <div class="wareImgs">
+              <el-image :src="scope.row.wareImgs.split(',')[0]" style="width: 100%;height: 100%;" fit="cover"
+                :preview-src-list="scope.row.wareImgs.split(',')" :initial-index="0" preview-teleported></el-image>
+              <div class="num" v-if="scope.row.wareImgs.split(',').length > 1">
+                +{{ scope.row.wareImgs.split(',').length }}
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="商品名称" prop="wareName"></el-table-column>
+        <el-table-column label="原价（元）" prop="originalPrice"></el-table-column>
+        <el-table-column label="拼团价（元）" prop="groupPrice"></el-table-column>
+        <el-table-column label="成团期限（小时）" prop="groupTimeoutHour"></el-table-column>
+        <el-table-column label="成团人数" prop="groupPeopleNum"></el-table-column>
+        <el-table-column label="上架状态" prop="onlineStatus">
+          <template v-slot="scope">
+            <el-switch v-model="scope.row.onlineStatus" :active-value="1" :inactive-value="0"
+              @change="editOnlineStatusAjax($event, scope.row)"></el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column label="创建时间" prop="createTime"></el-table-column>
+        <el-table-column label="操作" width="150">
+          <template v-slot="scope">
+            <template v-if="scope.row.onlineStatus">
+              <el-button link type="primary" disabled>（下架后编辑/删除）</el-button>
+            </template>
+            <template v-else>
+              <el-button link type="primary" @click="addGroupGoodsRef.show(scope.row)">编辑</el-button>
+              <el-popconfirm title="确认要删除吗？" @confirm="delHandle(scope.row)">
+                <template #reference>
+                  <el-button type="danger" link>删除</el-button>
+                </template>
+              </el-popconfirm>
+            </template>
           </template>
         </el-table-column>
       </el-table>
     </div>
-    <addGroupGoods ref="addGroupGoodsRef" />
+    <div class="row mt14">
+      <el-pagination v-model:current-page="tableData.page" v-model:page-size="tableData.size"
+        :page-sizes="[10, 20, 50, 100, 500]" background layout="total, sizes, prev, pager, next, jumper"
+        :total="tableData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+    </div>
+    <addGroupGoods ref="addGroupGoodsRef" @success="searchHandle" />
   </div>
 </template>
 
 <script setup>
+import dayjs from 'dayjs';
 import { ref, reactive } from 'vue'
 import addGroupGoods from './addGroupGoods.vue';
+import { getGbWarePage, editOnlineStatus, deleteGbWare } from '@/api/market/ware'
 
 const addGroupGoodsRef = ref(null)
 
@@ -79,23 +110,26 @@ const selectTimeChange = (value) => {
 };
 
 const queryForm = reactive({
-  status: '',
+  onlineStatus: '',
   startTime: '',
   endTime: '',
-  name: ''
+  wareName: ''
 })
 
 // 搜索
 function searchHandle() {
-
+  tableData.page = 1
+  getGbWarePageAjax()
 }
 
 // 重置搜索
 function refreshHandle() {
-  queryForm.status = ''
+  times.value = []
+  queryForm.onlineStatus = ''
   queryForm.startTime = ''
   queryForm.endTime = ''
-  queryForm.name = ''
+  queryForm.wareName = ''
+  searchHandle()
 }
 
 const tableData = reactive({
@@ -105,6 +139,61 @@ const tableData = reactive({
   list: [],
   loading: false
 })
+
+// 分页大小发生变化
+function handleSizeChange(e) {
+  tableData.size = e;
+  getGbWarePageAjax();
+}
+
+// 分页发生变化
+function handleCurrentChange(e) {
+  tableData.page = e;
+  getGbWarePageAjax();
+}
+
+// 拼团商品-列表
+async function getGbWarePageAjax() {
+  try {
+    tableData.loading = true
+    const res = await getGbWarePage({
+      page: tableData.page,
+      size: tableData.size,
+      ...queryForm
+    })
+    tableData.list = res.records
+    tableData.total = res.totalRow
+  } catch (error) {
+    console.log(error);
+  }
+  setTimeout(() => {
+    tableData.loading = false
+  }, 500);
+}
+
+// 修改状态
+async function editOnlineStatusAjax(e, row) {
+  try {
+    await editOnlineStatus(row)
+    getGbWarePageAjax()
+  } catch (error) {
+    console.log(error);
+  }
+}
+
+// 删除
+async function delHandle(row) {
+  try {
+    await deleteGbWare(row.id)
+    getGbWarePageAjax()
+  } catch (error) {
+    console.log(error);
+  }
+}
+
+onMounted(() => {
+  getGbWarePageAjax()
+})
 </script>
 
 <style scoped lang="scss">
@@ -113,4 +202,35 @@ const tableData = reactive({
     margin-top: 14px;
   }
 }
+
+.wareImgs {
+  position: relative;
+  --size: 80px;
+  width: var(--size);
+  height: var(--size);
+  border: 1px solid #ececec;
+  border-radius: 4px;
+  overflow: hidden;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  .num {
+    padding: 0 4px;
+    height: 16px;
+    font-size: 10px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 10;
+    border-radius: 0 0 0 4px;
+    background-color: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(10px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+  }
+}
 </style>

src/views/marketing_center/group_booking/index.vue

@@ -7,7 +7,8 @@
         <tabHeader v-model="tabActiveIndex" :list="tabList" />
       </div>
       <div class="row mt14">
-        <groupPage ref="groupPageRef" name="groupPage" key="groupPage" />
+        <groupPage name="groupPage" key="groupPage" v-if="tabActiveIndex == 0" />
+        <groupOrder name="groupOrder" key="groupOrder" v-if="tabActiveIndex == 1" />
       </div>
     </div>
   </div>
@@ -16,8 +17,7 @@
 <script setup>
 import { ref } from 'vue'
 import groupPage from './components/groupPage.vue'
-
-const groupPageRef = ref(null)
+import groupOrder from './components/groupOrder.vue'
 
 const tabActiveIndex = ref(0)
 const tabList = ref([