android-uniapp/pages/task/info.vue

<template>
  <view class="window-box dis-flex">
    <ly-back :autoBack="false" @backClick="backClick"/>
    <view v-if="countDown > 0" class="countDown">{{ formatZero(countDown, 2) }}</view>
    <view class="window w40 flex-center-center flex-dir-column">
      <student-info :student="student"/>
    </view>
    <view class="w60 h100 dis-flex flex-x-center flex-dir-column">
      <template v-if="configStore.mType === 7">
        <view class="info-item">
          <view class="info-item-label">身高</view>
          <view class="">
            <view class="col-checked f-64">{{ queryForm.value1 }}</view>
          </view>
        </view>
        <view class="info-item">
          <view class="info-item-label">体重</view>
          <view class="">
            <view class="col-checked f-64">{{ queryForm.value2 }}</view>
          </view>
        </view>
      </template>
      <view v-if="configStore.mType === 8" class="info-item">
        <view class="info-item-label">肺活量</view>
        <view class="">
          <view class="btn btn-primary">进入肺活量</view>
        </view>
      </view>
      <view v-if="configStore.mType === 9" class="info-item">
        <view class="info-item-label">视力</view>
        <view class="">
          <view class="btn btn-primary">进入视力</view>
        </view>
      </view>
      <!--      <view class="info-item" @click="toTask(10)">-->
      <!--        <view class="btn btn-primary">进入测试</view>-->
      <!--      </view>-->
    </view>
    <ly-modal ref="modelRef"></ly-modal>
  </view>
</template>

<script setup>
import {onActivated, onMounted, reactive, ref} from "vue";
import {formatZero} from "@/utils/util";
import {useConfigStore} from "@/store/useConfigStore";
import {confirmModal, getBeforePage, navTo, redirectTo, showToast} from "@/utils/app";
import debounce from "@/utils/debounce";
import studentInfo from "./studentInfo"
import storage from "@/utils/storage";

const configStore = useConfigStore()
const countDown = ref(0)
const debounces = new debounce()
const modelRef = ref()

let student = reactive({
  jname: '未识别',
  gender: 1,
})
const queryForm = reactive({
  student_id: 0,
  value1: 0,
  value2: 0,
})
const search = () => {
  queryForm.student_id = 2260
}
const backClick = () => {
  console.log('modelRef', modelRef, modelRef.value.open)
  modelRef.value.open({
    title: '温馨提示',
    content: '确认要退出吗？',
    showCancelButton: true,
  })
  // confirmModal('请认要退出吗？').then(() => {
  //   redirectTo('pages/index/index')
  // }, () => {
  // })
}
const logout = () => {
  storage.remove(`student-${student.id}`)
  redirectTo('pages/index/index')
}
const countDownHandle = () => {
  countDown.value = 30
  debounces.countDown('countDown', {
    duration: 30000,
    callback: () => {
      countDown.value--
    },
    endCallback: () => {
      // 清空缓存学生信息
      // logout()
    },
  })
}

// 挂载完成之后
onMounted((r) => {
  // student = storage.getKey(`student-${r.id}`)
  countDownHandle()
})

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

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;

  &-label {
    margin-right: 50rpx;
  }
}

.countDown {
  width: 130rpx;
  height: 130rpx;
  position: fixed;
  top: 20rpx;
  right: 20rpx;
  border: 6rpx solid green;
  color: green;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 60rpx;
}
</style>