goelia-ai-admin/src/views/oms/promotion/freeShipping/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-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>

      <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-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>