You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1088 lines
34 KiB
1088 lines
34 KiB
<template>
|
|
<div class="app-container">
|
|
<el-form ref="form" :model="form" size="small">
|
|
<!-- 创建标题 -->
|
|
<el-row class="in_release_item" type="flex" justify="space-between">
|
|
<el-col :span="3" class="item_title">创建{{ publishType == 0 ? "即时发布" : "定时发布" }}</el-col>
|
|
<el-col :span="18">
|
|
<div class="input_wrap">
|
|
<span class="input_label">名称</span>
|
|
<el-form-item prop="relaase_name" :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]">
|
|
<el-input v-model="form.relaase_name" :placeholder="changePlaceholder" class="input_name" />
|
|
</el-form-item>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="4" class="release_right">
|
|
<el-button round class="release_btn" type="primary" @click="releaseSubmit('form')">发布</el-button>
|
|
<el-button round type="primary">关闭</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- 第一步：设置时间 -->
|
|
<el-row class="in_release_item">
|
|
<el-col class="step_1">第一步：设置时间</el-col>
|
|
<el-col class="step_form">
|
|
<el-form-item label="发布时间" prop="release_start" :rules="[
|
|
{ required: true, message: '请选择发布时间', trigger: 'change' }
|
|
]" label-width="100px">
|
|
<el-date-picker v-if="publishType == 0" v-model="form.release_start" value-format="yyyy-MM-dd HH:mm:ss" type="date" placeholder="选择日期" />
|
|
<el-date-picker v-else v-model="form.release_start" value-format="yyyy-MM-dd HH:mm:ss" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
|
|
</el-form-item>
|
|
<el-form-item v-if="publishType == 1" label="设置周期" prop="release_cycle" :rules="[
|
|
{ required: true, message: '请设置周期', trigger: 'change' },
|
|
]" :class="['set_weekly',{'no_margin': form.release_cycle == 2}]" label-width="100px">
|
|
<el-radio-group v-model="form.release_cycle" @change="clearCheckbox()">
|
|
<el-radio :label="1">每天</el-radio>
|
|
<el-radio :label="2">每周</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item v-if="form.release_cycle == 2" :class="{'weekly_margin': form.release_cycle == 2}" prop="release_weekly">
|
|
<el-checkbox-group v-model="selectWeekly">
|
|
<el-checkbox v-for="item in weeklyList" :key="item.id" :label="item.id" :value="item.id" name="type">{{ item.name }}</el-checkbox>
|
|
</el-checkbox-group>
|
|
</el-form-item>
|
|
<!-- :rules="[
|
|
{ required: true, message: '请选择是否置顶', trigger: 'change' }
|
|
]" -->
|
|
<el-form-item label="是否置顶" prop="is_topping" label-width="100px">
|
|
<el-checkbox v-model="form.is_topping">置顶</el-checkbox>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- 第二步：选择内容 -->
|
|
<el-row class="in_release_item">
|
|
<el-col class="step_1">第二步：选择内容</el-col>
|
|
<el-col class="step_form">
|
|
<div class="step_select">
|
|
<div>已选内容： 0</div>
|
|
<div>内容总时长：0.00s</div>
|
|
<div>添加BGM：<el-button class="step_select_audio" type="primary" round @click="selectAudioCont(0,-1)">选择文件</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="step_select_list">
|
|
<div class="step_upload" @click="selectContVisible = true"></div>
|
|
<draggable v-model="selectedMaterial" class="drag_list" @end="dragEnd">
|
|
<div v-for="(item, index) in selectedMaterial" :key="'list-'+index" :class="['material_item', 'item_cont']" @click="clickMaterialItem(item.material_id,item)">
|
|
<img v-if="item.img_path || item.material_type == 1" :src="item.img_path" :onerror="defaultImg" alt />
|
|
<div v-if="!item.img_path && item.material_type == 2" class="radio_img"></div>
|
|
<div class="item_format">
|
|
<span class="item_type">{{ materialPostfix[index] }}</span>
|
|
<span v-if="item.material_type != '0'" class="item_time">{{ item.duration | getSeconds }}</span>
|
|
</div>
|
|
<div class="file_name">{{ item.material_name }}</div>
|
|
<div v-if="contentIds.includes(item.material_id)" class="select_handle">
|
|
<div class="select_delt" @click.stop="selectDelt(item.material_id,index)">
|
|
<svg class="font-icon icon1" aria-hidden="true">
|
|
<use xlink:href="#icon-guanbi2" />
|
|
</svg>
|
|
</div>
|
|
<div class="select_edit" @click.stop="selectEdit()">
|
|
<svg class="font-icon icon1" aria-hidden="true">
|
|
<use xlink:href="#icon-bianji" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</draggable>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- 第三步-选择设备 -->
|
|
<el-row class="in_release_item">
|
|
<el-col class="step_1">第三步：选择设备</el-col>
|
|
<el-col class="step_form">
|
|
<el-form-item label="" prop="release_device" :rules="[
|
|
{ required: true, message: '请选择设备', trigger: 'change' },
|
|
]">
|
|
<el-radio-group v-model="form.release_device" @change="clearDevice()">
|
|
<el-radio label="1">所有设备</el-radio>
|
|
<el-radio label="2">部分设备<i v-if="form.release_device == 2" class="radio_tip" @click="addDeviceTag()">添加</i></el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<div v-if="form.release_device == 1" class="select_all_tip">所有设备都将被发送</div>
|
|
<div v-if="deviceTags.length > 0 && form.release_device == 2" class="select_other">
|
|
<el-row>
|
|
<el-col :span="10" class="other_tip">以下设备都将被发送<span>总计{{ deviceTags.length }}个设备</span></el-col>
|
|
<el-col :span="4">
|
|
<el-button round class="delt_btn" @click="clearDevice()">清空</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
<el-tag v-for="tag in deviceTags" :key="tag.device_id" closable :disable-transitions="true" :hit="false" color="#cbe3ff" @close="deltTags(tag)">
|
|
{{ tag.device_name }}
|
|
</el-tag>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<!-- 第二步：选择内容 - 选择素材 -->
|
|
<div class="release_layer upload_layer">
|
|
<el-dialog :close-on-click-modal="false" :show-close="false" :visible.sync="selectContVisible" width="1200px">
|
|
<div slot="title" class="layer_tab_title">
|
|
<span :class="{'active': activeIndex === 0}" @click="tabAll(0)">素材库</span>
|
|
<span :class="{'active': activeIndex === 1}" @click="tabAll(1)">主题库</span>
|
|
</div>
|
|
<!-- 素材库 -->
|
|
<div v-if="activeIndex === 0">
|
|
<ul class="tab_item">
|
|
<li v-for="(item, index) in materialTabItem" :key="index" :class="{'active': activeItemIndex === index}" @click="tabItem(index)">{{ item.name }}<span>{{ item.num }}</span>
|
|
</li>
|
|
</ul>
|
|
<div class="material_list" style="min-height: 260px">
|
|
<MaterialList ref="MaterialList" :is-multi-selected="isMultiSelected" :mulit-text="mulitText" :activeItemIndex="activeItemIndex" />
|
|
</div>
|
|
</div>
|
|
<!-- 主题库 -->
|
|
<div v-if="activeIndex === 1" class="theme_cont">
|
|
<!-- 主题库list -->
|
|
<ThemeGalleryList ref="ThemeGalleryList" :is-multi-selected="isMultiSelected" :mulit-text="mulitText" :show-item-info="false" />
|
|
</div>
|
|
<div class="upload_list_right">
|
|
<div class="mulit_btn" @click="multiSelectBtn">{{ mulitText }}</div>
|
|
</div>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" round @click="uploadSelected()">确 定</el-button>
|
|
<el-button round @click="cancelContSelect">取 消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
<!-- 编辑播放内容 -->
|
|
<div class="upload_layer">
|
|
<el-dialog title="请选择播放内容" :close-on-click-modal="false" :visible.sync="listEditVisible">
|
|
<div class="total_time">
|
|
内容总时长：3m15s
|
|
</div>
|
|
<div v-for="(item, index) in selectedEditData" :key="index" class="edit_material">
|
|
<div class="edit_img">
|
|
<img v-if="item.img_path || item.material_type == 1" :src="item.img_path" :onerror="defaultImg" alt />
|
|
<div v-if="!item.img_path && item.material_type == 2" class="radio_img"></div>
|
|
<span class="">{{ index+1 }}</span>
|
|
</div>
|
|
<div class="edit_cont">
|
|
<div class="edit_cont_base">
|
|
<p>{{ item.material_name }}</p>
|
|
<span>{{ materialPostfix[index] }}</span>
|
|
<span>{{ item.file_size | formatBytes }}</span>
|
|
</div>
|
|
<!-- <div v-if="item.material_type == 0" class="edit_cont_set"> -->
|
|
<el-form v-if="item.material_type == 0" :ref="setMaterialForm" :model="setMaterialForm.form" class="edit_cont_set" size="small">
|
|
<div class="set_time">
|
|
<span>展示时长</span>
|
|
<el-form-item :prop="'form.'+index+'.showTime'" style="width: 100px">
|
|
<el-input v-model="item.showTime" type="text" placeholder="15" style="width: 66px" />
|
|
</el-form-item>
|
|
<em>秒</em>
|
|
</div>
|
|
<div class="set_animation">
|
|
<span class="set_item">切换动效</span>
|
|
<el-form-item :prop="'form.'+index+'.showAnimation'" style="width: 100px">
|
|
<el-select v-model="item.showAnimationName" size="small" class="filter-item" value-key="name" @change="selectAnimation($event, item)">
|
|
<el-option v-for="items in animationData" :key="items.key" :label="items.name" :value="items" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="set_time set_audio">
|
|
<span>音频：</span>
|
|
<p class="audio_name">{{ item.showAudioName }}</p>
|
|
<!-- 主题库音频文件不可选择 -->
|
|
<el-button type="primary" round @click="selectAudioCont(1,index)">选择文件</el-button>
|
|
</div>
|
|
</el-form>
|
|
<!-- </div> -->
|
|
<div v-else class="edit_cont_other">内容时长：{{ item.duration | getSeconds }}</div>
|
|
</div>
|
|
</div>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" round @click="listEditVisible = false">保 存</el-button>
|
|
<el-button round @click="listEditVisible = false">取 消</el-button>
|
|
</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>{{ audioListData.length }}</span></li>
|
|
</ul>
|
|
<div class="material_list">
|
|
<div v-for="(item, index) in audioListData" :key="index" :class="['material_item', 'item_cont',{ 'item_multi': audioChecked == index }]" @click="audioCheckedHandle(index)">
|
|
<img v-if="item.img_path" :src="item.img_path" alt />
|
|
<div v-else class="radio_img"></div>
|
|
<div class="item_format">
|
|
<span class="item_type">mp3</span>
|
|
<span class="item_time">{{ item.duration | getSeconds }}</span>
|
|
</div>
|
|
<div class="file_name">{{ item.material_name }}</div>
|
|
<span v-if="audioChecked == index" class="checked_btn"></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 @click="audioCheckedSubmit">确 定</el-button>
|
|
<el-button round @click="cancelContSelect('audio')">取 消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
<!-- 添加发布的设备 -->
|
|
<div class="add_device_layer">
|
|
<el-dialog title="请选择设备" :close-on-click-modal="false" :visible.sync="selectDeviceVisible" width="400px">
|
|
<el-tag v-for="tag in deviceAllTags" :key="tag.device_id" :disable-transitions="true" :hit="false" color="#cbe3ff" class="all_tags" @click="tagHandle(tag)">
|
|
{{ tag.device_name }}
|
|
</el-tag>
|
|
</el-dialog>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import draggable from 'vuedraggable'
|
|
import ThemeGalleryList from '../components/ThemeGalleryList.vue'
|
|
import MaterialList from '../components/MaterialCompontentList.vue'
|
|
import { getMaterialByType } from '@/api/material/material'
|
|
import { ReqDeviceList } from '@/api/device/deviceList.js'
|
|
import { saveRelease } from '@/api/release/release.js'
|
|
import { getSeconds, formatBytes } from '@/utils/index.js'
|
|
export default {
|
|
name: 'ImmediateRelease',
|
|
components: {
|
|
draggable,
|
|
ThemeGalleryList,
|
|
MaterialList
|
|
},
|
|
filters: {
|
|
getSeconds (s) {
|
|
return getSeconds(s)
|
|
},
|
|
formatBytes (bytes, decimals) {
|
|
return formatBytes(bytes, decimals)
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
orga_id: '133221333123111',
|
|
selectedMaterial: [], // 从其他页面选择带过来的素材
|
|
materialPostfix: [],
|
|
publishType: 0, // 判断是定时发布还是即时发布页面
|
|
themeType: null,
|
|
page: 1,
|
|
pageSize: 10,
|
|
audioListData: [], // 音频list
|
|
isMainBgm: null, //是最外层的bgm还是里面的
|
|
selectDeviceVisible: false, // 设备list - layer
|
|
deviceAllTags: [], // 设备list
|
|
deviceTags: [], // 已选择设备list
|
|
selectContVisible: false, // 选择内容素材/主题 - layer
|
|
selectAudioVisible: false, // 音频list-layer
|
|
audioChecked: null, // 音频已选中的
|
|
mulitText: '多选',
|
|
isMultiSelected: false,
|
|
form: {
|
|
actual_end: '', // “实际结束时间 yyyy-MM-dd HH:mm:ss”,
|
|
is_topping: false, // 是否置顶,
|
|
orga_id: '', // "机构id"
|
|
bgm_main: '',
|
|
relaase_name: '', // 发布名称
|
|
release_cycle: '', // 发布周期 0.无 1.每天 2.每周
|
|
release_weekly: '', // 发布每周 如果设置为每天则为空
|
|
release_device: '', // 发布设备 1.全部 2.部分
|
|
release_deviceDTOs: [], // {"device_id": "设备id"}
|
|
release_end: '', // “发布结束时间 yyyy-MM-dd HH:mm:ss”
|
|
release_id: null, // 发布id 为null则为新增
|
|
// {
|
|
// "duration": 时长(s),
|
|
// "effect": 切换动效,
|
|
// "material_id": "素材id",
|
|
// "material_name": "素材名称",
|
|
// "img_path","显示图片路径",
|
|
// "bgm_path":"背景音乐",
|
|
// "file_size":"文件大小",
|
|
// "ranking": 排序,
|
|
// "rm_id": "关联id 新增则为null"
|
|
// }
|
|
release_materialDTOs: [],
|
|
release_start: '', // 发布开始时间 yyyy-MM-dd HH:mm:ss
|
|
release_type: '' // 发布类型
|
|
},
|
|
contentIds: [],
|
|
listEditVisible: false, // 可编辑list素材-layer
|
|
selectedEditData: [], // 可编辑list内容 - 选择的item
|
|
thisEditIndex: null, // 当前音乐选择的index
|
|
setMaterialForm: [],
|
|
animationData: [ // 图片素材切换动态 - 编辑动画
|
|
{
|
|
key: '0',
|
|
name: '无动画'
|
|
},
|
|
{
|
|
key: '1',
|
|
name: '动画1'
|
|
},
|
|
{
|
|
key: '2',
|
|
name: '动画2'
|
|
}
|
|
],
|
|
selectWeekly: [],
|
|
weeklyList: [
|
|
{
|
|
id: '1',
|
|
name: '周一'
|
|
},
|
|
{
|
|
id: '2',
|
|
name: '周二'
|
|
},
|
|
{
|
|
id: '3',
|
|
name: '周三'
|
|
},
|
|
{
|
|
id: '4',
|
|
name: '周四'
|
|
},
|
|
{
|
|
id: '5',
|
|
name: '周五'
|
|
},
|
|
{
|
|
id: '6',
|
|
name: '周六'
|
|
},
|
|
{
|
|
id: '7',
|
|
name: '周七'
|
|
}
|
|
],
|
|
materialTabItem: [ // 素材库 - tab切换title
|
|
{
|
|
key: 1,
|
|
name: '全部',
|
|
num: '3'
|
|
},
|
|
{
|
|
key: 2,
|
|
name: '图片',
|
|
num: '1'
|
|
},
|
|
{
|
|
key: 3,
|
|
name: '视频',
|
|
num: '1'
|
|
},
|
|
{
|
|
key: 4,
|
|
name: '音频',
|
|
num: '1'
|
|
}
|
|
],
|
|
activeIndex: 0,
|
|
activeItemIndex: 0,
|
|
}
|
|
},
|
|
computed: {
|
|
changePlaceholder () {
|
|
return this.publishType == 0 ? '即时发布 2022-01-01' : '定时发布 2022-01-01'
|
|
},
|
|
defaultImg () {
|
|
return 'this.src="' + require('@/assets/images/menu_bg_02.png') + '"'
|
|
}
|
|
},
|
|
created () {
|
|
this.selectedMaterial = []
|
|
this.selectedMaterial = JSON.parse(localStorage.getItem('selectedMaterial'))
|
|
// 素材类型格式处理
|
|
if (this.selectedMaterial) {
|
|
this.selectedMaterial.forEach((item, key) => {
|
|
this.materialPostfix[key] = item.deposit_url.substring(
|
|
item.deposit_url.lastIndexOf('.') + 1,
|
|
item.deposit_url.length
|
|
)
|
|
})
|
|
}
|
|
},
|
|
mounted () {
|
|
if (this.$route.path === '/release') {
|
|
this.materialTabItem.pop()
|
|
}
|
|
if (this.$route.query.tag) {
|
|
this.publishType = this.$route.query.tag
|
|
}
|
|
// 设备list
|
|
this.ReqDeviceList()
|
|
},
|
|
methods: {
|
|
// 发布提交
|
|
releaseSubmit (formName) {
|
|
this.$refs[formName].validate((valid) => {
|
|
if (valid) {
|
|
this.form.orga_id = this.orga_id
|
|
// 先判断编辑还是新增
|
|
this.form.actual_end = this.publishType == 0 ? null : ''
|
|
if (this.form.release_device) {
|
|
if (this.form.release_device == 1) {
|
|
this.form.release_deviceDTOs = []
|
|
} else {
|
|
if (this.deviceTags.length == 0) {
|
|
this.$message.error('请选择设备 ！')
|
|
return
|
|
}
|
|
this.form.release_deviceDTOs = this.deviceTags.map(item => {
|
|
const json = {}
|
|
json.device_id = item.device_id
|
|
return json
|
|
})
|
|
}
|
|
}
|
|
this.form.release_type = this.publishType
|
|
|
|
if (this.publishType == 0) {
|
|
this.form.release_cycle = 0
|
|
this.form.release_weekly = null
|
|
this.form.release_end = this.form.release_start
|
|
}
|
|
if (this.form.release_cycle == 2) {
|
|
this.form.release_weekly = this.selectWeekly.join(',')
|
|
}
|
|
if (this.form.release_start instanceof Array) {
|
|
const arrDate = this.form.release_start
|
|
this.form.release_start = arrDate[0]
|
|
this.form.release_end = arrDate[1]
|
|
}
|
|
if (this.selectedMaterial) {
|
|
this.form.release_materialDTOs = this.selectedMaterial.map((item, index) => {
|
|
const json = {}
|
|
if (item.material_type == 0) {
|
|
json.duration = (item.showTime || item.showAnimationName || item.showAnimation) ? item.showTime : 15
|
|
json.effect = (item.showTime || item.showAnimationName || item.showAnimation) ? item.showAnimation : 0
|
|
json.bgm_path = (item.showAudioName || item.showAudioUrl) ? item.showAudioUrl : null
|
|
} else {
|
|
json.duration = 0
|
|
json.effect = 0
|
|
json.bgm_path = null
|
|
}
|
|
json.material_id = item.material_id
|
|
json.material_name = item.material_name
|
|
json.img_path = item.img_path
|
|
json.file_size = item.file_size
|
|
json.rm_id = null
|
|
json.ranking = index + 1
|
|
return json
|
|
})
|
|
// 判断最外层是否有bgm
|
|
const isBgm = this.selectedMaterial.find(item => {
|
|
return item.material_type == 2
|
|
})
|
|
if (isBgm) {
|
|
this.form.bgm_main = isBgm.deposit_url
|
|
} else {
|
|
this.form.bgm_main = null
|
|
}
|
|
saveRelease(this.form).then(res => {
|
|
if (res.code == 200) {
|
|
this.$message.success('发布成功！')
|
|
localStorage.removeItem('selectedMaterial')
|
|
} else {
|
|
this.$message.error(res.msg)
|
|
}
|
|
})
|
|
} else {
|
|
this.$message.error('请选择发布内容！')
|
|
}
|
|
} else {
|
|
console.log('error submit!!');
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
// 获取设备列表
|
|
ReqDeviceList () {
|
|
const params = {
|
|
device_id: '',
|
|
device_name: '',
|
|
is_state: '',
|
|
page: 1,
|
|
size: 10
|
|
}
|
|
ReqDeviceList(params).then(res => {
|
|
if (res.code == 200) {
|
|
this.deviceAllTags = res.data.content
|
|
} else {
|
|
return this.$message.error('获取设备列表失败！')
|
|
}
|
|
})
|
|
},
|
|
// 设备list - show
|
|
addDeviceTag () {
|
|
this.selectDeviceVisible = true
|
|
},
|
|
// 设备选中list
|
|
tagHandle (tag) {
|
|
if (this.deviceTags.length == 0) {
|
|
this.deviceTags.push(tag)
|
|
} else {
|
|
const result = this.deviceTags.find((item) => {
|
|
return item == tag
|
|
})
|
|
if (!result) {
|
|
this.deviceTags.push(tag)
|
|
} else {
|
|
this.$message.error('已选择过了~')
|
|
}
|
|
}
|
|
},
|
|
// 删除已选择的设备
|
|
deltTags (tag) {
|
|
this.deviceTags.splice(this.deviceTags.indexOf(tag), 1)
|
|
},
|
|
// 清空已选择的设备
|
|
clearDevice () {
|
|
this.deviceTags = []
|
|
},
|
|
// 根据素材类型获取素材
|
|
getMaterialByType () {
|
|
const params = {
|
|
'theme_name': '',
|
|
'theme_type': this.themeType,
|
|
'theme_type_not': '',
|
|
'orga_id': this.orga_id,
|
|
'page': this.page,
|
|
'size': this.pageSize
|
|
}
|
|
getMaterialByType(params).then(res => {
|
|
if (res.code == 200) {
|
|
this.audioListData = res.data.content
|
|
// 素材类型格式处理
|
|
this.audioListData.forEach((item, key) => {
|
|
this.materialPostfix[key] = item.deposit_url.substring(
|
|
item.deposit_url.lastIndexOf('.') + 1,
|
|
item.deposit_url.length
|
|
)
|
|
})
|
|
} else {
|
|
this.$message({
|
|
message: res.msg,
|
|
type: 'error'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 删除选择的素材
|
|
selectDelt (id, i) {
|
|
const index = this.contentIds.indexOf(id)
|
|
this.contentIds.splice(index, 1)
|
|
this.selectedEditData.splice(index, 1)
|
|
this.selectedMaterial.splice(i, 1)
|
|
localStorage.setItem('selectedMaterial', JSON.stringify(this.selectedMaterial))
|
|
},
|
|
// 选中可编辑的
|
|
clickMaterialItem (id, item) {
|
|
const arr = this.contentIds
|
|
if (arr.includes(id)) {
|
|
const index = arr.indexOf(id)
|
|
if (index > -1) {
|
|
arr.splice(index, 1)
|
|
this.selectedEditData.splice(index, 1)
|
|
}
|
|
} else {
|
|
this.contentIds.push(id)
|
|
this.selectedEditData.push(item)
|
|
}
|
|
},
|
|
// 编辑-已选择的
|
|
selectEdit () {
|
|
this.listEditVisible = true
|
|
let form = {
|
|
showTime: '15',
|
|
showAnimation: '',
|
|
showAnimationName: ''
|
|
}
|
|
this.selectedEditData.map((item, index) => {
|
|
if (item.material_type == 0) {
|
|
this.setMaterialForm.push(form)
|
|
}
|
|
})
|
|
},
|
|
dragEnd () {
|
|
// console.log(this.selectedEditData)
|
|
// console.log(this.selectedMaterial)
|
|
},
|
|
// 选择音频
|
|
selectAudioCont (type, index) {
|
|
this.audioChecked = -1
|
|
this.thisEditIndex = index
|
|
this.isMultiSelected = false
|
|
this.mulitText = '选择'
|
|
this.selectAudioVisible = true
|
|
// 根据类型获取素材 - audio - 2
|
|
this.themeType = 2
|
|
this.getMaterialByType()
|
|
this.isMainBgm = type == 0 ? 0 : 1
|
|
},
|
|
// 音频选中-单选
|
|
audioCheckedHandle (index) {
|
|
if (index != this.audioChecked) {
|
|
this.audioChecked = index
|
|
} else {
|
|
this.audioChecked = -1
|
|
}
|
|
},
|
|
// 音频选中 - 提交
|
|
audioCheckedSubmit () {
|
|
this.selectAudioVisible = false
|
|
if (this.audioChecked != -1) {
|
|
const index = this.audioChecked
|
|
if (!this.isMainBgm) {
|
|
this.audioListData[index].material_type = 2
|
|
const resultIndex = this.selectedMaterial.findIndex((item, key) => {
|
|
return item.material_type == 2
|
|
})
|
|
if (resultIndex == -1) {
|
|
this.selectedMaterial.push(this.audioListData[index])
|
|
} else {
|
|
this.selectedMaterial.splice(resultIndex, 1, this.audioListData[index])
|
|
}
|
|
localStorage.setItem('selectedMaterial', JSON.stringify(this.selectedMaterial))
|
|
} else {
|
|
this.selectedEditData[this.thisEditIndex].showAudioName = this.audioListData[index].material_name
|
|
this.selectedEditData[this.thisEditIndex].showAudioUrl = this.audioListData[index].deposit_url
|
|
}
|
|
} else {
|
|
this.selectedEditData[this.thisEditIndex].showAudioName = ''
|
|
this.selectedEditData[this.thisEditIndex].showAudioUrl = ''
|
|
}
|
|
},
|
|
// 时间设置-切换到每天时
|
|
clearCheckbox () {
|
|
if (this.form.release_cycle == 2) {
|
|
this.selectWeekly = []
|
|
this.form.release_weekly = []
|
|
}
|
|
},
|
|
// 动画切换
|
|
selectAnimation (event, item) {
|
|
item.showAnimationName = event.name
|
|
item.showAnimation = event.key
|
|
},
|
|
// 选择内容-素材库/主题库 tab
|
|
tabAll (index) {
|
|
this.activeIndex = index
|
|
this.activeItemIndex = 0
|
|
this.isMultiSelected = false
|
|
this.mulitText = '多选'
|
|
},
|
|
// 子菜单-tab
|
|
tabItem (index) {
|
|
this.activeItemIndex = index
|
|
console.log(this.activeItemIndex)
|
|
},
|
|
// 多选btn
|
|
multiSelectBtn (type) {
|
|
this.isMultiSelected = !this.isMultiSelected
|
|
if (this.isMultiSelected) {
|
|
this.mulitText = '取消'
|
|
// 已选择的内容中-list是否包含，包含即选中状态
|
|
this.selectedMaterial.forEach(item => {
|
|
this.$refs.MaterialList.selectedListId.push(item.material_id)
|
|
this.$refs.MaterialList.selectedMaterial.push(item)
|
|
})
|
|
} else {
|
|
if (type == 'audio') {
|
|
this.mulitText = '选择'
|
|
this.audioChecked = -1
|
|
} else {
|
|
this.mulitText = '多选'
|
|
}
|
|
}
|
|
},
|
|
// 素材选择 - 确认按钮
|
|
uploadSelected () {
|
|
this.selectContVisible = false
|
|
this.selectedMaterial = []
|
|
this.selectedMaterial = this.$refs.MaterialList.selectedMaterial
|
|
// 素材类型格式处理
|
|
this.selectedMaterial.forEach((item, key) => {
|
|
this.materialPostfix[key] = item.deposit_url.substring(
|
|
item.deposit_url.lastIndexOf('.') + 1,
|
|
item.deposit_url.length
|
|
)
|
|
})
|
|
localStorage.setItem('selectedMaterial', JSON.stringify(this.selectedMaterial))
|
|
this.mulitText = '多选'
|
|
},
|
|
// 素材选择 - 取消按钮
|
|
cancelContSelect (type) {
|
|
this.isMultiSelected = false
|
|
if (type == 'audio') {
|
|
this.selectAudioVisible = false
|
|
} else {
|
|
this.selectContVisible = false
|
|
this.mulitText = '多选'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.app-container {
|
|
background: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.in_release_item {
|
|
padding: 16px 24px;
|
|
margin-bottom: 10px;
|
|
line-height: 34px;
|
|
background: #fff;
|
|
border-radius: 6px;
|
|
.item_title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #3a8aeb;
|
|
}
|
|
.input_wrap {
|
|
display: flex;
|
|
width: 282px;
|
|
height: 34px;
|
|
padding: 0 24px;
|
|
font-size: 14px;
|
|
background: #f5f6fa;
|
|
line-height: 34px;
|
|
border-radius: 34px;
|
|
.input_label {
|
|
&::after {
|
|
content: "|";
|
|
padding-left: 8px;
|
|
color: #ccc;
|
|
}
|
|
}
|
|
.input_name {
|
|
width: 194px;
|
|
::v-deep .el-input__inner {
|
|
border: none;
|
|
background: #f5f6fa;
|
|
}
|
|
}
|
|
}
|
|
|
|
.release_right {
|
|
text-align: right;
|
|
.el-button {
|
|
font-size: 14px;
|
|
padding: 8px 24px;
|
|
border: none !important;
|
|
}
|
|
.release_btn {
|
|
color: #fff;
|
|
background: linear-gradient(to right, #fc8c6f, #fa544e) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.step_1 {
|
|
font-size: 16px;
|
|
line-height: 54px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
.set_weekly {
|
|
::v-deep .el-form-item__label {
|
|
line-height: 40px;
|
|
}
|
|
}
|
|
.no_margin {
|
|
margin: 0;
|
|
}
|
|
.weekly_margin {
|
|
margin: 0 0 6px 100px;
|
|
::v-deep .el-form-item__error {
|
|
top: 70%;
|
|
}
|
|
}
|
|
.step_select {
|
|
display: flex;
|
|
font-size: 14px;
|
|
margin-bottom: 20px;
|
|
div {
|
|
margin-right: 30px;
|
|
}
|
|
.step_select_audio {
|
|
margin-left: 5px;
|
|
padding: 5px;
|
|
}
|
|
}
|
|
.step_select_list {
|
|
display: flex;
|
|
.step_upload {
|
|
width: 164px;
|
|
height: 172px;
|
|
margin-right: 16px;
|
|
border: 1px dashed #dcdde3;
|
|
background: url(~@/assets/images/t-sc.png) #f2f7ff no-repeat center center;
|
|
background-size: 36px 29px;
|
|
border-radius: 6px;
|
|
}
|
|
}
|
|
.material_item {
|
|
position: relative;
|
|
.select_delt {
|
|
position: absolute;
|
|
top: 12px;
|
|
right: 12px;
|
|
.font-icon {
|
|
width: 19px;
|
|
height: 19px;
|
|
}
|
|
}
|
|
.select_edit {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 44px;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
text-align: center;
|
|
.font-icon {
|
|
width: 16px;
|
|
height: 17px;
|
|
margin-top: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.step_form {
|
|
padding-top: 30px;
|
|
.select_all_tip {
|
|
margin: -20px 0 0 0;
|
|
}
|
|
.select_other {
|
|
margin: -20px 0 0 0;
|
|
}
|
|
}
|
|
|
|
.drag_list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.upload_return {
|
|
color: #8ebcfe;
|
|
}
|
|
.total_time {
|
|
position: absolute;
|
|
top: 72px;
|
|
right: 24px;
|
|
font-size: 14px;
|
|
color: #000;
|
|
}
|
|
.edit_material {
|
|
display: flex;
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid #f2f6fd;
|
|
&:nth-last-child(2) {
|
|
border-bottom: none;
|
|
}
|
|
.edit_img {
|
|
position: relative;
|
|
width: 58px;
|
|
height: 77px;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.radio_img {
|
|
width: 58px;
|
|
height: 77px;
|
|
background: url(~@/assets/images/t-yp.png) no-repeat #b3e8fa center;
|
|
background-size: 40px 40px;
|
|
}
|
|
span {
|
|
position: absolute;
|
|
top: -1px;
|
|
left: -1px;
|
|
display: block;
|
|
width: 20px;
|
|
height: 14px;
|
|
font-size: 12px;
|
|
text-align: center;
|
|
color: #fff;
|
|
line-height: 14px;
|
|
}
|
|
}
|
|
&:nth-child(odd) {
|
|
.edit_img {
|
|
span {
|
|
background: url(~@/assets/images/num_bg2.png) no-repeat;
|
|
background-size: 20px 14px;
|
|
}
|
|
}
|
|
}
|
|
&:nth-child(even) {
|
|
.edit_img {
|
|
span {
|
|
background: url(~@/assets/images/num_bg1.png) no-repeat;
|
|
background-size: 20px 14px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.edit_cont {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
flex: 1;
|
|
padding: 10px 0 8px 0;
|
|
font-size: 14px;
|
|
margin-left: 25px;
|
|
.edit_cont_base {
|
|
display: flex;
|
|
p {
|
|
margin-right: 14px;
|
|
color: #000;
|
|
}
|
|
span {
|
|
display: inline-block;
|
|
padding: 0 5px;
|
|
margin-right: 8px;
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
color: #3a8aeb;
|
|
background: #cde4ff;
|
|
border-radius: 2px;
|
|
}
|
|
}
|
|
.edit_cont_set {
|
|
display: flex;
|
|
font-size: 12px;
|
|
color: #666;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
.set_time {
|
|
display: flex;
|
|
margin-right: 30px;
|
|
span {
|
|
margin-right: 8px;
|
|
}
|
|
em {
|
|
display: block;
|
|
margin-left: 8px;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
.set_animation {
|
|
display: flex;
|
|
margin-right: 30px;
|
|
span.set_item {
|
|
margin-right: 8px;
|
|
}
|
|
::v-deep .el-form-item__content {
|
|
height: 28px;
|
|
}
|
|
::v-deep .el-input__suffix {
|
|
height: 26px;
|
|
}
|
|
}
|
|
.set_audio {
|
|
flex: 1;
|
|
.audio_name {
|
|
margin-right: 10px;
|
|
}
|
|
::v-deep .el-button--small {
|
|
padding: 0 15px;
|
|
border: none;
|
|
}
|
|
}
|
|
::v-deep .el-input__inner {
|
|
text-align: center;
|
|
height: 27px;
|
|
line-height: 27px;
|
|
}
|
|
::v-deep .el-input__icon {
|
|
line-height: 27px;
|
|
}
|
|
}
|
|
.edit_cont_other {
|
|
line-height: 27px;
|
|
font-size: 12px;
|
|
color: #666;
|
|
}
|
|
}
|
|
}
|
|
.release_layer {
|
|
::v-deep .el-dialog__header {
|
|
padding: 0;
|
|
height: 60px;
|
|
}
|
|
.layer_tab_title {
|
|
display: flex;
|
|
span {
|
|
position: relative;
|
|
display: block;
|
|
margin-right: 32px;
|
|
line-height: 60px;
|
|
font-size: 18px;
|
|
color: #666;
|
|
cursor: pointer;
|
|
&.active {
|
|
color: #333;
|
|
}
|
|
&.active::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 3px;
|
|
background: #3a8aeb;
|
|
}
|
|
}
|
|
}
|
|
.tab_item {
|
|
display: flex;
|
|
font-size: 14px;
|
|
color: #666;
|
|
margin: -14px 0 16px 0;
|
|
li {
|
|
margin-right: 30px;
|
|
cursor: pointer;
|
|
span {
|
|
display: inline-block;
|
|
margin-left: 4px;
|
|
}
|
|
&.active {
|
|
color: #3a8aeb;
|
|
}
|
|
}
|
|
}
|
|
.material_list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.item_cont {
|
|
margin: 0 24px 20px 0;
|
|
}
|
|
}
|
|
}
|
|
.theme_cont {
|
|
::v-deep .el-tabs__header {
|
|
padding: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.release_layer {
|
|
::v-deep .el-tabs {
|
|
margin: -26px 0 8px 0;
|
|
}
|
|
::v-deep .el-tabs__nav-wrap::after {
|
|
display: none;
|
|
}
|
|
::v-deep .el-tabs__active-bar {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|