ZhiHuiJiaoWu_UniApp/pages/coach/my/my_attendance.vue

<!--我的考勤-详情-->
<template>
  <view class="main_box">
    <fui-segmented-control
        :values="optionTable"
        type="text"
        activeColor="#29d3b4"
        color="#fff"
        @click="segmented">
    </fui-segmented-control>

    <view class="main_section">
      <!--考勤-->
      <scroll-view
          class="section_1"
          v-if="filteredData.type == '1'"
          scroll-y="true"
          :lower-threshold="lowerThreshold"
          @scrolltolower="loadMoreData"
          style="height: 100vh;"
      >
        <view class="ul">
          <view class="li">
            <view class="left">
              <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>
            </view>
            <view class="right">
              <view class="content">篮球课</view>
              <view class="content">考勤正常</view>
              <view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view>
            </view>
          </view>

          <view class="li">
            <view class="left">
              <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>
            </view>
            <view class="right">
              <view class="content">篮球课</view>
              <view class="content">考勤正常</view>
              <view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view>
            </view>
          </view>

          <view class="li">
            <view class="left">
              <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>
            </view>
            <view class="right">
              <view class="content">篮球课</view>
              <view class="content">考勤正常</view>
              <view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view>
            </view>
          </view>
        </view>

        <view class="title_box">普通考勤</view>
        <view class="subhead_box">请假</view>
        <view class="subhead_box">2025-01-01 00:00:00 - 2505-01-01 00:00:00</view>

        <view class="ul">
          <view class="li">
            <view class="left">
              <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>
            </view>
            <view class="right">
              <view class="content">普通考勤</view>
              <view class="content">迟到</view>
              <view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view>
            </view>
          </view>

          <view class="li">
            <view class="left">
              <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>
            </view>
            <view class="right">
              <view class="content">普通考勤</view>
              <view class="content">早退</view>
              <view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view>
            </view>
          </view>

          <view class="li">
            <view class="left">
              <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>
            </view>
            <view class="right">
              <view class="content">普通记录</view>
              <view class="content">本周考勤情况：周一到周五均按时打卡，未请假，综合表现良好。
              </view>
            </view>
          </view>
        </view>

      </scroll-view>

      <!--请假-->
      <scroll-view
          class="section_1"
          v-if="filteredData.type == '2'"
          scroll-y="true"
          :lower-threshold="lowerThreshold"
          @scrolltolower="loadMoreData"
          style="height: 100vh;"
      >
        <view class="ul">
          <view class="li">
            <view class="left">
              <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>
            </view>
            <view class="right">
              <view class="content">篮球课</view>
              <view class="content">考勤正常</view>
              <view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view>
            </view>
          </view>

          <view class="li">
            <view class="left">
              <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>
            </view>
            <view class="right">
              <view class="content">篮球课</view>
              <view class="content">考勤正常</view>
              <view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view>
            </view>
          </view>

          <view class="li">
            <view class="left">
              <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>
            </view>
            <view class="right">
              <view class="content">篮球课</view>
              <view class="content">考勤正常</view>
              <view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view>
            </view>
          </view>
        </view>

        <view class="title_box">普通考勤</view>
        <view class="subhead_box">请假</view>
        <view class="subhead_box">2025-01-01 00:00:00 - 2505-01-01 00:00:00</view>

        <view class="ul">
          <view class="li">
            <view class="left">
              <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>
            </view>
            <view class="right">
              <view class="content">普通考勤</view>
              <view class="content">迟到</view>
              <view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view>
            </view>
          </view>

          <view class="li">
            <view class="left">
              <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>
            </view>
            <view class="right">
              <view class="content">普通考勤</view>
              <view class="content">早退</view>
              <view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view>
            </view>
          </view>

          <view class="li">
            <view class="left">
              <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>
            </view>
            <view class="right">
              <view class="content">普通记录</view>
              <view class="content">本周考勤情况：周一到周五均按时打卡，未请假，综合表现良好。
              </view>
            </view>
          </view>
        </view>

      </scroll-view>

      <!--异常-->
      <scroll-view
          class="section_1"
          v-if="filteredData.type == '3'"
          scroll-y="true"
          :lower-threshold="lowerThreshold"
          @scrolltolower="loadMoreData"
          style="height: 100vh;"
      >
        <view class="ul">
          <view class="li">
            <view class="left">
              <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>
            </view>
            <view class="right">
              <view class="content">篮球课</view>
              <view class="content">考勤正常</view>
              <view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view>
            </view>
          </view>

          <view class="li">
            <view class="left">
              <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>
            </view>
            <view class="right">
              <view class="content">篮球课</view>
              <view class="content">考勤正常</view>
              <view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view>
            </view>
          </view>

          <view class="li">
            <view class="left">
              <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>
            </view>
            <view class="right">
              <view class="content">篮球课</view>
              <view class="content">考勤正常</view>
              <view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view>
            </view>
          </view>
        </view>

        <view class="title_box">普通考勤</view>
        <view class="subhead_box">请假</view>
        <view class="subhead_box">2025-01-01 00:00:00 - 2505-01-01 00:00:00</view>

        <view class="ul">
          <view class="li">
            <view class="left">
              <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>
            </view>
            <view class="right">
              <view class="content">普通考勤</view>
              <view class="content">迟到</view>
              <view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view>
            </view>
          </view>

          <view class="li">
            <view class="left">
              <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>
            </view>
            <view class="right">
              <view class="content">普通考勤</view>
              <view class="content">早退</view>
              <view class="content">2025-01-01 00:00:00 - 2025-01-01 00:00:00</view>
            </view>
          </view>

          <view class="li">
            <view class="left">
              <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>
            </view>
            <view class="right">
              <view class="content">普通记录</view>
              <view class="content">本周考勤情况：周一到周五均按时打卡，未请假，综合表现良好。
              </view>
            </view>
          </view>
        </view>

      </scroll-view>

      <view class="section_btn">
        <view class="btn">请假</view>
      </view>

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

