商品折扣

src/api/modules/mer_admin.js

@@ -63,6 +63,10 @@ export const mer_admin = {
   BatchDeleteProducts: (data) => {
     return $http.post(`/merchant-api/product/batch/delete`, data);
   },
+  //打折扣
+  setDiscounts: (data) => {
+    return $http.post(`merchant-api/activity/save`, data);
+  },
   //上架或下架商品
   putOnShelvesProducts: (data) => {
     return $http.post(`/merchant-api/product/batch/update/status`, data);

src/views/modules/product/index.vue

@@ -59,14 +59,23 @@
     <add-or-update ref="addOrUpdate"></add-or-update>
     <!-- 改价格 -->
     <AddPrice ref="AddPrice" @queryList="$refs.oTable.reload()"></AddPrice>
+    <!-- 改库存 -->
+    <addStock ref="addStock" @queryList="$refs.oTable.reload()"></addStock>
+    <!-- 打折扣 -->
+    <AddDiscount
+      ref="AddDiscount"
+      @queryList="$refs.oTable.reload()"
+    ></AddDiscount>
   </div>
 </template>
 
 <script>
+import AddDiscount from "./popup/add-discount.vue";
 import AddPrice from "./popup/add-price.vue";
 import AddOrUpdate from "./popup/add-or-update.vue";
+import addStock from "./popup/add-stock.vue";
 export default {
-  components: { AddOrUpdate, AddPrice },
+  components: { AddOrUpdate, AddPrice, addStock, AddDiscount },
   data() {
     return {
       activeName: "出售中",
@@ -190,6 +199,17 @@ export default {
             }
           },
         },
+        {
+          title: "折扣",
+          align: "center",
+          field: "discountActivity",
+          type: "jsx",
+          render: ({ row }) => {
+            if (row.discountActivity) {
+              return <span>{row.discountActivity.ruleObject.discount}折</span>;
+            }
+          },
+        },
         {
           title: "销量",
           align: "center",
@@ -262,6 +282,12 @@ export default {
               console.log(row);
               this.$refs.AddPrice.toggle(row).update();
             };
+            let changeInventory = () => {
+              this.$refs.addStock.toggle(row).update();
+            };
+            let setDiscounts = () => {
+              this.$refs.AddDiscount.toggle(row).update();
+            };
             return (
               <div>
                 <el-button
@@ -284,7 +310,7 @@ export default {
                   size="mini"
                   disabled={row.status != "DOWN"}
                   type="primary"
-                  onClick={grant}
+                  onClick={changeInventory}
                 >
                   改库存
                 </el-button>
@@ -292,7 +318,7 @@ export default {
                   size="mini"
                   disabled={row.status != "DOWN"}
                   type="primary"
-                  onClick={grant}
+                  onClick={setDiscounts}
                 >
                   设置折扣
                 </el-button>

src/views/modules/product/popup/add-discount.vue

@@ -0,0 +1,227 @@
+<template>
+  <div>
+    <obj-modal
+      ref="modal"
+      labelWidth="150px"
+      :modalCols="modalCols"
+      :modalConfig="modalConfig"
+      :modalData="modalData"
+      :modalHandles="modalHandles"
+    >
+      <template slot="dialog__after">
+        <div class="introduce">
+          <el-divider>活动介绍</el-divider>
+          <span>对商品创建折扣活动,用户购买指定商品,享受商家定义折扣优惠 </span>
+          <el-divider>创建建议</el-divider>
+          <div>
+            <p class="introduce-center">1、拥有折扣活动的商品不能再添加折扣</p>
+            <p class="introduce-center">
+              2、挑选口碑好,毛利率高,或急需倾销的商品
+            </p>
+            <p class="introduce-center">
+              3、折扣商品将在店铺折扣分类专区下集中展示
+            </p>
+          </div>
+        </div>
+      </template>
+    </obj-modal>
+  </div>
+</template>
+<script>
+import { debounce, cloneDeep } from "lodash";
+export default {
+  components: {},
+  data() {
+    return {
+      isAdd: true,
+      //表格属性
+      modalConfig: {
+        title: "设置折扣",
+        show: false,
+        width: "60%",
+      },
+      modalData: {},
+      value1: [],
+      ProductData: {},
+    };
+  },
+  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: () => {
+          this.modalConfig.title = "添加属性";
+          this.$nextTick(() => {
+            this.modalData = {};
+            this.$refs.modal.resetFields();
+          });
+          this.isAdd = true;
+        },
+        update: () => {
+          this.isAdd = false;
+        },
+      };
+    },
+    init(row) {
+      this.ProductData = {
+        merchantId: JSON.parse(sessionStorage.getItem("userInfo")).merchantId,
+        shopId: JSON.parse(sessionStorage.getItem("userInfo")).shopId,
+        productIds: [row.id],
+        type: "DISCOUNT",
+      };
+      if (row.discountActivity) {
+        this.ProductData.id = row.discountActivity.id;
+        this.modalData = {
+          discount: row.discountActivity.ruleObject.discount,
+          limitCount: row.discountActivity.ruleObject.limitCount,
+          DiscountTime: [
+            row.discountActivity.startTime,
+            row.discountActivity.endTime,
+          ],
+        };
+      } else {
+        this.modalData = {
+          discount: "",
+          limitCount: "",
+          DiscountTime: [],
+        };
+      }
+    },
+  },
+  computed: {
+    modalCols() {
+      return [
+        {
+          label: "商品折扣（折）",
+          prop: "discount",
+          type: "Input",
+          width: "300px",
+          rules: { required: true, message: "请输入打折数" },
+          type: "jsx",
+          render: () => {
+            return (
+              <el-input
+                type="number"
+                min={0}
+                max={9.9}
+                v-model={this.modalData.discount}
+                placeholder="请输入≤9.9数字 如:8折=售价*0.8"
+              ></el-input>
+            );
+          },
+        },
+        {
+          label: "限制购买(数量)",
+          prop: "limitCount",
+          type: "Input",
+          width: "300px",
+          //   rules: { required: true, message: "请输入价格" },
+          type: "jsx",
+          render: () => {
+            return (
+              <el-input
+                type="number"
+                step={1}
+                min={1}
+                max={99}
+                v-model={this.modalData.limitCount}
+                placeholder="请输入≤99数字 超出数量以原价购买"
+              ></el-input>
+            );
+          },
+        },
+        {
+          label: "活动时间",
+          prop: "DiscountTime",
+          type: "Input",
+          width: "300px",
+          rules: { required: true, message: "请输入活动时间" },
+          type: "jsx",
+          render: () => {
+            return (
+              <el-date-picker
+                // format="yyyy-MM-dd HH:mm:ss"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                v-model={this.modalData.DiscountTime}
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+              ></el-date-picker>
+            );
+          },
+        },
+      ];
+    },
+    modalHandles() {
+      return [
+        {
+          label: "取消",
+          handle: () => {
+            this.toggle();
+          },
+        },
+        {
+          label: this.isAdd ? "确认添加" : "确认",
+          type: "primary",
+          loading: this.isLoading,
+          submit: true,
+          handle: () => {
+            let data = {
+              ...this.ProductData,
+              ruleObject: {
+                discount: this.modalData.discount,
+                limitCount: this.modalData.limitCount,
+              },
+              startTime: this.modalData.DiscountTime[0],
+              endTime: this.modalData.DiscountTime[1],
+            };
+            this.$confirm(
+              `此操作将 商品折扣=${this.modalData.discount}折 限购数 = ${this.modalData.limitCount}, 是否确认保存此折扣?`,
+              "提示",
+              {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+                center: true,
+              }
+            )
+              .then(() => {
+                this.$api.mer_admin.setDiscounts(data).then((res) => {
+                  this.toggle();
+                  this.$emit("queryList");
+                });
+              })
+              .catch(() => {
+                this.$message({
+                  type: "info",
+                  message: "已取消删除",
+                });
+              });
+          },
+        },
+      ];
+    },
+  },
+  asyncComputed: {},
+};
+</script>
+<style lang="scss" scoped>
+.introduce {
+  padding: 5px;
+  background: #fdf6ec;
+  text-align: center;
+}
+.introduce-center {
+  margin-bottom: 10px;
+}
+</style>

src/views/modules/product/popup/add-stock.vue

@@ -0,0 +1,185 @@
+<template>
+  <div>
+    <obj-modal
+      ref="modal"
+      labelWidth="100px"
+      :modalConfig="modalConfig"
+      :modalCols="modalCols"
+      :modalData="modalData"
+      :modalHandles="modalHandles"
+    >
+      <obj-table-plus
+        v-show="tableData.length > 1"
+        style="height: calc(100vh - 120px - 240px)"
+        slot="dialog__after"
+        ref="oTable"
+        :toolbarProp="{}"
+        @query="queryTableData"
+        v-model="tableData"
+        :tableCols="tableCols"
+        :tableProp="tableProp"
+        :tableEvent="tableEvent"
+        :isPagination="false"
+        :enableAutoQuery="false"
+      >
+      </obj-table-plus>
+    </obj-modal>
+  </div>
+</template>
+<script>
+import { debounce, cloneDeep } from "lodash";
+export default {
+  components: {},
+  data() {
+    return {
+      isAdd: true,
+      //监控对象数据
+      tableData: [],
+      //表格属性
+      tableProp: {
+        height: "auto",
+        border: true,
+        "auto-resize": false,
+        "print-config": {},
+      },
+      toolbarProp: {},
+      tableEvent: {},
+      modalConfig: {
+        title: "修改库存",
+        show: false,
+        width: "60%",
+      },
+      modalData: {},
+    };
+  },
+  methods: {
+    queryTableData(pageNo, pageSize) {},
+    toggle(e) {
+      if (this.modalConfig.show == false) {
+        this.modalConfig.show = true;
+        this.$nextTick(() => {
+          this.$refs.oTable.doLayout();
+        });
+      } else {
+        this.modalConfig.show = false;
+      }
+      if (e) {
+        this.init(cloneDeep(e));
+      }
+      return {
+        add: () => {
+          this.modalData = {};
+          this.$nextTick(() => {
+            this.$refs.oTable.complete(false);
+          });
+        },
+        update: () => {
+          this.isAdd = false;
+        },
+      };
+    },
+    init(row) {
+      this.modalData = row;
+      this.tableData = row.productSpecificationList;
+      console.log(this.modalData);
+    },
+  },
+  computed: {
+    modalCols() {
+      if (this.tableData.length == 1) {
+        return [
+          {
+            label: "库存",
+            prop: "",
+            type: "Input",
+            width: "300px",
+            rules: { required: true, message: "请输入库存数量" },
+            type: "jsx",
+            render: () => {
+              return (
+                <el-input-number
+                  v-model={this.modalData.productSpecificationList[0].stockNum}
+                  min={0}
+                  label="描述文字"
+                ></el-input-number>
+              );
+            },
+          },
+        ];
+      }
+    },
+    tableCols() {
+      return [
+        {
+          title: "序号",
+          type: "seq",
+          width: "60px",
+          align: "center",
+        },
+        {
+          title: "规格",
+          field: "attributeValue",
+          align: "center",
+        },
+        {
+          title: "库存",
+          field: "salePrice",
+          align: "center",
+          type: "jsx",
+          render: ({ row }) => {
+            return (
+              <div>
+                <el-input-number
+                  min={0}
+                  size="small"
+                  v-model={row.stockNum}
+                  placeholder="请输入数量"
+                ></el-input-number>
+              </div>
+            );
+          },
+        },
+      ];
+    },
+    modalHandles() {
+      return [
+        {
+          label: "取消",
+          handle: debounce(() => {
+            this.toggle();
+          }, 300),
+        },
+        {
+          label: this.isAdd ? "确认添加" : "确认编辑",
+          type: "primary",
+          submit: true,
+          handle: debounce(() => {
+            if (this.tableData.length == 1) {
+              this.$api.mer_admin
+                .saveProductBase(this.modalData)
+                .then((res) => {
+                  console.log(res);
+                  this.toggle();
+                  this.$emit("queryList");
+                });
+            } else {
+              this.modalData.productSpecificationList = this.tableData;
+              this.$api.mer_admin
+                .saveProductBase(this.modalData)
+                .then((res) => {
+                  console.log(res);
+                  this.toggle();
+                  this.$emit("queryList");
+                });
+            }
+            console.log(this.modalData);
+          }, 300),
+        },
+      ];
+    },
+  },
+  asyncComputed: {},
+};
+</script>
+<style lang="scss" scoped>
+</style>