bsdgy-front/src/pages/activity/useTable.vue

<template>
  <div class="use_box">
    <Modal
      :scrollable="false"
      v-model="showUse"
      title="使用活动"
      @on-cancel="cancel"
      :loading="true"
      width="70%"
    >
      <Steps style="padding: 40px;" :current="currentStep">
        <Step title="基本信息"></Step>
        <Step title="选择零售公司" content></Step>
        <Step title="选择店铺" content></Step>
        <Step title="确认信息" content></Step>
      </Steps>
      <useActivityStepOne
        :schedule="schedule"
        v-if="currentStep == 0 && show"
      ></useActivityStepOne>
      <useActivityStepTwo
        :schedule="schedule"
        v-if="currentStep == 1"
      ></useActivityStepTwo>
      <useActivityStepThree
        :schedule="schedule"
        v-if="currentStep == 2"
      ></useActivityStepThree>
      <useActivityStepFoure
        :schedule="schedule"
        v-if="currentStep == 3"
      ></useActivityStepFoure>
      <div slot="footer">
        <Button
          v-if="currentStep !== 0"
          type="primary"
          shape="circle"
          :loading="modal_loading"
          @click="back"
          >上一步</Button
        >
        <Button
          v-if="currentStep !== 3"
          type="primary"
          shape="circle"
          :loading="modal_loading"
          @click="next"
          >下一步</Button
        >
        <Button
          v-if="currentStep == 3"
          type="primary"
          shape="circle"
          :loading="modal_loading"
          @click="finish"
          >完成</Button
        >
      </div>
    </Modal>
  </div>
</template>
<script>
import useActivityStepOne from "./useActivityStepOne";
import useActivityStepTwo from "./useActivityStepTwo";
import useActivityStepThree from "./useActivityStepThree";
import useActivityStepFoure from "./useActivityStepFoure";
import ActivityManager from "../../services/ActivityManager/ActivityManager";
import store from "../../store/index";
export default {
  name: "useTable",
  components: {
    useActivityStepOne,
    useActivityStepTwo,
    useActivityStepThree,
    useActivityStepFoure,
  },
  data() {
    return {
      currentStep: 0,
      modal_loading: false,
      showUse: false,
    };
  },
  props: {
    id: String,
    schedule: Object,
    show: Boolean,
  },
  watch: {
    show() {
      this.showUse = this.show;
    },
    schedule() {
      store.getters.useData.scheduleId = this.schedule.id;
    },
  },
  mounted() {},
  methods: {
    cancel() {
      this.currentStep = 0;
    },
    cancel() {
      store.commit("RSET_useData");
      this.$emit("doShow", false);
      this.modal_loading = false;
      this.showUse = false;
      this.currentStep = 0;
    },
    next() {
      let data = store.getters.useData;
      data.name = this.schedule.name;
      if (this.currentStep === 0) {
        if (data.params.length <= 0) {
          this.$Message.error("请选择活动类型");
          return;
        }
        if (!data.beginTime) {
          this.$Message.error("请填写活动开始时间");
          return;
        }
        if (!data.endTime) {
          this.$Message.error("请填写活动结束时间");
          return;
        }
        if (data.beginTime > data.endTime) {
          this.$Message.error("开始时间不能晚于结束时间");
          return;
        }
      }
      if (this.currentStep === 1) {
        if (!data.company || data.company.length === 0) {
          this.$Message.error("请至少选择1家公司");
          return;
        }
      }
      if (this.currentStep === 2) {
        if (!data.stores || data.stores.length === 0) {
          this.$Message.error("请至少选择1家店铺");
          return;
        }
      }
      store.commit("SET_useData", data);
      this.currentStep = this.currentStep + 1;
    },
    back() {
      this.currentStep = this.currentStep - 1;
    },
    finish() {
      let that = this;
      let data = store.getters.useData;
      data.isGetActivityInfo = true;
      this.modal_loading = true;
      ActivityManager.saveActivityData(store.getters.useData, function(data) {
        store.commit("RSET_useData");
        that.$emit("doShow", false);
        that.$router.push("/activity/plan");
        that.currentStep = 0;
        that.modal_loading = false;
        that.showUse = false;
      });
    },
  },
};
</script>

<style></style>