big-qianduan.new1/excellentHomework.vue

158 lines
3.6 KiB
Vue

<template>
<view class="container">
<!-- 页面标题 -->
<view class="header">
<text class="title">优秀作业展示</text>
</view>
<!-- 作业列表表格 -->
<view class="table-container">
<view class="table">
<!-- 表头 -->
<view class="table-row table-header">
<text class="table-cell">学生用户名</text>
<text class="table-cell">作业标题</text>
<!-- <text class="table-cell">作业内容</text> -->
<text class="table-cell">分数</text>
<text class="table-cell">教师评语</text>
<text class="table-cell">操作</text>
</view>
<!-- 表格内容 -->
<view v-for="(item, index) in submittedHomework" :key="index" class="table-row">
<text class="table-cell">{{ item.studentUsername }}</text>
<text class="table-cell">{{ item.homeworkTitle }}</text>
<!-- <text class="table-cell">{{ item.homeworkContent }}</text> -->
<text class="table-cell">{{ item.grade }}</text>
<text class="table-cell">{{ item.comment }}</text>
<text class="table-cell">
<button class="detail-button" @click="viewDetail(item.id)">查看详情</button>
</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
submittedHomework: [], // 存储提交的作业列表
nickName: '' // 当前用户的昵称
};
},
methods: {
// 获取优秀作业列表
fetchSubmittedHomework() {
const token = uni.getStorageSync('token'); // 获取 token
this.nickName = uni.getStorageSync('nickName'); // 获取用户昵称
if (!token || !this.nickName) {
uni.showToast({
title: '未登录,请重新登录',
icon: 'none'
});
return;
}
uni.request({
url: `${this.$baseUrl}/homework/studentHomework/excellentlist`,
method: 'GET',
header: {
Authorization: `Bearer ${token}`
},
success: (res) => {
if (res.data.code === 200) {
this.submittedHomework = res.data.data;
} else {
uni.showToast({
title: res.data.message || '获取数据失败',
icon: 'none'
});
}
},
fail: () => {
uni.showToast({
title: '网络错误,请稍后重试',
icon: 'none'
});
}
});
},
// 查看作业详情
viewDetail(homeworkId) {
uni.navigateTo({
url: `/pages/excellentHomework/homeworkDetail?id=${homeworkId}` // 跳转到作业详情页面并传递作业 ID
});
}
},
onLoad() {
this.fetchSubmittedHomework(); // 页面加载时获取提交的作业列表
}
};
</script>
<style>
.container {
display: flex;
flex-direction: column;
background-color: #f8f9fa;
height: 100vh;
}
.header {
background-color: #007bff;
padding: 15px;
text-align: center;
}
.title {
color: #fff;
font-size: 24px;
font-weight: bold;
}
.table-container {
margin: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.table {
width: 100%;
}
.table-row {
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 1px solid #ddd;
}
.table-header {
background-color: #f1f1f1;
font-weight: bold;
}
.table-cell {
flex: 1;
padding: 10px;
text-align: center;
font-size: 14px;
}
.detail-button {
background-color: #007bff;
color: #fff;
padding: 8px 12px;
border: none;
border-radius: 5px;
font-size: 14px;
cursor: pointer;
}
.detail-button:hover {
background-color: #0056b3;
}
</style>