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

<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";
import { Divider } from "element-ui";
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 (
              <div>
                <el-input-number
                  min={0}
                  max={9.9}
                  v-model={this.modalData.discount}
                ></el-input-number>
                <span> 提示： 请输入≤9.9数字 如:8折=售价*0.8</span>
              </div>
              // <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 (
              <div>
                <el-input-number
                  min={1}
                  max={99}
                  v-model={this.modalData.limitCount}
                  step={1}
                  step-strictly
                ></el-input-number>
                <span> 提示： 请输入≤99数字 超出数量以原价购买</span>
              </div>
            );
          },
        },
        {
          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>