hongze_yb_xcx/pages-roadShow/video/search.vue

<template>
    <view class="video-search-page">
        <van-sticky style="background: #fff">
            <view style="padding:30rpx 34rpx">
            <searchBox 
                :focus="focus" 
                placeholder="关键字搜索" 
                @change="onChange"
                @search="onSearch"
            ></searchBox>
            </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.road_video_id">
                <view class="title-box">
                    <text class="tag">{{item.chart_permission_name}}</text>
                    <text class="title">{{item.title}}</text>
                </view>
                <collectBox
                    :type="3"
                    :primaryId="item.road_video_id"
                    :collectId="item.collection_id"
                    class="share-btn collect-btn"
                />
                <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.road_video_id"
                    @ended="handleVideoEnd"
                    @pause="handleVideoPause"
                    @timeupdate="handleTimeUpdate"
                    v-if="item.road_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 class="user-name">{{item.admin_real_name}}</view>
            </view>
        </view>
    </view>
</template>

<script>
import searchBox from '@/components/searchBox/searchBox.vue'
import {apiRoadShowVideoList,apiRoadShowVideoPlayLog} from '@/api/roadShow'
import {apiViewLogUpdate} from '@/api/common'
import collectBox from '@/components/collectBox/collectBox.vue'
export default {
    components: {
        searchBox,
        collectBox
    },
    data() {
        return {
            searchVal:'',
            focus:true,
            list:[],
            finished:false,
            page:1,
            pageSize:10,

            curVideoId:0,
            curVideoIns:null,
            curVideoTime:0,
            videoRecordId:0,
        }
    },
    onReachBottom() {
        if(this.finished) return
        this.page++
        this.getList()
    },
    onShareAppMessage({from,target}) {
        console.log(from,target);
        let path='/pages/roadShow/video/list?videoId=0'
        let title='FICC线上路演'
        let imageUrl=''
        if(from=='button'){
            title=target.dataset.item.title
            path=`/pages/roadShow/video/list?videoId=${target.dataset.item.road_video_id}`
            imageUrl=target.dataset.item.cover_img_url
        }
        return {
            title:title,
            path:path,
            imageUrl:imageUrl
        }
    },
    methods: {
        onChange(e){
            this.searchVal=e
        },

        async onSearch(){
            this.finished=false
            this.page=1
            this.list=[]
            if(!this.searchVal){
                this.finished=true
                return
            }
            this.getList()
        },

        async getList(){
            this.curVideoId=0
            const res=await apiRoadShowVideoList({
                page_index:Number(this.page),
                page_size:Number(this.pageSize),
                keywords:this.searchVal
            })
            if(res.code===200){
                let arr=res.data.list||[]
                this.list=[...this.list,...arr]
                if(res.data.paging.is_end){
                    this.finished=true
                }
            }
        },

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

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

        //时长变化
        handleTimeUpdate(e){
            // console.log(this.curVideoId,e.detail.currentTime);
            this.curVideoTime=e.detail.currentTime
        },

        handleVideoPause(){
            // console.log(`视频 pause---${this.videoRecordId}----${this.curVideoTime}`);
            this.handleUpdateVideoPlayTime()
        },

        // 更新播放时长
        handleUpdateVideoPlayTime(){
            if(!this.videoRecordId) return
            apiViewLogUpdate({
                id:this.videoRecordId,
                stop_seconds:parseInt(this.curVideoTime),
                source:4
            }).then(res=>{
                console.log('更新播放时长成功');
            })
        }
    },
}
</script>

<style>
.van-sticky-wrap--fixed{
  background-color: #fff;
}
page{
    padding-bottom: 0;
}
</style>

<style lang="scss" scoped>
.video-search-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{
                margin-right: 110rpx;
            }
            .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;
            }
            .collect-btn{
                right: 96rpx;
            }
            .tag{
                color: #E4B478;
                background-color: #333;
                padding: 5rpx 20rpx;
                border-radius: 20rpx;
                font-size: 24rpx;
                margin-right: 26rpx;
                max-width: 250rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                display: inline-block;
                vertical-align: middle;
            }
            .title{
                font-size: 32rpx;
                color: #000;
                vertical-align: middle;
            }
            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;
                display: inline-block;
            }
            .user-name{
                float: right;
                font-size: 28rpx;
                color: #999;
            }
        }
    }

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