周报章节列表修改

src/views/report/Detail.vue

@@ -374,7 +374,7 @@ const formatTitle=(e)=>{
 
 // 点击播放周报章节音频
 const handlePlayWeekAudio=(e)=>{
-    if(store.state.audioData.reportId==e.report_id){
+    if(store.state.audioData.reportId==info.value.report_info.report_id){
         if(store.state.audioData.paused){
             store.state.audioData.INS.play()
         }else{
@@ -394,13 +394,16 @@ const handlePlayWeekAudio=(e)=>{
     })
     console.log(arr);
     let index=0
-    arr.forEach((_item,idx)=>{
-        if(_item.url==e.video_url) index=idx
-    })
+    if(e){
+        arr.forEach((_item,idx)=>{
+            if(_item.url==e.video_url) index=idx
+        })
+    }
+    
     store.commit('addAudio',{
         list:arr,
         index:index,
-        reportId:e.report_id,
+        reportId:info.value.report_info.report_id,
     })
 }
 
@@ -446,32 +449,49 @@ const closeShowAttentionPop=()=>{
             <div class="content-box">
                 <!-- 晨报、周报章节 -->
                 <div class="chapter-list-wrap" v-if="['晨报','周报'].includes(info.report_info.classify_name_first)">
-                    <div class="top-box" :style="'background-image:url(' + info.report_info.banner_url + ')'">
-                        <div class="title">{{info.report_info.classify_name_first}}</div>
-                        <div class="sub-title">{{info.report_info.title}}</div>
-                        <div :class="['flex right-box',info.report_info.classify_name_first=='晨报'?'right-box-bot':'']">
+                    <div 
+                        :class="['top-box',info.report_info.classify_name_first=='周报'?'top-box-week':'']" 
+                        :style="'background-image:url(' + info.report_info.banner_url + ')'"
+                    >
+                        <div class="time-box">
                             <div class="day">{{moment(info.report_info.publish_time).format('DD')}}</div>
                             <div style="font-size:14px">
                                 <div>{{moment(info.report_info.publish_time).format('ddd')}}</div>
                                 <div>{{moment(info.report_info.publish_time).format('YYYY-MM')}}</div>
                             </div>
                         </div>
+                        <div class="title">{{info.report_info.classify_name_first}}</div>
+                        <div class="sub-title">{{info.report_info.title}}</div>
+                        <!-- 音频设置 -->
                         <el-popover
                             :visible="showAttention&&info.auth_ok"
-                            placement="bottom"
-                            :width="354"
+                            placement="bottom-end"
+                            :width="340"
                         >
                             <template #reference>
-                                <div class="audio-play-list-box" v-if="info.report_info.classify_name_first=='周报'&&info.auth_ok" @click="showAudioPlayListSet=true">播放清单</div>
+                                <img 
+                                    src="@/assets/audio-set.png"
+                                    class="audio-set-box" 
+                                    v-if="info.report_info.classify_name_first=='周报'&&info.auth_ok" @click="showAudioPlayListSet=true" 
+                                />
                             </template>
                             <template #default>
                                 <div ref="audioPlayListPop" style="position: relative;">
-                                    <h2 style="color:#F3A52F;font-size:16px">配置播放清单</h2>
-                                    <p>点击<span style="color:#F3A52F">播放清单</span>，打开章节列表，进行<span style="color:#F3A52F">播放清单配置</span></p>
+                                    <h2 style="color:#F3A52F;font-size:16px">配置播放列表</h2>
+                                    <p>点击<span style="color:#F3A52F">设置</span>，打开<span style="color:#F3A52F">播放列表</span>，进行<span style="color:#F3A52F">关注品种配置</span></p>
                                     <img src="@/assets/icon-close-2.png" alt="" style="width:9px;height:9px;position: absolute;top:-12px;right:10px" @click="closeShowAttention">
                                 </div>
                             </template>
                         </el-popover>
+                        <!-- 播放 按钮 -->
+                        <div 
+                            class="audio-play-box" 
+                            v-if="info.report_info.classify_name_first=='周报'&&info.auth_ok"
+                            @click="handlePlayWeekAudio(null)"
+                        >
+                            <div :class="['icon',$store.state.audioData.reportId==info.report_info.report_id&&!$store.state.audioData.paused?'icon-active':'']"></div>
+                            <span>{{$store.state.audioData.reportId==info.report_info.report_id&&!$store.state.audioData.paused?'暂停':'播放'}}</span>
+                        </div>
                     </div>
                     <div class="list-box">
                         <div class="flex item" v-for="item in info.report_chapter_list" :key="item.report_chapter_id" @click="goChapterDetail(item)">
@@ -669,7 +689,7 @@ const closeShowAttentionPop=()=>{
     <!-- 播放清单设置 -->
     <el-dialog v-model="showAudioPlayListSet" :close-on-click-modal="false" @closed="closeShowAttentionPop" custom-class="audioplaylist-popup" draggable width="40%">
         <template #header>
-            <span style="font-weight:bold">播放清单</span>
+            <span style="font-weight:bold">播放列表</span>
             <span style="margin-left:10px;cursor: pointer;" @click="showAttentionPop=true">
                 <img src="@/assets/icon-atten.png" alt="" style="width:11px;height:11px;margin-right:4px">
                 <span style="color:#999;font-size:12px">操作提示</span>
@@ -684,10 +704,10 @@ const closeShowAttentionPop=()=>{
                 />
             </div>
             <div class="attention-box" ref="attentionPop" v-if="showAttentionPop">
-                <h2 style="color:#F3A52F;font-size:16px">配置播放清单</h2>
+                <h2 style="color:#F3A52F;font-size:16px">配置播放列表</h2>
                 <p>
-                    章节音频开启，表示添加到待播放列表；
-                    点击此处关闭，表示从待播放列表中清除；
+                    品种<span style="color:#F3A52F">开启</span>，表示添加到待播放列表；<br>
+                    品种<span style="color:#F3A52F">关闭</span>，表示从待播放列表中清除；<br>
                     您可以根据自己关注的品种进行选择~
                 </p>
                 <img src="@/assets/icon-close-2.png" alt="" style="width:9px;height:9px;position: absolute;top:15px;right:15px" @click="closeShowAttentionPop">
@@ -813,10 +833,11 @@ const closeShowAttentionPop=()=>{
             .sub-title{
                 margin-top: 8px;
             }
-            .right-box{
+            .time-box{
                 position: absolute;
-                right: 29px;
-                top: 30px;
+                right: 34px;
+                bottom: 30px;
+                display: flex;
                 align-items: center;
                 .day{
                     padding-right: 5px;
@@ -826,21 +847,48 @@ const closeShowAttentionPop=()=>{
                     margin-right: 5px;
                 }
             }
-            .right-box-bot{
-                bottom: 10px;
+            .audio-set-box{
+                width: 46px;
+                height: 28px;
+                position: absolute;
+                top: 20px;
+                right: 34px;
+                cursor: pointer;
             }
-            .audio-play-list-box{
+            .audio-play-box{
+                width: 88px;
+                height: 24px;
+                background-color: #F3A52F;
+                border-radius: 24px;
                 position: absolute;
-                right: 29px;
                 bottom: 20px;
-                background-color: #E3B377;
-                color: #fff;
-                font-size: 12px;
-                width: 96px;
-                line-height: 24px;
-                border-radius: 17px;
-                text-align: center;
+                right: 34px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: #FFFFFF;
                 cursor: pointer;
+                .icon{
+                    width: 14px;
+                    height: 14px;
+                    background-image: url('@/assets/audio-pause-white.png');
+                    background-size: cover;
+                    margin-right: 5px;
+                }
+                .icon-active{
+                    background-image: url('@/assets/audio-doing-white.png');
+                }
+            }
+        }
+        .top-box-week{
+            padding: 20px 34px;
+            .title{
+                margin-top: 10px;
+            }
+            .time-box{
+                position: relative;
+                bottom: 0;
+                right: 0;
             }
         }
         .list-box{