official_revision/src/views/CreateAn.vue

<template>
  <div>
    <h2 class="createTitle">创建应用</h2>

    <div class="createHtml-box">
      <div class="createHtml">
        <div class="createBody">
          <div class="steps-box">
            <el-steps :active="component - 1" align-center>
              <el-step
                title="选择功能板块"
                description="选择想要您想要创建的功能，可多选，选择多"
              ></el-step>
              <el-step
                title="选择插件"
                description="选择已经您想要添加到您的应用里面的功能模"
              ></el-step>
              <el-step
                title="选择终端"
                description="选择想要新建的应用，可多选，选择后前往选"
              ></el-step>
              <el-step
                title="选择支付方式"
                description="支付方式为授信模式与付费方式，目前仅导购"
              ></el-step>

              <el-step
                title="创建应用"
                description="立即填写应用的名字吧！给你的软件起个响亮"
              ></el-step>
            </el-steps>
          </div>
        </div>
      </div>
      <keep-alive>
        <component
          ref="createAn"
          :is="isComponentName"
          :ceateData1="ceateData1"
          :ceateData2="ceateData2"
          :ceateData3="ceateData3"
          :loading8="loading8"
          :isSucceed="isSucceed"
        ></component>
      </keep-alive>
      <div class="createrAn-Buttom intro-x" v-if="isButtom1">
        <span class="span0 span1" @click="lastStep">{{
          component == 1 ? "取消" : "上一步"
        }}</span>
        <span class="span0 span2" @click="nextStep">下一步</span>
      </div>

      <div class="createrAn-Buttom intro-x" v-if="isButtom2">
        <span class="span9 span1" @click="lastStep2" v-if="!isSucceed"
          >返回重新选择支付方式</span
        >
        <span class="span9 span2" @click="nextStep2">
          {{ isSucceed ? "下一步" : "点击前往充值页面进行充值" }}</span
        >
      </div>

      <div class="createrAn-Buttom intro-x" v-if="isButtom3">
        <span class="span9 span1" @click="nextStep3('稍后设置')">稍后设置</span>
        <span class="span9 span2" @click="nextStep3('下一步')">下一步</span>
      </div>

      <div class="createrAn-Buttom intro-x" v-if="isButtom4">
        <span
          class="span9 span2"
          :class="{ loading8Clss: loading8 }"
          @click="nextStep4"
          >前往我的应用页面</span
        >
      </div>
    </div>
  </div>
</template>

<script>
import createAn1 from "../modules/createAn1";
import createAn2 from "../modules/createAn2";
import createAn3 from "../modules/createAn3";
import createAn4 from "../modules/createAn4";
import createAn5 from "../modules/createAn5";
import createAn6 from "../modules/createAn6";
import createAn7 from "../modules/createAn7";
import createAn8 from "../modules/createAn8";



import { aget } from '../utils/api/myapp'

