zhangzengfei
2022-07-20 4a800a8fc83c6bd1f86a8e847b079a51a7532c09
src/pages/index/App.vue
@@ -9,32 +9,26 @@
        <el-step title="注册信息"></el-step>
      </el-steps>
      <el-carousel
        ref="carousel"
        trigger="click"
        :loop="false"
        :autoplay="false"
        :initial-index="active"
      >
      <el-carousel ref="carousel" trigger="click" :loop="false" :autoplay="false" :initial-index="active">
        <el-carousel-item>
          <formAccount ref="form0"></formAccount>
          <formAccount ref="form0" v-show="active == createUser"></formAccount>
        </el-carousel-item>
        <el-carousel-item>
          <formNet ref="form1"></formNet>
          <formNet ref="form1" v-show="active == configNet"></formNet>
        </el-carousel-item>
        <el-carousel-item>
          <formInfo ref="form2"></formInfo>
          <formInfo ref="form2" v-show="active == registerInfo"></formInfo>
        </el-carousel-item>
      </el-carousel>
      <div class="control">
        <div class="pre" @click="preForm" v-if="active != 0">上一步</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 class="pre" @click="preForm" v-if="active != createUser">上一步</div>
        <div class="next" @click="nextForm" v-if="active == createUser || (active == configNet && !isOnline)">
          下一步
        </div>
        <div class="next" @click="nextForm" v-if="active == 2">完成</div>
        <div class="next" @click="nextFormNot" v-if="active == configNet">跳过</div>
        <div class="next" @click="nextForm" v-if="active == registerInfo">完成</div>
      </div>
    </div>
  </div>
@@ -42,123 +36,131 @@
</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";
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,
        });
      }
    });
  name: "smartai init",
  components: {
    formAccount,
    formNet,
    formInfo
  },
  data() {
    return {
      active: 0,
      formData: {},
      isWhite: true,
      isNet: false,
    };
      isOnline: false,
      createUser: 0,
      configNet: 1,
      registerInfo: 2
    }
  },
  components: {
    formAccount,
    formNet,
    formInfo,
  mounted() {
    this.getInitInfo()
    let message = "网络正常"
    function onLine(callback) {
      var img = new Image()
      //临时判断网络是否通畅
      img.src = "http://apps.smartai.com/img/icons/favicon-32x32.png"
      img.onload = function() {
        if (callback) callback(true)
      }
      img.onerror = function() {
        if (callback) callback(false)
      }
    }
    onLine((flag) => {
      let message = ""
      if (flag) {
        this.isOnline = true
        message = "已有网络"
      } else {
        //网络断网效果图出来后,将此地改为跳转路径到效果图上
        message = "无法连接互联网"
        this.$notify({
          message: message
        })
      }
    })
  },
  methods: {
    preForm() {
      if (this.active == 0) {
        return;
      if (this.active == this.createUser) {
        return
      }
      this.active--;
      this.$refs["carousel"].prev();
      this.active--
      // 如果网络正常, 直接跳过
      if (this.active == this.configNet && this.isOnline) {
        this.active--
      }
      this.$refs["carousel"].setActiveItem(this.active)
    },
    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 == this.registerInfo) {
        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 (this.active == this.configNet) {
        const data = this.$refs[`form${this.active}`].getFormData()
        initNetwork(data)
      }
      // 创建用户
      if (this.active == this.createUser) {
        const data = this.$refs[`form${this.active}`].getFormData()
        if (!data) {
          return false;
          return false
        }
        const res1 = await savePassword(data);
        console.log(data);
        this.active++;
        this.$refs["carousel"].next();
        await savePassword(data)
        // 如果网络正常, 直接跳到第三部
        if (this.isOnline) {
          this.active++
        }
      }
      if (this.active == 1) {
        const data = this.$refs[`form${this.active}`].getFormData();
        initNetwork(data);
        this.active++;
        this.$refs["carousel"].next();
      }
      this.active++
      this.$refs["carousel"].setActiveItem(this.active)
    },
    nextFormNot() {
      this.active++;
      this.$refs["carousel"].next();
    async nextFormNot() {
      await this.getInitInfo()
      this.active++
      this.$refs["carousel"].next()
    },
    async getInitInfo() {
      const res = await getInitInfo();
      const res = await getInitInfo().catch((err) => {
        this.isWhite = false
      })
      if (true) {
        const res1 = await getRegInfo();
        this.active = 1;
        console.log(res1);
        setTimeout(() => {
          this.$refs["carousel"].setActiveItem(1);
        }, 0);
      if (res.data && res.data.initPwd && !res.data.initRegInfo) {
        this.active = this.isOnline ? this.registerInfo : this.configNet
      }
      /* if (res.data.initPwd && res.data.initRegInfo) {
        location.assign("/login");
        return;
      } */
      if (res.data && res.data.initPwd && res.data.initRegInfo) {
        location.assign("/view/login/")
        return
      }
      this.isWhite = false;
    },
  },
};
      this.isWhite = false
    }
  }
}
</script>
<style lang="scss" scoped>
@@ -313,4 +315,4 @@
  height: 100%;
  background-color: #fff;
}
</style>
</style>