android-uniapp/pages/index/init copy.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="[current < index? 'opacity' :'']" class="dis-flex flex-y-center flex-x-evenly p-r">
            <view :class="['circle-'+index]" class="circle dis-flex flex-center-center f-u-41 f-w-b p-r">
              <text>{{ index + 1 }}</text>
              <view v-if="item.next" class="p-a next">
                <uv-image :src="pd.imgUrl+item.next" height="97px" mode="widthFix" width="22px"></uv-image>
              </view>
            </view>
            <view :class="['dian-'+index]" class="dian"></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" height="97px" width="86px"></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'" height="150px" width="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" label-width="80px" labelPosition="left">
                <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 {logs, sleep} from "@/utils/util";
import {machineTypeList} from "@/utils/machine/config";
import {useConfigStore} from "@/store/useConfigStore";
import {getBeforePage, redirectTo} from "@/utils/app";
import {FileStorage} from "@/utils/fileStorage";
import {calcStrHash} from "@/utils/machine/function";


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


const fileStorage = new FileStorage()

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 () => {
  console.log('currentAdd')
  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()
}

const getConfig = async () => {
  console.log('plus.io.convertLocalFileSystemURL( url )', plus.io.convertLocalFileSystemURL('/'))
  let mac = await configStore.getMac()
  console.log('mac', mac)
}

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

// 激活页面时
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>