|
|
@@ -0,0 +1,438 @@
|
|
|
+<template>
|
|
|
+ <view class="video-list-page" v-if="isAuth">
|
|
|
+ <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.road_video_id">
|
|
|
+ <view class="title-box">
|
|
|
+ <text class="tag">{{item.chart_permission_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.road_video_id"
|
|
|
+ @ended="handleVideoEnd"
|
|
|
+ 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>
|
|
|
+
|
|
|
+ <!-- 筛选 -->
|
|
|
+ <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>
|
|
|
+
|
|
|
+ <!-- 跳转去提问悬浮按钮 -->
|
|
|
+ <dragButton :existTabBar="true">
|
|
|
+ <navigator url="/pages-question/hasQuestion">
|
|
|
+ <view class="to-question-fixed-box">
|
|
|
+ <image src="@/static/toquestion-icon.png" mode="widthFix" />
|
|
|
+ <text>我要提问</text>
|
|
|
+ </view>
|
|
|
+ </navigator>
|
|
|
+ </dragButton>
|
|
|
+ </view>
|
|
|
+ <noAuth :info="noAuthData" v-else/>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import {apiRoadVideoList,apiVideoPlayLog} from '@/api/roadVideo'
|
|
|
+import {apiGetSceneToParams,apiUserBindPermission} from '@/api/common'
|
|
|
+import noAuth from './components/noAuth.vue'
|
|
|
+import dragButton from '@/components/dragButton/dragButton.vue'
|
|
|
+export default {
|
|
|
+ components:{
|
|
|
+ noAuth,
|
|
|
+ dragButton
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showFilter:false,
|
|
|
+ active:'',
|
|
|
+ options:[],
|
|
|
+ selectPerId:0,
|
|
|
+
|
|
|
+ videoId:0,
|
|
|
+ page:1,
|
|
|
+ pageSize:10,
|
|
|
+ finished:false,
|
|
|
+ list:[],
|
|
|
+
|
|
|
+ curVideoId:0,
|
|
|
+ curVideoIns:null,
|
|
|
+
|
|
|
+ isAuth:true,
|
|
|
+ noAuthData:null,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options){
|
|
|
+ this.init(options)
|
|
|
+ this.getPermissionList()
|
|
|
+ },
|
|
|
+ onShow(){
|
|
|
+ //无权限时刷新列表
|
|
|
+ if(!this.isAuth){
|
|
|
+ this.getList()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onHide(){
|
|
|
+ this.showFilter=false
|
|
|
+ this.curVideoId=0
|
|
|
+ },
|
|
|
+ onShareAppMessage({from,target}) {
|
|
|
+ console.log(from,target);
|
|
|
+ let path='/pages/roadShowVideo/videoList?videoId=0'
|
|
|
+ let title='FICC路演视频'
|
|
|
+ let imageUrl=''
|
|
|
+ if(from=='button'){
|
|
|
+ title=`${target.dataset.item.chart_permission_name}:${target.dataset.item.title}`
|
|
|
+ path=`/pages/roadShowVideo/videoList?videoId=${target.dataset.item.road_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/roadShowVideo/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 apiRoadVideoList({
|
|
|
+ page_index:Number(this.page),
|
|
|
+ page_size:Number(this.pageSize),
|
|
|
+ video_id:Number(this.videoId),
|
|
|
+ chart_permission_id:Number(this.selectPerId)
|
|
|
+ })
|
|
|
+ if(res.code===200){
|
|
|
+ let arr=res.data.list||[]
|
|
|
+ this.list=[...this.list,...arr]
|
|
|
+ if(res.data.paging.is_end){
|
|
|
+ this.finished=true
|
|
|
+ }
|
|
|
+ this.isAuth=true
|
|
|
+ }else if(res.code===403){
|
|
|
+ //无权限用户
|
|
|
+ this.isAuth=false
|
|
|
+ this.noAuthData=res.data
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ //获取筛选项
|
|
|
+ async getPermissionList(){
|
|
|
+ const res=await apiUserBindPermission()
|
|
|
+ if(res.code===200){
|
|
|
+ const result = res.data.permission_list||[];
|
|
|
+ this.options = result.map(item=>{
|
|
|
+ let obj = {};
|
|
|
+ obj.ClassifyName = item.classify_name;
|
|
|
+ obj.Items = item.list.map(_item=>{
|
|
|
+ return {PermissionId:_item.chart_permission_id,PermissionName:_item.chart_permission_name};
|
|
|
+ })
|
|
|
+ return obj;
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ handelClickPlay(item){
|
|
|
+ this.curVideoId=item.road_video_id
|
|
|
+ setTimeout(() => {
|
|
|
+ this.curVideoIns=uni.createVideoContext(this.curVideoId.toString())
|
|
|
+ }, 300);
|
|
|
+ // 记录播放
|
|
|
+ apiVideoPlayLog({video_id:Number(item.road_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;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.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>
|
