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.

142 lines
3.5 KiB
Vue

<template>
<view class="exam-details-page">
<ch-nav-bar title="考试详情" :height="66"></ch-nav-bar>
<uni-list>
<uni-list-item :showArrow="false" title="考试名称" :rightText="exam.examname" />
<uni-list-item :showArrow="false" title="提交状态" :rightText="status" />
<uni-list-item :showArrow="false" title="得分" :rightText="exam.studentscore + ''" />
<uni-list-item :showArrow="false" title="考试图片" />
<!-- <uni-file-picker
class="ch-flex ch-flex--justify-center"
v-model="img"
fileMediatype="image"
mode="grid"
:auto-upload="false"
:limit="1"
:disable-preview="true"
:del-icon="false"
return-type="object"
:image-styles="imgStyle"
@select="imgChange"
/> -->
<ch-image-uploader
v-model="files"
ref="imgUploader"
:limit="1"
:showClose="false"
:url="uploadUrl">
</ch-image-uploader>
</uni-list>
<button class="submit-btn" type="primary" :loading="uploading" :disabled="isDisable" @click="submitExam"></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 } from '@dcloudio/uni-app'
import { useUserStore } from '@/store/user.js'
import { uploadExamImg, getExamInfo } from '@/api/exam.js';
import config from '@/utils/network/config.js'
const userStore = useUserStore();
const userId = userStore.userId;
const imgUploader = ref(null);
const data = reactive({
exam: {},
files: [],
img: null,
imgStyle: {
"height": 400,
"width": 400,
},
examId: '',
uploading: false
})
const { exam, img, imgStyle , files, examId, uploading } = toRefs(data);
const isDisable = computed(() => {
console.log('files', files.value)
!files.value.length || uploading.value
})
const status = computed(() => {
if (!exam.value.status) return ''
return exam.value.status == 1 ? '进行中' : '已结束'
})
const uploadUrl = computed(() => {
return `${config.baseUrl}/api/user.ashx?act=subexaminfo&studentid=${userId}&examid=${examId.value}`
})
onLoad((option) => {
examId.value = option.id;
})
onMounted(() => {
const params = {
examid: examId.value,
studentid: userId
}
// const params = {
// examid: 1,
// studentid: 1
// }
getExamInfo(params, { loading: true }).then(info => {
exam.value = info;
if (!info.studentimg) return;
files.value = [{
name: 'studentimg',
extname: 'image/png',
path: `${info.studentimg}`
}]
})
})
// 提交图片
function submitExam () {
uploading.value = true;
console.log(imgUploader)
imgUploader.value.upload()
.finally(() => {
uploading.value = false;
})
}
// async function imgChange (e) {
// const newFile = e.tempFiles[0].file
// // console.log('newFile', newFile, e)
// const form = new FormData()
// form.file = await fileToBlob(e.tempFiles[0].file)
// console.log(e.tempFiles[0] instanceof FormData, e.tempFiles[0], form)
// file.value = form
// }
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 './examDetails.scss';
</style>