You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

123 lines
3.0 KiB
Vue

<template>
<view class="task-details-page">
<ch-nav-bar title="作业详情" :height="66"></ch-nav-bar>
<uni-list>
<uni-list-item :showArrow="false" title="作业名称" :rightText="task.homeworkname" />
<uni-list-item :showArrow="false" title="提交状态" :rightText="status" />
<uni-list-item :showArrow="false" title="作业图片" />
<ch-image-uploader
v-model="files"
ref="imgUploader"
:limit="5"
:url="uploadUrl">
</ch-image-uploader>
</uni-list>
<button class="submit-btn" type="primary" :loading="uploading" :disabled="isDisable" @click="submitTask"></button>
</view>
</template>
<script setup>
import { reactive, toRefs, ref, computed, onMounted } from 'vue';
import ChNavBar from '@/components/ch-nav-bar/ch-nav-bar.vue';
import ChImageUploader from '@/components/ch-image-uploader/ch-image-uploader.vue';
import { onLoad, onUnload } from '@dcloudio/uni-app'
import { useUserStore } from '@/store/user.js'
import { uploadTaskImg, getTaskInfo } from '@/api/task.js';
import config from '@/utils/network/config.js'
const userStore = useUserStore();
const userId = userStore.userId;
const imgUploader = ref(null);
const data = reactive({
task: {},
files: [],
img: null,
imgStyle: {
"height": 400,
"width": 400,
},
taskId: '',
uploading: false,
igUrl: ''
})
const { task, img, imgStyle , files, taskId, uploading, igUrl } = toRefs(data);
const isDisable = computed(() => !files.value.length || uploading.value)
const status = computed(() => {
if (!task.value.status) return ''
return task.value.status == 1 ? '未提交' : '已提交'
})
const uploadUrl = computed(() => {
return `${config.baseUrl}/api/user.ashx?act=subhomeworkinfo&studentid=${userId}&homeworkid=${taskId.value}`
})
onLoad((option) => {
taskId.value = option.id;
console.log(uni.canIUse('chooseImage'))
})
onMounted(() => {
const params = {
homeworkid: taskId.value,
studentid: userId
}
getTaskInfo(params, { loading: true }).then(info => {
task.value = info;
if (!info.studentimg) return;
const imgArr = info.studentimg.split(',')
console.log(imgArr)
imgArr.forEach(item => {
if (!item) return;
uni.getImageInfo({
src: `${config.baseUrl}/${item}`,
success({ path, type }) {
files.value.push({
name: 'image' + (+new Date()),
extname: `image/${type}`,
path,
})
}
})
})
})
})
function submitTask () {
uploading.value = true;
console.log(imgUploader)
imgUploader.value.upload()
.finally(() => {
uploading.value = false;
})
}
function imgChange (e) {
console.log(e)
img.value = e.tempFiles[0]
}
// File 转 Blob
function fileToBlob (file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.addEventListener('load', (e) => {
console.log(e.target.result)
const blob = new Blob([e.target.result]);
console.log("Blob对象", blob);
resolve(blob)
})
reader.readAsArrayBuffer(file)
})
}
</script>
<style lang="scss" scoped>
@import './taskDetails.scss';
</style>