bsdgy-front/src/pages/activity/selectStoreStep.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="isModify ? '修改零售公司' : '选择零售公司'"
              content></Step>
        <Step :title="isModify ? '修改店铺' : '选择店铺'"
              content></Step>
      </Steps>
      <useActivityStepTwo :schedule="schedule"
                          :isModify="isModify"
                          v-if="currentStep == 0"></useActivityStepTwo>
      <useActivityStepThree :schedule="schedule"
                            :isModify="isModify"
                            v-if="currentStep == 1"></useActivityStepThree>
      <div slot="footer">
        <Button v-if="currentStep !== 0"
                type="primary"
                shape="circle"
                :loading="modal_loading"
                @click="back">上一步</Button>
        <Button v-if="currentStep !== 1"
                type="primary"
                shape="circle"
                :loading="modal_loading"
                @click="next">下一步</Button>
        <Button v-if="currentStep == 1"
                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";
import { formatDate } from "../../utils/Common";
export default {
  name: "useTable",
  components: {
    useActivityStepOne,
    useActivityStepTwo,
    useActivityStepThree,
    useActivityStepFoure
  },
  data () {
    return {
      currentStep: -1,
      modal_loading: false,
      showUse: false
    };
  },
  props: {
    id: String,
    schedule: Object,
    show: Boolean,
    isModify: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    show () {
      this.showUse = this.show;
      this.currentStep = 0;
      this.modal_loading = false;
    },
    schedule () {
      store.getters.useData.scheduleId = this.schedule.id;
    }
  },
  mounted () { },
  methods: {
    cancel () {
      this.currentStep = 0;
      // if (!this.isModify) {
      //   store.commit("RSET_useData");
      // }
      this.$emit("doShow", false);
      this.modal_loading = false;
      this.showUse = false;
      this.currentStep = 0;
    },
    next () {
      let data = store.getters.useData;
      console.log("data1", data);
      if (this.currentStep === 0) {
        if (!data.company || data.company.length === 0) {
          this.$Message.error("请至少选择1家公司");
          return;
        }
      }
      if (this.currentStep === 2) {
        if (!data.stores || data.stores.length === 1) {
          this.$Message.error("请至少选择1家店铺");
          return;
        }
      }
      if (typeof data.beginTime == "object") {
        data.beginTime = formatDate(data.beginTime);
      }
      if (typeof data.endTime == "object") {
        data.endTime = formatDate(data.endTime);
      }
      console.log("data", data);
      store.commit("SET_useData", data);
      this.currentStep = this.currentStep + 1;
    },
    back () {
      this.currentStep = this.currentStep - 1;
    },
    finish () {
      let that = this;
      this.modal_loading = true;
      that.$emit("doShow", false);
    }
  }
};
</script>

<style></style>