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
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>
|