DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/EducationalAdministration/practiceCourse/single.vue

<template>
	<view v-if="ready">
		<view class="uploadBox">
			<view class="uploadPercentage" v-if="edit&&uploadTimer">
				<view class="textBox">
					<text v-if="percentage != 100">上传中... {{uploadedSize||'--'}}M/{{needUploadSize||'--'}}M 预计还需要{{needUploadTime||'--'}}s</text>
					<text style="color: #0C86D8;" v-if="percentage == 100">上传成功！</text>
				</view>
				<view class="percentageLine">
					<view class="percentage" :style="{width:percentage+'%'}"></view>
				</view>
			</view>
			<view class="chooseBox">
				<view v-if="!uploadList.length" class="empty" @click="chooseFile">
					<span>+</span>
				</view>
				<view v-else class="fileBox" @click="chooseFile">
					<video :src="uploadList[0].path"></video>
				</view>
			</view>
		</view>
		<view class="fromItemBox">
			<view class="title">课程名称</view>
			<view class="inputBox">
				<input type="text" :disabled="!edit&&disable" v-model="form.NAME" placeholder="请输入课程名称" />
			</view>
		</view>
		<view v-if="edit" class="AIBtn" @click="submitClick" :style="{opacity:disable?0.6:1}">
			AI分析
		</view>
		<uni-toast data-duration="100000000" v-if="loading">
			<div class="uni-mask" style="background: rgba(17,17,17,0.3);"></div>
			<div class="uni-toast" style="background: #fff!important;">
				<i class="uni-icon_toast uni-loading"></i>
				<p class="uni-toast__content" style="color: #000;font-size: 14px;"> AI分析中 </p>
			</div>
		</uni-toast>
	</view>
</template>

<script>
	import customFormMixins from '@/common/customform.js'
	export default {
		mixins: [customFormMixins],
		data() {
			return {
				loading:false,
				form: {
					NAME:'',
					PICPATH:'',
					VIDEOPATH:'',
				},
				ready:false,
				edit:false,
				disable:false,
				
				uploadList:[],
				uploadedSize:0,
				needUploadSize:0,
				percentage:0,
				uploadTime:0,
				uploadTimer:null,
				needUploadTime:0,
			}
		},
		async onLoad({ type, id }) {
		  await this.init(type, id) 
		}, 
		methods: {
			async init(type,id){
				if(type == 'add'){
				}else{
					// let res = this.HTTP_GET('learun/adms/smartEducation/smartSelfCourseInfo',id)
					// if(!res)return
					// this.form = res
					// if(this.form.folderId){
					// 	let fileList = await this.convertToFormValue({type:'upload'},this.form.folderId)
					// 	this.uploadList = fileList.map(e=>{
					// 		e.uploaded = true
					// 		return e
					// 	})
					// }
				}
				this.edit = ['edit','add'].includes(type)
				this.ready = true
			},
			async submitClick(){
				if(!this.edit||this.disable)return
				if(!this.uploadList[0]){
					this.TOAST('请选择上传课程视频')
					return
				}
				if(!this.form.NAME){
					this.TOAST('请输入课程名称')
					return
				}
				this.loading = true
				this.disable = true
				let res = await this.uploadFile()
				if(!res){
					this.disable = false
					this.loading = false
					return
				}
				this.form.VIDEOPATH = res
				let result = await this.HTTP_POST('learun/adms/smartEducation/smartSelfCourseAdd',this.form,null,{timeout:60000*10});
				this.disable = false
				this.loading = false
				if(result){
					this.EMIT('list-change') 
					this.JUMP_TO('./AIres',result,true)
				}
			},
			async chooseFile() {
			  if(!this.edit||this.disable)return
			  uni.chooseVideo({
			    sourceType: ['album'],
				compressed:false,
			    success: async (res) => {
			      this.uploadList = [
					  {path:res.tempFilePath,uploaded:false}
				  ]
			    }
			  })
			},
			async uploadFile(){
				return new Promise(async (resolve)=>{
					let guid = this.form.VIDEOPATH || this.GUID()
					if(!this.uploadList[0]||this.uploadList[0].uploaded){
						resolve(guid)
						return
					}
					this.uploadTimer = setInterval(()=>{
						this.uploadTime++
					},1000)
					const uploadTask = await this.UPLOAD('/learun/adms/annexes/wxupload', this.uploadList[0].path,{},guid,{
						complete:async ()=>{
							if(this.percentage == 100){
								this.uploadList[0].uploaded = true
								// let fileList = await this.convertToFormValue({type:'upload'},guid)
								// console.log(fileList)
								resolve(guid)
							}else{
								resolve('')
							}
							uploadTask.abort();
							clearInterval(this.uploadTimer)
							this.uploadTimer = null
							this.uploadTime = 0
							this.percentage = 0
							this.uploadedSize = 0
							this.needUploadSize = 0
							this.needUploadTime = 0
						},
					},true)
					uploadTask.onProgressUpdate(res => {
					  this.percentage = res.progress
					  this.uploadedSize = this.bytesToMegabytesFixed(res.totalBytesSent)
					  this.needUploadSize = this.bytesToMegabytesFixed(res.totalBytesExpectedToSend)
					  this.needUploadTime = ((100-this.percentage)*this.uploadTime/this.percentage).toFixed(0)
					})
				})
			},
			bytesToMegabytesFixed(bytes) {
			    const megabytes = bytes / (1024 * 1024);
			    return megabytes.toFixed(2);
			}
		}
	}
</script>

<style scoped>
	uni-page-body{
		height: 100%;
		background-color: #fff;
	}
	.uploadBox{
		.uploadPercentage{
			.textBox{
				color: #666;
				font-size: 12px;
				padding: 30rpx;
			}
			.percentageLine{
				margin: 0 -30rpx;
				height: 6rpx;
				background-color: #ccc;
				.percentage{
					height: 100%;
					width: 0;
					background-color: #0C86D8;
				}
			}
		}
		.chooseBox{
			padding: 30rpx;
			height: 440rpx;
			border-radius: 16rpx;
			.empty{
				border: 2rpx dashed #0C86D8;
				border-radius: 16rpx;
				height: 100%;
				overflow: hidden;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 36px;
				color: #0C86D8;
				background-color: #F1F8FD;
			}
			.fileBox{
				border: 2rpx dashed #0C86D8;
				border-radius: 16rpx;
				height: 100%;
				overflow: hidden;
				uni-video{
					height: 100%;
					width: 100%;
				}
			}
		}
	}
	.fromItemBox{
		margin: 30rpx;
		border-bottom: 2rpx solid #ccc;
		color: #666;
		font-size: 15px;
		input{
			margin-top:30rpx;
			margin-bottom: 30rpx;
			font-size: 16px;
			color: #333;
		}
	}
	.AIBtn{
		margin: 0 30rpx;
		margin-top:160rpx;
		color: #fff;
		border-radius: 15rpx;
		line-height: 86rpx;
		background-color: #0C86D8;
		text-align: center;
		font-size: 16px;
	}
</style>