<!--课程-详情-->
<template>
	<view class="main_box">
    <scroll-view scroll-y="true" :lower-threshold="lowerThreshold"
			@scrolltolower="loadMoreData"  style="height: 100vh;">

      <view class="main_section">
        <view class="title">XXX体育馆</view>
        <view class="con">南山区科苑路15号科兴科学园</view>
        <view class="con">距您1km</view>
        <view class="current-venue" v-if="true">
          当前场馆
        </view>
      </view>

      <view class="main_section">
        <view class="title">XXX体育馆</view>
        <view class="con">南山区科苑路15号科兴科学园</view>
        <view class="con">距您1km</view>
        <view class="current-venue" v-if="true">
          当前场馆
        </view>
      </view>
      <view class="main_section">
        <view class="title">XXX体育馆</view>
        <view class="con">南山区科苑路15号科兴科学园</view>
        <view class="con">距您1km</view>
        <view class="current-venue" v-if="true">
          当前场馆
        </view>
      </view>
      <view class="main_section">
        <view class="title">XXX体育馆</view>
        <view class="con">南山区科苑路15号科兴科学园</view>
        <view class="con">距您1km</view>
        <view class="current-venue" v-if="true">
          当前场馆
        </view>
      </view>
      <view class="main_section">
        <view class="title">XXX体育馆</view>
        <view class="con">南山区科苑路15号科兴科学园</view>
        <view class="con">距您1km</view>
        <view class="current-venue" v-if="true">
          当前场馆
        </view>
      </view>
      <view class="main_section">
        <view class="title">XXX体育馆</view>
        <view class="con">南山区科苑路15号科兴科学园</view>
        <view class="con">距您1km</view>
        <view class="current-venue" v-if="true">
          当前场馆
        </view>
      </view>
      <view class="main_section">
        <view class="title">XXX体育馆</view>
        <view class="con">南山区科苑路15号科兴科学园</view>
        <view class="con">距您1km</view>
        <view class="current-venue" v-if="true">
          当前场馆
        </view>
      </view>
      <view class="main_section">
        <view class="title">XXX体育馆</view>
        <view class="con">南山区科苑路15号科兴科学园</view>
        <view class="con">距您1km</view>
        <view class="current-venue" v-if="true">
          当前场馆
        </view>
      </view>

    </scroll-view>
    <!--      加载状态-->
    <fui-loading :isFixed="true" srcCol="/static/icon-img/loading_white.png" text="正在加载..." v-if="loading"></fui-loading>


<!--		<view class="main_section">-->
<!--			<view class="title">XXX体育馆</view>-->
<!--			<view class="con">南山区科苑路15号科兴科学园</view>-->
<!--			<view class="con">距您1km</view>-->
<!--		</view>-->
<!--		<view class="main_section">-->
<!--			<view class="title">XXX体育馆</view>-->
<!--			<view class="con">南山区科苑路15号科兴科学园</view>-->
<!--			<view class="con">距您1km</view>-->
<!--		</view>-->
<!--		<view class="main_section">-->
<!--			<view class="title">XXX体育馆</view>-->
<!--			<view class="con">南山区科苑路15号科兴科学园</view>-->
<!--			<view class="con">距您1km</view>-->
<!--		</view>-->
<!--		<view class="main_section">-->
<!--			<view class="title">XXX体育馆</view>-->
<!--			<view class="con">南山区科苑路15号科兴科学园</view>-->
<!--			<view class="con">距您1km</view>-->
<!--		</view>-->
<!--		<view class="main_section">-->
<!--			<view class="title">XXX体育馆</view>-->
<!--			<view class="con">南山区科苑路15号科兴科学园</view> -->
<!--			<view class="con">距您1km</view>-->
<!--		</view>-->
<!--		<view class="main_section">-->
<!--			<view class="title">XXX体育馆</view>-->
<!--			<view class="con">南山区科苑路15号科兴科学园</view>-->
<!--			<view class="con">距您1km</view>-->
<!--		</view>-->
<!--		<view class="main_section">-->
<!--			<view class="title">XXX体育馆</view>-->
<!--			<view class="con">南山区科苑路15号科兴科学园</view>-->
<!--			<view class="con">距您1km</view>-->
<!--		</view>-->
<!--		<view class="main_section">-->
<!--			<view class="title">XXX体育馆</view>-->
<!--			<view class="con">南山区科苑路15号科兴科学园</view>-->
<!--			<view class="con">距您1km</view>-->
<!--		</view>-->
<!--		<view class="main_section">-->
<!--			<view class="title">XXX体育馆</view>-->
<!--			<view class="con">南山区科苑路15号科兴科学园</view>-->
<!--			<view class="con">距您1km</view>-->
<!--		</view>-->
	</view>
</template>

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


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

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

        tableList:[],//表格数据

			}
		},
		onLoad() {},
    onShow() {
      this.init()//初始化
    },


		methods: {
		  //初始化
      async init() {
        await this.getList()
      },

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

      //获取列表
      async getList(){
        this.loading = true

        let data = {...this.filteredData}

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

        let res = await memberApi.courseList(data)
        this.loading = false
        this.isReachedBottom = false;
        if (res.code != 1){
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
          return
        }

        this.tableList = res.data.data

        this.total = res.data.total
        this.page++
      },
		}
	}
</script>

<style lang="less" scoped>
	.main_box {
		width: 100%;
		height: 100vh;
		overflow: auto;
		background: #292929;
	}
	.main_section{
		width: 92%;
		border-radius: 15rpx;
		background-color: #404045;
		margin: 20rpx auto;
		padding: 40rpx 0 40rpx 80rpx;
		color: #fff;
		position: relative;
	}
	.title{
		font-size: 32rpx;
	}
	.con{
		color: #D7D7D7;
		font-size: 26rpx;
		margin-top: 20rpx;
	}
	.current-venue{
		border-radius: 8rpx;
		border: 2rpx #F59A23 solid;
		width: 120rpx;
		text-align: center;
		color: #F59A23;
		position: absolute;
		top: 10%;
		right: 3%;
	}
</style>