feat(student): 添加课时消耗列表功能

- 新增课时消耗列表页面，展示学生上课记录- 实现下拉刷新和上拉加载更多功能
- 添加请假状态展示
- 优化列表项样式，动态显示上课时间和课时数

api/member.js

@@ -108,6 +108,17 @@ export default {
 		})
 	},
 
+	//获取课时列表
+	studentsSignList(data) {
+		let url = '/member/students_sign_list'
+		return http.post(url, data).then(res => {
+			return res;
+		})
+	},
+
+
+
+
 
 
 

pages/student/my/lesson_consumption.vue

@@ -1,95 +1,29 @@
+<!--课时消耗列表-->
 <template>
 	<view class="assemble">
 		<view style="height: 50rpx;"></view>
 		<view class="ul">
-			<view class="li">
+			<view class="li" v-for="(v,k) in tableList" :key="k">
 				<view class="left">
-					<view class="title">篮球少儿课</view>
+					<view class="title">{{v.name}}</view>
-					<view class="date">上课时间：2020.05.30 15:30 - 17:30</view>
+					<view class="date">上课时间：{{v.create_time}}</view>
 				</view>
 				<view class="right">
-					<view class="btn" style="background-color: #29d3b4;">1课时</view>
+          <view
-				</view>
+              v-if="v.status == 1"
-			</view>
+              class="btn"
-			<view class="li">
+              style="background-color: #29d3b4;"
-				<view class="left">
+          >
-					<view class="title">篮球少儿课</view>
+            {{v.hour}}课时
-					<view class="date">上课时间：2020.05.30 15:30 - 17:30</view>
+          </view>
-				</view>
+
-				<view class="right">
+          <view
-					<view class="btn" style="background-color: #29d3b4;">1课时</view>
+              v-if="v.status == 2"
-				</view>
+              class="btn"
-			</view>
+              style="background-color: #FAD04D;"
-			<view class="li">
+          >
-				<view class="left">
+            请假
-					<view class="title">篮球少儿课</view>
+          </view>
-					<view class="date">上课时间：2020.05.30 15:30 - 17:30</view>
-				</view>
-				<view class="right">
-					<view class="btn" style="background-color: #29d3b4;">1课时</view>
-				</view>
-			</view>
-			<view class="li">
-				<view class="left">
-					<view class="title">篮球少儿课</view>
-					<view class="date">上课时间：2020.05.30 15:30 - 17:30</view>
-				</view>
-				<view class="right">
-					<view class="btn" style="background-color: #29d3b4;">1课时</view>
-				</view>
-			</view>
-			<view class="li">
-				<view class="left">
-					<view class="title">篮球少儿课</view>
-					<view class="date">上课时间：2020.05.30 15:30 - 17:30</view>
-				</view>
-				<view class="right">
-					<view class="btn" style="background-color: #29d3b4;">1课时</view>
-				</view>
-			</view>
-			<view class="li">
-				<view class="left">
-					<view class="title">篮球少儿课</view>
-					<view class="date">上课时间：2020.05.30 15:30 - 17:30</view>
-				</view>
-				<view class="right">
-					<view class="btn" style="background-color: #29d3b4;">1课时</view>
-				</view>
-			</view>
-			<view class="li">
-				<view class="left">
-					<view class="title">篮球少儿课</view>
-					<view class="date">上课时间：2020.05.30 15:30 - 17:30</view>
-				</view>
-				<view class="right">
-					<view class="btn" style="background-color: #29d3b4;">1课时</view>
-				</view>
-			</view>
-			<view class="li">
-				<view class="left">
-					<view class="title">篮球少儿课</view>
-					<view class="date">上课时间：2020.05.30 15:30 - 17:30</view>
-				</view>
-				<view class="right">
-					<view class="btn" style="background-color: #29d3b4;">1课时</view>
-				</view>
-			</view>
-			<view class="li">
-				<view class="left">
-					<view class="title">篮球少儿课</view>
-					<view class="date">上课时间：2020.05.30 15:30 - 17:30</view>
-				</view>
-				<view class="right">
-					<view class="btn" style="background-color: #29d3b4;">1课时</view>
-				</view>
-			</view>
-			<view class="li">
-				<view class="left">
-					<view class="title">篮球少儿课</view>
-					<view class="date">上课时间：2020.05.30 15:30 - 17:30</view>
-				</view>
-				<view class="right">
-					<view class="btn" style="background-color: #29d3b4;">1课时</view>
 				</view>
 			</view>
 		</view>
@@ -97,15 +31,99 @@
 </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,//数据总条数
+        },
 
+        tableList:[],//表格数据
 			}
 		},
+    onLoad(options) {
+
+    },
+    onShow(){
+      this.init()//初始化
+    },
+    //下拉刷新
+    async onPullDownRefresh() {
+      //重置为第一页
+      await this.resetFilteredData()
+      await this.getList()
+    },
 		methods: {
+      //初始化
+      async init(){
+        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 memberApi.studentsSignList(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.data); // 使用 concat 方法 将新数据追加到数组中
+
+        console.log('列表',this.tableList)
+        this.filteredData.total = res.data.total
+        this.filteredData.page++
+      },
 
-		}
+    }
 	}
 </script>