hongze_yb_xcx/pages-user/myCollect.vue

<template>
    <view class="my-collect-page">
        <view :class="['top-wrap',!(!isSearchRes&&!keywords)?'top-wrap-ptb':'']">
            <searchBox placeholder="搜索" @change="onChange" @search="onSearch" />
            <view class="tab-box" v-show="!isSearchRes&&!keywords">
                <text 
                    :class="['tab-item',active==item.val?'tab-active':'']" 
                    v-for="item in opts" 
                    :key="item.val"
                    @click="handleChangeOpt(item.val)"
                >{{item.name}}</text>
            </view>
        </view>
        <view class="list-wrap">
            <view class="item" v-for="(item,index) in list" :key="item.CollectionId">
                <view class="c-time">{{item.CreateTime|formatCTime}}</view>
                <van-swipe-cell :right-width="90">
                    <!-- 视频类别样式 -->
                    <view class="flex video-box" v-if="[2,3].includes(item.CollectionType)" @click="goDetail(item)">
                        <image class="img" :src="item.ImgUrl" mode="aspectFill" lazy-load="true"/>
                        <view class="con">
                            <view class="title" v-html="item.Title"></view>
                            <view class="author">{{item.Author}}</view>
                            <view class="time">发布时间：{{item.PublishTime}}</view>
                        </view>
                    </view>
                    <!-- 报告类型样式 -->
                    <view class="report-box" v-if="item.CollectionType==1" @click="goDetail(item)">
                        <view class="title" v-html="item.Title"></view>
                        <view class="con">
                            <text v-if="item.ClassifyName">#{{item.ClassifyName}}</text>
                            <text v-if="item.ClassifySecondName" style="margin-left:20rpx">#{{item.ClassifySecondName}}</text>
                            <view class="time">发布时间：{{item.PublishTime}}</view>
                        </view>
                    </view>
                    <view slot="right" class="cancel-btn" @click="handleCancel(item,index)">取消收藏</view>
                </van-swipe-cell>
            </view>
              
        </view>
        <view class="report-empty-box" v-if="finished&&list.length==0">
            <image :src="globalImgUrls.chartEmpty" mode="widthFix" />
            <view>暂无相关收藏内容</view>
        </view>
        
        <van-dialog id="van-dialog" />
    </view>
</template>

