<template>
|
<div class="customPage">
|
<p class="basicTip">
|
小贴士：为防止失真热区图片尺寸需与区域大小严格一致
|
</p>
|
<div>
|
<el-form-item label="热区图片：">
|
<custom-upload-img
|
@handle-success="handleSuccess"
|
@handle-remove="handleRemove"
|
:fileList="fileList"
|
>
|
</custom-upload-img>
|
</el-form-item>
|
<el-form-item label="视频文件：" :required="true">
|
<el-popover
|
placement="top-start"
|
width="200"
|
trigger="hover"
|
v-if="form.videoUrl"
|
:content="form.videoUrl">
|
<i class="el-icon-info" slot="reference"></i>
|
</el-popover>
|
<custom-upload-img class="uploadVideo"
|
@handle-success="handleVideoSuccess"
|
@handle-remove="handleVideoRemove"
|
:fileList="fileVideoList"
|
:accept='".mp4"'
|
>
|
</custom-upload-img>
|
</el-form-item>
|
</div>
|
<div v-if="form.videoUrl">
|
<div>
|
<el-form-item label="视频控件开关：" class="videoFormItem">
|
<el-checkbox v-model="form.playBtn">显示播放控件
|
<span class="itemTips">
|
是否显示视频播放/暂停按钮、播放进度等控件
|
</span>
|
</el-checkbox>
|
</el-form-item>
|
</div>
|
<div>
|
<el-form-item label="视频播放模式：" class="videoFormItem">
|
<el-checkbox v-model="form.loopPlay">开启循环播放</el-checkbox>
|
<el-checkbox v-model="form.autoPlay">开启自动播放</el-checkbox>
|
<el-checkbox v-model="form.mutePlay">静音播放视频</el-checkbox>
|
<!-- <el-checkbox v-model="form.autoStopPlay">自动暂停播放</el-checkbox> -->
|
</el-form-item>
|
</div>
|
<p class="basicTip">
|
小贴士：ios 暂不支持自动播放
|
</p>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapMutations } from 'vuex'
|
|
export default {
|
props: ['form'],
|
data () {
|
return {
|
}
|
},
|
computed: {
|
fileList () {
|
return this.form.fileUrl ? [{ url: this.form.fileUrl }] : []
|
},
|
fileVideoList () {
|
return this.form.videoUrl ? [{ url: this.form.videoUrl }] : []
|
}
|
},
|
methods: {
|
...mapMutations(['updateCurrent']),
|
/**
|
* 上传视频成功
|
*/
|
handleVideoSuccess (data) {
|
this.updateCurrent({ videoUrl: data.url })
|
},
|
handleVideoRemove (data) {
|
this.updateCurrent({ videoUrl: null, playBtn: false, loopPlay: false, autoPlay: false, mutePlay: false, autoStopPlay: false })
|
},
|
/**
|
* 获取上传成功的图片
|
*/
|
handleSuccess (data) {
|
this.updateCurrent({ fileUrl: data.url })
|
},
|
/**
|
* 移除图片
|
*/
|
handleRemove (data) {
|
this.updateCurrent({ fileUrl: null })
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.el-popover{
|
background: rgba(0,0,0,.7) !important;
|
color: #ffffff !important
|
}
|
.el-popover[x-placement^=top] .popper__arrow::after {
|
border-top-color: rgba(0,0,0,.7) !important;
|
}
|
.uploadVideo{
|
display: inline-block;
|
margin-left: 10px;
|
vertical-align: top;
|
}
|
.videoFormItem {
|
.el-form-item__label{
|
width: auto !important;
|
}
|
}
|
</style>
|
