周报章节列表增加音频播放功能

api/report.js

@@ -134,4 +134,13 @@ export const apiReportListForVariety=params=>{
  */
 export const apiReportClassifyMenuList=params=>{
     return httpGet('/classify/menu/list',params)
+}
+
+/**
+ * 设置周报音频播放的播放清单
+ * @param type_id 章节id
+ * @param is_close 是否关闭:1,关闭,0:不关闭
+ */
+export const apiReportChapterAudioSet=params=>{
+    return httpPost('/report/report_chapter/set',params)
 }

pages-report/audioPlayListSet.vue

@@ -0,0 +1,128 @@
+<template>
+    <view class="audio-play-list-set-page" @click.self="closeAttention">
+        <view class="opt-intro-box" @click.stop="showAttention=true">
+            <image class="icon" src="./static/icon-1.png" mode="aspectFill"/>
+            <text>操作说明</text>
+        </view>
+          
+        <view class="item" v-for="item in list" :key="item.report_chapter_id">
+            <view>{{item.report_chapter_type_name}}</view>
+            <switch :checked="item.is_close==0?true:false" color="#E3B377" style="transform:scale(0.9)" @change="handleStatusChange(item)"/>
+        </view>
+        <view class="attention-box" v-if="showAttention">
+            <view>
+                <text>章节音频</text>
+                <text style="color:#E3B377">开启</text>
+                <text>，表示添加到待播放列表；</text>
+            </view>
+            <view>
+                <text style="color:#E3B377">点击此处关闭</text>
+                <text>，表示从待播放列表中清除；</text>
+            </view>
+            <view>您可以根据自己关注的品种进行选择~</view>
+            <image class="close-icon" src="./static/close2.png" mode="aspectFill" @click="closeAttention"/>
+        </view>
+          
+          
+    </view>
+</template>
+
+<script>
+import {apiReportDetail,apiReportChapterAudioSet} from '@/api/report'
+export default {
+    data() {
+        return {
+            id:0,
+            list:[],
+            showAttention:false,
+        }
+    },
+    onLoad(opt){
+        this.id=opt.reportId||0
+        this.getDetail()
+        const show=uni.getStorageSync('showAttention')||'';
+        if(!show){
+            this.showAttention=true
+        }
+    },
+    methods: {
+        getDetail(){
+            apiReportDetail({report_id:Number(this.id)}).then(res=>{
+                if(res.code===200){
+                    this.list=res.data.report_chapter_list||[]
+                }
+            })
+        },
+        closeAttention(){
+            uni.setStorageSync('showAttention', 'true');
+            this.showAttention=false
+        },
+
+        handleStatusChange(item){
+            console.log(item);
+            apiReportChapterAudioSet({
+                type_id:item.type_id,
+                is_close:item.is_close==0?1:0
+            }).then(res=>{
+                if(res.code==200){
+                    item.is_close=item.is_close==0?1:0
+                }
+            })
+        }
+    },
+
+}
+</script>
+
+<style lang="scss" scoped>
+.audio-play-list-set-page{
+    .item{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: 1px solid #e5e5e5;
+        padding: 25rpx 34rpx;
+    }
+    .attention-box{
+        position: fixed;
+        top: 300rpx;
+        right: 40rpx;
+        z-index: 99;
+        box-shadow: 0px 0px 10rpx 4rpx rgba(0, 0, 0, 0.16);
+        background-color: #fff;
+        padding: 20rpx 54rpx 20rpx 20rpx;
+        border-radius: 4rpx;
+        .close-icon{
+            position: absolute;
+            top: 50%;
+            right: 20rpx;
+            transform: translateY(-50%);
+            width: 24rpx;
+            height: 24rpx;
+        }
+        &::after{
+            content: '';
+            display: block;
+            width: 0;
+            height: 0;
+            border: 10rpx solid transparent;
+            border-bottom-color: #fff;
+            position: absolute;
+            top: -20rpx;
+            right: 20rpx;
+        }
+    }
+    .opt-intro-box{
+        display: flex;
+        justify-content: flex-end;
+        padding-right: 34rpx;
+        padding-top: 20rpx;
+        padding-bottom: 20rpx;
+        border-bottom: 1px solid #e5e5e5;
+        .icon{
+            width: 40rpx;
+            height: 40rpx;
+        }
+    }
+}
+</style>

pages.json

@@ -290,6 +290,12 @@
 				//报告详情背景音频播放页
 				{
 					"path": "reportBgAudio"
+				},
+				{
+					"path": "audioPlayListSet",
+					"style":{
+						"navigationBarTitleText": "播放清单"
+					}
 				}
 			]
 		},