hongze_yb_xcx/pages/video/videoList.vue

<template>
    <view class="video-list-page">
        <van-sticky style="background: #fff">
            <view class="flex search-wrap">
                <view @click="goSearchPage" style="flex:1;margin-right:30rpx" >
                    <searchBox 
                        placeholder="关键字搜索" 
                        :hasRightBtn="false" 
                        :disabled="true"
                    ></searchBox>
                </view>
                <view class="flex" @click="showFilter=true">
                    <image style="width:50rpx;height:50rpx" src="@/static/filter-icon.png" mode="aspectFill"/>
                    <text style="color:#E3B377;font-size:32rpx">筛选</text>
                </view>
            </view>
        </van-sticky>
        <view class="empty-box" v-if="list.length==0&&finished">
            <image
                :src="globalImgUrls.activityNoAuth"
                mode="widthFix"
            />
            <view>暂无数据</view>
        </view>
        <view class="list-wrap">
            <view class="item" v-for="item in list" :key="item.community_video_id">
                <view class="title-box">
                    <text class="tag">{{item.variety_tag_name}}</text>
                    <text class="title">{{item.title}}</text>
                </view>
                <button 
                    class="share-btn" 
                    open-type="share" 
                    :data-item="item">
                    <image class="share-img" src="@/static/share-icon.png" mode="aspectFill"/>
                </button>
                <video
                    autoplay
                    object-fit="contain"
                    show-mute-btn
                    :poster="item.cover_img_url"
                    :src="item.video_url"
                    enable-play-gesture
                    :id="item.community_video_id"
                    @ended="handleVideoEnd"
                    v-if="item.community_video_id==curVideoId"
                ></video>
                <image @click="handelClickPlay(item)" v-else class="poster" :src="item.cover_img_url" mode="aspectFill" lazy-load/>
                <view class="time">发布时间：{{item.publish_time}}</view>
            </view>
        </view>

        <!-- 筛选 -->
        <van-popup 
            :show="showFilter" 
            position="bottom" 
            :safe-area-inset-bottom="true" 
            round 
            @close="showFilter=false"
        >
            <view class="filter-wrap">
                <view class="flex top">
                    <text style="color:#000">全部筛选</text>
                    <text style="color:#E3B377" @click="showFilter=false">取消</text>
                </view>
                <view class="list-box">
                    <van-collapse accordion @change="change" :value="active" :border="false">
                        <van-collapse-item 
                            :title="item.ClassifyName" 
                            :name='item.ClassifyName' 
                            :border="false"
                            v-for="item in options"
                            :key="item.ClassifyName"
                        >
                            <van-row gutter="5">
                                <van-col 
                                    :span="_item.PermissionName.length>7?16:8" 
                                    v-for="_item in item.Items" 
                                    :key="_item.PermissionId"
                                >
                                    <text 
                                        :class="['list-item',_item.PermissionId==selectPerId&&'list-item-active']" 
                                        @click="handleSelectPerItem(_item)"
                                    >{{_item.PermissionName}}</text>
                                </van-col>
                            </van-row>
                        </van-collapse-item>
                    </van-collapse>
                </view>
            </view>
        </van-popup>
    </view>
    
