android-uniapp/pages/task/info.vue

<template>
  <view class="window-box dis-flex" style="background-color: #E9ECF2">
    <ly-back :autoBack="false" @backClick="backClick"/>
    <view v-if="countDown > 0" class="countDown">{{ formatZero(countDown, 2) }}</view>

    <view class="w100 flex-center-center flex-dir-column">
      <view class="baseMessage w80 p-r">
        <view class="p-a avatar">
          <student-info :student="student"/>
        </view>
        <view class="dis-flex flex-wrap flex-y-center t-a-c m-40" style="height: 80px">
          <view class="flex-three p-10">姓名：xxxxxxxxxxxxxxxxxxx</view>
          <view class="flex-three p-10">姓名：xxxxxxxxxxxxxxxxxxx</view>
          <view class="flex-three p-10">姓名：xxxxxxxxxxxxxxxxxxx</view>
          <view class="flex-three p-10">姓名：xxxxxxxxxxxxxxxxxxx</view>
          <view class="flex-three p-10">姓名：xxxxxxxxxxxxxxxxxxx</view>
        </view>
      </view>

      <view class="dis-flex w80 ">
        <view v-if="pageData.status == 1" class="m-t-50 p-r-20">
          <view v-for="(item,index) in pageData.card" class="cardbg b-r-15" :class="['cardbg-'+index]">
            <view class=" f-u-35 flex-center-center " style="height: 90%;background-color: #FFFFFF;border-radius: 15rpx 15rpx 25rpx 25rpx">
              {{item.name}}
            </view>
          </view>
        </view>

        <view class="checkMessage w80 p-40 m-t-50 b-r-15 flex-center-center flex-dir-column">
          <view class="f-u-35 col-f p-20">待检测项目</view>
          <view class="w-bg w100 b-r-15 m-t-10 dis-flex flex-wrap p-t-20 p-b-20">
            <view class="flex-two t-a-c p-10">
              <view>*(BMI)</view>
              <view>待检测</view>
            </view>
            <view class="flex-two t-a-c p-10">
              <view>*(BMI)</view>
              <view>待检测</view>
            </view>
            <view class="flex-two t-a-c p-10">
              <view>*(BMI)</view>
              <view>待检测</view>
            </view>

            <view class="flex-two p-10"></view>
            <view class="flex-two p-10" style="height: 40px"></view>
            <view class="flex-two p-10" style="height: 40px"></view>
          </view>
        </view>
      </view>

      <view class="info-item" @click="toTask(10)">
        <view class="btn btn-primary">进入测试</view>
      </view>
    </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>-->
    <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 {redirectTo} 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 pageData = reactive({
  status: 0,
  card:[{name:'BMI',img:'/card-bg1.png'},{name:'肺活量',img:'/card-bg2 .png'},{name:'视力',img:'/card-bg3.png'}]
})
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()
    },
  })
}

const toTask = () => {
  pageData.status  = 1
}

// 挂载完成之后
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;
}

.baseMessage {
  background: linear-gradient(180deg, #FFFFFF 0%, #E0EDF8 100%);
  box-shadow: 0px 0px 8px 1px #498CFC;
}

.avatar {
  border: 8rpx solid #498CFC;
  border-radius: 50%;
  top: 0;
  transform: translateY(-50%);
  left: 60rpx;
}

.checkMessage {
  background: linear-gradient(180deg, #498CFC 0%, #E0EDF8 100%);
}
.cardbg{
  width: 500rpx;
  height: 180rpx;
  background-size: 100%;
  border-radius: 15rpx;
  margin-bottom: 20rpx;

  &-0{
    background: url('static/card-bg1.png') no-repeat center center;
  }
  &-1{
    background: url('static/card-bg2.png') no-repeat center center;
  }
  &-2{
    background: url('static/card-bg3.png') no-repeat center center;
  }
}
</style>