goelia-ai-admin/src/views/oms/promotion/amountOffOrder/promotionForm.vue

<template>
  <div v-loading="pageLoad">
    <el-dialog
      element-loading-text="loading..."
      :title="title"
      top="0"
      width="100%"
      lock-scroll
      custom-class="promotionform"
      :close-on-click-modal="false"
      :visible.sync="promotionFormVisible"
      @open="handleOpenDialog"
      @close="resetData"
    >
      <div class="dialog-box" v-loading="pageLoad">
        <div class="dialog-body" v-loading="pageLoad">
          <el-form
            ref="promotionBuyXgetYDertailFormRef"
            :model="promotion"
            label-width="210px"
            size="medium"
          >
            <!-- 活动基本信息 -->
            <div class="box base">
              <div class="title">
                <span>{{ $t("label.setBasicEventInformationDetail") }}</span>
              </div>
              <div class="info">
                <!--促销名称-->
                <el-form-item
                  :label="$t('label.promotionName') + '：'"
                  prop="promotionName"
                >
                  <el-input
                    v-model.trim="promotion.title"
                    :disabled="edit"
                  ></el-input>
                </el-form-item>
                <div class="item row">
                  <!--促销开始时间-->
                  <el-form-item
                    :label="$t('label.promotionStartTime') + '：'"
                    prop="startTime"
                  >
                    <el-date-picker
                      :disabled="edit"
                      type="datetime"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      v-model="promotion.startTime"
                    ></el-date-picker>
                  </el-form-item>

                  <!--促销失效时间-->
                  <el-form-item
                    :label="$t('label.promotionEndTime') + '：'"
                    prop="endTime"
                  >
                    <el-date-picker
                      :disabled="edit"
                      type="datetime"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      v-model="promotion.endTime"
                    ></el-date-picker>
                  </el-form-item>
                </div>
                <!--应用方式-->
                <el-form-item
                  :label="$t('label.applicationMethod') + '：'"
                  prop="discountMethod"
                >
                  <el-radio-group
                    v-model="promotion.discountMethod"
                    :disabled="edit"
                  >
                    <div class="item row">
                      <el-radio :label="1">{{ $t("label.discount") }}</el-radio>
                      <el-input
                        v-show="promotion.discountMethod === 1"
                        class="codeinput"
                        v-model.trim="promotion.discountCode"
                        :disabled="edit"
                      />
                      <el-radio :label="2">{{
                        $t("label.autoDiscount")
                      }}</el-radio>
                    </div>
                  </el-radio-group>
                </el-form-item>
              </div>
            </div>
            <!-- 折扣设置 -->
            <div class="box discount">
              <!-- 客户购买条件 -->
              <div class="title">
                <span>{{ $t("label.customerPurchaseConditions") }}</span>
              </div>
              <div class="info">
                <!--最低购买要求-->
                <el-form-item
                  :label="$t('label.minimumPurchaseRequirement') + '：'"
                  prop="minimum"
                >
                  <el-radio-group
                    v-model="promotion.purchaseRequire"
                    :disabled="edit"
                  >
                    <div class="item row">
                      <el-radio :label="3">{{
                        $t("label.numberStr")
                      }}</el-radio>
                      <el-radio :label="2">{{ $t("label.money") }}</el-radio>
                      <el-radio :label="1">{{ $t("label.free") }}</el-radio>
                    </div>
                  </el-radio-group>
                </el-form-item>
                <!--折扣内容 数量&金额-->
                <el-form-item :label="$t('label.discountValue') + '：'">
                  <div class="item">
                    <!--最低要求 免费 不展示 -->
                    <div
                      class="item-box"
                      v-if="promotion.purchaseRequire !== 1"
                    >
                      <span class="label">{{ discountContentValue }}</span>
                      <el-input
                        class="mininput"
                        v-model.trim="promotion.requireValue"
                        :disabled="edit"
                      />
                    </div>
                    <div class="item-box">
                      <span class="label">{{ $t("label.buyType") }}</span>
                      <el-input
                        class="mininput"
                        v-model.trim="promotion.purchaseType"
                        :disabled="edit"
                      />
                    </div>
                  </div>
                  <div class="item product">
                    <div class="item row">
                      <span class="label">{{ $t("label.product") }}</span>
                      <el-input
                        class="mininput"
                        v-model.trim="promotion.productBuyType"
                        :disabled="edit"
                      />
                      <div class="value" v-for="(data, j) in tagLists" :key="j">
                        <p>{{ tagValue(data) }}</p>
                        <a
                          href="javascript:void();"
                          @click="handleProductDialog(data)"
                          >{{ $t("label.viewProductDetaiL") }}</a
                        >
                      </div>
                    </div>
                  </div>
                </el-form-item>
                <!-- 每个订单一次 获得条件为金额才可见 -->
                <!-- <el-form-item
                v-if="promotion.valueType === 2"
                :label="$t('label.oncePerOrder') + '：'"
              >
                <el-checkbox
                  v-model="promotion.oncePerOrder"
                  :disabled="edit"
                  >{{ $t("label.oncePerOrderDesc") }}</el-checkbox
                >
              </el-form-item> -->
              </div>
              <!-- 客户获得条件 -->
              <div class="title">
                <span>{{ $t("label.customerGetConditions") }}</span>
              </div>
              <div class="info">
                <!--折扣内容 数量&金额-->
                <!-- <el-form-item :label="$t('label.discountValue') + '：'">
                <div class="item">
                  <span class="label">{{ $t("label.numberStr") }}</span>
                  <el-input
                    class="mininput"
                    v-model.trim="promotion.requireValue"
                    :disabled="edit"
                  />
                </div>
                <div class="item product">
                  <div class="item-box">
                    <span class="label">{{ $t("label.product") }}</span>
                    <el-input
                      class="mininput"
                      v-model.trim="promotion.productType"
                      :disabled="edit"
                    />
                    <el-input
                      class="productinput"
                      :placeholder="$t('label.productPlaceholder')"
                      v-model.trim="productSku"
                    />
                    <el-button
                      @click="handleProductSearch"
                      v-waves
                      type="primary"
                      >{{ $t("view.search") }}
                    </el-button>
                    <div class="skucon">
                      <span
                        v-for="(item, i) in getTagList"
                        :class="productKeys.includes(item) ? 'active' : ''"
                        :key="i"
                        >{{ item }},</span
                      >
                    </div>
                  </div>
                </div>
              </el-form-item> -->
                <!--折扣额-->
                <el-form-item
                  :label="$t('label.discountPromotion') + '：'"
                  prop="discount"
                  class="discount"
                >
                  <el-radio-group
                    v-model="promotion.valueType"
                    :disabled="edit"
                  >
                    <div class="item row">
                      <el-radio :label="1">{{
                        $t("label.percentage")
                      }}</el-radio>
                      <el-input
                        v-if="promotion.valueType === 1"
                        class="mininput"
                        v-model.trim="promotion.discountNumber"
                        :disabled="edit"
                      >
                        <span class="el-input__icon" slot="suffix">%</span>
                      </el-input>
                    </div>
                    <div class="item row">
                      <el-radio :label="2">{{
                        $t("label.discountPerItem")
                      }}</el-radio>
                      <el-input
                        v-if="promotion.valueType === 2"
                        class="mininput"
                        v-model.trim="promotion.numericValue"
                        :disabled="edit"
                      />
                    </div>
                    <el-radio :label="3">{{ $t("label.free") }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
              <!-- 每个订单使用次数 折扣码才有-->
              <!-- <div v-if="promotion.discountMethod === 1">
              <div class="title">
                <span>{{ $t("label.numberOfTimesUsedPerOrder") }}</span>
              </div>
              <div class="info">
                <el-form-item>
                  <div class="item row">
                    <el-checkbox v-model="usageLimitchecked" :disabled="edit">{{
                      $t("label.maxNumberOfTimesUsedPerOrder")
                    }}</el-checkbox>
                    <el-input
                      class="mininput checkboxinput"
                      v-model.trim="promotion.customerGetOrderUsageLimit"
                      :disabled="edit"
                    />
                  </div>
                </el-form-item>
              </div>
            </div> -->
            </div>
            <!-- 客户资格  折扣码才有-->
            <div class="box" v-if="promotion.discountMethod === 1">
              <div class="title">
                <span>{{ $t("label.customerQualification") }}</span>
              </div>
              <div class="info customerQualification">
                <el-form-item prop="customerQualification" required>
                  <el-radio-group
                    class="customerqualification"
                    v-model="promotion.targetCustomerType"
                    :disabled="edit"
                  >
                    <el-radio :label="1">{{
                      $t("label.customerQualificationList")[0].label
                    }}</el-radio>
                    <div class="item row">
                      <el-radio :label="2">{{
                        $t("label.customerQualificationList")[1].label
                      }}</el-radio>
                      <el-input
                        v-if="promotion.targetCustomerType === 2"
                        class="mininput"
                        v-model.trim="promotion.targetCustomer"
                        :disabled="edit"
                      />
                    </div>
                    <div class="item row">
                      <el-radio :label="3">{{
                        $t("label.customerQualificationList")[2].label
                      }}</el-radio>
                      <el-input
                        v-if="promotion.targetCustomerType === 3"
                        class="mininput"
                        v-model.trim="promotion.targetCustomer"
                        :disabled="edit"
                      />
                    </div>
                    <!-- <el-radio
                    v-for="(item, i) in $t('label.customerQualificationList')"
                    :key="i"
                    :label="item.value"
                    >{{ item.label }}</el-radio
                  > -->
                  </el-radio-group>
                </el-form-item>
              </div>
            </div>
            <!-- 最大折扣使用次数  折扣码才有-->
            <div class="box" v-if="promotion.discountMethod === 1">
              <div class="title">
                <span>{{ $t("label.maximumNumberOfDiscounts") }}</span>
              </div>
              <div class="info">
                <el-form-item>
                  <!-- <el-checkbox-group v-model="promotion.startTime"> -->
                  <div class="item row">
                    <el-checkbox
                      :checked="codeUsageLimitchecked"
                      :disabled="edit"
                      >{{ $t("label.limitDiscountCount") }}</el-checkbox
                    >
                    <el-input
                      class="mininput checkboxinput"
                      v-model.trim="promotion.codeUsageLimit"
                      :disabled="edit"
                    />
                  </div>
                  <div class="item row">
                    <el-checkbox
                      :checked="promotion.codeCustomerUsageType === 1"
                      :disabled="edit"
                      >{{ $t("label.customerCount") }}</el-checkbox
                    >
                  </div>
                  <!-- </el-checkbox-group> -->
                </el-form-item>
              </div>
            </div>
            <!-- 组合 自动折扣才有 -->
            <div class="box">
              <div class="title">
                <span>{{ $t("label.combination") }}</span>
              </div>
              <div class="info">
                <el-form-item :label="$t('label.combinationLable') + '：'">
                  <el-checkbox-group v-model="promotion.combination">
                    <el-checkbox
                      v-for="(item, i) in $t('label.combinationList')"
                      :key="i"
                      :label="item.value"
                      :disabled="edit"
                      >{{ item.label }}
                    </el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </div>
            </div>
          </el-form>
        </div>
      </div>
      <template slot="footer">
        <el-button
          @click="
            resetData();
            promotionFormVisible = false;
          "
          >{{ $t("view.cancel") }}
        </el-button>
        <!-- 未审核时/审核驳回 状态可进行提交 -->
        <!-- <el-button type="primary" @click="handleSaveOrUpdate" :disabled="edit"
          >{{ $t("view.confirm") }}
        </el-button> -->
      </template>
    </el-dialog>
    <product-collection ref="productCollectionRef" />
  </div>
</template>
<script>
import waves from "@/directive/waves"; // 水波纹指令
import { fetchDetailByIdAndVersion } from "@/api/oms/order/multiBuyDiscount";
import i18n from "@/lang";
import { isEmpty } from "@/utils/toolUtil";
import productCollection from "@/views/oms/promotion/buyXGetYDiscount/components/productCollectionDetail";

export default {
  inject: ["reload"],
  directives: {
    waves
  },
  name: "buyXgetYbuyDiscountForm",
  components: {
    productCollection
  },
  computed: {
    discountContentValue() {
      return this.promotion.purchaseRequire === 2
        ? i18n.t("label.money")
        : i18n.t("label.numberStr");
    }
  },
  data() {
    return {
      promotionFormVisible: false,
      title: "",
      productSku: "",
      productKeys: [],
      usageLimitchecked: false,
      codeUsageLimitchecked: false,
      tagLists: [],
      getTagList: [],
      promotion: {
        // 配置基本信息
        id: "",
        title: "",
        startTime: "",
        endTime: "",
        discountMethod: null,
        discountNumber: null,
        purchaseRequire: null,
        purchaseType: "",
        productType: "",
        productBuyType: "",
        discount: "",
        combination: []
      },
      edit: true,
      noDataText: "加载中",
      pageLoad: false,
      isEmpty
    };
  },
  methods: {
    tagValue(data) {
      return (
        data.title +
        i18n.t("label.productCollection") +
        i18n.t("label.all") +
        data.spus.length +
        i18n.t("label.itemProduct")
      );
    },
    async showDialog(id, edit, version) {
      this.edit = edit;
      if (id) {
        // 修改配置
        this.promotion.id = id;
        this.promotion.version = version;
        await this.getPromotionInfo();
        this.title = this.edit
          ? i18n.t("label.mutiPromotionDetailTitle")
          : i18n.t("label.mutiPromotionUpdateTitle");
      } else {
        this.title = i18n.t("label.mutiPromotionCreateTitle");
      }
      let str = this.promotion.id ? "Detail" : "";
      this.discountSettingTitle = i18n.t("label.discountSetting" + str);
      this.productRangeTitle = i18n.t("label.setProductRange" + str);
      this.promotionFormVisible = true;
    },
    // 款号搜索
    handleProductSearch() {
      this.productKeys = this.productSku.split(",");
    },
    handleProductDialog(data) {
      this.$refs.productCollectionRef.showDialog(data);
    },
    resetData() {
      this.promotion = {
        id: "",
        title: "",
        startTime: "",
        endTime: "",
        discountMethod: null,
        discountNumber: null,
        purchaseRequire: null,
        purchaseType: "",
        productType: "",
        productBuyType: "",
        discount: "",
        combination: []
      };
    },
    handleOpenDialog() {
      this.resetData();
      if (this.$refs.promotionBuyXgetYDertailFormRef) {
        this.$refs.promotionBuyXgetYDertailFormRef.clearValidate();
      }
    },
    getPromotionInfo() {
      this.pageLoad = true;
      let { id, version } = this.promotion;
      fetchDetailByIdAndVersion({ id, version })
        .then(res => {
          // 促销配置信息
          const { priceRule, productTags, giveProductCollects } = res.data;
          this.promotion = { ...priceRule, productTags };
          if (priceRule.valueType === 1) {
            let number = priceRule.numericValue * 100;
            // this.promotion.discountNumber = number;
            this.$set(this.promotion, "discountNumber", number);
          }
          if (priceRule.purchaseRequire === 3) {
            // this.promotion.quantity = priceRule.requireValue;
            this.$set(this.promotion, "quantity", priceRule.requireValue);
          } else if (priceRule.purchaseRequire === 2) {
            // this.promotion.miniAmount = priceRule.requireValue;
            this.$set(this.promotion, "miniAmount", priceRule.requireValue);
          }
          // 购买类型
          const targetType = i18n
            .t("label.promotionBuyTyper")
            .find(item => item.value === priceRule.targetType);
          if (targetType && targetType.label) {
            this.$set(this.promotion, "purchaseType", targetType.label);
          }
          // 顾客购买商品类型
          const productBuyType = i18n
            .t("label.promotionCustomerGetType")
            .find(item => item.value === priceRule.targetSelectionType);
          if (productBuyType && productBuyType.label) {
            this.$set(this.promotion, "productBuyType", productBuyType.label);
          }
          // 顾客得到商品类型
          const productType = i18n
            .t("label.promotionCustomerGetType")
            .find(item => item.value === priceRule.customerGetType);
          if (productType && productType.label) {
            this.$set(this.promotion, "productType", productType.label);
          }
          // 组合
          const {
            combineWithOrder,
            combineWithProduct,
            combineWithShipping,
            targetShopifyProductSpu,
            targetShopifySku,
            targetSelectionType,
            customerGetType,
            getTargetShopifyProductSpu,
            getTargetShopifySku,
            customerGetOrderUsageLimit,
            codeUsageLimit
          } = priceRule;
          let combinationArr = [];
          if (combineWithOrder) {
            combinationArr.push(i18n.t("label.combinationList")[1].value);
          }
          if (combineWithProduct) {
            combinationArr.push(i18n.t("label.combinationList")[0].value);
          }
          if (combineWithShipping) {
            combinationArr.push(i18n.t("label.combinationList")[2].value);
          }
          this.usageLimitchecked = !!customerGetOrderUsageLimit;
          this.codeUsageLimitchecked = !!codeUsageLimit;
          this.$set(this.promotion, "combination", combinationArr);
          // 折扣适用  1特定系列  其他2,3 特定商品
          let tagLists = [];
          if (targetSelectionType === 1) {
            tagLists = productTags.map(item => {
              let data = [];
              if (item.spu) {
                data = item.spu.split(",");
              }
              item.spus = data;
              return item;
            });
          } else {
            // 特地商品
            if (targetShopifySku) {
              const spusSKU = targetShopifySku.split(",");
              tagLists.push({ title: "", spus: spusSKU });
            }
            if (targetShopifyProductSpu) {
              const spusId = targetShopifyProductSpu.split(",");
              tagLists.push({ title: "", spus: spusId });
            }
          }
          this.tagLists = tagLists;
          // 折扣得到条件   1 特定系列  2 特定商品
          let getTagList = [];
          if (customerGetType === 1) {
            giveProductCollects.forEach(item => {
              if (item.spu) {
                const arr = item.spu.split(",");
                getTagList.push.apply(getTagList, arr);
              }
            });
          } else {
            // 特地商品
            if (getTargetShopifySku) {
              const skus = getTargetShopifySku.split(",");
              getTagList.push.apply(getTagList, skus);
            }
            if (getTargetShopifyProductSpu) {
              const spus = getTargetShopifyProductSpu.split(",");
              getTagList.push.apply(getTagList, spus);
            }
          }
          this.getTagList = getTagList;
        })
        .finally(() => {
          this.pageLoad = false;
        });
    }
  }
};
</script>
<style lang="scss">
.promotionform {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  .el-dialog__header {
    padding: 36px 21px 0px 34px;
    .el-dialog__title {
      font-size: 18px;
      font-weight: bold;
      color: #ae8877;
      line-height: 22px;
    }
  }
  .el-form-item__label {
    font-weight: 400;
    font-size: 12px;
  }
  .el-dialog__body {
    padding: 30px 10px 30px 34px;
  }
  .el-dialog__headerbtn {
    top: 14px;
    right: 14px;
    font-weight: bold;
    .el-icon-close {
      font-weight: bold;
    }
  }
  .el-input {
    width: 220px !important;
  }
}
</style>
<style scoped rel="stylesheet/scss" lang="scss">
.dialog-box {
  height: 100%;
  .dialog-body {
    height: 80vh;
    overflow: auto;
    .box {
      border-bottom: 1px solid #d8d8d8;
      padding-bottom: 20px;
      margin-bottom: 42px;
      &.base {
        .info {
          width: 25%;
        }
      }
      &.discount {
        .info {
          margin-bottom: 60px;
        }
      }
      .title {
        color: #606266;
        font-size: 16px;
        line-height: 16px;
        position: relative;
        font-weight: bold;
        padding-left: 6px;
        margin-bottom: 23px;
        &:before {
          position: absolute;
          left: 0px;
          top: 0px;
          content: "";
          display: inline-block;
          width: 3px;
          height: 13px;
          background: #ae8877;
          border-radius: 0px 0px 0px 0px;
        }
      }
    }
    // /deep/.el-form-item__label-wrap {
    //   margin-left: 0px !important;
    //   .el-form-item__label {
    //     text-align: right;
    //   }
    // }
    .skucon {
      width: 90%;
      height: 139px;
      overflow-y: auto;
      border-radius: 3px 3px 3px 3px;
      border: 1px solid #dcdfe6;
      background: #f5f7fa;
      margin-top: 12px;
      padding: 10px;
      font-size: 12px;
      line-height: 16px;
      .active {
        color: #fd5959;
      }
    }
    .productbox {
      border-bottom: none;
    }
    .info {
      .item {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        &.row {
          flex-wrap: nowrap;
        }
        .el-form-item {
          margin-right: 42px !important;
        }
        .codeinput {
          margin-right: 36px;
        }
        .mininput {
          margin-right: 30px;
          width: 180px !important;
        }
        .checkboxinput {
          margin-left: 20px;
        }
        .productinput {
          width: 340px !important;
        }
        .label {
          margin-right: 12px;
        }
        &.product {
          margin-top: 26px;
          .label {
            margin-bottom: 10px;
          }
          .mininput {
            margin-right: 20px;
            margin-bottom: 10px;
          }
          .row {
            flex-wrap: wrap;
          }
          .collectioninput {
            margin-right: 20px;
            min-width: 220px !important;
            width: auto !important;
            /deep/.el-input-group__append {
              color: #ae8877;
              border-left: none;
              font-size: 12px;
              padding: 0px 5px;
              background: #f5f7fa;
              span {
                cursor: pointer;
              }
            }
            /deep/.el-input__inner {
              border-right: none;
            }
          }
          .value {
            margin-bottom: 10px;
          }
        }
      }
      .discount {
        .item {
          margin-bottom: 20px;
          /deep/.el-radio {
            min-width: 135px;
          }
        }
      }
      .customerqualification {
        .el-radio {
          display: block;
          margin-bottom: 30px;
        }
      }
    }
    .value {
      position: relative;
      min-width: 300px;
      height: 36px;
      padding: 0px 6px;
      font-size: 12px;
      margin-right: 13px;
      color: #c0c4cc;
      background: #f5f7fa;
      border-radius: 3px;
      border: 1px solid #dcdfe6;
      p {
        line-height: 12px;
        padding-right: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      a {
        position: absolute;
        right: 10px;
        top: 0%;
        color: #ae8877;
      }
    }
    .customerQualification {
      .mininput {
        margin-bottom: 30px;
      }
    }
  }
}
</style>