android-uniapp/pages/index/init.vue

<template>
  <view class="window-box dis-flex flex-y-center">
    <view class="steps h100 w30 flex-center-center">
      <uv-steps :current="current" :customStyle="[{
        width:'70%',
        height:'90vh',
      }]" activeIcon="checkmark" direction="column" inactiveIcon="arrow-right">
        <uv-steps-item :iconSize="60" title="网络检测"></uv-steps-item>
        <uv-steps-item :iconSize="60" title="登录"></uv-steps-item>
        <uv-steps-item :iconSize="60" title="运行"></uv-steps-item>
      </uv-steps>
    </view>
    <view class="form-box h100 w60 flex-start-center flex-dir-column">
      <view class="w100 h90 flex-start-center">

        <view v-if="current === 0" class="flex-dir-column">
          <view v-if="pd.network.search" class="f-42 col-c t-a-c">
            网络检测中。。。
          </view>
          <view v-if="pd.network.type === 'none'" class="" @click="network">重新检测网络</view>
          <template v-else>
            <view class="f-42 col-green t-a-c">
              当前网络：{{ pd.network.type === 'unknown' ? '未知网络但可用' : pd.network.type }}
            </view>
            <view class="btn btn" @click="currentAdd">下一步</view>
          </template>
        </view>

        <view v-if="current === 1" class="flex-dir-column">
          <view v-if="pd.login" class="f-42 col-c t-a-c">
            自动登录中。。。
          </view>
          <view v-else class="">
            <uv-form ref="form" :model="pd.loginForm" labelPosition="left">
              <uv-form-item borderBottom label="设备码" prop="pd.loginForm.mac">
                <uv-input v-model="pd.loginForm.mac" border="none"/>
              </uv-form-item>
              <uv-form-item borderBottom label="密码" prop="pd.loginForm.pwd">
                <uv-input v-model="pd.loginForm.pwd" border="none" type="password"/>
              </uv-form-item>
              <uv-form-item borderBottom label="　" prop="pd.loginForm.mac">
                <view class="w100">
                  <view class="btn btn-primary" @click="loginHandle">登录</view>
                </view>
              </uv-form-item>
            </uv-form>
          </view>
        </view>

        <view v-if="current === 2" class="f-42 col-green t-a-c ">
          <uv-icon name="checkmark-circle" size="80"/>
          检测完成，正在进入系统
        </view>

      </view>
      <view class="btn-box">
        <view class="btn btn-su" @click="restartCheck">重新检测</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {onActivated, onMounted, reactive, ref} from "vue";
import {getNetworkType} from "@/utils/uniFunction";
import {useUserStore} from "@/store/useUserStore";
import {sleep} from "@/utils/util";
import {machineTypeList} from "@/utils/machine/config";
import {useConfigStore} from "@/store/useConfigStore";
import {getBeforePage, redirectTo} from "@/utils/app";


const userStore = useUserStore()
const configStore = useConfigStore()

const current = ref(0)
const pd = reactive({
  network: {
    search: false,
    type: 'none',
  },
  login: false,
  loginForm: {
    mac: '',
    pwd: '',
  },
})
const machineList = ref(JSON.parse(JSON.stringify(machineTypeList)))

const currentAdd = async () => {
  if (current.value < 2) current.value++
  if (current.value === 1 && pd.login) {
    await sleep(1000)
    current.value++
  }
  if (current.value === 2 && pd.login) {
    await sleep(1000)
    redirectTo('pages/index/index', {}, 2)
  }
}

const restartCheck = () => {
  current.value = 0
}

const loginHandle = () => {
  pd.login = true
  currentAdd()
}

const network = async () => {
  pd.network.search = true
  try {
    let network = await getNetworkType()
    pd.network.type = network.networkType
    pd.network.search = false
  } catch (e) {
    pd.network.search = false
  }
}

const machineChange = (item) => {
  configStore.setMachineType(item)
  currentAdd()
}

// 挂载完成之后
onMounted(() => {
  let beforePage = getBeforePage(0)
  network()
})

// 激活页面时
onActivated(() => {
})
</script>

<style lang="scss" scoped>
.window-box {
  background: #398CFF;
}

.steps {
  background: red;

  > > > .uv-steps-item {
    background: green;

    &__line--column {
      width: 30rpx;
    }
  }
}

.form-box {
  padding-left: 10vw;
}
</style>