feat bmi

pages.json

@@ -9,12 +9,12 @@
   "pages": [
     //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 
-    //    {
-    //      "path": "pages/index/init",
-    //      "style": {
-    //        "navigationStyle": "custom"
-    //      }
-    //    },
+       {
+         "path": "pages/index/init",
+         "style": {
+           "navigationStyle": "custom"
+         }
+       },
     {
       "path": "pages/index/index",
       "style": {

pages/index/index.vue

@@ -22,7 +22,7 @@
       <!--      <view class="btn btn-primary" @click="next">下一页</view>-->
       <view class="img-saoma-box">
         <text class="img-saoma-text">请将卡片放进感应区</text>
-        <img src="@/static/image/bmi/img_saoma.png" alt="" class="img-saoma">
+        <image src="@/static/image/bmi/img_saoma.png" alt="" class="img-saoma"></image>
       </view>
       <view class="btn btn-primary hand-select" @click="toSelect">手动选择</view>
     </view>

pages/index/init copy.vue

@@ -0,0 +1,289 @@
+<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>

pages/index/init.vue

@@ -1,289 +1,249 @@
 <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 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="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 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 v-if="current === 2" class="f-42 col-green t-a-c flex-center-center">
-          <uv-icon name="checkmark-circle" size="80"/>
-          检测完成，正在进入系统
+      </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 class="btn-box">
-        <view class="btn btn-su" @click="restartCheck">重新检测</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 {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()
+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 current = ref(0)
+const changeStep = () => {
+  curStep.value += 1
+}
 
-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: '进入系统'}],
+// 挂载完成之后
+onMounted(() => {
 })
-const machineList = ref(JSON.parse(JSON.stringify(machineTypeList)))
+</script>
 
-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)
-  }
+<style scoped>
+.btn {
+  width: 480upx;
+  border-radius: 21upx;
+  margin: 0 auto;
 }
 
-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
-  }
+.flow-box {
+  margin: 50upx auto 0;
+  width: 650upx;
 }
 
-const next = async () => {
-  if (current.value === 0) {
-    if (pd.network.type === 'none') {
-      await network()
-    } else {
-      await currentAdd()
-    }
-  }
+.flow-info {
+  display: flex;
+  justify-content: space-between;
 }
 
-const restartCheck = () => {
-  current.value = 0
+.flow-info-item {
+  width: 200upx;
+  height: 230upx;
+  position: relative;
+  border-radius: 21upx;
 }
 
-const loginHandle = () => {
-  pd.login = true
-  currentAdd()
+.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;
 }
 
-const machineChange = (item) => {
-  configStore.setMachineType(item)
-  currentAdd()
+.flow-info image {
+  width: 200upx;
+  height: 230upx;
+  position: absolute;
+  border-radius: 21upx;
 }
 
-const getConfig = async () => {
-  console.log('plus.io.convertLocalFileSystemURL( url )', plus.io.convertLocalFileSystemURL('/'))
-  let mac = await configStore.getMac()
-  console.log('mac', mac)
+.flow-step {
+  display: flex;
+  width: 550upx;
+  line-height: 70upx;
+  justify-content: space-around;
+  margin: 20upx auto 0;
 }
 
-// 挂载完成之后
-onMounted(() => {
-  // let beforePage = getBeforePage(0)
-  // network()
-  getConfig()
-})
-
-// 激活页面时
-onActivated(() => {
-})
-</script>
-
-<style lang="scss" scoped>
-.window-box {
-  background: #EBEDF4;
+.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;
 }
 
-.steps {
-
-  > > > .uv-steps-item {
-    background: green;
-
-    &__line--column {
-      width: 30rpx;
-    }
-  }
+.flow-step image {
+  height: 86upx;
+  width: 86upx;
+  position: relative;
 }
 
-.form-box {
-  padding: 2.5vw;
+.flow-step-item1 {
+  border: 8upx solid rgb(205, 223, 252);
+  background: #2F87F5;
+  color: #fff;
 }
 
-.step {
+.flow-step-item2 {
+  border: 8upx solid rgb(183, 232, 227);
+  background: #01CF7A;
+  color: #fff;
+}
 
-  .circle {
-    width: 90rpx;
-    height: 90rpx;
-    border-radius: 50%;
+.flow-step-item3 {
+  border: 8upx solid rgb(236, 230, 218);
+  background: #FFC64D;
+  color: #fff;
+}
 
-    &-0 {
-      background-color: #FFFFFF;
-      border: 8rpx solid #027EEC;
-      color: #027EEC;
-    }
+.flow-step-point {
+  font-size: 40upx;
+  font-weight: 700;
+  position: relative;
+  top: 10upx;
+  color: #D9D9D9;
+}
 
-    &-1 {
-      background-color: #FFFFFF;
-      border: 8rpx solid #17ACC3;
-      color: #17ACC3;
-    }
+.flow-step-point-active1 {
+  color: #0369E8;
+}
 
-    &-2 {
-      background-color: #FFFFFF;
-      border: 8rpx solid #F7B03C;
-      color: #F7B03C;
-    }
-  }
+.flow-step-point-active2 {
+  color: #01CF7A;
+}
 
-  .dian {
-    width: 28rpx;
-    height: 28rpx;
-    border-radius: 50%;
+.info-box {
+  background: #fff;
+  width: 650upx;
+  height: 650upx;
+  border-radius: 35upx;
+  margin: 20upx auto 0;
+}
 
-    &-0 {
-      background-color: #027EEC;
-    }
+.container-box {
+  background-image: url('/static/image/bmi-init/img_bg.png');
+  background-repeat: repeat-x;
+}
 
-    &-1 {
-      background-color: #17ACC3;
-    }
+.step2-box {
+  width: 650upx;
+  height: 650upx;
+  padding-top: 60upx;
+  box-sizing: border-box;
+}
 
-    &-2 {
-      background-color: #F7B03C;
-    }
-  }
+.step1-box image {
+  width: 490upx;
+  height: 313upx;
+  margin: 0 auto 0;
+  padding-top: 40upx;
+  display: block;
+}
 
-  .content {
-    background-image: url('static/image/login-bg1.png');
-    width: 500rpx;
-    height: 200rpx;
-    background-position: center center;
-    background-size: 100%;
-    background-repeat: no-repeat;
-  }
+.step3-box image {
+  width: 479upx;
+  height: 479upx;
+  margin: 0 auto 0;
+  padding-top: 40upx;
+  display: block;
+}
 
-  .bg {
-    right: 7%;
-    top: -35%;
-  }
+.tips-box {
+  display: flex;
+  flex-direction: column;
+}
 
-  .next {
-    top: 100%;
-    transform: translateY(60%)
-  }
+.tips {
+  font-size: 21rpx;
+  color: #6F6F6F;
+  text-align: center;
+  margin: 30upx 0;
 }
 
-.opacity {
-  opacity: 0.5;
+.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;
 }
 
-.btns {
-  bottom: 10px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 200rpx;
+.btn-green {
+  color: #FFFFFF;
+  background: #01CF7A;
+  border-color: #01CF7A;
+  margin: 0 auto;
 }
 </style>