<template>
<div class="contain_box">
<FormItem label="走访视频" prop="visitVideo">
<Upload
ref="video"
action="#"
multiple
show-upload-list
accept=".3gp,.mp4,.wmv,.avi"
:before-upload="beforeVisitVideo"
:on-remove="removeVideo"
>
<Button icon="ios-cloud-upload-outline" type="primary" ghost
>点击上传</Button
>
</Upload>
<div
style="display: flex; height: 80px; margin-top: 5px"
v-for="(item, index) in videoDefault"
:key="index"
>
<video
id="media"
class="media"
style="width: 84%"
controls
:src="item"
></video>
<span style="line-height: 86px">
<Tooltip content="删除" placement="right">
<Icon
class="iconDele"
type="ios-close-circle-outline"
size="30"
@click="videoDele(index)"
/>
</Tooltip>
</span>
</div>
<!-- <div
class="fileName"
v-for="(item, index) in visitVideo"
:key="index"
> -->
<!-- <span> {{ item.name }}</span> -->
<!-- 删除按钮,点击上传文件对象清空,可以重新上传 -->
<!-- @click=" -->
<!-- <Icon type="ios-close" size="20" color="#000" class="iconDele" /> -->
<!-- </div> -->
</FormItem>
<FormItem label="走访录音" prop="visitRecording">
<Upload
ref="sound"
action="#"
multiple
accept=".mp3,.wav,.m4a,.3pg,.mar,.wma"
:before-upload="beforeVisitSound"
:on-remove="removeSound"
>
<Button icon="ios-cloud-upload-outline" type="primary" ghost
>点击上传</Button
>
</Upload>
<div
style="display: flex; height: 54px; margin-top: 5px"
v-for="(item, index) in soundDefault"
:key="index"
>
<audio :src="item" controls="controls" ref="player" preload="true">
<!--(1)属性:controls,preload
(2)事件:canplay,timeupdate,ended
(3)方法:play(),pause() controls:向用户显示音频控件(播放/暂停/进度条/音量)
preload:属性规定是否在页面加载后载入音频
canplay:当音频/视频处于加载过程中时,会发生的事件
timeupdate:当目前的播放位置已更改时
ended:当目前的播放列表已结束时-->
</audio>
<span style="line-height: 63px">
<Tooltip content="删除" placement="right">
<Icon
class="iconDele"
type="ios-close-circle-outline"
size="30"
@click="soundDele(index)"
/>
</Tooltip>
</span>
</div>
</FormItem>
</div>
</template>
data(){
return {
// 走访视频
videoFile: [],
// 走访录音
soundFile: [],
// 回显视频
videoDefault: [],
// 回显录音
soundDefault: [],
}}
// 组件初始化完成后要给upload的fileList一个数组容器,否则,上传文件后,组件将无法在页面默认展示上传列表
mounted() {
//切记,一定要给组件数据容器
this.videoFile = this.$refs.video.fileList;
this.soundFile = this.$refs.sound.fileList;
},
// 弹框开关回调
modalChange(val) {
// console.log(val);
if (!val) {
// 弹框关闭时清空所有组件信息,否则再次点开弹框时,因为vue的双向绑定,会展示上次表单数据
this.$refs["executedForm"].resetFields();
this.videoFile = [];
this.soundFile = [];
// upload组件清空方法
this.$refs.sound.clearFiles();
this.$refs.video.clearFiles();
} else {
//这里特别容易被丢失,切记
// 由于弹框关闭时,上传upload的fileList被清空了,灵魂再次无法安放了,
// 只能再次给予body(容器)得以安放并静静依次排列展示
this.soundFile = this.$refs.sound.fileList;
this.videoFile = this.$refs.video.fileList;
}
},