php
/
ZhiHuiJiaoWu_UniApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat(student): 学员端添加作业提交功能 

- 新增作业列表和待完成作业接口
- 实现作业提交逻辑，支持图片和视频上传
- 优化作业展示界面，显示教练信息和提交时间
- 添加错误处理和用户提示
master
liutong 1 year ago
parent
d74f295e5b
commit
3c44f8f7c0
2 changed files with 249 additions and 21 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 16
      api/member.js
  2. 244
      pages/student/index/index.vue

16
api/member.js
View File

@ -75,6 +75,22 @@ export default {
})
},
//作业列表
assignmentsList(data) {
let url = '/member/assignments_list'
return http.get(url, data).then(res => {
return res;
})
},
//提交作业
assignmentsSubmit(data) {
let url = '/member/assignments_submit'
return http.post(url, data).then(res => {
return res;
})
},
}

244
pages/student/index/index.vue
View File

@ -47,6 +47,7 @@
</view>
<view class="more" @click="physical_examination">更多</view>
</view>
<view class="upcomin-classes">
<view class="upcomin-classes-div">
<view class="upcomin-classes-div-con">
@ -63,12 +64,14 @@
</view>
</view>
</view>
<view class="after-class">
<view class="after-class-title">
<view class="after-class-title-left">课后作业</view>
<view class="after-class-title-right" @click="jobList">全部</view>
</view>
<view class="after-class-con">
<view class="after-class-con" v-for="(v,k) in jobAssignmentsInfo" :key="k">
<view class="after-class-con-txt">
<view style="width: 25%;margin-top: 5%;">
<view style="font-size: 55rpx;color: #fff;"><span style="color: #29d3b4;">12</span>/23
@ -78,32 +81,39 @@
<view style="width: 70%;">
<view style="color: #fff;display: flex;justify-content: space-between;align-items: center;">
<view style="display: flex;align-items: center;">
<image src="@/static/images/index/dian.png" style="width: 50rpx;height: 50rpx;">
<image :src="$util.img(v.coach_pic)" style="width: 50rpx;height: 50rpx;">
</image>
<span style="padding-left: 10rpx;font-size: 35rpx;">包子皮</span>
<span style="padding-left: 10rpx;font-size: 35rpx;">{{v.coach_name}}</span>
</view>
<view>
<fui-button background="#404045" color="#F59A23" borderColor="#F59A23"
btnSize="mini">上传</fui-button>
btnSize="mini" @click="submitJob(v)">上传</fui-button>
</view>
</view>
<view style="color: #fff;padding: 10rpx;">时间：2020.05:25 15:30 - 17:30</view>
<view class="multi-line-ellipsis">
作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述</view>
<view style="color: #fff;padding: 10rpx;">时间：{{v.submit_time}}</view>
<view class="multi-line-ellipsis" v-html="v.content_text">
</view>
</view>
</view>
<view class="multi-line-ellipsis text-style">
作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述</view>
<view style="width: 92%;margin: auto;border-radius: 15rpx;">
<video style="width: 100%;border-radius: 15rpx;"></video>
</view>
<view class="multi-line-ellipsis text-style">
作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述</view>
<view class="item" v-for="(v,k) in assignmentsList" :key="k">
<view class="multi-line-ellipsis text-style" v-html="v.content_text"></view>
<view style="width: 92%;margin: auto;border-radius: 15rpx;">
<video style="width: 100%;border-radius: 15rpx;"></video>
<video v-if="v.student_file_type == 2" style="width: 100%;border-radius: 15rpx;" :src="$util.img(v.student_file)"></video>
<image v-else style="width: 100%;border-radius: 15rpx;" :src="$util.img(v.student_file)" mode="aspectFit"></image>
</view>
</view>
<!-- <view class="multi-line-ellipsis text-style">-->
<!-- 作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述作业描述</view>-->
<!-- <view style="width: 92%;margin: auto;border-radius: 15rpx;">-->
<!-- <video style="width: 100%;border-radius: 15rpx;"></video>-->
<!-- </view>-->
</view>
<view style="height: 180rpx;width: 100%;"></view>
</view>
<AQTabber />
@ -111,7 +121,8 @@
</template>
<script>
import member from '@/api/member.js';
import {Api_url} from "@/common/config";
import memberApi from '@/api/member.js';
import AQTabber from "@/components/AQ/AQTabber.vue"
export default {
components: {
@ -119,16 +130,70 @@
},
data() {
return {
//上传接口地址
uploadApiUrl: ``,
uploadImageApiUrl: `${Api_url}/file/image`,
uploadVideoApiUrl: `${Api_url}/file/video`,
member_info: [],
assignmentsList: [],//作业列表
jobAssignmentsInfo: [],//待完成的作业
}
},
onLoad() {
this.member_init()
},
onShow(){
this.init()
},
methods: {
//初始化
async init(){
this.getList()
this.getJobAssignmentsInfo()
},
//获取作业列表
async getList(){
let data = {
page: 1,
limit: 10,
status: '2',//1=未提交,2=已提交,3=已批改
}
let res = await memberApi.assignmentsList(data)
if(res.code != 1){
uni.showToast({
title: res.msg,
icon: 'none'
})
return
}
this.assignmentsList = res.data.data
},
//获取待提交的作业列表
async getJobAssignmentsInfo(){
let data = {
page: 1,
limit: 1,
status: '1',//1=未提交,2=已提交,3=已批改
}
let res = await memberApi.assignmentsList(data)
if(res.code != 1){
uni.showToast({
title: res.msg,
icon: 'none'
})
return
}
this.jobAssignmentsInfo = res.data.data
console.log('待提交的作业',this.jobAssignmentsInfo)
},
//获取学员信息
member_init() {
member.member().then(res => {
memberApi.member().then(res => {
if(res.code == 1){
this.member_info = res.data
}else{
@ -150,7 +215,154 @@
uni.navigateTo({
url: '/pages/student/index/job_list'
})
},
// 上传作业
async submitJob(item) {
let type = item.content_type // 作业类型1图片2视频
try {
// 等待上传文件的返回结果
let uploadRes = await this.uploadFile(type)
console.log('上传结果', uploadRes)
// 检查上传结果
if (!uploadRes.data.path) {
return
}
// 构建提交作业的数据
let data = {
id: item.id, // 作业列表id
student_file: uploadRes.data.path, // 附件
student_file_type: type, // 作业类型1图片2视频
student_content: '', // 内容
}
// 提交作业
await this.assignmentsSubmit(data)
} catch (error) {
console.error('上传或提交作业失败:', error)
alert('上传或提交作业失败')
}
},
// 上传单文件(视频/图片) type=作业类型1图片2视频
async uploadFile(type) {
return new Promise((resolve, reject) => {
if (type == 1) {
this.uploadApiUrl = this.uploadImageApiUrl
uni.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: async (res) => {
const tempFilePath = res.tempFilePaths[0]
// 这里可以调用上传接口
try {
let data = await this.uploadFilePromise(tempFilePath)
resolve(data)
} catch (error) {
reject(error)
}
},
fail: (error) => {
reject(error)
}
})
} else {
this.uploadApiUrl = this.uploadVideoApiUrl
uni.chooseVideo({
count: 1,
// sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: async (res) => {
console.log('文件选择结果:', res); // 打印 res 检查是否有 tempFilePaths
const tempFilePath = res.tempFilePath; // 直接获取视频文件路径
// console.log('上传的文件',tempFilePath)
// 这里可以调用上传接口
try {
let data = await this.uploadFilePromise(tempFilePath)
resolve(data)
} catch (error) {
reject(error)
}
},
fail: (error) => {
reject(error)
}
})
}
})
},
// 执行文件上传
uploadFilePromise(url) {
return new Promise((resolve, reject) => {
let token = uni.getStorageSync('token') || ''
uni.uploadFile({
url: this.uploadApiUrl, // 仅为示例，非真实的接口地址
filePath: url,
name: 'file',
header: {
'token': `${token}`, // 请求头设置token
},
success: (e) => {
let res = JSON.parse(e.data.replace(/\ufeff/g, "") || "{}")
console.log('上传成功2', res)
if (res.code == 1) {
resolve({
code: 1,
data: res.data,
msg: '上传成功'
})
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
reject({
code: 0,
data: {},
msg: '上传失败'
})
}
},
fail: (error) => {
reject(error)
}
})
})
},
// 提交作业接口
async assignmentsSubmit(item) {
let data = {
id: item.id, // 作业列表id
student_file: item.student_file, // 附件
student_file_type: item.student_file_type, // 作业类型1图片2视频
student_content: item.student_content, // 内容
}
let res = await memberApi.assignmentsSubmit(data)
if (res.code != 1) {
uni.showToast({
title: res.msg,
icon: 'none'
})
return
}
uni.showToast({
title: res.msg,
icon: 'success'
})
// 延迟1s执行
setTimeout(() => {
this.init()
}, 1000)
}
}
}
</script>

Write Preview
Loading…
Cancel
Save