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 m-40" style="height: 80px;text-align: center">
          <view class="flex-three p-10">姓名：{{pageData.studentInfo.name}}</view>
          <view class="flex-three p-10">性别：{{pageData.studentInfo.gender}}</view>
          <view class="flex-three p-10">班级：{{pageData.studentInfo.class}}</view>
          <view class="flex-three p-10">模式：{{pageData.studentInfo.model}}</view>
          <view class="flex-three p-10">学校：{{pageData.studentInfo.school}}</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" :key="index" class="cardbg b-r-15" @click="showDetail(item)" :class="['cardbg-'+index]">
            <view class="f-u-35 dis-flex flex-y-center checkCard p-l-20 p-r-20 p-t-20 p-b-5">
              <view class="circle" :class="['circle-'+index]"></view>
              <view class="flex-grow t-a-c">
                <view class="f-w-b">{{item.name}}</view>
                <view class="f-u-32 font-color p-10">
                  <view v-if="pageData.status == 1" class="t-a-c f-w-5 f-u-29">
                    <view v-if="item.value1">{{item.title1}}:{{item.value1}}</view>
                    <view class="m-t-10" v-if="item.value2">{{item.title2}}:{{item.value2}}</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <view class="checkMessage p-40 m-t-50 b-r-15 flex-center-center flex-dir-column flex-grow" style="min-height: 500rpx">
          <view class="f-u-35 col-f p-20">{{pageData.status == 1?'检测结果展示':'待检测项目'}}</view>
          <view class="w-bg w100 b-r-15 m-t-10 flex-y-start flex-wrap flex-grow ">
            <view v-for="(item,index) in pageData.card" :key="index" class="flex-two t-a-c p-20 f-u-32 f-w-b">
              <view class="flex-center-center">
                <view class="circle1" :class="['circleBg-'+index]"></view>
                <view class="p-l-10">{{ item.name }} </view>
              </view>
              <view v-if="pageData.status == 0" class="t-a-c col-red f-w-5 p-l-50"> {{ item.status }} </view>
              <view v-if="pageData.status == 1" class="t-a-c f-w-5 p-l-50 p-t-20 font-color dis-flex flex-x-center">
                <view v-if="item.value1">{{item.title1}}:{{item.value1}}</view>
                <view class="p-l-20" v-if="item.value2">{{item.title2}}:{{item.value2}}</view>
              </view>
            </view>

          </view>
        </view>
      </view>


      <view class="dis-flex flex-x-center w100 m-t-50">
        <view v-if="pageData.status == 0" class="w10" @click="toTask(10)">
          <view class="btn btn-primary w100">进入测试</view>
        </view>
        <view v-if="pageData.status == 1" class="w10">
          <view class="btn btn-primary w100">重新检测</view>
        </view>
        <view v-if="pageData.status == 1" class="w10 m-l-50" @click="logout">
          <view class="btn btn-primary w100">完成</view>
        </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,
  studentInfo:{
    name:'测试',
    gender:'男',
    class:'xx年级xx班',
    model:'机器录入',
    school:'xxxx学校',
  },
  card:[
    {name:'BMI',img:'/card-bg1.png',status:'待检测',value1:'175cm',value2:'54kg',title1:'身高',title2:'体重'},
    {name:'肺活量',img:'/card-bg2 .png',status:'待检测',value1:'3500ml',title1:'肺活量'},
    {name:'视力',img:'/card-bg3.png',status:'待检测',value1:'5.0',value2:'5.0',title1:'左眼',title2:'右眼'}
  ]
})
const search = () => {
  queryForm.student_id = 2260
}
const backClick = () => {
  console.log('modelRef', modelRef, modelRef.value.open)
  modelRef.value.open({
    title: '温馨提示',
    content: '确认要退出吗？',
    showCancelButton: true,
    confirm:()=>{
      logout()
    }
  })
  // 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 showDetail = (item)=>{
  console.log(item)
}
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: 230rpx;
  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;
  }
}

.checkCard{

  height: 80%;
  background-color: #FFFFFF;
  border-radius: 15rpx 15rpx 25rpx 25rpx;

  .circle{
    width: 130rpx;
    height: 130rpx;
    border-radius: 50%;
    &-0{
      background-color: #027EEC;
    }

    &-1{
      background-color: #F7B03C;
    }

    &-2{
      background-color: #17ACC3;
    }
  }
}
.circle1{
  width: 35rpx;
  height: 35rpx;
  border-radius: 50%;
}
.circleBg{
  &-0{
    background-color: #027EEC;
  }

  &-1{
    background-color: #F7B03C;
  }

  &-2{
    background-color: #17ACC3;
  }
}
.font-color{
  color: #153269;
}
</style>