<script>
import marketApi from '@/api/market.js';
import AQTabber from "@/components/AQ/AQTabber.vue"


export default {
  components: {
    AQTabber,
  },
  data() {
    return {
      //tab切换
      optionTable: [
        {
          id: 1,
          name: '考勤'
        },
        {
          id: 2,
          name: '请假'
        },
        {
          id: 3,
          name: '异常'
        }
      ],

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

      //筛选条件
      filteredData:{
        page:1,//当前页码
        limit:10,//每页返回数据条数
        total:10,//数据总条数
        type: '1',//1=考勤,2=请假,3=异常
      },
      tableList:[],//表格数据
    }
  },
  onLoad(options) {},
  onShow(){
    this.init()//初始化
  },
  methods: {
    //初始化
    async init(){
      await this.getList();
    },

    //切换tag列表
    async segmented(e) {
      //重置为第一页
      await this.resetFilteredData()
      this.filteredData.type = e.id//1=考勤,2=请假,3=异常
      await 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 * this.filteredData.limit > this.filteredData.total){
        this.loading = false
        uni.showToast({
          title: '暂无更多',
          icon: 'none'
        })
        return
      }

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

      let res = await marketApi.myClient(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++

      this.countArr = {
        type_0:res.data.count[0],
        type_1:res.data.count[1],
        type_2:res.data.count[2],
        type_3:res.data.count[3],
        max_count:res.data.gh.max_count,
        lq_count:res.data.gh.lq_count,
      }

    },


  }
}
</script>

<style lang="less" scoped>

.main_box{
  background: #292929 ;
}

//自定义导航栏
.navbar_section{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #29d3b4;
  .title{
    padding: 40rpx 0rpx;

    /* 小程序端样式 */
    // #ifdef MP-WEIXIN
    padding: 80rpx 0rpx;
    // #endif

    font-size: 30rpx;
    color: #315d55;
  }
}

.main_section{
  min-height: 100vh;
  background: #292929 100%;
  padding: 0 24rpx;
  padding-top: 32rpx;
  padding-bottom: 150rpx;
  font-size: 28rpx;
  .section_1{
    color: #fff;
    font-size: 28rpx;
    .ul{
      margin-top: 23rpx;
      display: flex;
      flex-direction: column;
      gap: 24rpx;
      .li{
        display: flex;
        align-items: center;
        gap: 43rpx;
        .left{
          image{
            width: 174rpx;
            height: 174rpx;
            border-radius: 24rpx;
            background-color: #333333;
          }
        }
        .right{
          display: flex;
          flex-direction: column;
          gap: 18rpx;
          .content{
            font-size: 24rpx;
          }
          .content:nth-child(1){
            font-size: 28rpx;
          }
        }
      }
    }
    .title_box{
      margin-top: 46rpx;
      font-size: 28rpx;
    }
    .subhead_box{
      margin-top: 22rpx;
      font-size: 24rpx;
    }
  }

  .section_btn{
    display: flex;
    justify-content: center;
    .btn{
      width: 722rpx;
      height: 64rpx;
      line-height: 64rpx;
      border-radius: 8rpx;
      background-color: rgba(32,202,175,1);
      color: rgba(255,255,255,1);
      font-size: 28rpx;
      text-align: center;
    }
  }

}


</style>