You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
781 lines
20 KiB
781 lines
20 KiB
<!--作业列表-->
|
|
<template>
|
|
<view class="main_section">
|
|
|
|
<scroll-view
|
|
class="section_3"
|
|
scroll-y="true"
|
|
:lower-threshold="lowerThreshold"
|
|
@scrolltolower="loadMoreData"
|
|
style="height: 80vh;"
|
|
>
|
|
<view class="ul">
|
|
<view class="li" v-for="(v,k) in tableList" :key="k" @click="openViewWorkDetails(v)">
|
|
<view class="left_box">
|
|
<view class="date_box">
|
|
<text>{{v.wc_count}}</text>
|
|
<text>/</text>
|
|
<text>{{v.student_count}}</text>
|
|
</view>
|
|
<view class="ratio">
|
|
完成率：{{v.rate}}%
|
|
</view>
|
|
</view>
|
|
<view class="center_box">
|
|
<view>班级：{{v.class_name}}</view>
|
|
<view>时间：{{v.send_time}}</view>
|
|
<view>课程：{{v.courses_name}}
|
|
</view>
|
|
</view>
|
|
<view class="right_box">
|
|
<!-- <view class="tag" style="background:#fad24e;">上课中</view>-->
|
|
<view class="tag" v-if="v.dpg_count == 0" style="background:#1cd188;">待批改</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<!-- 底部发布作业按钮 -->
|
|
<view class="publish-btn" @click="openPublishPopup">
|
|
<text class="btn-text">发布作业</text>
|
|
</view>
|
|
|
|
<!-- 底部导航-->
|
|
<AQTabber/>
|
|
|
|
<!-- 发布作业弹窗 -->
|
|
<uni-popup ref="publishPopup" type="center">
|
|
<view class="popup-content">
|
|
<view class="popup-title">发布作业</view>
|
|
|
|
<view class="form-item">
|
|
<text class="form-label">类型</text>
|
|
<input class="form-input" type="number" v-model="formData.type" placeholder="请输入类型" />
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<text class="form-label">班级ID</text>
|
|
<input class="form-input" type="number" v-model="formData.class_id" placeholder="请输入班级ID" />
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<text class="form-label">课程ID</text>
|
|
<input class="form-input" type="number" v-model="formData.course_id" placeholder="请输入课程ID" />
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<text class="form-label">教师ID</text>
|
|
<input class="form-input" type="number" v-model="formData.personnel_id" placeholder="请输入教师ID" />
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<text class="form-label">学生ID</text>
|
|
<input class="form-input" type="number" v-model="formData.student_id" placeholder="请输入学生ID" />
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<text class="form-label">作业描述</text>
|
|
<textarea class="form-textarea" v-model="formData.description" placeholder="请输入作业描述" />
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<text class="form-label">内容类型</text>
|
|
<picker class="form-picker" :value="contentTypeIndex" :range="contentTypes" @change="contentTypeChange">
|
|
<view class="picker-text">{{contentTypes[contentTypeIndex]}}</view>
|
|
</picker>
|
|
</view>
|
|
|
|
<!-- 根据内容类型显示不同的上传控件 -->
|
|
<!-- 图片类型 -->
|
|
<view class="form-item" v-if="formData.content_type === '1'">
|
|
<text class="form-label">上传图片</text>
|
|
<view class="upload-container">
|
|
<!-- 已上传图片预览 -->
|
|
<view class="image-preview" v-if="uploadedFiles.image">
|
|
<image class="preview-image" :src="uploadedFiles.image" mode="aspectFill"></image>
|
|
<view class="delete-btn" @click="deleteFile('image')">
|
|
<text class="delete-icon">×</text>
|
|
</view>
|
|
</view>
|
|
<!-- 上传按钮 -->
|
|
<view class="upload-btn" v-if="!uploadedFiles.image" @click="chooseFile('image')">
|
|
<text class="upload-icon">+</text>
|
|
<text class="upload-text">上传图片</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 视频类型 -->
|
|
<view class="form-item" v-if="formData.content_type === '2'">
|
|
<text class="form-label">上传视频</text>
|
|
<view class="upload-container">
|
|
<!-- 已上传视频预览 -->
|
|
<view class="video-preview" v-if="uploadedFiles.video">
|
|
<video class="preview-video" :src="uploadedFiles.video" controls></video>
|
|
<view class="delete-btn" @click="deleteFile('video')">
|
|
<text class="delete-icon">×</text>
|
|
</view>
|
|
</view>
|
|
<!-- 上传按钮 -->
|
|
<view class="upload-btn" v-if="!uploadedFiles.video" @click="chooseFile('video')">
|
|
<text class="upload-icon">+</text>
|
|
<text class="upload-text">上传视频</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 文本类型 -->
|
|
<view class="form-item" v-if="formData.content_type === '3'">
|
|
<text class="form-label">内容文本</text>
|
|
<textarea class="form-textarea" v-model="formData.content_text" placeholder="请输入内容文本" />
|
|
</view>
|
|
|
|
<view class="form-buttons">
|
|
<button class="btn-cancel" @click="closePublishPopup">取消</button>
|
|
<button class="btn-submit" @click="submitForm">提交</button>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</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:[],//数据列表
|
|
|
|
// 发布作业表单数据
|
|
formData: {
|
|
type: '',
|
|
class_id: '',
|
|
course_id: '',
|
|
personnel_id: '',
|
|
student_id: '',
|
|
description: '',
|
|
content_type: '1',
|
|
content_text: '',
|
|
status: '1'
|
|
},
|
|
// 内容类型选择器
|
|
contentTypes: ['图片', '视频', '文本'],
|
|
contentTypeIndex: 0,
|
|
|
|
// 上传的文件
|
|
uploadedFiles: {
|
|
image: '',
|
|
video: ''
|
|
},
|
|
|
|
// 模拟数据
|
|
mockData: [
|
|
{
|
|
id: 1,
|
|
wc_count: 15,
|
|
student_count: 20,
|
|
rate: 75,
|
|
class_name: '高三一班',
|
|
send_time: '2023-05-12',
|
|
courses_name: '高等数学',
|
|
dpg_count: 0
|
|
},
|
|
{
|
|
id: 2,
|
|
wc_count: 18,
|
|
student_count: 22,
|
|
rate: 82,
|
|
class_name: '高三二班',
|
|
send_time: '2023-05-13',
|
|
courses_name: '物理',
|
|
dpg_count: 5
|
|
},
|
|
{
|
|
id: 3,
|
|
wc_count: 10,
|
|
student_count: 25,
|
|
rate: 40,
|
|
class_name: '高三三班',
|
|
send_time: '2023-05-14',
|
|
courses_name: '化学',
|
|
dpg_count: 0
|
|
},
|
|
{
|
|
id: 4,
|
|
wc_count: 22,
|
|
student_count: 24,
|
|
rate: 92,
|
|
class_name: '高三四班',
|
|
send_time: '2023-05-15',
|
|
courses_name: '英语',
|
|
dpg_count: 3
|
|
},
|
|
{
|
|
id: 5,
|
|
wc_count: 16,
|
|
student_count: 20,
|
|
rate: 80,
|
|
class_name: '高三五班',
|
|
send_time: '2023-05-16',
|
|
courses_name: '语文',
|
|
dpg_count: 0
|
|
}
|
|
]
|
|
}
|
|
},
|
|
onLoad() {},
|
|
onShow() {
|
|
this.init()
|
|
},
|
|
methods: {
|
|
async init(){
|
|
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 - 1) * this.filteredData.limit >= this.filteredData.total) {
|
|
this.loading = false
|
|
uni.showToast({
|
|
title: '暂无更多',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
if(data.page == 1){
|
|
this.tableList = []
|
|
}
|
|
|
|
// 使用模拟数据
|
|
setTimeout(() => {
|
|
this.loading = false
|
|
this.isReachedBottom = false
|
|
|
|
// 模拟分页
|
|
const startIndex = (this.filteredData.page - 1) * this.filteredData.limit
|
|
const endIndex = startIndex + this.filteredData.limit
|
|
const pageData = this.mockData.slice(startIndex, endIndex)
|
|
|
|
this.tableList = this.tableList.concat(pageData)
|
|
this.filteredData.total = this.mockData.length
|
|
this.filteredData.page++
|
|
}, 500)
|
|
|
|
// 注释掉原接口调用
|
|
/*
|
|
let res = await memberApi.jsGetAssignmentsList(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++
|
|
*/
|
|
},
|
|
|
|
//跳转页面-作业详情
|
|
openViewWorkDetails(item){
|
|
let id = item.id
|
|
this.$navigateTo({
|
|
url: `/pages/coach/student/work_details?id=${id}`
|
|
})
|
|
},
|
|
|
|
// 打开发布作业弹窗
|
|
openPublishPopup() {
|
|
this.$refs.publishPopup.open()
|
|
},
|
|
|
|
// 关闭发布作业弹窗
|
|
closePublishPopup() {
|
|
this.$refs.publishPopup.close()
|
|
},
|
|
|
|
// 内容类型选择器变化
|
|
contentTypeChange(e) {
|
|
this.contentTypeIndex = e.detail.value
|
|
this.formData.content_type = String(parseInt(e.detail.value) + 1)
|
|
},
|
|
|
|
// 选择文件（图片或视频）
|
|
chooseFile(type) {
|
|
if (type === 'image') {
|
|
// 选择图片
|
|
uni.chooseImage({
|
|
count: 1,
|
|
sizeType: ['compressed'],
|
|
sourceType: ['album', 'camera'],
|
|
success: (res) => {
|
|
// 模拟上传
|
|
uni.showLoading({
|
|
title: '上传中...'
|
|
})
|
|
|
|
setTimeout(() => {
|
|
uni.hideLoading()
|
|
this.uploadedFiles.image = res.tempFilePaths[0]
|
|
|
|
// 模拟上传成功
|
|
uni.showToast({
|
|
title: '图片上传成功',
|
|
icon: 'success'
|
|
})
|
|
|
|
// 设置内容文本为图片路径
|
|
this.formData.content_text = res.tempFilePaths[0]
|
|
}, 1000)
|
|
}
|
|
})
|
|
} else if (type === 'video') {
|
|
// 选择视频
|
|
uni.chooseVideo({
|
|
count: 1,
|
|
sourceType: ['album', 'camera'],
|
|
maxDuration: 60,
|
|
camera: 'back',
|
|
success: (res) => {
|
|
// 模拟上传
|
|
uni.showLoading({
|
|
title: '上传中...'
|
|
})
|
|
|
|
setTimeout(() => {
|
|
uni.hideLoading()
|
|
this.uploadedFiles.video = res.tempFilePath
|
|
|
|
// 模拟上传成功
|
|
uni.showToast({
|
|
title: '视频上传成功',
|
|
icon: 'success'
|
|
})
|
|
|
|
// 设置内容文本为视频路径
|
|
this.formData.content_text = res.tempFilePath
|
|
}, 1500)
|
|
}
|
|
})
|
|
}
|
|
},
|
|
|
|
// 删除已上传的文件
|
|
deleteFile(type) {
|
|
if (type === 'image') {
|
|
this.uploadedFiles.image = ''
|
|
this.formData.content_text = ''
|
|
} else if (type === 'video') {
|
|
this.uploadedFiles.video = ''
|
|
this.formData.content_text = ''
|
|
}
|
|
},
|
|
|
|
// 预览文件
|
|
previewFile(type) {
|
|
if (type === 'image' && this.uploadedFiles.image) {
|
|
uni.previewImage({
|
|
urls: [this.uploadedFiles.image]
|
|
})
|
|
}
|
|
// 视频不需要额外预览，因为已经有视频播放器
|
|
},
|
|
|
|
// 提交表单
|
|
submitForm() {
|
|
// 检查必填项
|
|
if (!this.formData.class_id) {
|
|
uni.showToast({
|
|
title: '请输入班级ID',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
if (!this.formData.course_id) {
|
|
uni.showToast({
|
|
title: '请输入课程ID',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
if (!this.formData.description) {
|
|
uni.showToast({
|
|
title: '请输入作业描述',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
// 检查内容
|
|
if (this.formData.content_type === '1' && !this.uploadedFiles.image) {
|
|
uni.showToast({
|
|
title: '请上传图片',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
if (this.formData.content_type === '2' && !this.uploadedFiles.video) {
|
|
uni.showToast({
|
|
title: '请上传视频',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
if (this.formData.content_type === '3' && !this.formData.content_text) {
|
|
uni.showToast({
|
|
title: '请输入内容文本',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
console.log('提交表单数据:', this.formData)
|
|
|
|
// 模拟提交成功
|
|
uni.showToast({
|
|
title: '发布成功',
|
|
icon: 'success'
|
|
})
|
|
|
|
// 关闭弹窗
|
|
this.closePublishPopup()
|
|
|
|
// 重置表单
|
|
this.formData = {
|
|
type: '',
|
|
class_id: '',
|
|
course_id: '',
|
|
personnel_id: '',
|
|
student_id: '',
|
|
description: '',
|
|
content_type: '1',
|
|
content_text: '',
|
|
status: '1'
|
|
}
|
|
this.contentTypeIndex = 0
|
|
this.uploadedFiles = {
|
|
image: '',
|
|
video: ''
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
|
|
.main_section{
|
|
min-height: 100vh;
|
|
background: #292929 100%;
|
|
padding: 0 24rpx;
|
|
padding-top: 40rpx;
|
|
padding-bottom: 150rpx;
|
|
font-size: 28rpx;
|
|
|
|
.section_3{
|
|
margin-top: 36rpx;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
.title_box{
|
|
display: flex;
|
|
flex-direction: column;
|
|
.top_box{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
text{
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
.line{
|
|
width: 90rpx;
|
|
height: 2px;
|
|
background: #29D3B4;
|
|
}
|
|
}
|
|
.ul{
|
|
margin-top: 30rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
.li{
|
|
position: relative;
|
|
border-radius: 22rpx;
|
|
background: #434544 100%;
|
|
padding: 14rpx 0;
|
|
display: flex;
|
|
align-items: center;
|
|
.left_box{
|
|
margin-left: 28rpx;
|
|
width: 146rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10rpx;
|
|
.date_box{
|
|
display: flex;
|
|
font-size: 48rpx;
|
|
text:nth-child(1){
|
|
color: #29D3B4;
|
|
}
|
|
}
|
|
.ratio{
|
|
color: #AAAAAA;
|
|
}
|
|
}
|
|
.center_box{
|
|
margin-left: 52rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10rpx;
|
|
}
|
|
.right_box{
|
|
.tag{
|
|
position:absolute;
|
|
top: 0rpx;
|
|
right: 0rpx;
|
|
padding: 10rpx;
|
|
width: 102rpx;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
border-bottom-left-radius: 20rpx;
|
|
border-top-right-radius: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 发布作业按钮样式
|
|
.publish-btn {
|
|
position: fixed;
|
|
bottom: 220rpx;
|
|
right: 40rpx;
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
background: #29D3B4;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 4rpx 20rpx rgba(41, 211, 180, 0.4);
|
|
z-index: 99;
|
|
|
|
.btn-text {
|
|
color: #fff;
|
|
font-size: 26rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
// 弹窗内容样式
|
|
.popup-content {
|
|
width: 650rpx;
|
|
background: #333;
|
|
border-radius: 20rpx;
|
|
padding: 30rpx;
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
|
|
.popup-title {
|
|
font-size: 36rpx;
|
|
color: #fff;
|
|
text-align: center;
|
|
margin-bottom: 30rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.form-item {
|
|
margin-bottom: 20rpx;
|
|
|
|
.form-label {
|
|
display: block;
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.form-input, .form-textarea, .form-picker {
|
|
width: 100%;
|
|
background: #444;
|
|
border-radius: 10rpx;
|
|
padding: 16rpx;
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.form-textarea {
|
|
height: 150rpx;
|
|
}
|
|
|
|
.picker-text {
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
}
|
|
|
|
// 上传控件样式
|
|
.upload-container {
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.upload-btn {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
background: #444;
|
|
border-radius: 10rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px dashed #666;
|
|
|
|
.upload-icon {
|
|
font-size: 60rpx;
|
|
color: #29D3B4;
|
|
line-height: 60rpx;
|
|
}
|
|
|
|
.upload-text {
|
|
font-size: 24rpx;
|
|
color: #aaa;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
|
|
// 图片预览
|
|
.image-preview {
|
|
position: relative;
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
|
|
.preview-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.delete-btn {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.delete-icon {
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 视频预览
|
|
.video-preview {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 300rpx;
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
|
|
.preview-video {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.delete-btn {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.delete-icon {
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-buttons {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 40rpx;
|
|
|
|
button {
|
|
width: 45%;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
border-radius: 40rpx;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.btn-cancel {
|
|
background: #555;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-submit {
|
|
background: #29D3B4;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|