merchant-web/src/views/modules/coupon/popup/add-or-update.vue

<template>
  <div>
    <obj-modal
      ref="modal"
      labelWidth="150px"
      :modalConfig="modalConfig"
      :modalData="modalData"
      :modalHandles="modalHandles"
    >
      <template slot="dialog__content">
        <el-form :model="modalData" :rules="rules" ref="modalForm">
          <el-form-item label-width="150px" label="优惠券名称" prop="name">
            <el-input
              style="width: 350px"
              v-model="modalData.name"
              placeholder="请输入优惠券名称"
            >
            </el-input>
          </el-form-item>
          <el-form-item
            label-width="150px"
            label="使用日期"
            prop="useStartTime"
          >
            <el-date-picker
              @change="usageDateChange"
              v-model="usageDate"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label-width="150px"
            label="开放领取日期"
            prop="receiveStartTime"
          >
            <el-date-picker
              @change="collectionDateChange"
              v-model="collectionDate"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
          <!-- <el-form-item label-width="150px" label="选择商品" prop="targetIds">
            <el-input
              style="width: 350px"
              placeholder="请选择选择商品"
              v-model="modalData.targetIds"
            >
              <template slot="append">
                <el-button @click="selectProduct">请选择</el-button>
              </template>
            </el-input>
            <div v-if="product.name" class="product">
              <div>
                <el-image
                  style="width: 80px; height: 80px; margin-right: 10px"
                  :src="product.productPhotoList[0].url"
                >
                </el-image>
              </div>
              <div>
                <div style="line-height: 20px">
                  商品名称：{{ product.name }}
                </div>
                <div style="line-height: 20px">
                  库存：{{ product.stockNum }}
                </div>
                <div style="line-height: 20px; color: rgba(255, 87, 51, 1)">
                  ￥{{ product.minSalePrice }}
                </div>
              </div>
            </div>
          </el-form-item> -->
          <el-form-item label-width="150px" label="优惠金额" prop="money">
            <el-input-number
              placeholder="请输入"
              controls-position="right"
              :precision="2"
              v-model="modalData.money"
              :min="0"
              :max="99999"
              label="请输入"
            ></el-input-number>
          </el-form-item>
          <el-form-item label-width="150px" label="发放数量" prop="total">
            <el-input-number
              placeholder="请输入"
              controls-position="right"
              :precision="0"
              v-model="modalData.total"
              :min="0"
              :max="99999"
              label="请输入"
            ></el-input-number>
          </el-form-item>
          <el-form-item label-width="150px" label="每人限领" prop="limitedNum">
            <el-select v-model="modalData.limitedNum" placeholder="请选择">
              <el-option
                v-for="item in [
                  {
                    label: '不限',
                    value: 0,
                  },
                  {
                    label: '1张',
                    value: 1,
                  },
                  {
                    label: '2张',
                    value: 2,
                  },
                  {
                    label: '3张',
                    value: 3,
                  },
                  {
                    label: '4张',
                    value: 4,
                  },
                  {
                    label: '5张',
                    value: 5,
                  },
                ]"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </template>
    </obj-modal>
    <!-- 选择商品 -->
    <commodity @getProduct="getProduct" ref="commodity"></commodity>
  </div>