<script>
import searchBox from "@/components/searchBox/searchBox.vue";
import {apiMyCollectList,apiCancelCollect} from '@/api/user'
const dayjs=require('@/utils/dayjs.min')
export default {
    components: {
        searchBox
    },
    filters: {
        formatCTime(e){
            if(dayjs().isSame(e,'year')){//当年
                return dayjs(e).format('MM-DD')
            }else{
                return dayjs(e).format('YYYY-MM-DD')
            }
        }
    },
    data() {
        return {
            opts:[
                {
                    name:'全部',
                    val:0,
                },
                {
                    name:'研报',
                    val:1,
                },
                {
                    name:'线上路演',
                    val:3,
                },
                {
                    name:'视频社区',
                    val:2,
                },
            ],
            active:0,

            page:1,
            pageSize:20,
            finished:false,
            list:[],
            keywords:'',
            isSearchRes:false
        }
    },
    onLoad(){
        this.getList()
    },
    onPullDownRefresh() {
        this.keywords=''
        this.page=1
        this.list=[]
        this.finished=false
        this.isSearchRes=false
        this.getList()
        setTimeout(() => {
            uni.stopPullDownRefresh()
        }, 1500);
    },
    onReachBottom() {
        if(this.finished) return
        this.page++
        this.getList()
    },
    methods: {
        onChange(e){
            this.keywords=e
            this.finished=false
            this.list=[]
        },

        onSearch(){
            this.active=0
            this.page=1
            this.finished=false
            this.list=[]
            if(this.keywords){
                this.isSearchRes=true
            }else{
                this.isSearchRes=false
            }
            
            this.getList()
        },

        handleChangeOpt(e){
            this.active=e
            this.page=1
            this.finished=false
            this.list=[]
            this.keywords=''
            this.isSearchRes=false
            this.getList()
        },

        async getList(){
            const res=await apiMyCollectList({
                curr_page:this.page,
                page_size:this.pageSize,
                keywords:this.keywords,
                from_type:this.active
            })
            if(res.code===200){
                const arr=res.data.list
                this.list=[...this.list,...arr]
                this.finished=res.data.paging.is_end
            }
        },

        handleCancel(item,index){
            this.$dialog.confirm({
                title:'',
                message: '确认取消收藏？',
                confirmButtonText:'确定'
            }).then(()=>{
                apiCancelCollect({collection_id:Number(item.CollectionId)}).then(res=>{
                    if(res.code===200){
                        uni.showToast({
                            title:'操作成功',
                            icon:'none'
                        })
                        this.list.splice(index,1)
                    }
                })
            }).catch(()=>{})
        },

        goDetail(item){
            if(item.CollectionType==1){// 报告
                if(item.ExtendId>0){
                    uni.navigateTo({url: `/pages-report/chapterDetail?chapterId=${item.ExtendId}`})
                }else{
                    uni.navigateTo({url:'/pages-report/reportDetail?reportId='+item.PrimaryId})
                }
            }else if(item.CollectionType==2){//视频社区
                //跳转tabbar不允许带参数 所以用relaunch
                uni.reLaunch({url:'/pages/video/videoList?videoId='+item.PrimaryId})
            }else if(item.CollectionType==3){//路演视频
                uni.reLaunch({url:'/pages/roadShow/video/list?videoId='+item.PrimaryId})
            }
        }

    },
}
</script>
<style lang="scss">
page{
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}
</style>

<style lang="scss" scoped>
.top-wrap{
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background-color: #fff;
    padding: 40rpx 34rpx 0 34rpx;
    box-shadow: 0px 4rpx 4rpx 0px rgba(198,198,198,0.25);
    &.top-wrap-ptb{
        box-shadow: none;
        padding-bottom: 20rpx;
    }
    .tab-box{
        padding-top: 40rpx;
        padding-bottom: 10rpx;
        .tab-item{
            display: inline-block;
            margin-right: 60rpx;
            color: #666;
            font-size: 32rpx;
        }
        .tab-active{
            color: #333;
            position: relative;
            &::after{
                position: absolute;
                content: '';
                display: block;
                width: 36rpx;
                height: 6rpx;
                background: #E3B377;
                border-radius: 3rpx;
                bottom: -10rpx;
                left: 50%;
                transform: translateX(-50%);
            }
        }
    }
}
.list-wrap{
    padding: 34rpx;
    .item{
        padding: 30rpx 0;
        border-bottom: 1px solid #E5E5E5;
        .c-time{
            display: inline-block;
            font-size: 28rpx;
            padding: 5rpx 10rpx;
            color: #666;
            background-color: #f6f6f6;
            border-radius: 3rpx;
            margin-bottom: 12rpx;
        }
        .video-box{
            .img{
                width: 231rpx;
                height: 134rpx;
                flex-shrink: 0;
                border-radius: 4rpx;
                margin-right: 20rpx;
            }
            .con{
                flex: 1;
            }
            .title{
                font-size: 32rpx;
                color: #000;
                // min-height: 80rpx;
            }
            .author{
                color: #666;
                min-height: 30rpx;
                margin: 10rpx 0 20rpx 0;
            }
            .time{
                color: #666;
            }
        }

        .report-box{
            .title{
                line-height: 1.7;
                margin: 12rpx 0;
            }
            .con{
                text{
                    display: inline-block;
                    color: #666;
                }
                .time{
                    float: right;
                }
            }
        }

        .cancel-btn{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: #F3A52F;
            border-radius: 25px;
            color: #fff;
            font-size: 16px;
            width: 84px;
            text-align: center;
            line-height: 30px;
        }
    }
}
</style>