</template>
<script>
import {apiVideoList,apiVideoPlayLog} from '@/api/video'
import {apiOptionList} from '@/api/question'
import {apiGetSceneToParams,apiGetTagTree} from '@/api/common'
export default {
    data() {
        return {
            showFilter:false,
            active:'',
            options:[],
            selectPerId:0,

            videoId:0,
            page:1,
            pageSize:10,
            finished:false,
            list:[],

            curVideoId:0,
            curVideoIns:null
        }
    },
    onLoad(options){
        this.init(options)
        this.getPermissionList()
    },
    onHide(){
        this.showFilter=false
        this.curVideoId=0
    },
    onShareAppMessage({from,target}) {
        console.log(from,target);
        let path='/pages/video/videoList?videoId=0'
        let title='FICC视频社区'
        let imageUrl=''
        if(from=='button'){
            title=`${target.dataset.item.chart_permission_name}:${target.dataset.item.title}`
            path=`/pages/video/videoList?videoId=${target.dataset.item.community_video_id}`
            imageUrl=target.dataset.item.cover_img_url
        }
        return {
            title:title,
            path:path,
            imageUrl:imageUrl
        }
    },
    onPullDownRefresh(){
        this.videoId=0
        this.selectPerId=0
        this.page=1
        this.list=[]
        this.finished=false
        this.getList()
        setTimeout(() => {
            uni.stopPullDownRefresh()
        }, 1500)
    },
    onReachBottom() {
        if(this.finished) return
        this.page++
        this.getList()
    },
    methods: {
        async init(options){
            if(options.scene){
                const resScene=await apiGetSceneToParams({scene_key:options.scene})
                if(resScene.code===200){
                    const obj=JSON.parse(resScene.data)
                    this.videoId=obj.videoId||0
                }
            }else{
                this.videoId=options.videoId||0
            }
            this.getList()
        },

        goSearchPage(){
            uni.navigateTo({
                url: '/pages/video/videoSearch',
            });
        },

        change(e){
            this.active=e.detail
        },

        //点击分类某项
        handleSelectPerItem(item){
            if(this.selectPerId==item.PermissionId){
                this.selectPerId=0
            }else{
                this.selectPerId=item.PermissionId
            }
            
            this.videoId=0//重置掉分享进入的状态
            this.curVideoId=0
            this.page=1
            this.list=[]
            this.finished=false
            this.getList()
            this.showFilter=false
        },

        async getList(){
            const res=await apiVideoList({
                page_index:Number(this.page),
                page_size:Number(this.pageSize),
                video_id:Number(this.videoId),
                variety_tag_id:Number(this.selectPerId)
            })
            if(res.code===200){
                let arr=res.data||[]
                this.list=[...this.list,...arr]
                if(arr.length===0){
                    this.finished=true
                }
            }
        },

        //获取筛选项
        async getPermissionList(){
            /* const res=await apiOptionList()
            if(res.code===200){
                this.options=res.data
            } */
            const res=await apiGetTagTree()
            if(res.code===200){
                const result = res.data||[];
                this.options = result.map(item=>{
                    let obj = {};
                    obj.ClassifyName = item.classify_name;
                    obj.Items = item.tags.map(_item=>{
                        return {PermissionId:_item.tag_id,PermissionName:_item.tag_name,PriceDrivenState:_item.price_driven_state};
                    })
                    return obj;
                })
            }
        },

        handelClickPlay(item){
            this.curVideoId=item.community_video_id
            setTimeout(() => {
                this.curVideoIns=uni.createVideoContext(this.curVideoId.toString())
            }, 300);
            // 记录播放
            apiVideoPlayLog({video_id:Number(item.community_video_id)}).then(res=>{
                if(res.code===200){
                    console.log('视频埋点成功');
                }
            })
        },

        //视频播放结束
        handleVideoEnd(){
            // 此处因为如果不调用退出全屏方法 安卓和ios页面均会表现异常，安卓横屏不恢复竖屏，ios底部tabbar渲染异常
            this.curVideoIns.exitFullScreen()
            setTimeout(() => {
                this.curVideoId=0
                this.curVideoIns=null
            }, 200);
        }
    },
}
</script>

<style lang='scss'>
.search-wrap .van-search{
    padding: 0 !important;
}

.video-list-page{
    .filter-wrap{
        .van-cell__title, .van-cell__value{
            flex: none !important;
        }
        .van-cell:after{
            border: none !important;
        }
        .van-cell__title{
            font-size: 14px;
        }
        .van-hairline--top:after{
            border-top-width: 0 !important;
        }
    }
}
</style>
<style lang="scss" scoped>
.video-list-page{
    .search-wrap {
        background-color: #fff;
        padding: 30rpx 34rpx;
        align-items: center;
        .menu-icon{
            width: 52rpx;
            height: 40rpx;
            display: block;
            flex-shrink: 0;
            margin-left: 30rpx;
        }
    } 
    
    .list-wrap{
        .item{
            border-top: 10rpx solid #f9f9f9;
            padding: 30rpx 34rpx;
            position: relative;
            .title-box{
                padding-right: 40rpx;
            }
            .share-btn{
                position: absolute;
                top: 34rpx;
                right: 34rpx;
                background-color: transparent;
                width: 36rpx;
                height: 36rpx;
                line-height: 1;
                padding: 0;
                &::after{
                    border: none;
                }
            }
            .share-img{
                width: 32.5rpx;
                height: 32rpx;
            }
            .tag{
                color: #E4B478;
                background-color: #333;
                padding: 5rpx 20rpx;
                border-radius: 20rpx;
                font-size: 24rpx;
                margin-right: 26rpx;
            }
            .title{
                font-size: 32rpx;
                color: #000;
            }
            video{
                width: 100%;
                height: 400rpx;
                margin: 30rpx 0 20rpx 0;
                border-radius: 20rpx;
            }
            .poster{
                width: 100%;
                height: 400rpx;
                margin: 30rpx 0 20rpx 0;
                border-radius: 20rpx;
                position: relative;
                &::after{
                    content:'';
                    display: block;
                    position: absolute;
                    width: 120rpx;
                    height: 120rpx;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    background-image: url('@/static/video-play-btn.png');
                    background-size: cover;
                }
            }
            .time{
                font-size: 28rpx;
                color: #999;
            }
        }
    }

    .empty-box{
        text-align: center;
        font-size: 32rpx;
        color: #999;
        padding-top: 150rpx;
        image{
            width: 80vw;
            margin-bottom: 57rpx;
        }
    }
}

.filter-wrap{
    background-color: #fff;
    padding-top: 53rpx;
    padding-bottom: 100rpx;
    .top{
        font-size: 32rpx;
        justify-content: space-between;
        margin-bottom: 40rpx;
        padding: 0 34rpx;
    }
    .list-box{
        min-height: 30vh;
        max-height: 60vh;
        .list-item{
            display: block;
            margin: 10rpx;
            height: 76rpx;
            line-height: 76rpx;
            color: #000;
            background: #F6F6F6;
            border-radius: 4px 4px 4px 4px;
            text-align: center;
        }
        .list-item-active{
            background-color: #FAEEDE;
        }
    }
}
</style>