hongze_yb_xcx/pages-report/audioPlayListSet.vue

<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>