|
|
|
@ -104,6 +104,7 @@ |
|
|
|
<div class="step_select"> |
|
|
|
<div>已选内容： 0</div> |
|
|
|
<div>内容总时长：0.00s</div> |
|
|
|
<div>添加BGM：<el-button class="step_select_audio" type="primary" round @click="selectAudioCont">选择文件</el-button></div> |
|
|
|
</div> |
|
|
|
<div class="step_select_list"> |
|
|
|
<div class="step_upload" @click="selectContVisible = true"></div> |
|
|
|
@ -173,7 +174,7 @@ |
|
|
|
:disable-transitions="true" |
|
|
|
:hit="false" |
|
|
|
color="#cbe3ff" |
|
|
|
@close="handleClose(tag)" |
|
|
|
@close="deltTags(tag)" |
|
|
|
> |
|
|
|
{{ tag }} |
|
|
|
</el-tag> |
|
|
|
@ -223,14 +224,6 @@ |
|
|
|
</div> |
|
|
|
<!-- 主题库 --> |
|
|
|
<div v-if="activeIndex === 1" class="theme_cont"> |
|
|
|
<!-- <ul class="tab_item"> |
|
|
|
<li |
|
|
|
v-for="(item, index) in tabItem" |
|
|
|
:key="index" |
|
|
|
:class="{'active': activeItemIndex === index}" |
|
|
|
@click="tab(index)" |
|
|
|
>{{ item.name }}</li> |
|
|
|
</ul> --> |
|
|
|
<!-- 主题库list --> |
|
|
|
<ThemeGalleryList |
|
|
|
ref="ThemeGalleryList" |
|
|
|
@ -244,7 +237,7 @@ |
|
|
|
</div> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<el-button type="primary" round @click="submitForm('form')">确 定</el-button> |
|
|
|
<el-button round @click="selectContVisible = false">取 消</el-button> |
|
|
|
<el-button round @click="cancelContSelect">取 消</el-button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
@ -254,7 +247,6 @@ |
|
|
|
title="请选择播放内容" |
|
|
|
:close-on-click-modal="false" |
|
|
|
:visible.sync="listEditVisible" |
|
|
|
width="800px" |
|
|
|
> |
|
|
|
<div class="total_time"> |
|
|
|
内容总时长：3m15s |
|
|
|
@ -289,6 +281,11 @@ |
|
|
|
<el-option label="动画2" value="2">动画2</el-option> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
<div class="set_time set_audio"> |
|
|
|
<span>音频：</span> |
|
|
|
<p class="audio_name">audio.mp3</p> |
|
|
|
<el-button type="primary" round @click="selectAudioCont">选择文件</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-else class="edit_cont_other">内容时长：{{ item.time }}</div> |
|
|
|
</div> |
|
|
|
@ -299,6 +296,47 @@ |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
<!-- 素材库 - 音频选择 --> |
|
|
|
<div class="release_layer upload_layer"> |
|
|
|
<el-dialog |
|
|
|
:close-on-click-modal="false" |
|
|
|
:show-close="false" |
|
|
|
:visible.sync="selectAudioVisible" |
|
|
|
width="1200px" |
|
|
|
> |
|
|
|
<div slot="title" class="layer_tab_title"> |
|
|
|
<span class="active">素材库</span> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<ul class="tab_item"> |
|
|
|
<li>音频<span>3</span></li> |
|
|
|
</ul> |
|
|
|
<div class="material_list"> |
|
|
|
<div |
|
|
|
v-for="(item, index) in listData" |
|
|
|
:key="index" |
|
|
|
:class="['material_item', 'item_cont',{ 'item_multi': audioChecked === index }]" |
|
|
|
> |
|
|
|
<img v-if="item.coverImg" :src="item.coverImg" alt /> |
|
|
|
<div v-if="item.type == 'audio'" class="radio_img"></div> |
|
|
|
<div class="item_format"> |
|
|
|
<span class="item_type">{{ item.type }}</span> |
|
|
|
<span v-if="item.type !== 'JPG'" class="item_time">03:00</span> |
|
|
|
</div> |
|
|
|
<div class="file_name">{{ item.name }}</div> |
|
|
|
<span v-if="isMultiSelected" class="checked_btn" @click="audioCheckedHandle(index)"></span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="upload_list_right"> |
|
|
|
<div class="mulit_btn" @click="multiSelectBtn('audio')">{{ mulitText }}</div> |
|
|
|
</div> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<el-button type="primary" round>确 定</el-button> |
|
|
|
<el-button round @click="cancelContSelect('audio')">取 消</el-button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
<!-- 添加发布的设备 --> |
|
|
|
<div class="add_device_layer"> |
|
|
|
<el-dialog |
|
|
|
@ -354,12 +392,15 @@ export default { |
|
|
|
return { |
|
|
|
publishType: 0, |
|
|
|
time: 15, |
|
|
|
audio_name: 'audio.mp3', |
|
|
|
animation: null, |
|
|
|
selectDeviceVisible: false, |
|
|
|
listEditVisible: false, |
|
|
|
selectContVisible: false, |
|
|
|
activeIndex: 0, |
|
|
|
activeItemIndex: 0, |
|
|
|
selectAudioVisible: false, |
|
|
|
audioChecked: null, |
|
|
|
deviceAllTags: ['GCXR1', 'GCXR2', 'GCXR3', 'GCXR4', 'GCXR5'], |
|
|
|
deviceTags: [], |
|
|
|
mulitText: '多选', |
|
|
|
@ -376,14 +417,22 @@ export default { |
|
|
|
{ |
|
|
|
id: '2', |
|
|
|
name: '2', |
|
|
|
type: 'JPG', |
|
|
|
size: '12kb', |
|
|
|
coverImg: require('@/assets/images/background.jpg'), |
|
|
|
time: '' |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '3', |
|
|
|
name: '4', |
|
|
|
type: 'VEDIO', |
|
|
|
size: '12kb', |
|
|
|
coverImg: require('@/assets/images/background.jpg'), |
|
|
|
time: '03:00' |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '3', |
|
|
|
name: '3', |
|
|
|
id: '4', |
|
|
|
name: '4', |
|
|
|
type: 'audio', |
|
|
|
size: '12kb', |
|
|
|
coverImg: '', |
|
|
|
@ -402,14 +451,22 @@ export default { |
|
|
|
{ |
|
|
|
id: '2', |
|
|
|
name: '2', |
|
|
|
type: 'JPG', |
|
|
|
size: '12kb', |
|
|
|
coverImg: require('@/assets/images/background.jpg'), |
|
|
|
time: '' |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '3', |
|
|
|
name: '4', |
|
|
|
type: 'VEDIO', |
|
|
|
size: '12kb', |
|
|
|
coverImg: require('@/assets/images/background.jpg'), |
|
|
|
time: '03:00' |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '3', |
|
|
|
name: '3', |
|
|
|
id: '4', |
|
|
|
name: '4', |
|
|
|
type: 'audio', |
|
|
|
size: '12kb', |
|
|
|
coverImg: '', |
|
|
|
@ -443,7 +500,6 @@ export default { |
|
|
|
] |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
computed: { |
|
|
|
changePlaceholder() { |
|
|
|
return this.publishType === 0 ? '即时发布 2022-01-01' : '定时发布 2022-01-01' |
|
|
|
@ -451,9 +507,15 @@ export default { |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
console.log(this.$route.query.tag) |
|
|
|
if (this.$route.path === '/release') { |
|
|
|
this.materialTabItem.pop() |
|
|
|
} |
|
|
|
if (this.$route.query.tag) { |
|
|
|
this.publishType = this.$route.query.tag |
|
|
|
} |
|
|
|
|
|
|
|
console.log(this.$router.options.routes) |
|
|
|
console.log(this.$route.path) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
selectEdit() { |
|
|
|
@ -484,13 +546,18 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
// 多选btn |
|
|
|
multiSelectBtn() { |
|
|
|
multiSelectBtn(type) { |
|
|
|
this.isMultiSelected = !this.isMultiSelected |
|
|
|
if (this.isMultiSelected) { |
|
|
|
this.mulitText = '取消' |
|
|
|
} else { |
|
|
|
this.mulitText = '多选' |
|
|
|
this.uploadContentIds = [] |
|
|
|
if (type === 'audio') { |
|
|
|
this.mulitText = '选择' |
|
|
|
this.audioChecked = null |
|
|
|
} else { |
|
|
|
this.mulitText = '多选' |
|
|
|
this.uploadContentIds = [] |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
// 多选选中 |
|
|
|
@ -505,6 +572,7 @@ export default { |
|
|
|
this.uploadContentIds.push(id) |
|
|
|
} |
|
|
|
}, |
|
|
|
// 设备选择 |
|
|
|
addDeviceTag() { |
|
|
|
this.selectDeviceVisible = true |
|
|
|
}, |
|
|
|
@ -512,13 +580,16 @@ export default { |
|
|
|
console.log(tag) |
|
|
|
this.deviceTags.push(tag) |
|
|
|
}, |
|
|
|
handleClose(tag) { |
|
|
|
// 删除已选择的设备 |
|
|
|
deltTags(tag) { |
|
|
|
this.deviceTags.splice(this.deviceTags.indexOf(tag), 1) |
|
|
|
console.log(this.deviceTags) |
|
|
|
}, |
|
|
|
// 清空已选择的设备 |
|
|
|
clearDevice() { |
|
|
|
this.deviceTags = [] |
|
|
|
}, |
|
|
|
// 选择内容-素材库/主题库 tab |
|
|
|
tabAll(index) { |
|
|
|
this.activeIndex = index |
|
|
|
this.activeItemIndex = 0 |
|
|
|
@ -529,10 +600,35 @@ export default { |
|
|
|
tab(index) { |
|
|
|
this.activeItemIndex = index |
|
|
|
}, |
|
|
|
// 时间设置-切换到每天时 |
|
|
|
clearCheckbox() { |
|
|
|
if (this.form.timePeriod === '每天') { |
|
|
|
this.form.onweek = [] |
|
|
|
} |
|
|
|
}, |
|
|
|
// 选择音频 |
|
|
|
selectAudioCont() { |
|
|
|
this.isMultiSelected = false |
|
|
|
this.mulitText = '选择' |
|
|
|
this.selectAudioVisible = true |
|
|
|
}, |
|
|
|
// 音频选中-单选 |
|
|
|
audioCheckedHandle(index) { |
|
|
|
this.audioChecked = index |
|
|
|
console.log(this.audioChecked) |
|
|
|
}, |
|
|
|
// 素材选择 - 取消按钮 |
|
|
|
cancelContSelect(type) { |
|
|
|
this.isMultiSelected = false |
|
|
|
if (type === 'audio') { |
|
|
|
this.selectAudioVisible = false |
|
|
|
this.mulitText = '选择' |
|
|
|
this.audioChecked = null |
|
|
|
} else { |
|
|
|
this.selectContVisible = false |
|
|
|
this.mulitText = '多选' |
|
|
|
this.uploadContentIds = [] |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -619,6 +715,10 @@ export default { |
|
|
|
div{ |
|
|
|
margin-right: 30px; |
|
|
|
} |
|
|
|
.step_select_audio{ |
|
|
|
margin-left: 5px; |
|
|
|
padding: 5px; |
|
|
|
} |
|
|
|
} |
|
|
|
.step_select_list{ |
|
|
|
display: flex; |
|
|
|
@ -782,21 +882,31 @@ export default { |
|
|
|
} |
|
|
|
.set_animation{ |
|
|
|
display: flex; |
|
|
|
margin-right: 30px; |
|
|
|
span.set_item{ |
|
|
|
margin-right: 8px; |
|
|
|
} |
|
|
|
} |
|
|
|
.set_audio{ |
|
|
|
.audio_name{ |
|
|
|
margin-right: 10px; |
|
|
|
} |
|
|
|
::v-deep .el-button--small{ |
|
|
|
padding: 0 15px; |
|
|
|
border: none; |
|
|
|
} |
|
|
|
} |
|
|
|
::v-deep .el-input__inner{ |
|
|
|
text-align: center; |
|
|
|
height: 26px; |
|
|
|
line-height: 26px; |
|
|
|
height: 27px; |
|
|
|
line-height: 27px; |
|
|
|
} |
|
|
|
::v-deep .el-input__icon{ |
|
|
|
line-height: 26px; |
|
|
|
line-height: 27px; |
|
|
|
} |
|
|
|
} |
|
|
|
.edit_cont_other{ |
|
|
|
line-height: 26px; |
|
|
|
line-height: 27px; |
|
|
|
font-size: 12px; |
|
|
|
color: #666; |
|
|
|
} |
|
|
|
|
