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.
622 lines
15 KiB
622 lines
15 KiB
<template>
|
|
<view class="content">
|
|
<view class="navbar_section">
|
|
<view class="title">首页</view>
|
|
</view>
|
|
<view class="head">
|
|
<view class="head-img">
|
|
<!-- <fui-avatar width="136" :src="$util.img(member_info.headimg)"></fui-avatar> -->
|
|
<image class="pic" :src="$util.img(member_info.headimg)"></image>
|
|
<view class="head-text">{{member_info.name}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="card">
|
|
<view class="card-back color-style"></view>
|
|
<view class="card-backs color-style"></view>
|
|
<view class="card-con">
|
|
<view class="card-head">
|
|
<view>
|
|
<span class="card-head-txt">班级</span>
|
|
<span class="card-head-txt1 card-head-back1">篮球少儿班</span>
|
|
</view>
|
|
<view>
|
|
<span class="card-head-txt">已耗课时</span>
|
|
<span class="card-head-txt1 card-head-back2">24/</span><span class="card-head-txt">60</span>
|
|
</view>
|
|
</view>
|
|
<view class="card-con-txt">课程到期时间：2021.12.25</view>
|
|
<view class="card-con-txt1">
|
|
<view class="card-con-txt1-left">
|
|
<image src="@/static/images/index/score.png" class="overlay-image"></image>
|
|
<view class="card-con-txt1-left-txt top">90</view>
|
|
<view class="card-con-txt1-left-txt top1">综合评分</view>
|
|
</view>
|
|
<view class="card-con-txt1-right">
|
|
<view style="color: #AAAAAA;padding: 5rpx;">数据测评时间：2020.03.12</view>
|
|
<view style="display: flex;justify-content: space-around;margin-top: 20rpx;">
|
|
<view>
|
|
<view style="font-size: 48rpx;color: #29d3b4;">123</view>
|
|
<view style="color: #AAAAAA;font-size: 30rpx;">身高（CM）</view>
|
|
</view>
|
|
<view>
|
|
<view style="font-size: 48rpx;color: #29d3b4;">45</view>
|
|
<view style="color: #AAAAAA;font-size: 30rpx;">体重（KG）</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="more" @click="physical_examination">更多</view>
|
|
</view>
|
|
|
|
<view class="upcomin-classes">
|
|
<view class="upcomin-classes-div">
|
|
<view class="upcomin-classes-div-con">
|
|
<view class="upcomin-classes-div-con-left">课程预告</view>
|
|
<view class="upcomin-classes-div-con-centre"
|
|
style="width: 2rpx;height: 60rpx;background-color: #fff;margin-left: 25rpx;"></view>
|
|
<view style="margin-left: 25rpx;">
|
|
<view>5/28 周五 15:30 - 17:30</view>
|
|
<view>301室 篮球少儿课程</view>
|
|
</view>
|
|
<view class="upcomin-classes-div-con-right" @click="details">
|
|
详情
|
|
</view>
|
|
</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" 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
|
|
</view>
|
|
<view style="font-size: 35rpx;color: #ccc;padding-left: 10rpx;">已完成</view>
|
|
</view>
|
|
<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="$util.img(v.coach_pic)" style="width: 50rpx;height: 50rpx;">
|
|
</image>
|
|
<span style="padding-left: 10rpx;font-size: 35rpx;">{{v.coach_name}}</span>
|
|
</view>
|
|
<view>
|
|
<fui-button background="#404045" color="#F59A23" borderColor="#F59A23"
|
|
btnSize="mini" @click="submitJob(v)">上传</fui-button>
|
|
</view>
|
|
</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>
|
|
|
|
<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 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 />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {Api_url} from "@/common/config";
|
|
import memberApi from '@/api/member.js';
|
|
import AQTabber from "@/components/AQ/AQTabber.vue"
|
|
export default {
|
|
components: {
|
|
AQTabber,
|
|
},
|
|
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() {
|
|
memberApi.member().then(res => {
|
|
if(res.code == 1){
|
|
this.member_info = res.data
|
|
}else{
|
|
this.member_info = []
|
|
}
|
|
})
|
|
},
|
|
details() {
|
|
uni.navigateTo({
|
|
url: '/pages/student/index/work_details'
|
|
})
|
|
},
|
|
physical_examination(){
|
|
uni.navigateTo({
|
|
url: '/pages/student/index/physical_examination'
|
|
})
|
|
},
|
|
jobList(){
|
|
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>
|
|
|
|
<style lang="less" scoped>
|
|
|
|
//自定义导航栏
|
|
.navbar_section{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #29d3b4;
|
|
.title{
|
|
padding: 110rpx 0 20rpx;
|
|
font-size: 30rpx;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
page {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.overlay-image {
|
|
width: 95%;
|
|
height: 100%;
|
|
}
|
|
|
|
.multi-line-ellipsis {
|
|
color: #fff;
|
|
padding: 5rpx 10rpx;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.text-style {
|
|
width: 92%;
|
|
margin: 15rpx auto;
|
|
}
|
|
|
|
.content {
|
|
background-color: #292929;
|
|
height: 100vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.head {
|
|
background-color: #29d3b4;
|
|
width: 100%;
|
|
}
|
|
|
|
.head-img {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10rpx 20rpx;
|
|
}
|
|
|
|
.head-text {
|
|
color: #fff;
|
|
font-size: 35rpx;
|
|
padding-left: 20rpx;
|
|
}
|
|
|
|
.card {
|
|
width: 100%;
|
|
height: 450rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.card-back {
|
|
background-color: #29d3b4;
|
|
}
|
|
|
|
.card-backs {
|
|
background-color: #292929;
|
|
}
|
|
|
|
.color-style {
|
|
width: 100%;
|
|
height: 50%;
|
|
}
|
|
|
|
.card-con {
|
|
width: 92%;
|
|
height: 92%;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.card-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 30rpx 20rpx 20rpx;
|
|
}
|
|
|
|
.card-head-txt {
|
|
color: #AAAAAA;
|
|
}
|
|
|
|
.card-head-txt1 {
|
|
padding-left: 10rpx;
|
|
}
|
|
|
|
.card-head-back1 {
|
|
color: #4b4b4b;
|
|
}
|
|
|
|
.card-head-back2 {
|
|
color: #2bd3b5;
|
|
}
|
|
|
|
.card-con-txt {
|
|
color: #AAAAAA;
|
|
padding: 5rpx 20rpx 20rpx;
|
|
}
|
|
|
|
.card-con-txt1 {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 10rpx 20rpx 0;
|
|
height: 220rpx;
|
|
}
|
|
|
|
.card-con-txt1-left {
|
|
width: 42%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.card-con-txt1-left-txt {
|
|
font-size: 32rpx;
|
|
color: #29d3b4;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.top {
|
|
top: 60%;
|
|
}
|
|
|
|
.top1 {
|
|
top: 80%;
|
|
}
|
|
|
|
.card-con-txt1-right {
|
|
width: 58%;
|
|
height: 100%;
|
|
}
|
|
|
|
.more {
|
|
padding: 0 30rpx 30rpx;
|
|
text-align: right;
|
|
color: #F59A23;
|
|
}
|
|
|
|
.upcomin-classes {
|
|
background-color: #292929;
|
|
width: 100%;
|
|
height: 136rpx;
|
|
}
|
|
|
|
.upcomin-classes-div {
|
|
padding-top: 20rpx;
|
|
width: 92%;
|
|
background-color: #29d3b4;
|
|
height: 106rpx;
|
|
margin: auto;
|
|
border-radius: 50rpx;
|
|
}
|
|
|
|
.upcomin-classes-div-con {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #fff;
|
|
}
|
|
|
|
.upcomin-classes-div-con-left {
|
|
width: 60rpx;
|
|
margin-left: 80rpx;
|
|
text-align: right;
|
|
}
|
|
|
|
.upcomin-classes-div-con-centre {
|
|
width: 2rpx;
|
|
height: 60rpx;
|
|
background-color: #fff;
|
|
margin-left: 25rpx;
|
|
}
|
|
|
|
.upcomin-classes-div-con-right {
|
|
width: 100rpx;
|
|
height: 50rpx;
|
|
background-color: #32baa1;
|
|
text-align: center;
|
|
line-height: 50rpx;
|
|
border-radius: 50rpx;
|
|
margin-left: 80rpx;
|
|
}
|
|
|
|
.after-class {
|
|
background-color: #292929;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.after-class-title {
|
|
width: 92%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: auto;
|
|
}
|
|
|
|
.after-class-title-left {
|
|
color: #fff;
|
|
font-size: 35rpx;
|
|
border-bottom: 4rpx #29d3b4 solid;
|
|
}
|
|
|
|
.after-class-title-right {
|
|
color: #F59A23;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.after-class-con {
|
|
width: 92%;
|
|
height: 246rpx;
|
|
background-color: #404045;
|
|
border-radius: 20rpx;
|
|
margin: 15rpx auto;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.after-class-con-txt {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 20rpx;
|
|
height: 95%;
|
|
width: 100%;
|
|
align-content: space-around;
|
|
}
|
|
|
|
.pic {
|
|
width: 144rpx;
|
|
height: 144rpx;
|
|
border-radius: 50%;
|
|
}
|
|
</style>
|