big-qianduan.new1/homeworkDetail.vue

184 lines
3.7 KiB
Vue

<template>
<view class="container">
<!-- 页面标题 -->
<view class="header">
<text class="title">作业详情</text>
</view>
<!-- 作业详情表单 -->
<view class="form-container">
<view class="form-item">
<text class="label">学生姓名</text>
<input v-model="homeworkDetail.studentUsername" class="input disabled" disabled />
</view>
<view class="form-item">
<text class="label">作业标题</text>
<input v-model="homeworkDetail.homeworkTitle" class="input disabled" disabled />
</view>
<view class="form-item">
<text class="label">作业内容</text>
<textarea v-model="homeworkDetail.homeworkContent" class="textarea disabled" disabled></textarea>
</view>
<view class="form-item">
<text class="label">作业评语</text>
<textarea v-model="homeworkDetail.comment" class="textarea disabled" disabled></textarea>
</view>
<view class="form-item">
<text class="label">作业分数</text>
<input v-model="homeworkDetail.grade" class="input disabled" type="number" disabled />
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
homeworkId: null, // 作业 ID
homeworkDetail: {
studentUsername: '',
homeworkTitle: '',
homeworkContent: '',
comment: '',
grade: ''
}, // 作业详情数据
};
},
onLoad(options) {
this.homeworkId = options.id; // 接收传递过来的作业 ID
this.fetchHomeworkDetail(); // 获取作业详情
},
methods: {
// 获取作业详情
fetchHomeworkDetail() {
const token = uni.getStorageSync('token');
if (!token) {
uni.showToast({
title: '未登录,请重新登录',
icon: 'none'
});
return;
}
uni.request({
url: `${this.$baseUrl}/homework/studentHomework/${this.homeworkId}`,
method: 'GET',
header: {
Authorization: `Bearer ${token}`
},
success: (res) => {
if (res.data.code === 200) {
this.homeworkDetail = res.data.data;
} else {
uni.showToast({
title: res.data.message || '获取作业详情失败',
icon: 'none'
});
}
},
fail: () => {
uni.showToast({
title: '网络错误,请稍后重试',
icon: 'none'
});
}
});
},
}
};
</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;
}
.form-container {
padding: 20px;
background-color: #fff;
margin: 15px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.form-item {
margin-bottom: 20px;
}
.label {
font-size: 16px;
font-weight: bold;
margin-bottom: 5px;
display: block;
color: #333;
}
.input,
.textarea {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 5px;
}
.textarea {
height: 100px;
resize: none;
}
.input.disabled,
.textarea.disabled {
background-color: #f5f5f5;
/* 灰色背景 */
color: #999;
/* 灰色字体 */
cursor: not-allowed;
}
.update-button {
width: 100%;
padding: 15px;
background-color: #007bff;
color: #fff;
font-size: 18px;
border: none;
border-radius: 5px;
text-align: center;
}
.update-button.disabled {
background-color: #ccc;
cursor: not-allowed;
}
.update-button:hover:not(.disabled) {
background-color: #0056b3;
}
</style>