新增团购券分类

2024-05-11 09:04:31 +08:00 · 2024-05-11 09:04:31 +08:00 · 8441022041
parent 2e2205badc
commit 8441022041
9 changed files with 535 additions and 76 deletions
--- a/.env.production
+++ b/.env.production
@ -2,7 +2,8 @@ ENV = 'production'

 # 如果使用 Nginx 代理后端接口，那么此处需要改为 '/'，文件查看 Docker 部署篇，Nginx 配置
 # 接口地址，注意协议，如果你没有配置 ssl，需要将 https 改为 http
-VUE_APP_BASE_API  = 'https://cashieradmin.sxczgkj.cn'
+# VUE_APP_BASE_API  = 'https://cashieradmin.sxczgkj.cn'
+VUE_APP_BASE_API  = 'https://admintestpapi.sxczgkj.cn'
 # VUE_APP_BASE_API  = 'http://192.168.2.98:8000'
 # 如果接口是 http 形式， wss 需要改为 ws
 VUE_APP_WS_API = 'wss://123.56.110.252
--- a/src/api/setting.js
+++ b/src/api/setting.js
@ -72,3 +72,27 @@ export function tbPlatformDictGet(params) {
    params
  });
 }
+
+/**
+ * 新增团购卷分类
+ * @returns
+ */
+export function tbCouponCategoryPostPut(data, method = "post") {
+  return request({
+    url: "/api/tbCouponCategory",
+    method: method,
+    data: data
+  });
+}
+
+/**
+ * 查询团购卷分类
+ * @returns
+ */
+export function tbCouponCategoryGet(params) {
+  return request({
+    url: "/api/tbCouponCategory",
+    method: "get",
+    params
+  });
+}
--- a/src/components/groupTypeList/index.vue
+++ b/src/components/groupTypeList/index.vue
@ -0,0 +1,113 @@
+<template>
+    <el-dialog title="选择商品" :visible.sync="dialogVisible" @open="resetHandle()">
+        <el-form :model="searhForm" inline>
+            <el-form-item>
+                <el-input v-model="searhForm.name" placeholder="商品名称"></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="getTableData">查询</el-button>
+                <el-button @click="resetHandle">重置</el-button>
+            </el-form-item>
+        </el-form>
+        <div class="head-container">
+            <el-table ref="table" :data="tableData.list" v-loading="tableData.loading">
+                <el-table-column label="名称" prop="name"></el-table-column>
+                <el-table-column label="状态" prop="status">
+                    <template v-slot="scope">
+                        <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
+                            disabled></el-switch>
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作">
+                    <template v-slot="scope">
+                        <el-button type="primary" size="mini" @click="confirmHandle(scope.row)">选择</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
+            @current-change="paginationChange" @size-change="sizeChange"
+            layout="total, sizes, prev, pager, next, jumper"></el-pagination>
+    </el-dialog>
+</template>
+
+<script>
+import { tbCouponCategoryGet } from "@/api/setting";
+export default {
+    data() {
+        return {
+            dialogVisible: false,
+            searhForm: {
+                name: ''
+            },
+            tableData: {
+                page: 0,
+                size: 10,
+                total: 0,
+                loading: false,
+                list: []
+            }
+        }
+    },
+    methods: {
+        // 确定选商品
+        confirmHandle(row) {
+            this.$emit('success', row)
+            this.close()
+        },
+        // 重置查询
+        resetHandle() {
+            this.searhForm.name = ''
+            this.tableData.page = 0
+            this.tableData.size = 10
+            this.tableData.list = []
+            this.getTableData()
+        },
+        // 分页大小改变
+        sizeChange(e) {
+            this.tableData.size = e
+            this.getTableData()
+        },
+        // 分页回调
+        paginationChange(e) {
+            this.tableData.page = e - 1
+            this.getTableData()
+        },
+        // 商品列表
+        async getTableData() {
+            this.tableData.loading = true
+            try {
+                const res = await tbCouponCategoryGet({
+                    page: this.tableData.page,
+                    size: this.tableData.size,
+                    name: this.searhForm.name,
+                    sort: 'id',
+                })
+                this.tableData.loading = false
+                this.tableData.list = res.content
+                this.tableData.total = res.totalElements
+            } catch (error) {
+                console.log(error)
+            }
+        },
+        show() {
+            this.dialogVisible = true
+            this.resetHandle()
+        },
+        close() {
+            this.dialogVisible = false
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.shop_info {
+    display: flex;
+    align-items: center;
+
+    span {
+        margin-left: 10px;
+    }
+}
+</style>
--- a/src/views/shop/components/addShop.vue
+++ b/src/views/shop/components/addShop.vue
@ -78,7 +78,7 @@
        <el-dialog title="选择地址" :visible.sync="showLocation" :modal="false" :modal-append-to-body="false">
            <div class="map_box">
                <div class="map">
-                    <el-amap :center="amapOptions.center">
+                    <el-amap ref="map" :center="amapOptions.center">
                        <el-amap-marker :position="amapOptions.center"></el-amap-marker>
                    </el-amap>
                </div>
@ -86,7 +86,6 @@
                    <el-amap-search-box :search-option="searchOption"
                        :on-search-result="onSearchResult"></el-amap-search-box>
                </div>
-
                <div class="search_wrap">
                    <div class="item" v-for="item in locationSearchList" :key="item.id">
                        <div class="left">
@ -231,6 +230,16 @@ export default {
            this.form.lng = item.lng
            this.form.lat = item.lat
            this.showLocation = false
+
+            console.log(this.$refs.map.$$getInstance());
+
+            const position = { lng: item.lng, lat: item.lat };
+            this.$refs.map.geocoder.getAddress(position, (status, result) => {
+                if (status === 'complete' && result.info === 'OK') {
+                    // 打印省市区信息
+                    console.log(result.regeocode.addressComponent);
+                }
+            })
        },
        // 保存
        submitHandle() {
--- a/src/views/system/group_type/components/add.vue
+++ b/src/views/system/group_type/components/add.vue
@ -0,0 +1,83 @@
+<template>
+    <el-dialog :title="form.id ? '编辑' : '添加'" :visible.sync="dialogVisible" @close="reset">
+        <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
+            <el-form-item label="字典名称" prop="name">
+                <el-input v-model="form.name" placeholder="请输入分类名称"></el-input>
+            </el-form-item>
+            <el-form-item label="状态">
+                <el-switch v-model="form.status" :active-value="1" :inactive-value="0"></el-switch>
+            </el-form-item>
+            <!-- <el-form-item label="排序">
+                <el-input-number v-model="form.sort" controls-position="right" :min="0"></el-input-number>
+            </el-form-item> -->
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="dialogVisible = false">取 消</el-button>
+            <el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
+        </span>
+    </el-dialog>
+</template>
+
+<script>
+import { tbCouponCategoryPostPut } from "@/api/setting";
+export default {
+    data() {
+        return {
+            dialogVisible: false,
+            loading: false,
+            form: {
+                id: "",
+                name: "",
+                status: 1
+            },
+            rules: {
+                name: [
+                    {
+                        required: true,
+                        message: " ",
+                        trigger: "blur"
+                    }
+                ]
+            },
+            resetForm: "",
+        };
+    },
+    mounted() {
+        this.resetForm = { ...this.form };
+    },
+    methods: {
+        onSubmitHandle() {
+            this.$refs.form.validate(async valid => {
+                if (valid) {
+                    try {
+                        this.loading = true
+                        let res = await tbCouponCategoryPostPut(this.form, this.form.id ? "put" : "post");
+                        this.$emit("success", res);
+                        this.close();
+                        this.$notify({
+                            title: "成功",
+                            message: `${this.form.id ? "编辑" : "添加"}成功`,
+                            type: "success"
+                        });
+                        this.loading = false
+                    } catch (error) {
+                        console.log(error);
+                    }
+                }
+            });
+        },
+        show(obj) {
+            this.dialogVisible = true;
+            if (obj && obj.id) {
+                this.form = { ...obj };
+            }
+        },
+        close() {
+            this.dialogVisible = false;
+        },
+        reset() {
+            this.form = { ...this.resetForm };
+        }
+    }
+};
+</script>
--- a/src/views/system/group_type/index.vue
+++ b/src/views/system/group_type/index.vue
@ -0,0 +1,133 @@
+<template>
+    <div class="app-container">
+        <div class="head-container">
+            <el-row :gutter="20">
+                <el-col :span="6">
+                    <el-input v-model="query.name" size="small" clearable placeholder="请输入名称" style="width: 100%;"
+                        class="filter-item" @keyup.enter.native="getTableData" />
+                </el-col>
+                <el-col :span="6">
+                    <el-button type="primary" @click="getTableData">查询</el-button>
+                    <el-button @click="resetHandle">重置</el-button>
+                </el-col>
+            </el-row>
+        </div>
+        <div class="head-container">
+            <el-button type="primary" icon="el-icon-plus" @click="$refs.addRef.show()">
+                添加团购券分类
+            </el-button>
+            <add ref="addRef" @success="getTableData" />
+        </div>
+        <div class="head-container">
+            <el-table :data="tableData.list" v-loading="tableData.loading">
+                <el-table-column label="名称" prop="name"></el-table-column>
+                <el-table-column label="状态" prop="status">
+                    <template v-slot="scope">
+                        <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
+                            @change="changeHot($event, scope.row)"></el-switch>
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作" width="300">
+                    <template v-slot="scope">
+                        <el-button type="text" size="mini" round icon="el-icon-edit"
+                            @click="$refs.addRef.show(scope.row)">编辑</el-button>
+                        <el-popconfirm title="确定删除吗？" @confirm="delHandle([scope.row.id])">
+                            <el-button type="text" size="mini" round icon="el-icon-delete" slot="reference">
+                                删除
+                            </el-button>
+                        </el-popconfirm>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <div class="head-container">
+            <el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
+                @current-change="paginationChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
+        </div>
+    </div>
+</template>
+
+<script>
+import add from "./components/add";
+import { tbCouponCategoryGet, tbCouponCategoryPostPut } from "@/api/setting";
+export default {
+    components: {
+        add
+    },
+    data() {
+        return {
+            query: {
+                name: ''
+            },
+            tableData: {
+                page: 0,
+                size: 10,
+                total: 0,
+                loading: false,
+                list: []
+            }
+        };
+    },
+    mounted() {
+        this.getTableData();
+    },
+    methods: {
+        // 切换状态
+        async changeHot(e, row) {
+            try {
+                this.tableData.loading = true
+                await tbCouponCategoryPostPut({ ...row })
+                this.getTableData()
+            } catch (error) {
+                console.log(error);
+            }
+        },
+        // 查询table
+        toQuery() {
+            this.getTableData();
+        }, // 重置查询
+        resetHandle() {
+            this.tableData.page = 0;
+            this.query.blurry = "";
+            this.getTableData();
+        },
+        // 分页回调
+        paginationChange(e) {
+            this.tableData.page = e - 1;
+            this.getTableData();
+        },
+        // 删除
+        async delHandle(ids) {
+            try {
+                await tbCouponCategoryPostPut(ids, "delete");
+                this.$notify({
+                    title: "成功",
+                    message: `删除成功`,
+                    type: "success"
+                });
+                this.getTableData();
+            } catch (error) {
+                console.log(error);
+            }
+        },
+        async getTableData() {
+            this.tableData.loading = true;
+            try {
+                const res = await tbCouponCategoryGet(
+                    {
+                        page: this.tableData.page,
+                        size: this.tableData.size,
+                        blurry: this.query.name,
+                        sort: ''
+                    }
+                );
+                this.tableData.loading = false;
+                this.tableData.list = res.content;
+                this.tableData.total = res.totalElements;
+            } catch (error) {
+                console.log(error);
+            }
+        }
+    }
+};
+</script>
--- a/src/views/system/resource_manage/components/add.vue
+++ b/src/views/system/resource_manage/components/add.vue
@ -1,33 +1,47 @@
 <template>
+  <div>
    <el-dialog :title="form.id ? '编辑' : '添加'" :visible.sync="dialogVisible" @close="reset">
      <div class="div_h">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
-        <el-form-item label="展示图">
-          <uploadImg ref="uploadImg2" @success="res => form.coverImg = res[0]" @remove="form.coverImg = ''" />
-        </el-form-item>
-        <el-form-item label="描述" prop="name">
-          <el-input v-model="form.name" placeholder="请输入描述"></el-input>
-        </el-form-item>
-        <el-form-item label="值" prop="value">
-          <el-input v-model="form.value" placeholder="请输入值"></el-input>
-        </el-form-item>
-        <el-form-item label="字体色">
-          <el-color-picker v-model="form.fontColor"></el-color-picker>
-        </el-form-item>
-        <el-form-item label="背景色">
-          <el-color-picker v-model="form.backColor"></el-color-picker>
-        </el-form-item>
          <el-form-item label="资源类型" prop="type">
-          <el-select v-model="form.type" placeholder="请选择资源类型">
+            <el-select v-model="form.type" placeholder="请选择资源类型" @change="typeChange">
              <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
+          <el-form-item label="团购卷" prop="group" v-if="form.type == 'group'">
+            <div v-if="!productIds.length">
+              <el-button type="primary" icon="el-icon-plus" @click="$refs.groupTypeList.show()">
+                添加团购券
+              </el-button>
+            </div>
+            <div class="shop_list" v-else>
+              <el-tag closable type="primary" v-for="(item, index) in productIds" :key="item.id"
+                @close="productIds.splice(index, 1)">
+                {{ item.name }}
+              </el-tag>
+            </div>
+          </el-form-item>
+          <el-form-item label="描述" prop="name" v-if="form.type != 'group'">
+            <el-input v-model="form.name" placeholder="请输入描述"></el-input>
+          </el-form-item>
+          <el-form-item label="值" prop="value" v-if="form.type != 'group'">
+            <el-input v-model="form.value" placeholder="请输入值"></el-input>
+          </el-form-item>
          <el-form-item label="跳转类型" prop="jumpType">
            <el-select v-model="form.jumpType" placeholder="请选择资源类型">
              <el-option v-for="item in jumpTypeList" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
+          <el-form-item label="展示图">
+            <uploadImg ref="uploadImg2" @success="res => form.coverImg = res[0]" @remove="form.coverImg = ''" />
+          </el-form-item>
+          <el-form-item label="字体色">
+            <el-color-picker v-model="form.fontColor"></el-color-picker>
+          </el-form-item>
+          <el-form-item label="背景色">
+            <el-color-picker v-model="form.backColor"></el-color-picker>
+          </el-form-item>
          <el-form-item label="相对跳转地址" prop="value">
            <el-input v-model="form.relUrl" placeholder="请输入相对跳转地址"></el-input>
          </el-form-item>
@ -65,20 +79,26 @@
        <el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
      </span>
    </el-dialog>
+    <groupTypeList ref="groupTypeList" @success="row => productIds = [row]" />
+  </div>
 </template>

 <script>
 import { tbPlatformDictPostPut } from "@/api/setting";
 import uploadImg from '@/components/uploadImg'
 import enumData from '../enumData.js'
+import groupTypeList from '@/components/groupTypeList'
+
 export default {
  components: {
-    uploadImg
+    uploadImg,
+    groupTypeList
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
+      productIds: [],
      form: {
        id: "",
        shareImg: '',
@ -128,6 +148,15 @@ export default {
    this.resetForm = { ...this.form };
  },
  methods: {
+    typeChange(e) {
+      if (e == 'group') {
+
+      } else if (e == 'custom') {
+
+      } else {
+
+      }
+    },
    // 提交
    onSubmitHandle() {
      this.$refs.form.validate(async valid => {
@ -152,7 +181,6 @@ export default {
      });
    },
    show(obj) {
-      console.log(obj);
      this.dialogVisible = true;
      if (obj && obj.id) {
        this.form = { ...obj };
@ -191,4 +219,71 @@ export default {
  max-height: 50vh;
  overflow-y: auto;
 }
+
+.shop_list {
+  display: flex;
+  flex-wrap: wrap;
+
+  .item_wrap {
+    $size: 80px;
+
+    .item {
+      $radius: 4px;
+      width: $size;
+      height: $size;
+      border-radius: $radius;
+      overflow: hidden;
+      position: relative;
+      margin-right: 10px;
+      margin-top: 10px;
+
+      &:hover {
+        cursor: pointer;
+      }
+
+      &::after {
+        content: attr(data-index);
+        font-size: 12px;
+        height: 20px;
+        display: flex;
+        padding: 0 10px;
+        border-radius: 0 0 $radius 0;
+        align-items: center;
+        background-color: rgba(0, 0, 0, 0.3);
+        backdrop-filter: blur(10px);
+        color: #fff;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 10;
+      }
+
+      &::before {
+        content: '删除';
+        font-size: 12px;
+        width: 100%;
+        height: 20px;
+        display: flex;
+        padding: 0 10px;
+        align-items: center;
+        justify-content: center;
+        background-color: rgba(0, 0, 0, 0.3);
+        backdrop-filter: blur(10px);
+        color: #fff;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        z-index: 10;
+        transition: all .1s ease-in-out;
+      }
+    }
+
+    .name {
+      width: $size;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
 </style>
--- a/src/views/system/resource_manage/enumData.js
+++ b/src/views/system/resource_manage/enumData.js
@ -46,9 +46,9 @@ export default {
      value: "group",
      label: "团购卷"
    },
-    {
-      value: "custom",
-      label: "自定义"
-    }
+    // {
+    //   value: "custom",
+    //   label: "自定义"
+    // }
  ]
 };
--- a/src/views/system/resource_manage/index.vue
+++ b/src/views/system/resource_manage/index.vue
@ -122,7 +122,8 @@ export default {
    },
    filters: {
        typeFilter(t) {
-            return enumData.typeList.find(item => item.value == t).label
+            let e = enumData.typeList.find(item => item.value == t).label
+            return e ? e : t
        },
        jumpFilter(t) {
            return t ? enumData.jumpTypeList.find(item => item.value == t).label : ''