tropsCode/src/components/ReportList/index.vue

<template>
  <div class="reportList">
    <div class="title">测试记录</div>
    <ul :ref="reportScrollRef" @scroll="getScroll($event)">
      <li v-for="(item, index) in reportList" :key="index" @click="openReport(item)">
        <div class="left">
          <div class="pic">
            <img v-if="item.face_pic || item.logo_url || item.student_icon_url" :src="item.face_pic || item.logo_url || item.student_icon_url" />
            <img v-else src="@/assets/images/common/noImg.png" />
          </div>
          <div class="txt">
            <div>
              <div class="name">{{ item.student_name }}</div>
              <div class="className">{{ item.class_name }}</div>
            </div>
          </div>
        </div>
        <div class="right" v-if="['basketballv1', 'footballv1'].includes(parameter.project)">
          <div class="score">{{ proxy?.$utils.runTime(item.result, true, false) }}
          </div>
        </div>
        <div class="right" v-else>
          <div class="score">{{ item.result }}
          </div>
          <div class="unit">{{ unit }}</div>
        </div>
      </li>
    </ul>
    <div class="erweima" v-if="showQRCode"> <img :src="erweima" @click="getMobile" />
      <span>扫码查看详情</span>
    </div>
  </div>
  <ReportWindow ref="reportWindowRef" />
</template>
<script setup lang="ts">
import QRCode from "qrcode";
import dataDictionary from "@/utils/dataDictionary"
const dic: any = dataDictionary;
const { proxy } = getCurrentInstance() as any;
const router = useRouter();
const reportWindowRef = ref();
const reportScrollRef = ref();

//父值
const props = defineProps({
  parameter: {
    type: Object,
    default: {}
  },
  showQRCode: {
    type: Boolean,
    default: false
  },
});

const data = reactive<any>({
  reportList: [],//测试列表
  studentPage: {
    current: 1,
    size: 10,
    pages: 1,
  }, //学生分页
  debounceTime: '', //加载状态
  unit: '',//单位
  erweima: ""
});

const { reportList, studentPage, debounceTime, unit, erweima } = toRefs(data);

/**
 * 成绩列表
*/
const getReportList = () => {
  let type = props.parameter.project;
  let params: any = {
    exam_name: type,
    page: studentPage.value.current,
    per_page: studentPage.value.size
  };
  proxy?.$http.common.reportList(params).then((res: any) => {
    if (res.data.length > 0) {
      let list = res.data.map((item: any) => {

        if (type == 'solidball' || type == 'shotball') {
          item.result = item.result / 100
        }
        let result = null;
        if (item.result.toString().indexOf(".") != -1) {
          if (['jump', 'longjump', 'run50', 'run70', 'run100', 'run200', 'run400', 'run800', 'run1000', 'run15x4', 'run50x8', 'run10x4', 'basketballv1', 'footballv1'].includes(type)) {
            result = item.result.toFixed(2)
          } else {
            result = item.result.toFixed(1);
          }
        } else {
          result = item.result
        }
        item.result = result;
        return item;
      });
      studentPage.value.current == 1 ?
        (reportList.value = list) :
        reportList.value.push(...list);
      studentPage.value.pages = res.total;
      getPages(res.total);
    }
  });
};

/**
 * 计算页码
*/
const getPages = (data: any) => {
  studentPage.value.pages = Math.ceil(data / studentPage.value.size);
};

/**
 * 查看详情
*/
const openReport = (data: any) => {
  reportWindowRef.value.open(props.parameter.project, data);
};

/**
* 成绩翻页
*/
const getScroll = (event?: any) => {
  if (studentPage.value.current == studentPage.value.pages) {
    return false;
  }
  let obj = event.target;
  let scrollHeight = obj.scrollHeight;
  let scrollTop = obj.scrollTop;
  let clientHeight = obj.clientHeight;
  //提前高度加载数据
  if (scrollTop + clientHeight + 150 >= scrollHeight) {
    // console.log('到底了!')
    //继续加载下一页
    if (debounceTime.value) {
      clearTimeout(debounceTime.value)
    }
    debounceTime.value = setTimeout(() => {
      studentPage.value.current++;
      getReportList();
    }, 500)
  } else {
    // console.log('没到底')
  }
};

/**
 * 初始化列表
*/
const getIniReportList = () => {
  studentPage.value.current = 1;
  getReportList();
  getErweima();
};

/**
 * 获取二维码
*/
const getErweima = () => {
  let myInfo: any = localStorage.getItem("userInfo");
  let userInfo = JSON.parse(myInfo);
  QRCode.toDataURL(
    `${location.origin}/#/analysis/index?project=${props.parameter.project}&school=${userInfo.school_id}`
  )
    .then((res: any) => {
      erweima.value = res;
    })
}

/**
 * 跳转手机
*/
const getMobile = () => {
  let myInfo: any = localStorage.getItem("userInfo");
  let userInfo = JSON.parse(myInfo);
  let routeUrl: any = router.resolve({ path: '/analysis/index', query: { project: props.parameter.project, school: userInfo.school_id } });
  window.open(routeUrl.href, '_blank');
}

onBeforeMount(() => {
  let project = props.parameter.project;
  unit.value = dic.unit[project];
})

onMounted(() => {
  getIniReportList();
})

//暴露给父组件用
defineExpose({
  getIniReportList
})
</script>
<style lang="scss" scoped>
.reportList {
  display: flex;
  flex-direction: column;
  height: 100%;

  .title {
    height: 7.05vh;
    line-height: 7.05vh;
    width: 100%;
    text-align: center;
    color: #1A293A;
    font-size: 1.65rem;
    background: radial-gradient(120% 126% at 5% 93%, #8EFFA9 0%, #07FFE7 100%);
  }

  ul {
    height: 100%;
    overflow-y: scroll;

    li {
      border-bottom: 1px solid #48677E;
      padding: 8px 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      transition: all 0.2s;

      &:hover {
        background: rgba(255, 255, 255, 0.4);
      }

      .left {
        display: flex;

        .pic {
          width: 7.5vh;
          height: 7.5vh;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          overflow: hidden;
          box-sizing: border-box;
          border: 1px solid rgba(255, 255, 255, 0.5);
          margin-right: 13px;
          flex-shrink: 0;

          img {
            width: 100%;
          }
        }

        .txt {
          display: flex;
          align-items: center;

          .name {
            color: #F9F9F9;
            font-size: 1.38rem;
          }

          .className {
            color: #13ED84;
            font-size: 1.1rem;
          }
        }

      }

      .right {
        display: flex;
        font-weight: bold;
        align-items: center;

        .score {
          color: #ffffff;
          font-size: 1.1rem;
          font-family: 'Saira-ExtraBold';
        }

        .unit {
          color: #ffffff;
          font-size: 0.8rem;
          margin-left: 2px;
        }
      }

    }

    &::-webkit-scrollbar {
      width: 0px;
    }

    &::-webkit-scrollbar-thumb {
      border-width: 2px;
      border-radius: 4px;
      border-style: dashed;
      border-color: transparent;
      background-color: rgba(216, 216, 216, 0.8);
      background-clip: padding-box;
    }

    &::-webkit-scrollbar-button:hover {
      border-radius: 6px;
      background: rgba(216, 216, 216, 0.8);
    }
  }

  .erweima {
    text-align: center;
    padding: 1vh 0;

    img {
      width: 5rem;
    }

    span {
      display: block;
      color: #FFFFFF;
      font-size: 1.1rem;
      padding-top: 3px;
    }
  }
}
</style>