新增商品拼团

src/views/admin/system/role/components/roleTemplateDialog.vue

@@ -52,16 +52,13 @@ async function roleTemplateListAjax() {
       el.cehcked = false
     });
     list.value = res
-
-    if (list.value.length > 0) {
-      visible.value = true
-    }
   } catch (error) {
     console.log(error);
   }
 }
 
 function show() {
+  visible.value = true
   roleTemplateListAjax()
 }
 

src/views/admin/system/role/index.vue

@@ -172,6 +172,7 @@ import menuSelect from "./components/menus.vue";
 import RoleApi, { SysRole, addRequest, getListRequest } from "@/api/account/role";
 import MenuAPI, { type RouteVO, CashMenu } from "@/api/account/menu";
 import roleTemplateDialog from "./components/roleTemplateDialog.vue";
+import { roleTemplateList } from '@/api/account/roleTemplate'
 
 const roleTemplateDialogRef = ref(null)
 
@@ -242,11 +243,18 @@ function handlePlatformTypeChange(e: string | number | boolean | undefined) {
 function handleQuery() {
   loading.value = true;
   RoleApi.getList(queryParams)
-    .then((data) => {
+    .then(async (data) => {
       roleList.value = data.records;
       total.value = data.totalRow;
 
-      if (data.records.length == 0) {
+      console.log('data===', data);
+
+      const res = await roleTemplateList({ isEnable: 1 })
+
+      console.log('roleTemplateList===', res);
+
+
+      if (data.records.length == 0 && res.length > 0) {
         roleTemplateDialogRef.value.show()
       }
     })

src/views/marketing_center/data.js

@@ -52,7 +52,7 @@ export const newMenus = [
       {
         name: "商品拼团",
         icon: "sppt",
-        pathName: "",
+        pathName: "group_booking",
         intro: "拼团"
       },
     ]

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

@@ -0,0 +1,244 @@
+<!-- 添加团购商品 -->
+<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>
+            </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>
+            </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>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="visible = false">取 消</el-button>
+          <el-button type="primary" :loading="loading" @click="submitHandle">确 定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { filterNumberInput } from '@/utils'
+
+const visible = ref(true)
+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({
+  useShopType: 'only',              // only-仅本店 all全部 /custom 指定
+  useShops: '',                     // 可用门店（指定门店时存储门店ID，逗号分隔）
+  wareName: '',                     // 商品名称
+  wareDetail: '',                   // 商品描述
+  wareImgs: '',                     // 商品图片（多个用逗号分隔）
+  originalPrice: '',                // 原价
+  groupPrice: '',                   // 拼团价
+  groupPeopleNum: '',               // 成团人数 最小为1
+  groupTimeoutHour: '',             // 成团期限（小时）不低于1小时，最大72小时
+  limitBuyNum: '',                  // 限购数量（每人最多购买次数） -10086
+  onlineStatus: 1,                  // 上架状态（0下架 1上架）
+  wareCommentImgs: '',              // 商品详情图片（多个用逗号分隔）
+})
+
+const rules = ref({
+  useShops: [
+    {
+      required: true,
+      message: "请选择门店",
+      trigger: "blur",
+    }
+  ],
+  wareName: [
+    {
+      required: true,
+      message: "请输入商品名称",
+      trigger: "blur",
+    }
+  ],
+  wareImgs: [
+    {
+      required: true,
+      message: "请选择商品图片",
+      trigger: "change",
+    }
+  ],
+  originalPrice: [
+    {
+      required: true,
+      validator: (rule, value, callback) => {
+        if (form.value.originalPrice <= 0 || !form.value.originalPrice) {
+          callback(new Error('请输入商品原价'))
+        } else {
+          callback()
+        }
+      },
+      trigger: "blur",
+    }
+  ],
+  groupPrice: [
+    {
+      required: true,
+      validator: (rule, value, callback) => {
+        if (form.value.groupPrice <= 0 || !form.value.groupPrice) {
+          callback(new Error('请输入拼团价'))
+        } else {
+          callback()
+        }
+      },
+      trigger: "blur",
+    }
+  ],
+  groupPeopleNum: [
+    {
+      required: true,
+      validator: (rule, value, callback) => {
+        if (form.value.groupPeopleNum < 1 || !form.value.groupPeopleNum) {
+          callback(new Error('请输入成团人数'))
+        } else {
+          callback()
+        }
+      },
+      trigger: "blur",
+    }
+  ],
+  groupTimeoutHour: [
+    {
+      required: true,
+      validator: (rule, value, callback) => {
+        if (form.value.groupTimeoutHour < 1 || !form.value.groupTimeoutHour) {
+          callback(new Error('请输入成团人数'))
+        } else if (form.value.groupTimeoutHour > 72) {
+          callback(new Error('最大不超过72小时'))
+        } else {
+          callback()
+        }
+      },
+      trigger: "blur",
+    }
+  ],
+  limitBuyNum: [
+    {
+      validator: (rule, value, callback) => {
+        if (form.value.limitBuyNumSwitch && !form.value.limitBuyNum) {
+          callback(new Error('请输入每人最多购买次数'))
+        } else {
+          callback()
+        }
+      },
+      trigger: "blur",
+    }
+  ]
+})
+
+function limitBuyNumSwitchChange(e) {
+  if (e) {
+    form.value.limitBuyNum = ''
+  } else {
+    form.value.limitBuyNum = -10086
+  }
+}
+
+// 多图上传成功
+function wareImgsMultiOnSuccess(response) {
+  form.value.wareImgs = wareImgs.value.join(',')
+}
+
+// 商品详情图片上传成功
+function wareCommentImgsMultiOnSuccess(res) {
+  form.value.wareCommentImgs = wareCommentImgs.value.join(',')
+}
+
+// 提交保存
+function submitHandle() {
+  console.log('form.value===', form.value);
+  return
+  formRef.value.vaildate(async vaild => {
+    try {
+      if (vaild) {
+        const data = { ...form.value }
+        if (form.value.useShopType == 'custom') {
+          data.useShops = form.value.useShops.join(',')
+        }
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  })
+}
+
+function show() {
+  visible.value = true
+}
+
+defineExpose({
+  show
+})
+</script>
+
+<style scoped lang="scss">
+.column {
+  display: flex;
+  flex-direction: column;
+}
+
+.center {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+</style>

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

@@ -0,0 +1,116 @@
+<!-- 拼团活动 -->
+<template>
+  <div>
+    <div class="row">
+      <el-form :model="queryForm" inline @submit.prevent>
+        <el-form-item>
+          <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-option :label="item.label" :value="item.value" v-for="item in statusList" :key="item.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="创建时间">
+          <el-date-picker style="width: 300px" v-model="times" type="daterange" range-separator="至"
+            start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD"
+            @change="selectTimeChange"></el-date-picker>
+        </el-form-item>
+        <el-form-item label="商品名称">
+          <el-input v-model="queryForm.name" 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 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="操作">
+          <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>
+    <addGroupGoods ref="addGroupGoodsRef" />
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import addGroupGoods from './addGroupGoods.vue';
+
+const addGroupGoodsRef = ref(null)
+
+const statusList = ref([
+  {
+    label: '上架',
+    value: 1,
+    type: 'success'
+  },
+  {
+    label: '下架',
+    value: 0,
+    type: 'info'
+  },
+])
+
+const times = ref([])
+
+const selectTimeChange = (value) => {
+  if (value && value.length === 2) {
+    queryForm.startTime = dayjs(value[0]).format('YYYY-MM-DD 00:00:00');
+    queryForm.endTime = dayjs(value[1]).format('YYYY-MM-DD 23:59:59');
+  } else {
+    queryForm.startTime = '';
+    queryForm.endTime = '';
+  }
+};
+
+const queryForm = reactive({
+  status: '',
+  startTime: '',
+  endTime: '',
+  name: ''
+})
+
+// 搜索
+function searchHandle() {
+
+}
+
+// 重置搜索
+function refreshHandle() {
+  queryForm.status = ''
+  queryForm.startTime = ''
+  queryForm.endTime = ''
+  queryForm.name = ''
+}
+
+const tableData = reactive({
+  page: 1,
+  size: 10,
+  total: 0,
+  list: [],
+  loading: false
+})
+</script>
+
+<style scoped lang="scss">
+.row {
+  &.mt14 {
+    margin-top: 14px;
+  }
+}
+</style>

src/views/marketing_center/group_booking/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="gyq_container">
+    <div class="gyq_content">
+      <HeaderCard name="商品拼团" intro="拼团" icon="sppt" showSwitch v-model:isOpen="form.isEnable">
+      </HeaderCard>
+      <div class="row mt14">
+        <tabHeader v-model="tabActiveIndex" :list="tabList" />
+      </div>
+      <div class="row mt14">
+        <groupPage ref="groupPageRef" name="groupPage" key="groupPage" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import groupPage from './components/groupPage.vue'
+
+const groupPageRef = ref(null)
+
+const tabActiveIndex = ref(0)
+const tabList = ref([
+  {
+    label: '拼团活动',
+    value: 0
+  },
+  {
+    label: '拼团订单',
+    value: 1
+  }
+])
+
+const form = ref({
+  isEnable: 0
+})
+</script>
+
+<style scoped lang="scss">
+.gyq_container {
+  padding: 14px;
+
+  .gyq_content {
+    padding: 14px;
+    background-color: #fff;
+    border-radius: 8px;
+  }
+}
+
+.row {
+  &.mt14 {
+    margin-top: 14px;
+  }
+}
+
+.tips {
+  margin-top: 14px;
+}
+</style>