From 6a8dd263de33e1c0e407e45f731f6b8667467483 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=99=E5=90=8C=E5=AD=A6?= <2495967527@qq.com>
Date: Thu, 12 Dec 2024 17:51:19 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=9A=E5=91=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/modules/marketing.js                  |   8 +
 src/views/modules/marketing/level/index.vue   | 110 +++-
 .../marketing/level/popup/add-coupon.vue      | 191 +++++++
 .../marketing/level/popup/add-or-update.vue   | 485 ++++++++++++++++++
 4 files changed, 775 insertions(+), 19 deletions(-)
 create mode 100644 src/views/modules/marketing/level/popup/add-coupon.vue
 create mode 100644 src/views/modules/marketing/level/popup/add-or-update.vue

diff --git a/src/api/modules/marketing.js b/src/api/modules/marketing.js
index 0a1c6d7..09537cc 100644
--- a/src/api/modules/marketing.js
+++ b/src/api/modules/marketing.js
@@ -1,6 +1,7 @@
 import $http from "@/utils/httpRequest.js";
 
 export const marketing = {
+  // 会员等级列表
   marketingLevelPage: (data) => {
     return $http.request({
       url: `/merchant-api/memberUnitMemberLevel/list`,
@@ -8,6 +9,13 @@ export const marketing = {
       data,
     });
   },
+  addMarketingLevel: (data) => {
+    return $http.request({
+      url: `/merchant-api/memberUnitMemberLevel/saveAll`,
+      method: "post",
+      data: data,
+    });
+  },
   marketingUserPage: (data) => {
     return $http.request({
       url: `/merchant-api/memberUnitUser/page`,
diff --git a/src/views/modules/marketing/level/index.vue b/src/views/modules/marketing/level/index.vue
index c8bd520..9dfa607 100644
--- a/src/views/modules/marketing/level/index.vue
+++ b/src/views/modules/marketing/level/index.vue
@@ -39,35 +39,51 @@
     </div>
     <div class="tipsLevel">
       <div>
-        <span style="margin-right: 30px">全部等级(4)</span
+        <span style="margin-right: 30px">全部等级({{list.length}})</span
         ><el-button @click="add(null)" type="primary">+新增套餐</el-button>
       </div>
       <div>
-        <span style="margin-right: 30px">会员快要到期了</span>
-        <el-button @click="add(null)" type="primary">购买工具</el-button>
+        <!-- <span style="margin-right: 30px">会员快要到期了</span>
+        <el-button @click="add(null)" type="primary">购买工具</el-button> -->
       </div>
     </div>
     <el-table :data="list" :border="true" style="width: 100%">
-      <el-table-column align="center" label="等级名称" prop="packageName" />
-      <el-table-column align="center" label="所需成长值" prop="packagePrice" />
+      <el-table-column
+        width="140"
+        align="center"
+        label="等级名称"
+        prop="levelName"
+      />
+      <el-table-column
+        width="140"
+        align="center"
+        label="所需成长值"
+        prop="requiredGrowthValue"
+      />
+      <el-table-column
+        width="140"
+        align="center"
+        label="会员人数"
+        prop="memberCount"
+      >
+      </el-table-column>
       <el-table-column
         align="center"
         label="会员权益"
         prop="packageEffectiveTimeQuantity"
-      />
-      <el-table-column
-        align="center"
-        label="会员人数"
-        prop="packageEffectiveTimeUnit"
       >
-        <template v-slot="scope">
-          <span>{{
-            scope.row.packageEffectiveTimeUnit == 1 ? "年" : "月"
-          }}</span>
+        <template slot-scope="scope">
+          <div>
+            <span>{{scope.row.enableMemberDiscount ? '会员折扣,' :''}}</span>
+            <span>{{scope.row.enablePointsRedemption ? '积分兑换,' : ''}}</span>
+            <span>{{scope.row.enableBirthdayCoupons ? '生日优惠卷,' : ''}}</span>
+            <span>{{scope.row.enableBirthdayReward ? '生日双倍积分' : ''}}</span>
+          </div>
         </template>
       </el-table-column>
-      <el-table-column align="center" label="操作" fixed="right" width="240">
-        <template v-slot="scope">
+
+      <!-- <el-table-column align="center" label="操作" fixed="right" width="240"> -->
+      <!-- <template v-slot="scope">
           <el-button @click="add(scope.row)" type="primary">编辑</el-button>
           <el-button @click="add(scope.row)" type="primary">转移</el-button>
           <el-popconfirm
@@ -82,15 +98,21 @@
               <el-button type="danger">删除</el-button>
             </template>
           </el-popconfirm>
-        </template>
-      </el-table-column>
+        </template> -->
+      <!-- </el-table-column> -->
     </el-table>
+    <!-- 添加 -->
+    <addOrUpdate ref="addOrUpdate"></addOrUpdate>
   </div>
 </template>
 
 <script>
+import addOrUpdate from "./popup/add-or-update.vue";
 import { mapState } from "vuex";
 export default {
+  components: {
+    addOrUpdate,
+  },
   data() {
     return {
       list: [],
@@ -126,7 +148,57 @@ export default {
         this.list = res.data.data;
       });
     },
-    add() {},
+    add() {
+      // this.$api.marketing
+      //   .addMarketingLevel({
+      //     marketId: this.marketId,
+      //     unitType: this.formInline.unitType,
+      //     levelList: [
+      //       {
+      //         levelName: "青铜级",
+      //         requiredGrowthValue: 0,
+      //         growthValueUpperLimit: 99,
+      //         enableMemberDiscount: true,
+      //         enablePointsRedemption: true,
+      //         enableBirthdayCoupons: true,
+      //         enableBirthdayReward: true,
+      //         discountRate: "9",
+      //         rewardEffectiveTimeType: 1,
+      //         memberLevelCouponsList: [
+      //           {
+      //             couponsName: "生日优惠券",
+      //             couponsThreshold: "10",
+      //             couponsMinus: 8,
+      //             couponsEffectiveTimeType: 2,
+      //           },
+      //         ],
+      //       },
+      //       {
+      //         levelName: "白银",
+      //         requiredGrowthValue: 100,
+      //         growthValueUpperLimit: 999999999,
+      //         enableMemberDiscount: true,
+      //         enablePointsRedemption: true,
+      //         enableBirthdayCoupons: true,
+      //         enableBirthdayReward: true,
+      //         discountRate: "8",
+      //         rewardEffectiveTimeType: 1,
+      //         memberLevelCouponsList: [
+      //           {
+      //             couponsName: "生日优惠券",
+      //             couponsThreshold: "20",
+      //             couponsMinus: 10,
+      //             couponsEffectiveTimeType: 2,
+      //           },
+      //         ],
+      //       },
+      //     ],
+      //   })
+      //   .then((res) => {
+      //     console.log(res);
+      //   });
+      this.$refs.addOrUpdate.toggle().add();
+    },
     confirmEvent() {},
     cancelEvent() {},
   },
diff --git a/src/views/modules/marketing/level/popup/add-coupon.vue b/src/views/modules/marketing/level/popup/add-coupon.vue
new file mode 100644
index 0000000..fceb4d2
--- /dev/null
+++ b/src/views/modules/marketing/level/popup/add-coupon.vue
@@ -0,0 +1,191 @@
+<template>
+  <div>
+    <obj-modal
+      ref="modal"
+      labelWidth="150px"
+      :modalCols="modalCols"
+      :modalConfig="modalConfig"
+      :modalData="modalData"
+      :modalHandles="modalHandles"
+    >
+      <template slot="dialog__after"> </template>
+    </obj-modal>
+  </div>
+</template>
+<script>
+import { debounce, cloneDeep } from "lodash";
+import { Divider } from "element-ui";
+export default {
+  components: {},
+  data() {
+    return {
+      isAdd: true,
+      //表格属性
+      modalConfig: {
+        title: "添加优惠卷",
+        show: false,
+        width: "60%",
+      },
+      modalData: {},
+      value1: [],
+    };
+  },
+  methods: {
+    queryTableData(pageNo, pageSize) {},
+    toggle(e) {
+      if (this.modalConfig.show == false) {
+        this.modalConfig.show = true;
+      } else {
+        this.modalConfig.show = false;
+        this.$refs.modal.resetFields();
+      }
+      if (e) {
+        this.init(cloneDeep(e));
+      }
+      return {
+        add: (row) => {
+          this.modalConfig.title = "添加优惠卷";
+          this.$nextTick(() => {
+            this.$refs.modal?.resetFields();
+          });
+          this.isAdd = true;
+          if (row) {
+            this.modalData = row[0];
+            console.log("111");
+            return;
+          }
+          this.modalData = {
+            couponsName: "",
+            couponsThreshold: 0,
+            couponsMinus: 0,
+            couponsEffectiveTimeType: "1",
+          };
+          console.log("qqw");
+        },
+        update: () => {
+          this.isAdd = false;
+        },
+      };
+    },
+    init(row) {
+      if (row) {
+        this.modalData = row;
+        return;
+      }
+      console.log("123");
+    },
+  },
+  computed: {
+    modalCols() {
+      return [
+        {
+          label: "优惠卷名称",
+          prop: "couponsName",
+          type: "Input",
+          width: "300px",
+          rules: { required: true, message: "请优惠卷名称" },
+        },
+        {
+          label: "优惠券门槛金额",
+          prop: "couponsThreshold",
+          type: "Input",
+          width: "300px",
+          rules: { required: true, message: "请输入优惠券门槛金额" },
+          type: "jsx",
+          render: () => {
+            return (
+              <el-input-number
+                controls-position="right"
+                precision={0}
+                v-model={this.modalData.couponsThreshold}
+                min={0}
+                max={99999}
+                label="请输入"
+              ></el-input-number>
+            );
+          },
+        },
+        {
+          label: "优惠券减免金额",
+          prop: "couponsMinus",
+          type: "Input",
+          width: "300px",
+          rules: { required: true, message: "请输入优惠券减免金额" },
+          type: "jsx",
+          render: () => {
+            return (
+              <el-input-number
+                controls-position="right"
+                precision={0}
+                v-model={this.modalData.couponsMinus}
+                min={0}
+                max={99999}
+                label="请输入"
+              ></el-input-number>
+            );
+          },
+        },
+        {
+          label: "优惠券有效时间",
+          prop: "couponsEffectiveTimeType",
+          type: "Input",
+          width: "300px",
+          rules: { required: true, message: "请输入优惠券有效时间" },
+          type: "jsx",
+          render: () => {
+            return (
+              <el-select
+                v-model={this.modalData.couponsEffectiveTimeType}
+                placeholder="请选择"
+              >
+                {[
+                  { label: "当天", value: "1" },
+                  {
+                    label: "当周",
+                    value: "2",
+                  },
+                  {
+                    label: "当月",
+                    value: "2",
+                  },
+                ].map((item) => {
+                  return (
+                    <el-option
+                      label={item.label}
+                      value={item.value}
+                    ></el-option>
+                  );
+                })}
+              </el-select>
+            );
+          },
+        },
+      ];
+    },
+    modalHandles() {
+      return [
+        {
+          label: "取消",
+          handle: () => {
+            this.toggle();
+          },
+        },
+        {
+          label: this.isAdd ? "确认添加" : "确认",
+          type: "primary",
+          loading: this.isLoading,
+          submit: true,
+          handle: () => {
+            console.log(this.modalData);
+            this.$emit("addCouponData", this.modalData);
+            this.toggle();
+          },
+        },
+      ];
+    },
+  },
+  asyncComputed: {},
+};
+</script>
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/src/views/modules/marketing/level/popup/add-or-update.vue b/src/views/modules/marketing/level/popup/add-or-update.vue
new file mode 100644
index 0000000..12f267b
--- /dev/null
+++ b/src/views/modules/marketing/level/popup/add-or-update.vue
@@ -0,0 +1,485 @@
+<template>
+  <div>
+    <obj-modal
+      ref="modal"
+      labelWidth="150px"
+      :modalConfig="modalConfig"
+      :modalCols="modalCols"
+      :modalData="modalData"
+      :modalHandles="modalHandles"
+    >
+      <div slot="dialog__content">
+        <el-form :model="modalData" ref="modalForm">
+          <obj-table-plus
+            style="height: 70vh"
+            ref="oTableThree"
+            v-model="modalData.tableData"
+            :tableCols="tableCols"
+            :tableProp="tableProp"
+            :toolbarProp="toolbarProp"
+            :tableEvent="tableEvent"
+          >
+            <div slot="tableTop" class="mb-2"></div>
+          </obj-table-plus>
+        </el-form>
+      </div>
+    </obj-modal>
+    <addCoupon @addCouponData="addCouponData" ref="addCoupon"></addCoupon>
+  </div>
+</template>
+<script>
+import addCoupon from "./add-coupon.vue";
+import { debounce, cloneDeep } from "lodash";
+export default {
+  components: { addCoupon },
+  data() {
+    return {
+      isAdd: true,
+      isLoading: false,
+      //表格属性
+      //表格属性
+      tableProp: {
+        height: "auto",
+        border: true,
+        "auto-resize": false,
+        "print-config": {},
+      },
+      toolbarProp: {},
+      tableEvent: {},
+      modalConfig: {
+        title: "新增等级",
+        show: false,
+        width: "1300px",
+        fullscreen: true,
+      },
+      modalCols: [],
+      couponIndex: 0,
+      modalData: {
+        marketId: "",
+        shopId: "",
+        unitType: "",
+        tableData: [
+          {
+            levelName: "",
+            requiredGrowthValue: 0,
+            growthValueUpperLimit: 999999999,
+            enableMemberDiscount: false,
+            enablePointsRedemption: false,
+            enableBirthdayCoupons: false,
+            enableBirthdayReward: false,
+            discountRate: "",
+            rewardEffectiveTimeType: "",
+            memberLevelCouponsList: "",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    queryTableData(pageNo, pageSize) {
+      setTimeout(() => {
+        setTimeout(() => {
+          this.$refs.oTableThree.complete([
+            {
+              levelName: "",
+              requiredGrowthValue: 0,
+              growthValueUpperLimit: 999999999,
+              enableMemberDiscount: false,
+              enablePointsRedemption: false,
+              enableBirthdayCoupons: false,
+              enableBirthdayReward: false,
+              discountRate: "",
+              rewardEffectiveTimeType: "",
+              memberLevelCouponsList: "",
+            },
+          ]);
+        });
+      }, 10);
+    },
+    toggle(e) {
+      if (this.modalConfig.show == false) {
+        this.modalConfig.show = true;
+        this.$nextTick(() => {
+          this.$refs.oTableThree.doLayout();
+        });
+      } else {
+        this.modalConfig.show = false;
+      }
+      if (e) {
+        this.init(cloneDeep(e.row));
+      }
+      return {
+        add: () => {
+          this.modalData = {};
+          this.queryTableData();
+          this.isAdd = true;
+        },
+        update: (id) => {
+          this.isAdd = false;
+        },
+      };
+    },
+    init(row) {
+      this.modalData = row;
+    },
+    addCouponData(data) {
+      console.log(data);
+      let row = JSON.parse(JSON.stringify(data));
+      this.modalData.tableData[this.couponIndex].memberLevelCouponsList = [row];
+    },
+  },
+  computed: {
+    tableCols() {
+      return [
+        {
+          title: "序号",
+          type: "seq",
+          align: "center",
+          width: "60px",
+        },
+        {
+          title: "等级名称",
+          field: "typeName",
+          align: "center",
+          width: "150px",
+          type: "jsx",
+          render: (e) => {
+            let row = e.row;
+            return (
+              <el-form-item
+                prop={`tableData.${e.$rowIndex}.levelName`}
+                rules={{
+                  required: true,
+                  message: "请输入等级名称",
+                }}
+              >
+                <el-input
+                  v-model={row.levelName}
+                  placeholder="请输入等级名称"
+                ></el-input>
+              </el-form-item>
+            );
+          },
+        },
+        {
+          title: "所需成长值",
+          field: "requiredGrowthValue",
+          align: "center",
+          width: "170px",
+          type: "jsx",
+          render: (e) => {
+            return (
+              <el-form-item
+                prop={`tableData.${e.$rowIndex}.requiredGrowthValue`}
+                rules={{
+                  required: true,
+                  message: "请输入所需成长值",
+                }}
+              >
+                <el-input-number
+                  disabled={e.$rowIndex == 0}
+                  style="width:150px"
+                  controls-position="right"
+                  precision={0}
+                  v-model={e.row.requiredGrowthValue}
+                  min={0}
+                  max={999999999}
+                  label="请输入"
+                ></el-input-number>
+              </el-form-item>
+            );
+          },
+        },
+        {
+          title: "成长值上限",
+          field: "growthValueUpperLimit",
+          align: "center",
+          width: "170px",
+          type: "jsx",
+          render: (e) => {
+            return (
+              <el-form-item
+                prop={`tableData.${e.$rowIndex}.requiredGrowthValue`}
+                rules={{
+                  required: true,
+                  message: "请输入所需成长值",
+                }}
+              >
+                <el-input-number
+                  disabled={this.modalData.tableData.length == e.$rowIndex + 1}
+                  style="width:150px"
+                  controls-position="right"
+                  precision={0}
+                  v-model={e.row.growthValueUpperLimit}
+                  min={0}
+                  max={999999999}
+                  label="请输入"
+                ></el-input-number>
+              </el-form-item>
+            );
+          },
+        },
+        {
+          title: "开启会员折扣",
+          field: "enableMemberDiscount",
+          align: "center",
+          width: "120px",
+          type: "jsx",
+          render: ({ row }) => {
+            let changeDiscountRate = () => {
+              if (!row.enableMemberDiscount) {
+                row.discountRate = "";
+              }
+            };
+            return (
+              <el-switch
+                onchange={changeDiscountRate}
+                v-model={row.enableMemberDiscount}
+              ></el-switch>
+            );
+          },
+        },
+        {
+          title: "折扣率（折）",
+          field: "discountRate",
+          align: "center",
+          width: "170px",
+          type: "jsx",
+          render: (e) => {
+            if (e.row.enableMemberDiscount) {
+              return (
+                <el-form-item
+                  prop={`tableData.${e.$rowIndex}.discountRate`}
+                  rules={{
+                    required: true,
+                    message: "请输入所需成长值",
+                  }}
+                >
+                  <el-input-number
+                    style="width:150px"
+                    controls-position="right"
+                    precision={1}
+                    v-model={e.row.discountRate}
+                    min={0}
+                    max={9.9}
+                    label="请输入"
+                  ></el-input-number>
+                </el-form-item>
+              );
+            } else {
+              return <div></div>;
+            }
+          },
+        },
+        {
+          title: "开启积分兑换",
+          field: "enableMemberDiscount",
+          align: "center",
+          width: "120px",
+          type: "jsx",
+          render: ({ row }) => {
+            return <el-switch v-model={row.enablePointsRedemption}></el-switch>;
+          },
+        },
+        {
+          title: "开启生日优惠券",
+          field: "enableBirthdayCoupons",
+          align: "center",
+          width: "120px",
+          type: "jsx",
+          render: ({ row }) => {
+            let changeCouponsList = () => {
+              if (!row.enableBirthdayCoupons) {
+                row.memberLevelCouponsList = "";
+              }
+            };
+            return (
+              <el-switch
+                onchange={changeCouponsList}
+                v-model={row.enableBirthdayCoupons}
+              ></el-switch>
+            );
+          },
+        },
+        {
+          title: "添加生日优惠卷",
+          field: "memberLevelCouponsList",
+          align: "center",
+          width: "150px",
+          type: "jsx",
+          render: (e) => {
+            let addCouponsList = () => {
+              this.couponIndex = e.$rowIndex;
+              this.$refs.addCoupon.toggle().add(e.row.memberLevelCouponsList);
+              console.log(e.row.memberLevelCouponsList);
+            };
+            if (e.row.enableBirthdayCoupons) {
+              return (
+                <el-form-item
+                  prop={`tableData.${e.$rowIndex}.memberLevelCouponsList`}
+                  rules={{
+                    required: true,
+                    message: "请添加优惠卷",
+                  }}
+                >
+                  <el-button
+                    size="mini"
+                    onClick={addCouponsList}
+                    type="primary"
+                  >
+                    添加优惠卷
+                  </el-button>
+                </el-form-item>
+              );
+            } else {
+              return <div></div>;
+            }
+          },
+        },
+        {
+          title: "开启生日双倍积分",
+          field: "enableBirthdayReward",
+          align: "center",
+          width: "120px",
+          type: "jsx",
+          render: ({ row }) => {
+            let changeReward = () => {
+              if (!row.enableBirthdayReward) {
+                row.rewardEffectiveTimeType = "";
+              }
+            };
+            return (
+              <el-switch
+                onchange={changeReward}
+                v-model={row.enableBirthdayReward}
+              ></el-switch>
+            );
+          },
+        },
+        {
+          title: "双倍积分有效时间",
+          field: "rewardEffectiveTimeType",
+          align: "center",
+          width: "120px",
+          type: "jsx",
+          render: (e) => {
+            if (e.row.enableBirthdayReward) {
+              return (
+                <el-form-item
+                  prop={`tableData.${e.$rowIndex}.rewardEffectiveTimeType`}
+                  rules={{
+                    required: true,
+                    message: "请输入所需成长值",
+                  }}
+                >
+                  <el-select
+                    size="mini"
+                    v-model={e.row.rewardEffectiveTimeType}
+                    placeholder="请选择"
+                  >
+                    {[
+                      { label: "当天", value: "1" },
+                      {
+                        label: "当月",
+                        value: "2",
+                      },
+                    ].map((item) => {
+                      return (
+                        <el-option
+                          label={item.label}
+                          value={item.value}
+                        ></el-option>
+                      );
+                    })}
+                  </el-select>
+                </el-form-item>
+              );
+            } else {
+              return <div></div>;
+            }
+          },
+        },
+        {
+          title: "操作",
+          fixed: "right",
+          type: "jsx",
+          width: "200px",
+          align: "center",
+          render: (e) => {
+            let add = () => {
+              console.log(e);
+              this.modalData.tableData.splice(e.$rowIndex + 1, 0, {
+                levelName: "",
+                requiredGrowthValue: "0",
+                growthValueUpperLimit: "999999999",
+                enableMemberDiscount: false,
+                enablePointsRedemption: false,
+                enableBirthdayCoupons: false,
+                enableBirthdayReward: false,
+                discountRate: "",
+                rewardEffectiveTimeType: "",
+                memberLevelCouponsList: "",
+              });
+            };
+            let remove = () => {
+              this.modalData.tableData.splice(e.$rowIndex, 1);
+            };
+            return (
+              <div>
+                <el-button
+                  v-show={this.modalData.tableData.length == e.$rowIndex + 1}
+                  style="margin-right: 10px"
+                  type="primary"
+                  size="mini"
+                  onClick={add}
+                  slot="reference"
+                >
+                  添加
+                </el-button>
+                {this.modalData.tableData.length > 1 && e.$rowIndex != 0 ? (
+                  <el-popconfirm title="确认要删除吗？" onConfirm={remove}>
+                    <el-button
+                      class="ml-1"
+                      type="danger"
+                      size="mini"
+                      slot="reference"
+                    >
+                      删除
+                    </el-button>
+                  </el-popconfirm>
+                ) : null}
+              </div>
+            );
+          },
+        },
+      ];
+    },
+    modalHandles() {
+      return [
+        {
+          label: "取消",
+          handle: debounce(() => {
+            this.toggle();
+          }, 300),
+        },
+        {
+          label: this.isAdd ? "确认添加" : "确认修改",
+          type: "primary",
+          handle: debounce(() => {
+            this.modalData.marketId = this.marketId;
+            this.modalData.shopId = this.shopId;
+            this.modalData.unitType = JSON.parse(
+              sessionStorage.getItem("userInfo")
+            ).unitType;
+            console.log(this.modalData);
+            this.$refs.modalForm.validate((valid) => {
+              console.log(valid);
+            });
+          }, 300),
+        },
+      ];
+    },
+  },
+  asyncComputed: {},
+};
+</script>
\ No newline at end of file