音频选择修改

src/layout/components/Sidebar/Link.vue

@@ -2,7 +2,7 @@
 <template>
 
   <component v-bind="linkProps(to)">
-    <slot />
+    <slot></slot>
   </component>
 </template>
 

src/layout/components/Sidebar/Logo.vue

@@ -2,10 +2,10 @@
   <div class="sidebar-logo-container" :class="{'collapse':collapse}">
     <transition name="sidebarLogoFade">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo">
+        <img v-if="logo" :src="logo" class="sidebar-logo" />
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo">
+        <img v-if="logo" :src="logo" class="sidebar-logo" />
       </router-link>
     </transition>
   </div>

src/views/immediateRelease/index.vue

@@ -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,14 +546,19 @@ export default {
       }
     },
     // 多选btn
-    multiSelectBtn() {
+    multiSelectBtn(type) {
       this.isMultiSelected = !this.isMultiSelected
       if (this.isMultiSelected) {
         this.mulitText = '取消'
+      } else {
+        if (type === 'audio') {
+          this.mulitText = '选择'
+          this.audioChecked = null
         } else {
           this.mulitText = '多选'
           this.uploadContentIds = []
         }
+      }
     },
     // 多选选中
     selectedListItem(id) {
@@ -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;
     }