goelia-ai-admin/src/views/oms/promotion/freeShipping/index.vue

<template>
  <div class="app-container">
    <el-container>
      <el-main>
        <div class="filter-container">
          <el-input
            :placeholder="$t('label.promotionName')"
            style="width: 200px;"
            clearable
            class="filter-item"
            v-model="listQuery.title"
            @keyup.enter.native="retPage"
          />
          <el-input
            :placeholder="$t('label.minimumPurchaseRequirement')"
            style="width: 220px;"
            clearable
            class="filter-item"
            v-model="listQuery.requireValue"
            @keyup.enter.native="retPage"
          />
          <el-select
            v-model="listQuery.discountMethod"
            clearable
            class="filter-item"
            style="width: 200px;"
            :placeholder="$t('label.applicationMethod')"
            @keyup.enter.native="retPage"
          >
            <el-option
              :key="index"
              v-for="(item, index) in $t('label.applicationMethodList')"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-button
            v-waves
            v-has="'promotion:list'"
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="retPage"
            >{{ $t("view.search") }}
          </el-button>
        </div>
        <el-table
          v-loading="listLoading"
          :key="tableKey"
          :data="list"
          stripe
          border
          fit
          highlight-current-row
          style="width: 100%;"
        >
          <el-table-column type="index" width="40"></el-table-column>

          <el-table-column
            :label="$t('label.promotionEventName')"
            width="220"
            show-overflow-tooltip
            prop="title"
          />
          <el-table-column
            :label="$t('label.promotionId')"
            align="center"
            width="220"
            show-overflow-tooltip
            prop="id"
          />
          <el-table-column
            :label="$t('label.participateType')"
            align="center"
            width="220"
          >
            <template v-slot="{ row }">
              <span>{{ ruleTypeLabel(row.ruleType) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('label.promotionLevel')"
            align="center"
            width="220"
          >
            <span>{{ $t("label.product") }}</span>
          </el-table-column>
          <el-table-column
            :label="$t('label.applicationMethod')"
            align="center"
            width="220"
          >
            <template v-slot="{ row }">
              <span>{{ applicationMethod(row.discountMethod) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('label.minimumPurchaseRequirement')"
            align="center"
            width="160"
          >
            <template v-slot="{ row }">
              <span>{{ purchaseRequire(row) }}</span>
            </template>
          </el-table-column>

          <el-table-column
            :label="$t('label.discountValue')"
            align="center"
            width="220"
          >
            <template v-slot="{ row }">
              {{ discountVal(row) }}
            </template>
          </el-table-column>
          <!-- <el-table-column
            :label="$t('label.priority')"
            align="center"
            width="120"
          >
            <template v-slot="{ row }">
              <span>{{ row.participateWeight }}</span>
            </template>
          </el-table-column> -->
          <el-table-column
            :label="$t('label.stackableType')"
            align="center"
            width="150"
          >
            <template v-slot="{ row }">
              <span>{{ stackableType(row) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('label.promotionStartTime')"
            align="center"
            prop="startTime"
            width="220"
          />
          <el-table-column
            :label="$t('label.promotionEndTime')"
            align="center"
            width="220"
            prop="endTime"
          />
          <!-- <el-table-column
            :label="$t('label.status')"
            align="center"
            width="120"
            prop="status"
          >
            <template v-slot="{ row }">{{ statusVal(row.status) }}</template>
          </el-table-column> -->
          <el-table-column
            :label="$t('label.version')"
            align="center"
            width="120"
          >
            <template v-slot="{ row }">{{
              row.version ? "V" + row.version : ""
            }}</template>
          </el-table-column>
          <el-table-column
            :label="$t('label.operation')"
            min-width="180"
            align="center"
            fixed="right"
          >
            <template v-slot="{ row }">
              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('label.version')"
                placement="top-start"
              >
                <el-button
                  v-has="'priceRule:version'"
                  type="primary"
                  circle
                  size="mini"
                  icon="el-icon-more"
                  @click="handleLog(row.id)"
                >
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <swPage
          v-if="total > 0"
          key="2"
          :listQuery="listQuery"
          :total="total"
          pos="btmRight"
          @retPage="getList"
        />
      </el-main>
    </el-container>

    <promotion-form ref="promotionBuyXgetYFormRef" @refresh-table="getList" />
    <promotion-log-list
      ref="logListRef"
      @show="({ id, version }) => showDialog(id, true, version)"
    />
  </div>
</template>

<script>
import waves from "@/directive/waves"; // 水波纹指令
import SwPage from "@/views/common/swPage.vue";
import ElContainer from "element-ui/packages/container/src/main";
import PromotionForm from "@/views/oms/promotion/freeShipping/promotionForm.vue";
import PromotionLogList from "@/views/oms/promotion/components/promotionLogList.vue";
import { fetchList } from "@/api/oms/order/multiBuyDiscount";
import { getToken } from "@/utils/auth";
import i18n from "@/lang";

export default {
  inject: ["reload"], //刷新
  components: {
    SwPage,
    ElContainer,
    PromotionForm,
    PromotionLogList
  },
  name: "buyXgetYDiscount",
  directives: {
    waves
  },
  data() {
    return {
      activeName: "productIndex",
      iconSize: "mini",
      //右侧列表
      tableKey: 0,
      list: null,
      total: null,
      listLoading: false,
      listQuery: {
        discountMethod: null,
        title: null,
        requireValue: null,
        page: 1,
        limit: 10,
        ruleType: 4 //折扣类型 1 产品降价 2 订单降价 3 买X得Y 4免运费 5 多件多扣'
      },
      storeList: []
    };
  },
  created() {
    this.getList();
  },
  computed: {
    headers: function() {
      return { "X-Token": getToken() };
    }
  },
  methods: {
    // 可叠加类型
    stackableType(row) {
      const { combineWithOrder, combineWithProduct, combineWithShipping } = row;
      let arr = [];
      if (combineWithOrder) {
        arr.push(i18n.t("label.combinationList")[1].label);
      }
      if (combineWithProduct) {
        arr.push(i18n.t("label.combinationList")[0].label);
      }
      if (combineWithShipping) {
        arr.push(i18n.t("label.combinationList")[2].label);
      }
      return arr.join(",");
    },
    // 折扣类型
    applicationMethod(val) {
      const data = i18n
        .t("label.applicationMethodList")
        .find(item => item.value === val);
      return val && data ? data.label : "";
    },
    // 最低购买条件
    purchaseRequire(row) {
      let { purchaseRequire, requireValue } = row;
      if (purchaseRequire === 2) {
        return "$ " + requireValue;
      } else if (purchaseRequire === 3) {
        return requireValue + " " + i18n.t("label.item");
      } else {
        return i18n.t("label.noRequirement");
      }
    },
    // 折扣内容
    discountVal(row) {
      let { valueType, numericValue } = row;
      if (valueType === 1) {
        return numericValue * 100 + "% off";
      } else if (valueType === 2) {
        return numericValue;
      } else {
        return i18n.t("label.free");
      }
    },
    // 折扣类型
    ruleTypeLabel(val) {
      const obj = i18n.t("label.ruleTypeList").find(item => item.value === val);
      return val && obj ? obj.label : "";
    },
    getList() {
      this.listLoading = true;
      fetchList(this.listQuery)
        .then(response => {
          if (response.code === 200) {
            this.list = response.data.list;
            this.total = response.data.total;
            setTimeout(() => {
              this.listLoading = false;
            }, 0.5 * 1000);
          }
        })
        .catch(() => {
          setTimeout(() => {
            this.listLoading = false;
          }, 0.5 * 1000);
        });
    },
    retPage() {
      this.listQuery.page = 1;
      this.getList();
    },
    showDialog(id, edit, version) {
      this.$refs.promotionBuyXgetYFormRef.showDialog(id, edit, version);
    },
    handleLog(id) {
      this.$refs.logListRef.handleOpen(id);
    }
  }
};
</script>

<style scoped></style>