android-uniapp/pages/index/init.vue

<template>
  <view class="window-box dis-flex flex-y-center">
    <view class="steps w40 form-box">
<!--      <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 class="h90 dis-flex flex-wrap flex-y-center step">
        <view v-for="(item,index) in pd.steps" class="w100">
          <view class="dis-flex flex-y-center flex-x-evenly p-r" :class="[current < index? 'opacity' :'']">
            <view class="circle dis-flex flex-center-center f-u-41 f-w-b p-r" :class="['circle-'+index]">
              <text>{{index+1}}</text>
              <view v-if="item.next" class="p-a next">
                <uv-image :src="pd.imgUrl+item.next" width="22px" height="97px" mode="widthFix"></uv-image>
              </view>
            </view>
            <view class="dian" :class="['dian-'+index]"></view>
            <view class="content dis-flex flex-center-center col-f f-u-51 f-w-b">
              <view class="w80 p-b-20 b-b p-l-20">{{item.title}}</view>
            </view>
            <view v-if="item.img" class="p-a bg">
              <uv-image :src="pd.imgUrl+item.img" width="86px" height="97px"></uv-image>
            </view>
          </view>
        </view>
      </view>

    </view>
    <view class="form-box w60 flex-center-center flex-dir-column">
      <view class="w100 h70 flex-center-center w-bg b-r-15 p-r">
        <view v-if="current === 0" class="w100">
          <view v-if="pd.network.search" class="f-42 col-c t-a-c">
            网络检测中。。。
          </view>
<!--          <view @click="network">重新检测网络</view>-->
          <template v-else>
            <view class="dis-flex flex-wrap flex-dir-column flex-center-center ">
              <view>
                <uv-image :src="pd.imgUrl+ '/login-wifi.png'" width="150px" height="150px"></uv-image>
              </view>
              <view class="f-u-35 col-9 t-a-c p-t-10">
                当前网络：{{ pd.network.type === 'unknown' ? '未知网络但可用' : pd.network.type }}
              </view>
            </view>
          </template>
          <view class="p-a btns">
            <view class="btn btn-primary w100" @click="next">{{pd.network.type === 'none' ? '重新检测网络':'下一步'}}</view>
          </view>
        </view>

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

        <view v-if="current === 2" class="f-42 col-green t-a-c flex-center-center">
          <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: '',
  },
  imgUrl:'/static/image',
  steps:[{title:'网络检测',img:'/login-image1.png',next:'/login-next1.png'},{title:'登陆',next:'/login-next1.png'},{title:'进入系统'}],
})
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 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 next = async ()=>{
  if(current.value === 0){
    if(pd.network.type === 'none'){
      await network()
    }else {
      await currentAdd()
    }
  }
}

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

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

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

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

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

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

.steps {

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

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

.form-box {
  padding: 2.5vw;
}
.step{

  .circle{
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;

    &-0{
      background-color: #FFFFFF;
      border: 8rpx solid #027EEC;
      color: #027EEC;
    }

    &-1{
      background-color: #FFFFFF;
      border: 8rpx solid #17ACC3;
      color: #17ACC3;
    }

    &-2{
      background-color: #FFFFFF;
      border: 8rpx solid #F7B03C;
      color: #F7B03C;
    }
  }

  .dian{
    width: 28rpx;
    height: 28rpx;
    border-radius: 50%;
    &-0{
      background-color: #027EEC;
    }

    &-1{
      background-color: #17ACC3;
    }

    &-2{
      background-color: #F7B03C;
    }
  }
  .content{
    background-image: url('static/image/login-bg1.png');
    width: 500rpx;
    height: 200rpx;
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .bg{
    right: 7%;
    top: -35%;
  }
  .next{
    top: 100%;
    transform: translateY(60%)
  }
}

.opacity{
  opacity: 0.5;
}
.btns{
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 200rpx;
}
</style>