Files
medicine_app/pages/miniClass/taskDetail.vue
@fawn-nine a9f706e96f 暂存
2024-09-04 17:10:50 +08:00

747 lines
19 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<view>
<public-module></public-module>
<z-nav-bar title="详情"></z-nav-bar>
<!-- <view class="" style="background-color: #f4f7ff; min-height: calc(100vh - 200rpx);"> -->
<view class="mainContent" v-if="thisTask.id">
<view class="" style="height:40rpx;">
</view>
<view class="taskBox">
<h3>题目内容</h3>
<view class="taskTitle">
{{thisTask.title}}
</view>
<view class="imgBox flex_box" v-if="FileList11.length > 0">
<view class="item" v-for="(item, index) in FileList11" :key="index">
<image @click="previewImage(item.url)" :src="item.url" mode="widthFix"></image>
</view>
</view>
<view class="taskContent" v-html="thisTask.content">
</view>
</view>
<!-- 还没提交提示 -->
<view class="noanser" v-show="!thisTask.reply && classState == '1' && roleCode.includes('0')">
<view class="">
<text>还没有提交你的答案呢现在开始作答吧</text>
</view>
<view class="btn">
<text @click="editOrAdd(undefined)">写答案</text>
</view>
</view>
<!-- 提交记录 -->
<view v-show="thisTask.reply">
<uni-section class="mb-10 nobg" title="提交记录" type="line"></uni-section>
<view class="" v-if="thisTask.type == '1'">
<radio-group @change="radioChange1" class="flex_box">
<view class="" style="margin-right:20rpx ;">
<radio value="0" />全部同学的提交</label>
</view>
<view class="">
<radio value="1" checked="true" />只看我自己提交的</label>
</view>
</radio-group>
</view>
<view class="zuoyeListBox" v-if="zuoyeList.length > 0">
<view class="newBox" >
<view class="item " v-for="(item, index) in zuoyeList" >
<view class="leve1 flex_box" style="justify-content: space-between;">
<view class="flex_box" style="justify-items: center; flex:1">
<view class="classmateImg">
<image v-if="item.createUser.avatar != null && item.createUser.avatar != ''" :src="item.createUser.avatar" mode="aspectFit"></image>
<image v-else src="/static/icon/morenAvavter.png" mode="aspectFit"></image>
</view>
<view class="userName flex_box">
<text v-if="item.createUser.nickname != '' && item.createUser.nickname != null">匿名用户</text>
<text v-else>匿名用户</text>
</view>
</view>
<!-- <view class="editBtn" v-if="listDisplay == '1' && item.scoreSuccess == 0"> -->
<view class="editBtn" v-if="listDisplay == '1' && item.scoreSuccess == 0 && item.scoreInfo == ''">
<text @click="editOrAdd(item)">修改</text>
</view>
<template v-if="item.scoreInfo != '' && listDisplay == '1'">
<view class="score" v-show="item.scoreSuccess >= 2">
分数{{item.score}}
</view>
<view class="score" v-show="item.scoreSuccess < 2">
正在评分
</view>
</template>
</view>
<view class="leve2">
<view :class="['contentss',item.zhedie ? '' : 'zhedie']">
{{item.content}}
</view>
<view class="imgBox flex_box" v-if="item.fileList.length > 0 && item.zhedie">
<view class="item" v-for="(item, index) in item.fileList" :key="index">
<image @click="previewImage(item.url)" :src="item.url" mode="widthFix"></image>
</view>
</view>
<view class="btnTime" style="margin-top: 20rpx;">
<view class="date">
{{item.createTime}}
</view>
<view class="btn" @click="changeZheDie(item, index)">{{item.zhedie ? '收起' : '展开'}}</view>
</view>
</view>
</view>
</view>
</view>
<u-divider v-show="status == 2" text="已加载全部"></u-divider>
<u-divider v-show="status == 3" text="暂无数据"></u-divider>
<u-divider v-show="status == 1" text="加载中..."></u-divider>
</view>
</view>
<u-popup key="1" :show="showEditBlank" :round="10" @close="closePup" ref="">
<view class="" style="padding: 40rpx; max-height: 80vh; overflow-y:scroll">
<view class="anserBox" >
<h3>我的答案</h3>
<uni-forms :modelValue="form" :rules="rules" ref="form">
<view class="input_box">
<uni-forms-item label="" name="content" label-width="0">
<text class="input_tit"><i>*</i>内容:<span
style="font-weight: normal; color: #999; font-size: 26rpx;">(600字以内)</span></text>
<view class="in">
<view class="uni-textarea">
<textarea placeholder-style="font-size:26rpx" v-model="form.content" maxlength="600"
auto-height placeholder="请输入内容" />
</view>
</view>
</uni-forms-item>
</view>
<view class="input_box">
<text class="input_tit">上传图片:</text>
<view class="in" style="border: none;" @click="checkPermision">
<u-upload :fileList="fileList1" @afterRead="addPic" @delete="deletePic" multiple
:maxCount="4" width="40" height="40" :previewFullImage="true">
</u-upload>
<!-- <text style="font-size: 24rpx; color: #999;">可上传4张问题截图</text> -->
</view>
<!-- <input type="password" maxlength="8" v-model="confirmPassword" placeholder="请确认密码" /> -->
</view>
<view class="input_box" v-if="thisTask.type == '1'">
<radio-group @change="radioChange" class="flex_box">
<view class="" style="margin-right:20rpx ;">
<radio value="0" :checked="0 == form.display" />他人不可见</label>
</view>
<view class="">
<radio value="1" :checked="1 == form.display" />他人可见</label>
</view>
</radio-group>
<span
style="color: #999; font-size: 28rpx; margin-top: 20rpx; display: block;">不勾选时班级管理员以外的人看不见提交的内容</span>
</view>
</uni-forms>
<view class="btn_box"><button @click="onSubmit"> </button></view>
</view>
</view>
</u-popup>
<z-navigation></z-navigation>
</view>
</template>
<script>
import permission from "@/js_sdk/wa-permission/permission.js"
import $http from '@/config/requestConfig.js';
import {
mapState
} from "vuex";
export default {
data() {
return {
showEditBlank:false,
zuoyeList:[],
loadFlag:false,
thisTask: {},
status: 88,
TaskId: undefined,
userMes: undefined,
FileList11: [],
fileList1: [],
pPage: 0,
form: {
taskId: undefined,
id: undefined,
display: "0", //0不展示1展示
content: "",
img: ""
},
rules: {
content: {
rules: [{
required: true,
errorMessage: '请输入回答内容',
}
]
},
},
listDisplay: '1', // 提交记录展示类型 0 全部 1 自己的
classState:undefined,
roleCode:[]
}
},
onLoad(e) {
uni.hideTabBar();
// this.thisTask = JSON.parse(e.options)
console.log('e',e)
this.classState = e.classState
if(e.id){
this.thisTask.id = e.id
this.getTaskInfo()
this.getZuoyeList()
}
// console.log('this.FileList', this.FileList)
// this.TaskId = e.id
this.getUserInfo()
},
onReachBottom() {
if (this.status != 2 && this.status != 3) {
this.getZuoyeList()
}
},
onPullDownRefresh() {
// this.getTaskInfo()
uni.stopPullDownRefresh()
},
onShow() {
this.form.taskId = this.thisTask.id
},
// onBackPress() {
// setTimeout(()=>{
// uni.$emit('refreshData');
// uni.navigateBack({
// delta: 1
// })
// },1000)
// },
computed: {
...mapState(["userInfo"]),
},
methods: {
// 获取用户身份
getUserRole(){
$http.request({
url: "common/class/getUserRole",
method: "POST",
data: {
"classId": this.thisTask.classId
},
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
})
.then((res) => {
uni.hideLoading()
console.log('res获取身份信息',res);
this.roleCode = res.result
}).catch(e => {
uni.hideLoading()
this.roleCode = []
uni.showToast({
title: '获取身份信息失败',
icon: 'error'
})
});
},
// 获取医案任务详情
getTaskInfo(){
$http.request({
url: "common/class/getClassTaskInfoStudent",
method: "POST",
data: {
"taskId": this.thisTask.id
},
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
})
.then(res => {
if (res.code == 0) {
// that.isHave = true
console.log('学生作业详情',res)
this.thisTask = res.classTask
this.fileList11 = []
if (this.thisTask.img != '') {
var imgs = this.thisTask.img.split(',')
imgs = imgs.forEach((item, index) => {
this.FileList11.push({
url: item
})
})
}
console.log('this.fileList11',this.fileList11);
this.getUserRole()
}
}).catch(e => {
console.log(e, '数据报错')
// this.status = 3
uni.showToast({
title: e.msg,
icon: 'error'
})
});
},
closePup(){
this.showEditBlank = false
this.form = {
taskId: undefined,
id: undefined,
display: "1", //0不展示1展示
content: "",
img: ""
}
this.fileList1 = []
},
deletePic(event) {
this.fileList1.splice(event.index, 1)
},
getHomeWorkDetail(id){
uni.showLoading({
title:"加载中"
})
$http.request({
url: 'common/class/getClassTaskAndQuesReplyInfo',
method: "POST",
data: {
"replyId":id, //0全部作业1我的作业
},
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
})
.then(res => {
if(res.classTaskAndQuesReply){
console.log('作业详情res',res);
this.form = res.classTaskAndQuesReply
this.fileList1 = []
if(res.classTaskAndQuesReply.img != ''){
var _imgList = res.classTaskAndQuesReply.img.split(',')
_imgList.forEach(item => {
this.fileList1.push({url:item})
})
}
// this.fileList1 = [...res.classTaskAndQuesReply.fileList]
console.log('fileList4545',this.fileList1);
this.showEditBlank = true
}else{
this.form = {}
}
uni.hideLoading()
}).catch(e => {
uni.hideLoading()
uni.showToast({
title: '获取作业详情失败',
icon:'none'
})
})
},
editOrAdd(item){
console.log('item', item);
if(item){
this.getHomeWorkDetail(item.id)
}
else{
console.log('form', this.form);
this.showEditBlank = true
}
},
radioChange1(e){
this.listDisplay = e.detail.value
console.log('点了',e);
this.pPage = 0
this.zuoyeList = []
this.getZuoyeList()
},
previewImage(url) {
console.log(url);
uni.previewImage({
urls: [url],
longPressActions: {
itemList: ["很抱歉,暂不支持保存图片到本地"],
success: function(res) {
// console.log(res,'+++++')
},
},
});
},
changeZheDie(item, index){
this.zuoyeList[index].zhedie = !this.zuoyeList[index].zhedie
},
getZuoyeList() {
this.status = 1;
if (this.loadFlag) {
console.log("有未完成的进程");
return;
}
uni.showLoading({
title:'加载中'
})
this.loadFlag = true;
this.pPage++;
$http.request({
url: 'common/class/getReplyListByTaskIdStudent',
method: "POST",
data: {
"limit": 10,
"page": this.pPage,
"taskId": this.thisTask.id,
"myReply": this.listDisplay //0全部作业1我的作业
},
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
})
.then(res => {
if(res.page.records.length > 0){
var list = res.page.records
list.forEach(item => {
item.zhedie = false
item.fileList = []
if(item.img != ''){
var _urs = item.img.split(',')
_urs.forEach(item1 => {
item.fileList.push({url:item1})
})
}
})
this.zuoyeList = this.zuoyeList.concat(list)
console.log('chulihoude ',this.zuoyeList);
if (res.page.pages > this.pPage) {
this.status = 0;
} else {
this.status = 2;
}
}else{
this.status = 3; // 暂无数据
}
this.loadFlag = false;
console.log('res', res);
uni.hideLoading()
}).catch(e => {
uni.hideLoading()
this.loadFlag = false;
// console.log('表单错误信息:', err);
uni.showToast({
title: '获取作业列表失败',
icon:'none'
})
})
},
getUserInfo() {
// 获取个人信息
if (this.userInfo.id != undefined) {
this.$http.post("common/user/getUserInfo").then((res) => {
this.userMes = res.result
}).catch(e => {
uni.showToast({
title: '获取用户信息失败',
icon: 'none'
})
});
}
},
// 跳转
onPageJump(url, id, modeType) {
uni.navigateTo({
url: `${url}?id=${id}&type=${modeType}`
});
},
onSubmit() {
this.$refs.form.validate().then(res => {
if (this.fileList1.length > 0) {
let _list = this.fileList1
_list = _list.map(item => item.url)
// console.log('this.fileList1',_list);
this.form.img = _list.join(',')
}else{
this.form.img = ''
}
var _url = ""
this.form.id ? _url =
'common/class/editClassTaskAndQuesReply' : _url = 'common/class/addClassTaskAndQuesReply'
// this.form.id ? _url =
// 'common/class/editClassTaskReply' : _url = 'common/class/addClassTaskReply'
var data = {
'classId': this.thisTask.classId,
"relationId": this.form.id ? undefined : this.form.taskId,
"id": this.form.id,
"type": this.thisTask.type == '0' || this.thisTask.type == '1' ? '0' : '1', //类型0任务1课后题
"display": this.form.display, //0不展示1展示
"content": this.form.content,
"img": this.form.img
}
console.log('data',data);
$http.request({
url: _url,
method: "POST",
data,
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
})
.then(res => {
uni.showToast({
title: '操作成功!',
icon: 'success'
})
this.FileList = []
this.FileList11 = []
this.closePup()
setTimeout(()=>{
this.pPage = 0
this.zuoyeList = []
this.getTaskInfo()
this.getZuoyeList()
},200)
}).catch(e => {
uni.showToast({
title: '操作失败',
icon: 'error'
})
});
}).catch(err => {
console.log('表单错误信息:', err);
uni.showToast({
title: '页面有未填写的内容哦',
icon: 'none'
})
})
},
addPic(e) {
let that = this;
console.log("添加图片", that.fileList1);
for (var i = 0; i < e.file.length; i++) {
console.log(i,e.file[i].url)
uni.uploadFile({
url: this.$baseUrl + "oss/fileoss",
filePath: e.file[i].url,
//files:e.file,
name: "file",
formData: {},
success: (res) => {
// console.log("添加图片", this.fileList1);
that.fileList1.push({
url: JSON.parse(res.data).url,
});
console.log(that.fileList1, "that.uploadPicLIst");
},
fail: (error) => {
console.log("上传失败", error);
},
});
}
},
async checkPermision() {
var result = await permission.premissionCheck("CAMERA_EXTERNAL_STORAGE")
if (result != 1) {
return false
}
},
radioChange(e) {
this.form.display = e.detail.value
console.log('点了', this.form.display, e);
}
}
}
</script>
<style lang="scss" scoped>
@import "@/style/mixin.scss";
.flexbox {
display: flex;
}
i {
color: red;
padding-right: 20rpx;
}
.noanser{ padding: 20rpx;
text-align: center;
// border-bottom: 1px solid #eee;
.btn{display: inline-block; border-radius: 20rpx ; margin-top: 20rpx; padding: 10rpx 20rpx; background-color: $themeColor; color: #fff;}
}
.in {
border: 1rpx solid #eeeeee;
border-radius: 8rpx;
padding: 8rpx;
margin-top: 10rpx;
}
.zuoyeListBox{margin-top: 40rpx;}
.btn_box {
margin-top: 70rpx;
padding-bottom: 20rpx;
button {
font-size: 32rpx;
@include theme('btn_bg') color: #fff;
height: 80rpx;
line-height: 80rpx;
border-radius: 50rpx;
}
}
.fabBox {}
.taskBox {
border: 4rpx dotted #bad7f0;
padding: 20rpx;
padding-top: 0;
background-color: #fff;
border-radius: 20rpx;
overflow: hidden;
h3 {
line-height: 80rpx;
width: 50%;
margin: 0 auto;
text-align: center;
color: #fff;
border-radius: 0 0 20rpx 20rpx;
background-color: $themeColor;
}
}
.contentss{
}
.zhedie{
@include bov(2);
}
.anserBox {
border: 4rpx dotted #2bb447;
margin-top: 30rpx;
padding: 20rpx;
background-color: #fff;
border-radius: 20rpx;
overflow: hidden;
padding-top: 0;
h3 {
line-height: 80rpx;
width: 50%;
margin: 0 auto;
text-align: center;
color: #fff;
background-color: #2bb447;
border-radius: 0 0 20rpx 20rpx;
}
}
.nobg{background: transparent;}
.taskTitle {
font-size: 36rpx;
margin: 20rpx 0;
}
.newBox {
.classmateImg {
width: 60rpx !important;
height: 60rpx !important;
margin-right: 20rpx;
image {
width: 60rpx !important;
height: 60rpx;
}
}
.editBtn{padding-left: 40rpx; color: $themeColor; text-align: right;}
.item {
background-color: #fff;
border-radius: 20rpx;
box-shadow: none !important;
padding: 20rpx;
margin-bottom: 30rpx;
// border-bottom: 1px solid #eee;
// border-radius: 0 !important;
.leve1 {
align-items: center;
border-bottom: 1px dashed #eee;
padding-bottom: 20rpx;
margin-bottom: 20rpx;
// .userName{}
}
.leve2{ overflow: hidden;
.imgBox{margin-top: 20rpx;}
.score{ margin-top: 20rpx;
float: left;
}
.btn{color: $themeColor;}
.date{color: #999; float: right; text-align: right; font-size: 26rpx;}
}
}
}
.score{color: #55aaff; font-size: 30rpx !important; font-weight: bold;}
.taskContent {
font-size: 30rpx; line-height: 50rpx;
margin-top: 20rpx;
}
.imgBox {
flex-wrap: wrap;
.item {
width: 20%;
margin-right: 10rpx; border: 1px solid #eee;
padding: 0 !important;
image {
width: 100%;
}
}
}
.manBtnBox {
justify-content: center;
text {
width: 30%;
font-size: 28rpx;
padding: 20rpx 0;
border-radius: 10rpx;
display: block;
margin: 0 20rpx;
color: #fff;
}
.edit {
background-color: $themeColor;
}
.del {
background-color: #ffa4a6;
}
.set {
background-color: #ffca7e;
}
}
.mainContent {
display: block;
color: #333;
padding: 0 20rpx;
padding-bottom: 120rpx;
background-image: linear-gradient(30deg, #d4eaf0 0%, #d4eaf0 50%, #fdf0ed 100%);
min-height: 100vh;
}
</style>