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" 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="name">
            <el-date-picker
              @change="usageDateChange"
              v-model="usageDate"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label-width="150px" label="开放领取日期" prop="name">
            <el-date-picker
              @change="collectionDateChange"
              v-model="collectionDate"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </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="targetIds">
            <el-input-number
              v-model="modalData.money"
              :min="0"
              label="请输入"
            ></el-input-number>
          </el-form-item>
          <el-form-item label-width="150px" label="发放数量" prop="targetIds">
            <el-input-number
              v-model="modalData.total"
              :min="0"
              :max="99999"
              label="请输入"
            ></el-input-number>
          </el-form-item>
          <el-form-item label-width="150px" label="每人限领" prop="targetIds">
            <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 commodity from "./commodity.vue";
import { debounce, cloneDeep } from "lodash";
import { Divider } from "element-ui";
import loginVue from "../../../common/login.vue";
export default {
  components: { commodity },
  data() {
    return {
      isAdd: true,
      //表格属性
      modalConfig: {
        title: "添加优惠卷",
        show: false,
        width: "800px",
      },
      formInline: {
        marketId: "",
        shopId: "",
      },
      modalData: {},
      usageDate: [], //使用时间
      collectionDate: [], //领取日期
      product: {}, //商品
    };
  },
  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.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: "",
              useStartTime: "",
              useEndTime: "",
              receiveStartTime: "",
              receiveEndTime: "",
              money: "",
              total: 10000,
              limitedNum: 0,
              minPrice: 0,
              usableRange: "PARTIAL_GOODS", //部分商品-PARTIAL_GOODS 所有商品-ALL_GOODS 部分摊位-PARTIAL_SHOP
            };
            this.$refs.modal.resetFields();
          });
          this.isAdd = true;
        },
        update: () => {
          this.isAdd = false;
        },
      };
    },
    init(row) {},
    usageDateChange(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);
            let data = { ...this.modalData };
            data.targetIds = [data.targetIds];
            console.log(this.modalData, data);
            this.$api.coupon
              .addCoupon({ ...data, ...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>