yicangzongtai_app_240321/pages/task/components/submitVideo - 副本 (3).vue

<template>
	<view class="task-form-item form-item-media">
		<view class="form-lable">
			<text><text class="form-must" v-if="rule && rule.required">* </text>视频{{showVideo}}:</text>
			<text class="form-media-num">({{videos.length}}/{{num}})</text>
		</view>
		<view class="form-img-video">
			<view v-if="videos.length < num " class="updata-btn img-video-item" @click.stop="onChooseVideo()">
				<text class="iconfont_yige">&#xe69f;</text>
				<text>请上传视频</text>
			</view>
			<view class="img-video-box img-video-item" v-for="(item,index) in videos">
				<view class="video-cover">
					<video :show-center-play-btn="false" :show-loading="false" :controls="false" class="img-video"
						:src="item" v-if="!checkPage && showVideo" @click.stop="onplay(item)">
						<cover-view class="video-cover-view" @click.stop="onplay(item)"></cover-view>
						<!-- <cover-view class="video-cover-view">
							<cover-view class="del-img-video" @click.stop="delVldeo(index)">
								<cover-image class="cover-image" src="../static/close.png"></cover-image>
							</cover-view>
						</cover-view> -->
					</video>
				</view>
			</view>
		</view>
		<uni-popup ref="videoPlayRef" maskBg="rgba(0, 0, 0,.7)" @change="popupChange">
			<view class="video-play" style="width: 100vw;">
				<video autoplay v-if="playVideoUrl" style="width: 100%;max-height: 60vh;" :src="playVideoUrl" />
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import {
		getcheckBigFile_Api,
		setUpload_tag_Api,
		getMargeTag_Api
	} from "@/api/task.js"
	import {
		getFileMd5,
		cutFile
	} from "@/utils/tool.js"
	import {
		uplaodVideo
	} from "@/utils/uplaodVideo"
	export default {
		name: 'submitVideo',
		model: {
			prop: ['videos'],
			event: ['onChange']
		},
		props: {
			checkPage: {
				type: Boolean,
				default: false
			},
			num: {
				type: Number,
				default: 1
			},
			rule: {
				type: Object,
				default: null
			},
			videos: {
				type: Array,
				default: () => [],
				require: true
			},
		},
		data() {
			return {
				showVideo: true,
				uploadingLoading: false,
				Storage_key: 'partUploadData',
				File_V: null,
				tempFilePath: null,
				playVideoUrl: '',
			}
		},

		watch: {
			uploadingLoading: {
				handler(newL, oldL) {
					if (newL) {
						uni.showLoading({
							title: '上传视频中',
							mask: true
						})
					} else {
						uni.hideLoading()
					}
				},

			}
		},
		mounted() {

		},
		methods: {
			popupChange(e) {
				if (!e || !e.show) {
					this.playVideoUrl = null;
				}
				this.showVideo = !e.show;
			},
			// 播放视频
			onplay(url) {
				console.log('url = ', url)
				try {
					this.playVideoUrl = url;
					this.$refs.videoPlayRef.open();
					this.$nextTick(() => {
						try {
							this.videoContext = uni.createVideoContext('myVideo');
							this.videoContext.play()
							this.showVideo = false;
						} catch (e) {
							console.log('onpssssslay = ', e)
							//TODO handle the exception
						}
					})
				} catch (e) {
					console.log('onplay = ', e)
					//TODO handle the exception
				}
			},
			delVldeo(index) {
				this.videos.splice(index, 1);
			},
			onChooseVideo() {
				try {
					uni.removeStorageSync(this.Storage_key);
				} catch (e) {
					// error
				}
				try {
					let that = this;
					uni.chooseVideo({
						sourceType: ['camera', 'album'],
						compressed: false, // 压缩
						success: res_file => {
							this.uploadingLoading = true
							plus.io.resolveLocalFileSystemURL(res_file.tempFilePath, (entry) => {
								entry.file((ent) => {
									// 获取文件名
									plus.io.getFileInfo({
										filePath: res_file.tempFilePath,
										success: res_ => {
											// 获取文件的MD5
											try {
												// 检查是否上传过
												getcheckBigFile_Api({
													fileMd5: res_.digest,
													originalName: ent.name
												}).then(res => {
													const data = res.data;
													console.log('data = ',
														data)
													if (!data.bigStatus) {
														that.saveFileChunk(
															res_file,
															res_
															.digest,
															data
															.uploadId);
													} else {
														that.unloadVideos(
															data.url);
													}

												}).catch(err => {
													this.uploadingLoading =
														false;

												})
											} catch (e) {
												this.uploadingLoading =
													false;

											}
										}

									})

								})
							})
						},
						fail: err => {
							this.uploadingLoading = false;
						}
					});
				} catch (e) {
					console.log('fileMd5 e= ', e)
					//TODO handle the exception
				}
			},


			// 保存文件片段到后台
			saveFileChunk(File, fileMd5, uploadId) {

				uni.uploadFile({
					url: this.$mConfig.baseUrl + `/common/upload-all?fileMd5=${fileMd5}&uploadId=${uploadId}`,
					filePath: File.tempFilePath,
					name: 'file',
					success: (uploadFileRes) => {
						const JSON_data = uploadFileRes.data;
						const data = JSON.parse(JSON_data);
						const tag = data.data.tag;
						this.unloadVideos()

					},
					fail: err => {
						this.uploadingLoading = false;

					}
				});
			},

			unloadVideos(url) {
				this.videos.push(url)
				this.uploadingLoading = false;
				uni.showToast({
					title: '上传成功',
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '~./submint.scss';

	.video-cover {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 2;
	}

	.img-video-box {

		position: relative;

		.video-cover-view {
			width: 100%;
			height: 100%;
			background-color: red;

			.del-img-video {
				position: absolute;
				right: -23rpx;
				top: -23rpx;
				width: 66rpx;
				// width: 46rpx;
				height: 46rpx;
				background-color: #E5404F;
				border-radius: 50%;
				text-align: center;
				line-height: 46rpx;
				color: #fff;
				font-size: 24rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;

				.cover-image {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
	}
</style>