自适应2

ZZJ

2021-12-16 dff9fb32c1bac52d378a6d196f670b92610c01d3

 src/pages/index/App.vue

@@ -1,311 +1,316 @@
<template>
  <div class="init" v-if="!isWhite">
    <img class="img-test" onerror="console.log('网络故障')" />
    <div class="content">
      <div class="title">欢迎注册Smart AI 人工智能操作系统</div>
      <el-steps :active="active" finish-status="success" :align-center="true">
        <el-step title="创建账号"></el-step>
        <el-step title="配置网络"></el-step>
        <el-step title="注册信息"></el-step>
      </el-steps>

      <el-carousel
        ref="carousel"
        trigger="click"
        height="480px"
        :loop="false"
        :autoplay="false"
        :initial-index="active"
      >
        <el-carousel-item>
          <formAccount ref="form0"></formAccount>
        </el-carousel-item>
        <el-carousel-item>
          <formNet ref="form1"></formNet>
        </el-carousel-item>
        <el-carousel-item>
          <formInfo ref="form2"></formInfo>
        </el-carousel-item>
      </el-carousel>

      <div class="control">
        <div class="pre" @click="preForm">上一步</div>
        <div class="next" @click="nextForm" v-if="active == 0">下一步</div>
        <div class="next" @click="nextFormNot" v-if="active == 1">跳过</div>
        <div class="next" @click="nextForm" v-if="active == 1 && !isNet">
          下一步
        </div>
        <div class="next" @click="nextForm" v-if="active == 2">完成</div>
      </div>
    </div>
  </div>
  <div class="white" v-else></div>
</template>

<script>
import formAccount from "@/pages/index/components/formAccount";
import formNet from "@/pages/index/components/formNet";
import formInfo from "@/pages/index/components/formInfo";
import {
  getInitInfo,
  savePassword,
  initNetwork,
  saveRegInfo,
  getRegInfo,
  isOnNet,
} from "./api";