</template>
<script>
import { getDay } from "@/utils/index";
import commodity from "./commodity.vue";
import { debounce, cloneDeep } from "lodash";
export default {
  components: { commodity },
  data() {
    return {
      isAdd: true,
      //表格属性
      modalConfig: {
        title: "添加优惠卷",
        show: false,
        width: "800px",
      },
      formInline: {
        marketId: "",
        shopId: "",
      },
      modalData: {},
      usageDate: [], //使用时间
      collectionDate: [], //领取日期
      product: {}, //商品
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入优惠券名称",
            trigger: ["blur", "change"],
          },
        ],
        useStartTime: [
          {
            required: true,
            message: "请选择使用日期",
            trigger: ["blur", "change"],
          },
        ],
        receiveStartTime: [
          {
            required: true,
            message: "请选择领取日期",
            trigger: ["blur", "change"],
          },
        ],
        money: [
          {
            required: true,
            message: "请输入优惠金额",
            trigger: ["blur", "change"],
          },
        ],
        total: [
          {
            required: true,
            message: "请输入发放数量",
            trigger: ["blur", "change"],
          },
        ],
        limitedNum: [
          {
            required: true,
            message: "请选择每人限领",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  watch: {
    "modalConfig.show"(newVal) {
      if (!newVal) {
        //关闭弹窗清空校验
        this.$refs.modalForm.resetFields();
        this.collectionDate = [];
      }
    },
  },
  methods: {
    queryTableData(pageNo, pageSize) {},
    toggle(e) {
      if (this.modalConfig.show == false) {
        this.modalConfig.show = true;
      } else {
        this.modalConfig.show = false;
      }
      if (e) {
        this.init(cloneDeep(e));
      }
      return {
        add: (row) => {
          this.usageDate = [getDay(0), getDay(14)];
          let month = getDay(0).slice(5, 7);
          let day = getDay(0).slice(8, 10);
          console.log(month, day);

          this.formInline = {
            marketId: row.marketId,
            shopId: row.shopId,
          };
          this.modalConfig.title = `添加${row.label}`;
          this.$nextTick(() => {
            this.modalData = {
              category: "NO_THRESHOLD",
              receiveType: "MANUAL",
              couponType: "MONEY",
              isTimeReceive: 1, //0-不限时，1-限时
              name: `无门槛优惠卷${month}${day}`,
              useStartTime: getDay(0),
              useEndTime: getDay(14),
              receiveStartTime: "",
              receiveEndTime: "",
              money: "",
              total: 10000,
              limitedNum: 1,
              minPrice: 0,
              usableRange: "ALL", //部分商品-PARTIAL_GOODS 所有商品-ALL_GOODS 部分摊位-PARTIAL_SHOP
              targetIds: [],
              status: 1,
            };
            // this.$refs.modal.resetFields();
          });
          this.isAdd = true;
        },
        update: () => {
          this.isAdd = false;
        },
      };
    },
    init(row) {},
    usageDateChange(e) {
      console.log(e);
      if (e) {
        this.modalData.useStartTime = e[0];
        this.modalData.useEndTime = e[1];
      } else {
        this.modalData.useStartTime = "";
        this.modalData.useEndTime = "";
      }
    },
    collectionDateChange(e) {
      if (e) {
        this.modalData.receiveStartTime = e[0];
        this.modalData.receiveEndTime = e[1];
      } else {
        this.modalData.receiveStartTime = "";
        this.modalData.receiveEndTime = "";
      }
    },
    //选择商品
    selectProduct() {
      console.log("123");
      this.$refs.commodity.toggle().add(this.formInline);
    },
    //获取商品
    getProduct(row) {
      console.log(row);
      this.modalData.targetIds = row.id;
      this.product = row;
    },
  },
  computed: {
    modalHandles() {
      return [
        {
          label: "取消",
          handle: () => {
            this.toggle();
          },
        },
        {
          label: "确认添加",
          type: "primary",
          handle: () => {
            console.log(this.modalData);
            this.$refs.modalForm.validate((valid) => {
              console.log(valid);
              if (valid) {
                this.$api.coupon
                  .addCoupon({ ...this.modalData, ...this.formInline })
                  .then((res) => {
                    console.log(res);
                    this.$emit("queryList");
                    this.toggle();
                  });
              }
            });
          },
        },
      ];
    },
  },
  asyncComputed: {},
};
</script>
<style lang="scss" scoped>
.product {
  display: flex;
  align-items: center;
  margin-top: 10px;
  border: 1px solid #ccc;
  width: 350px;
}
</style>