smart_campus_uni/pages/examDetails/examDetails.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="studentStatus" />
			<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" v-if="status === '进行中'">提 交</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(() => {
	return !files.value.length || uploading.value
})

const status = computed(() => {
	if (!exam.value.status) return ''
	
	return exam.value.status == 1 ? '进行中' : '已结束'
})

const studentStatus = computed(() => {
	if (!exam.value.studentstatus) return ''
	
	return exam.value.studentstatus == 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
	// }
	getInfo(params, true)
})

// 提交图片
function submitExam () {
	uploading.value = true;
	imgUploader.value.upload()
	.then(() => {
		console.log('上传成功')
		uni.showToast({
			title: '提交成功',
			icon: 'success'
		})
		setTimeout(() => {
			getInfo({
				examid: examId.value,
				studentid: userId
			})
		}, 1000)
	})
	.catch(() => {
		uni.showToast({
			title: '提交失败',
			icon: 'error'
		})
	})
	.finally(() => {
		uploading.value = false
	})
}

function getInfo (params, loading = false) {
	return new Promise((resolve, reject) => {
		getExamInfo(params, { loading }).then(info => {
			exam.value = info;
			if (!info.studentimg) return;
			files.value = [{
				name: 'studentimg',
				extname: 'image/png',
				path: `${info.studentimg}`
			}]
			resolve(info)
		})
		.catch(error => {
			reject(error)
		})
	})
}

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