martial-arts/pagesB/upload-video/upload-video.vue

103 lines
2.9 KiB
Vue

<template>
<view>
<status-container titlet="上传练习视频" returnc="#FFFFFF">
<view slot="content">
<view class="pad-zy20">
<view class="radius8 bacf pad-sx40 pad-zy40 boxshow2 col26 fon24">
<view class="">视频标题</view>
<input v-model="title" class="width100 radius4 mar-s20 pad-zy20" type="text" style="border: 2rpx solid #ececec;background-color: #f5f5f5;height: 70rpx;box-sizing: border-box;">
<view class="mar-s40">视频上传</view>
<input @tap="uploadVideo" class="width100 radius4 mar-s20 pad-zy20 tcenter" type="text" placeholder="浏览..." disabled
style="border: 2rpx solid #ececec;background-color: #f5f5f5;height: 70rpx;box-sizing: border-box;">
<view class="pad-s20" v-if="videoInfo.full_src">
<video :src="videoInfo.full_src" :controls="true" object-fit="contain" :show-center-play-btn="true" style="height: 388rpx;" class="width100"></video>
</view>
<input @tap="submitEv" class="width100 radius4 mar-s60 tcenter" type="text" placeholder="立即保存" placeholder-style="color:#FFFFFF;" disabled
style="border: 2rpx solid #e42417;background-color: #e42417;height: 70rpx;box-sizing: border-box;">
</view>
</view>
</view>
</status-container>
</view>
</template>
<script>
import {uploadFile} from '@/jsFile/public-api.js';
export default {
data() {
return {
title:'',
videoInfo:{
full_src:'',
src:''
},
flag:true
}
},
methods: {
// 上传视频
uploadVideo(){
uni.chooseMedia({
sourceType:['album','camera'],
success: (res) => {
uni.showToast({
title:'正在上传...',
icon:'none',
duration:100000
})
uploadFile({path:res.tempFiles[0].tempFilePath}).then(res=>{
if(res.code==0){
this.videoInfo = res.data;
this.$toolAll.tools.showToast('上传视频成功(*^▽^*)');
}
setTimeout(()=>{
uni.hideToast();
},1500)
})
}
})
},
// 上传执行事件
submitEv(){
if(!this.title){
this.$toolAll.tools.showToast('请输入视频标题');
} else if(!this.videoInfo.full_src){
this.$toolAll.tools.showToast('请上传视频');
} else {
if(this.flag){
this.flag = false;
let params = {
title:this.title,
video:this.videoInfo.src
}
uni.showToast({
title:'正在上传练习视频',
icon:'none',
duration:100000
})
this.$requst.post('/api/user/practice-video',params).then(res=>{
if(res.code==0){
this.title = '';
this.videoInfo.full_src = '';
this.$toolAll.tools.showToast('保存成功');
setTimeout(()=>{
uni.navigateBack({delta:1})
},1000)
}
setTimeout(()=>{
uni.hideToast();
},1500)
}).catch(err=>{
this.flag = true;
})
}
}
}
}
}
</script>
<style>
</style>