export default {
  mounted() {
    this.getInitInfo();
    let message = "网络正常";

    function onLine(callback) {
      var img = new Image();
      //临时判断网络是否通畅
      img.src = "http://apps.smartai.com/img/icon_logo.f78688b5.png";
      img.onload = function () {
        console.log("11111");
        if (callback) callback(true);
      };
      img.onerror = function () {
        console.log("22222");
        if (callback) callback(false);
      };
    }

    onLine((flag) => {
      let message = "";
      if (flag) {
        this.isNet = true;
        message = "已有网络";
      } else {
        //网络断网效果图出来后，将此地改为跳转路径到效果图上
        message = "未配置网络";
        this.$notify({
          message: message,
        });
      }
    });
  },
  data() {
    return {
      active: 0,
      formData: {},
      isWhite: true,
      isNet: false,
    };
  },
  components: {
    formAccount,
    formNet,
    formInfo,
  },
  methods: {
    preForm() {
      if (this.active == 0) {
        return;
      }
      this.active--;
      this.$refs["carousel"].prev();
    },
    async nextForm() {
      if (this.active == 2) {
        const data = this.$refs[`form${this.active}`].getFormData();
        await saveRegInfo(data);
        location.assign("/view/login/");
        return;
      }

      if (this.active == 0) {
        const data = this.$refs[`form${this.active}`].getFormData();
        if (!data) {
          return false;
        }
        const res1 = await savePassword(data);
        console.log(data);
        this.active++;
        this.$refs["carousel"].next();
      }

      if (this.active == 1) {
        const data = this.$refs[`form${this.active}`].getFormData();
        initNetwork(data);
        this.active++;
        this.$refs["carousel"].next();
      }
    },
    nextFormNot() {
      this.active++;
      this.$refs["carousel"].next();
    },
    async getInitInfo() {
      const res = await getInitInfo();

      if (res.data.initPwd && !res.data.initRegInfo) {
        const res1 = await getRegInfo();
        this.active = 1;
        console.log(res1);
        setTimeout(() => {
          this.$refs["carousel"].setActiveItem(1);
        }, 0);
      }

      /* if (res.data.initPwd && res.data.initRegInfo) {
        location.assign("/login");
        return;
      } */

      this.isWhite = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.init {
  height: 100%;
  background-image: url("/images/init/背景图.png");
  color: #fff;
  user-select: none;

  .content {
    margin: 0 auto;
    width: 1000px;
    padding-top: 80px;

    .title {
      font-size: 28px;
      font-weight: 700;
      margin-bottom: 50px;
      letter-spacing: 5px;
    }

    .el-steps ::v-deep {
      margin-left: 22px;
      text-align: left;

      .el-step__icon {
        width: 48px;
        height: 48px;
      }

      .el-step__line {
        left: 210px;
        right: -110px;
        border: 0.5px solid #fff;
        border-bottom: none;
        border-top: none;
        opacity: 0.1;
        top: 22px;
      }

      .is-success .el-step__icon {
        background: none;
        border: 2px solid rgba(255, 255, 255, 0.3);

        .el-icon-check::before {
          color: #fff;
          font-size: 24px;
          font-weight: 700;
        }
      }

      .is-process .el-step__icon {
        background-color: rgba(255, 255, 255, 0.3);
        border: none;

        .el-step__icon-inner {
          color: #fff;
          font-size: 24px;
          font-weight: 700;
        }
      }

      .is-wait .el-step__icon {
        border: 2px solid rgba(255, 255, 255);
        opacity: 0.5;
        background: none;

        .el-step__icon-inner {
          color: #fff;
          font-size: 24px;
          font-weight: 700;
        }
      }

      .el-step__main {
        margin-top: 20px;
        .is-success,
        .is-process {
          font-size: 16px;
          color: #fff;
          font-weight: normal;
        }

        .is-wait {
          font-size: 16px;
          color: #fff;
          font-weight: normal;
          opacity: 0.5;
        }
      }
    }

    .formAccount {
      margin-top: 0.81rem;
      margin-left: 200px;
      width: 550px;
    }

    .formNet,
    .formInfo {
      margin-top: 0.47rem;
      margin-left: 200px;
      width: 550px;
    }

    .control {
      position: fixed;
      top: 80%;
      left: 0;
      right: 0;
      line-height: 40px;
      .pre {
        margin: 10px auto;
        cursor: pointer;
        width: 260px;
        height: 40px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 20px;
        font-weight: bold;
        color: #ffffff;
      }

      .next {
        margin: 10px auto;
        cursor: pointer;
        width: 260px;
        height: 40px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 20px;
        font-weight: bold;
        color: #ffffff;
      }
    }
  }

  ::v-deep .el-carousel__indicators {
    display: none;
  }

  ::v-deep .el-carousel__container button {
    display: none;
  }
}

.white {
  height: 100%;
  background-color: #fff;
}
<template>

  <div class="init" v-if="!isWhite">

    <img class="img-test" onerror="console.log('网络故障')" />

    <div class="content">

      <div class="title">欢迎注册Smart AI 人工智能操作系统</div>

      <el-steps :active="active" finish-status="success" :align-center="true">

        <el-step title="创建账号"></el-step>

        <el-step title="配置网络"></el-step>

        <el-step title="注册信息"></el-step>

      </el-steps>



      <el-carousel

        ref="carousel"

        trigger="click"

        :loop="false"

        :autoplay="false"

        :initial-index="active"

      >

        <el-carousel-item>

          <formAccount ref="form0"></formAccount>

        </el-carousel-item>

        <el-carousel-item>

          <formNet ref="form1"></formNet>

        </el-carousel-item>

        <el-carousel-item>

          <formInfo ref="form2"></formInfo>

        </el-carousel-item>

      </el-carousel>



      <div class="control">

        <div class="pre" @click="preForm">上一步</div>

        <div class="next" @click="nextForm" v-if="active == 0">下一步</div>

        <div class="next" @click="nextFormNot" v-if="active == 1">跳过</div>

        <div class="next" @click="nextForm" v-if="active == 1 && !isNet">

          下一步

        </div>

        <div class="next" @click="nextForm" v-if="active == 2">完成</div>

      </div>

    </div>

  </div>

  <div class="white" v-else></div>

</template>



<script>

import formAccount from "@/pages/index/components/formAccount";

import formNet from "@/pages/index/components/formNet";

import formInfo from "@/pages/index/components/formInfo";

import {

  getInitInfo,

  savePassword,

  initNetwork,

  saveRegInfo,

  getRegInfo,

  isOnNet,

} from "./api";



export default {

  mounted() {

    this.getInitInfo();

    let message = "网络正常";



    function onLine(callback) {

      var img = new Image();

      //临时判断网络是否通畅

      img.src = "http://apps.smartai.com/img/icon_logo.f78688b5.png";

      img.onload = function () {

        console.log("11111");

        if (callback) callback(true);

      };

      img.onerror = function () {

        console.log("22222");

        if (callback) callback(false);

      };

    }



    onLine((flag) => {

      let message = "";

      if (flag) {

        this.isNet = true;

        message = "已有网络";

      } else {

        //网络断网效果图出来后，将此地改为跳转路径到效果图上

        message = "未配置网络";

        this.$notify({

          message: message,

        });

      }

    });

  },

  data() {

    return {

      active: 0,

      formData: {},

      isWhite: true,

      isNet: false,

    };

  },

  components: {

    formAccount,

    formNet,

    formInfo,

  },

  methods: {

    preForm() {

      if (this.active == 0) {

        return;

      }

      this.active--;

      this.$refs["carousel"].prev();

    },

    async nextForm() {

      if (this.active == 2) {

        const data = this.$refs[`form${this.active}`].getFormData();

        await saveRegInfo(data);

        location.assign("/view/login/");

        return;

      }



      if (this.active == 0) {

        const data = this.$refs[`form${this.active}`].getFormData();

        if (!data) {

          return false;

        }

        const res1 = await savePassword(data);

        console.log(data);

        this.active++;

        this.$refs["carousel"].next();

      }



      if (this.active == 1) {

        const data = this.$refs[`form${this.active}`].getFormData();

        initNetwork(data);

        this.active++;

        this.$refs["carousel"].next();

      }

    },

    nextFormNot() {

      this.active++;

      this.$refs["carousel"].next();

    },

    async getInitInfo() {

      const res = await getInitInfo();



      if (res.data.initPwd && !res.data.initRegInfo) {

        const res1 = await getRegInfo();

        this.active = 1;

        console.log(res1);

        setTimeout(() => {

          this.$refs["carousel"].setActiveItem(1);

        }, 0);

      }



      /* if (res.data.initPwd && res.data.initRegInfo) {

        location.assign("/login");

        return;

      } */



      this.isWhite = false;

    },

  },

};

</script>



<style lang="scss" scoped>

.init {

  background-image: url("/images/init/背景图.png");

  background-size: cover;

  background-attachment: fixed;

  color: #fff;

  user-select: none;

  height: 100%;

  min-width: 1000px;

  overflow: hidden;

  min-height: 760px;

  .content {

    margin: 0 auto;

    width: 1000px;

    padding-top: calc(6.4vh);



    .title {

      font-size: 28px;

      font-weight: 700;

      margin-bottom: 50px;

      letter-spacing: 5px;

    }



    .el-steps ::v-deep {

      margin-left: 22px;

      text-align: left;



      .el-step__icon {

        width: 48px;

        height: 48px;

      }



      .el-step__line {

        left: 210px;

        right: -110px;

        border: 0.5px solid #fff;

        border-bottom: none;

        border-top: none;

        opacity: 0.1;

        top: 22px;

      }



      .is-success .el-step__icon {

        background: none;

        border: 2px solid rgba(255, 255, 255, 0.3);



        .el-icon-check::before {

          color: #fff;

          font-size: 24px;

          font-weight: 700;

        }

      }



      .is-process .el-step__icon {

        background-color: rgba(255, 255, 255, 0.3);

        border: none;



        .el-step__icon-inner {

          color: #fff;

          font-size: 24px;

          font-weight: 700;

        }

      }



      .is-wait .el-step__icon {

        border: 2px solid rgba(255, 255, 255);

        opacity: 0.5;

        background: none;



        .el-step__icon-inner {

          color: #fff;

          font-size: 24px;

          font-weight: 700;

        }

      }



      .el-step__main {

        margin-top: 20px;

        .is-success,

        .is-process {

          font-size: 16px;

          color: #fff;

          font-weight: normal;

        }



        .is-wait {

          font-size: 16px;

          color: #fff;

          font-weight: normal;

          opacity: 0.5;

        }

      }

    }



    .formAccount {

      margin-left: 200px;

      width: 550px;

    }



    .formNet,

    .formInfo {

      margin-left: 200px;

      width: 550px;

    }



    .control {

      margin: 0 auto;

      line-height: 40px;

      margin-top: calc(3.2vh);



      .pre {

        margin: 10px auto;

        cursor: pointer;

        width: 260px;

        height: 40px;

        border: 2px solid rgba(255, 255, 255, 0.3);

        border-radius: 20px;

        font-weight: bold;

        color: #ffffff;

      }



      .next {

        margin: 10px auto;

        cursor: pointer;

        width: 260px;

        height: 40px;

        background: rgba(255, 255, 255, 0.3);

        border-radius: 20px;

        font-weight: bold;

        color: #ffffff;

      }

    }

  }



  ::v-deep .el-carousel__indicators {

    display: none;

  }



  ::v-deep .el-carousel__container button {

    display: none;

  }



  ::v-deep .el-carousel__container {

    margin-top: calc(5.74vh);

    height: 290px !important;

  }

}



.white {

  height: 100%;

  background-color: #fff;

}

</style>