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="@/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="@/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 memberApi from '@/api/member.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 memberApi.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>