export default {
  data() {
    return {
      component: 1,
      isComponentName: "createAn1",
      loading8: true,
      isButtom2: false,
      isSucceed: true,
      isButtom3: false,
      isButtom4: false,
      ceateData1: [], // 第一步数据
      ceateData2: [], //第二步数据
      ceateData3: [], // 第三步数据
      ceateData7: [], //第七步数据
    };
  },

  mounted() {
 
    this.getInit()
  },
  methods: {

    getInit: function(){
      console.log(123)
      aget('/api/myapp/list').then(res=>{
        console.log(res)
      })
    },
    nextStep: function () {
      if (this.component === 1) {
        // 第一步
        this.ceateData1 = this.$refs.createAn.ceateData1.filter((item) => {
          return item.laber === true;
        });
        if (this.ceateData1.length === 0) {
          this.$message.error("请选择功能板块");
          return;
        }
        this.isComponentName = "createAn2";
        this.component = 2;
        return;
      }
      if (this.component === 2) {
        this.ceateData2 = this.$refs.createAn.ceateData2.filter((item) => {
          return item.laber === true;
        });
        if (this.ceateData2.length >= 1) {
          this.isComponentName = "createAn3";
          this.component = 3;
          return;
        } else {
          this.$message.error("请选择至少一个模块");
        }
      }
      if (this.component === 3) {
        this.ceateData3 = this.$refs.createAn.ceateData3.filter((item) => {
          return item.laber === true;
        });
        if (this.ceateData3.length >= 1) {
          this.isComponentName = "createAn4";
          this.component = 4;
          return;
        } else {
          this.$message.error("请选择至少一个插件");
        }
      }
      if (this.component === 4) {
        if (this.isComponentName === "createAn4") {
          console.log("总价：" + this.$refs.createAn.tatalMoneys);

          this.isComponentName = "createAn5";
          return;
        }

        if (this.isComponentName === "createAn5") {
          console.log(this.$refs.createAn.code);
          if (this.$refs.createAn.code == "") {
            this.$message.error("请输入验证码");
            return;
          }
          this.isButtom2 = true;
          // this.isSucceed = false // 控制支付成功或者失败状态
          this.isComponentName = "createAn6";
          return;
        }

        return;
      }
    },
    nextStep2: function () {
      // 前往支付页面或者下一步
      if (this.isSucceed) {
        // 下一步
        this.isComponentName = "createAn7";
        this.isButtom3 = true;
        this.isButtom2 = false;
      } else {
        console.log("前往支付");
        // 前往支付页面
      }
    },

    nextStep3: function (value) {
      if (value === "稍后设置") {
        this.isComponentName = "createAn8";
      } else {
        // 下一步
        this.isComponentName = "createAn8";
      }
      this.isButtom3 = false;
      this.isButtom4 = true;
      this.component = 5;

      setTimeout(() => {
        this.loading8 = false;
      }, 2000);
    },
    //  前往我的应用页面
    nextStep4: function () {
      console.log("前往我的应用页面");
      this.$router.push("/Dashboard/myApp");
    },
    // left
    lastStep: function () {
      if (this.isComponentName === "createAn6") {
        this.isComponentName = "createAn5";
        return;
      }

      if (this.isComponentName === "createAn5") {
        this.isComponentName = "createAn4";
        return;
      }

      if (this.component >= 2) {
        this.component--;
        this.isComponentName = "createAn" + this.component;
        return;
      }
    },
    lastStep2: function () {
      this.isComponentName = "createAn5";
      this.isButtom2 = false;
      this.isSucceed = true;
    },

  },
  components: {
    createAn1,
    createAn2,
    createAn3,
    createAn4,
    createAn5,
    createAn6,
    createAn7,
    createAn8,
  },
  computed: {
    isButtom1: function () {
      let arr = [
        "createAn1",
        "createAn2",
        "createAn3",
        "createAn4",
        "createAn5",
      ];
      let type = false;

      for (let i in arr) {
        if (this.isComponentName.indexOf(arr[i]) != -1) {
          type = true;
          break;
        } else {
          type = false;
        }
      }
      return type;
    },
  },
};
</script>

<style lang="scss" scoped>
.createTitle {
  margin: 41px 0 15px;
  color: #2d3748;
  font-size: 18px;
  display: block;
}

.createHtml-box {
  overflow: hidden;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.03);
}

.createHtml {
  border-bottom: 1px solid #f5f5f5;
  padding-bottom: 20px;
}

.createBody {
  width: 100%;
  background: #ffffff;
  border-radius: 22px;
}

.steps-box {
  padding: 10px 100px 10px;
}

.createrAn-Buttom {
  text-align: center;
  padding: 40px 0 80px;
  .span0 {
    display: inline-block;
    width: 96px;
    height: 37px;
    line-height: 37px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 12px;
    cursor: pointer;
  }
  .span9 {
    display: inline-block;
    width: 208px;
    height: 37px;
    line-height: 37px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 12px;
    cursor: pointer;
  }

  .span1 {
    color: #788598;
    background: #edf1f6;
  }
  .span1:active {
    background: #f8f8f8;
  }

  .span2 {
    color: rgb(235, 233, 233);
    background: #1890ff;
    margin-left: 20px;
  }
  .span2:active {
    background: #2d97fa;
  }
}

.loading8Clss {
  background: #e2f0ff !important;
  cursor: no-drop !important;
  color: #ffffff !important;
}
</style>