android-uniapp/pages/index/init.vue

<template>
  <view class="window-box container-box">
    <view class="flow-box" @click="changeStep">
      <view class="flow-info">
        <view class="flow-info-item">
          <image :src="`${imgUrl}/start_img_web.png`" />
          <view>网络检测</view>
        </view>
        <view class="flow-info-item">
          <image :src="curStep > 1 ? `${imgUrl}/start_img_log_selected.png` : `${imgUrl}/start_img_log_disabled.png`" />
          <view>登陆</view>
        </view>
        <view class="flow-info-item">
          <image
            :src="curStep > 2 ? `${imgUrl}/start_img_system_selected.png` : `${imgUrl}/start_img_system_disabled.png`" />
          <view>进入系统</view>
        </view>
      </view>
      <view class="flow-step">
        <view v-if="curStep == 1" class="flow-step-item flow-step-item1">1</view>
        <image v-else :src="`${imgUrl}/start_icon_done_blue.png`" />
        <view class="flow-step-point" :class="curStep > 1 ? 'flow-step-point-active1' : ''">········</view>
        <view v-if="curStep == 1" class="flow-step-item">2</view>
        <view v-else-if="curStep == 2" class="flow-step-item flow-step-item2">2</view>
        <image v-else :src="`${imgUrl}/start_icon_done_green.png`" />
        <view class="flow-step-point" :class="curStep > 2 ? 'flow-step-point-active2' : ''">········</view>
        <view v-if="curStep < 3" class="flow-step-item">3</view>
        <view v-else-if="curStep == 3" class="flow-step-item flow-step-item3">3</view>
        <image v-else :src="`${imgUrl}/start_icon_done_yellow.png`" />
      </view>
    </view>
    <view class="info-box">
      <view v-if="curStep == 1" class="step1-box">
        <image :src="`${imgUrl}/start_img_default.png`" />
        <view class="tips-box">
          <view class="tips">暂无网络连接，请重试</view>
          <view class="btn btn-primary" @click="toSelect">重新检测</view>
        </view>
      </view>
      <view v-else-if="curStep == 2" class="step2-box">
        <uv-input placeholder="请输入设备码" border="surround" fontSize="28upx" height="97upx" v-model="loginForm.mac"
          class="step2-input"></uv-input>
        <uv-input placeholder="请输入密码" border="surround" fontSize="28upx" v-model="loginForm.pwd" password="true"
          class="step2-input"></uv-input>
        <view style="display: flex;">
          <view class="btn btn-green" @click="toSelect">登录</view>
        </view>
      </view>
      <view v-else class="step3-box">
        <image :src="`${imgUrl}/start_img_system.png`" />
        <view class="tips-box">
          <view class="tips">正在进入系统中，请耐心等待...</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onActivated, onMounted, reactive, ref } from "vue";
import config from "@/utils/config";

const imgUrl = ref('/static/image/bmi-init')
const curStep = ref(1)
const loginForm = ref({
  mac: '',
  pwd: ''
})

const changeStep = () => {
  curStep.value += 1
}

// 挂载完成之后
onMounted(() => {
})
</script>

<style scoped>
.btn {
  width: 480upx;
  border-radius: 21upx;
  margin: 0 auto;
}

.flow-box {
  margin: 50upx auto 0;
  width: 650upx;
}

.flow-info {
  display: flex;
  justify-content: space-between;
}

.flow-info-item {
  width: 200upx;
  height: 230upx;
  position: relative;
  border-radius: 21upx;
}

.flow-info-item view {
  text-align: center;
  font-weight: bold;
  font-size: 35upx;
  color: #FFF;
  margin-top: 24upx;
  z-index: 9;
  width: 200upx;
  height: 230upx;
  position: absolute;
}

.flow-info image {
  width: 200upx;
  height: 230upx;
  position: absolute;
  border-radius: 21upx;
}

.flow-step {
  display: flex;
  width: 550upx;
  line-height: 70upx;
  justify-content: space-around;
  margin: 20upx auto 0;
}

.flow-step-item {
  width: 70upx;
  height: 70upx;
  text-align: center;
  font-weight: bold;
  font-size: 35upx;
  border-radius: 50%;
  border: 8upx solid #D9D9D9;
  background: #fff;
  color: #D9D9D9;
}

.flow-step image {
  height: 86upx;
  width: 86upx;
  position: relative;
}

.flow-step-item1 {
  border: 8upx solid rgb(205, 223, 252);
  background: #2F87F5;
  color: #fff;
}

.flow-step-item2 {
  border: 8upx solid rgb(183, 232, 227);
  background: #01CF7A;
  color: #fff;
}

.flow-step-item3 {
  border: 8upx solid rgb(236, 230, 218);
  background: #FFC64D;
  color: #fff;
}

.flow-step-point {
  font-size: 40upx;
  font-weight: 700;
  position: relative;
  top: 10upx;
  color: #D9D9D9;
}

.flow-step-point-active1 {
  color: #0369E8;
}

.flow-step-point-active2 {
  color: #01CF7A;
}

.info-box {
  background: #fff;
  width: 650upx;
  height: 650upx;
  border-radius: 35upx;
  margin: 20upx auto 0;
}

.container-box {
  background-image: url('/static/image/bmi-init/img_bg.png');
  background-repeat: repeat-x;
}

.step2-box {
  width: 650upx;
  height: 650upx;
  padding-top: 60upx;
  box-sizing: border-box;
}

.step1-box image {
  width: 490upx;
  height: 313upx;
  margin: 0 auto 0;
  padding-top: 40upx;
  display: block;
}

.step3-box image {
  width: 479upx;
  height: 479upx;
  margin: 0 auto 0;
  padding-top: 40upx;
  display: block;
}

.tips-box {
  display: flex;
  flex-direction: column;
}

.tips {
  font-size: 21rpx;
  color: #6F6F6F;
  text-align: center;
  margin: 30upx 0;
}

.step2-box .step2-input {
  width: 547upx;
  height: 97upx !important;
  background: #FFFFFF;
  border-width: 3upx !important;
  border-color: #01CF7A !important;
  font-size: 28upx;
  color: #6F6F6F;
  border-radius: 20upx !important;
  line-height: 97upx !important;
  margin: 0 auto 60upx;
}

.btn-green {
  color: #FFFFFF;
  background: #01CF7A;
  border-color: #01CF7A;
  margin: 0 auto;
}
</style>