ZhiHuiJiaoWu_UniApp/pages/student/index/physical_examination.vue

<!--体测数据-列表详情-->
<template>
	<view class="overall">

    <scroll-view
        class="table_list"
        scroll-y="true"
        :lower-threshold="lowerThreshold"
        @scrolltolower="loadMoreData"
        style="height: 100vh;"
    >

      <view class="item" v-for="(v,k) in tableList" :key="k">
        <view class="date">{{$util.formatToDateTime(v.create_time, 'Y-m-d')}}</view>
        <view class="content">
          <view class="circle-container">
            <view class="card-con-txt1-left">
              <image :src="$util.img('/uniapp_src/static/images/index/score.png')" class="overlay-image"></image>
            </view>
            <view class="card-con-txt1-left-txt">{{v.score}}</view>
            <view class="card-con-txt1-left-txt top1">综合评分</view>
          </view>
          <view style="height: 170rpx;"></view>
          <view style="display: flex;justify-content: space-around;">
            <view style="text-align: center;">
              <view style="color: #AAAAAA;font-size: 30rpx;padding: 15rpx 0;">身高 (CM)</view>
              <view style="font-size: 55rpx;color: #29d3b4;">{{(v.height * 100)}}</view>
            </view>
            <view style="text-align: center;">
              <view style="color: #AAAAAA;font-size: 30rpx;padding: 15rpx 0;">体重 (KG)</view>
              <view style="font-size: 55rpx;color: #29d3b4;">{{v.weight}}</view>
            </view>
          </view>
          <view class="coach-message">
            <view>
              <image :src="$util.img('/uniapp_src/static/images/index/lv.png')" class="drop-image"></image>
            </view>
            <view style="padding: 15rpx 0 0 5rpx;line-height: 1.6;font-size: 30rpx;color: #7F7F7F;">{{v.content}}</view>
          </view>
          <view style="font-size: 45rpx;text-align: center;margin-top: 30%;">详细数据信息</view>
        </view>
      </view>

    </scroll-view>
	</view>
</template>

<script>
import apiRoute from '@/api/apiRoute.js';

export default {
  data() {
    return {
      loading: false,//加载状态
      lowerThreshold: 100,//距离底部多远触发
      isReachedBottom: false,//防止重复加载|true=不可加载|false=可加载

      //筛选条件
      filteredData: {
        page: 1,//当前页码
        limit: 10,//每页返回数据条数
        total: 10,//数据总条数
        students_id: '',//学员id
      },

      tableList: [],//表格数据
    }
  },
  onLoad(options) {
    this.filteredData.students_id = options.students_id//学员id
  },
  onShow() {
    this.init()
  },
  methods: {
    //初始化
    async init() {
      this.getList()
    },

    //加载更多(下一页)
    loadMoreData() {
      //判断是否加载
      if (!this.isReachedBottom) {
        this.isReachedBottom = true;//设置为不可请求状态
        this.getList();
      }
    },
    //重置为第一页
    async resetFilteredData() {
      this.isReachedBottom = false; // 重置状态，以便下次触发加载更多

      this.filteredData.page = 1//当前页码
      this.filteredData.limit = 10//每页返回数据条数
      this.filteredData.total = 10//数据总条数
    },

    //获取-学员-体测列表
    async getList() {
      this.loading = true

      let data = {...this.filteredData}

      //判断是否还有数据
      if ((this.filteredData.page - 1) * this.filteredData.limit >= this.filteredData.total) {
        this.loading = false
        uni.showToast({
          title: '暂无更多',
          icon: 'none'
        })
        return
      }

      if (data.page == 1) {
        this.tableList = []
      }

      //学员-体测列表
      let res = await apiRoute.surveyList(data)
      this.loading = false
      this.isReachedBottom = false;
      if (res.code != 1) {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }

      this.tableList = this.tableList.concat(res.data.list.data); // 使用 concat 方法 将新数据追加到数组中

      // console.log('列表',this.tableList)
      this.filteredData.total = res.data.list.total
      this.filteredData.page++
    },
  }
}
</script> 

<style lang="less" scoped>
	.overall {
		width: 100%;
		height: 100vh;
		background-color: #29d3b4; 
	}

  .table_list{
    padding-bottom: 40rpx;
    display: flex;
    flex-direction: column;
    .item{
      margin-bottom: 40rpx;
    }
  }

	.date {
		color: #fff;
		width: 92%;
		margin: auto;
		text-align: left;
		font-size: 30rpx;
		padding: 20rpx 0;
	}

	.content {
		width: 92%;
		height: 70vh;
		background-color: #fff;
		border-radius: 15rpx;
		margin: 150rpx auto 0;
		position: relative;
	}

	.circle-container::before {
		content: '';
		width: 200px;
		height: 100px;
		background-color: #fff;
		border-radius: 100px 100px 0 0;
		display: inline-block;
		transform: translate(-50%, 0) rotate(0deg);
		transform-origin: center top;
		position: absolute;
		top: -12%;
		left: 50%;
		transform: translate(-50%, -0%);
	}
	
	.card-con-txt1-left {
		width: 100%;
		height: 100%;
		position: relative;
	}
	
	.overlay-image {
		width: 300rpx;
		height: 200rpx;
		position: absolute;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	
	.card-con-txt1-left-txt {
		font-size: 32rpx;
		color: #29d3b4;
		position: absolute;
		left: 50%;
		transform: translate(-50%, -0%);
	}
	
	.top1{
		top: 5%;
	}
	
	.coach-message{
		width: 92%;
		margin: 10rpx auto;
		display: flex;
	}
	
	.drop-image{
		width: 60rpx;
		height: 60rpx;
		align-items: center;
	}
	
</style>