feat(student): 优化课后作业页面

- 重新设计页面布局，增加滚动视图功能
- 动态加载作业列表，支持分页加载更多数据
- 添加作业完成状态标记和提交时间显示
- 优化作业内容展示，支持富文本格式
-调整样式，提升页面视觉效果

pages/student/index/job_list.vue

@@ -3,55 +3,124 @@
 		<view class="after-class-title">
 			<view class="after-class-title-left">课后作业</view>
 		</view>
-		<view>
+
-			<view class="con-list">
+    <scroll-view
-				<view class="con-list-img">
+        class="table_list"
-					<image class="pic" src="@/static/images/index/img.jpg"></image>
+        scroll-y="true"
-				</view>
+        :lower-threshold="lowerThreshold"
-				<view class="con" style="margin-top: 20rpx;">
+        @scrolltolower="loadMoreData"
-					时间：2020.05:25 15:30
+        style="height: 100vh;"
-				</view>
+    >
-				<view class="con" style="margin-bottom: 20rpx;">
+
-					作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述
+      <view class="con-list" v-for="(v,k) in tableList" :key="k">
-				</view>
+        <view class="con-list-img" v-if="v.student_file">
-				<view class="mark" v-if="true">
+          <video v-if="v.student_file_type == 2" class="pic" style="width: 100%;border-radius: 15rpx;" :src="$util.img(v.student_file)"></video>
-					<image class="check_mark" src="@/static/images/index/check_mark.png"></image>
+          <image v-else style="width: 100%;border-radius: 15rpx;" :src="$util.img(v.student_file)" mode="aspectFit"></image>
-				</view>
+        </view>
-				<view class="assignment">
+
-					班级作业
+        <view class="date_box">
-				</view>
+          <view class="describe" style="margin-top: 20rpx;">
-			</view>
+            时间：{{v.submit_time}}
-			<view class="con-list">
+          </view>
-				<view class="con-list-img">
+          <!--是否已经完成作业-->
-					<video class="pic" style="width: 100%;border-radius: 15rpx;"></video>
+          <view class="mark" v-if="v.status == 2">
-				</view>
+            <image class="check_mark" src="@/static/images/index/check_mark.png"></image>
-				<view class="con" style="margin-top: 20rpx;">
+          </view>
-					时间：2020.05:25 15:30
+        </view>
-				</view>
+
-				<view class="con" style="margin-bottom: 20rpx;">
+
-					作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述
+        <!--作业描述-->
-				</view>
+        <view class="con" style="margin-bottom: 20rpx; color:#fff;" v-html="v.content_text"></view>
-				<view class="mark" v-if="false">
+
-					<image class="check_mark" src="@/static/images/index/check_mark.png"></image>
+        <view class="assignment">
-				</view>
+          <view>{{v.type == 1 ? '班级作业' : '个人作业'}}</view>
-				<view class="assignment">
+        </view>
-					个人作业
+      </view>
-				</view>
+
-			</view>
+    </scroll-view>
-		</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,//数据总条数
+          status: '',//1=未提交,2=已提交,3=已批改
+        },
+
+        tableList:[],//表格数据
+
 			}
 		},
+    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.filteredData.total){
+          this.loading = false
+          uni.showToast({
+            title: '暂无更多',
+            icon: 'none'
+          })
+          return
+        }
+        let res = await memberApi.assignmentsList(data)
+        this.loading = false
+        this.isReachedBottom = false;
+        if (res.code != 1){
+          uni.showToast({
+            title: res.msg,
+            icon: 'none'
+          })
+          return
+        }
+
+        this.tableList = res.data.data
+        console.log('列表',this.tableList)
+        this.filteredData.total = res.data.total
+        this.filteredData.page++
+      },
+
+		},
 	}
 </script>
 
@@ -61,6 +130,10 @@
 		height: 100vh;
 		background: #292929;
 		overflow: auto;
+
+    .table_list{
+      padding-bottom: 150rpx;
+    }
 	}
 	.after-class-title {
 		width: 92%;
@@ -79,7 +152,16 @@
 		padding: 30rpx;
 		margin-top: 20rpx;
 		border-bottom: 2rpx #fff solid;
-		position: relative;
+		.date_box{
+      padding-top: 30rpx;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .describe{
+        width: 75%;
+        color: #fff;
+      }
+    }
 	}
 	.con-list-img{
 		width: 100%;
@@ -87,6 +169,16 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
+
+    video{
+      width: 100%;
+      height: 280rpx;
+    }
+    image{
+      width: 100%;
+      height: 280rpx;
+    }
+
 	}
 	.pic{
 		width: 85%;
@@ -98,9 +190,6 @@
 		padding-top: 30rpx;
 	}
 	.mark{
-		position: absolute;
-		right: 8%;
-		bottom: 23%;
 		width: 70rpx;
 		height: 70rpx;
 		border-radius: 100%;
@@ -114,14 +203,16 @@
 		height: 80%;
 	}
 	.assignment{
-		position: absolute;
+    display: flex;
-		right: 3%;
+    justify-content: flex-end;
-		bottom: 10%;
+    align-items: center;
-		width: 150rpx;
+    view{
-		text-align: center;
+      padding: 6rpx 12rpx;
-		border-radius: 10rpx;
+      color: #6b9d53;
-		padding: 6rpx 12rpx;
+      border: 2rpx #6b9d53 solid;
-		color: #6b9d53;
+      border-radius: 10rpx;
-		border: 2rpx #6b9d53 solid;
+      width: 150rpx;
+      text-align: center;
+    }
 	}
 </style>