list.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489
  1. <template>
  2. <view class="video-list-page" v-if="isAuth">
  3. <van-sticky style="background: #fff">
  4. <view class="flex search-wrap">
  5. <view @click="goSearchPage" style="flex:1;margin-right:30rpx" >
  6. <searchBox
  7. placeholder="关键字搜索"
  8. :hasRightBtn="false"
  9. :disabled="true"
  10. ></searchBox>
  11. </view>
  12. <view class="flex" @click="showFilter=true">
  13. <image style="width:50rpx;height:50rpx" src="@/static/filter-icon.png" mode="aspectFill"/>
  14. <text style="color:#E3B377;font-size:32rpx">筛选</text>
  15. </view>
  16. </view>
  17. </van-sticky>
  18. <view class="empty-box" v-if="list.length==0&&finished">
  19. <image
  20. :src="globalImgUrls.activityNoAuth"
  21. mode="widthFix"
  22. />
  23. <view v-if="videoId!=0&&noShareData">
  24. <view>暂无权限查看该视频</view>
  25. <view>请刷新页面后重试</view>
  26. </view>
  27. <view v-else-if="videoId!=0&&!noShareData">
  28. <view>该视频不存在</view>
  29. <view>请刷新页面后重试</view>
  30. </view>
  31. <view v-else>暂无数据</view>
  32. </view>
  33. <view class="list-wrap">
  34. <view class="item" v-for="item in list" :key="item.road_video_id">
  35. <view class="title-box">
  36. <text class="tag">{{item.chart_permission_name}}</text>
  37. <text class="title">{{item.title}}</text>
  38. </view>
  39. <button
  40. class="share-btn"
  41. open-type="share"
  42. :data-item="item">
  43. <image class="share-img" src="@/static/share-icon.png" mode="aspectFill"/>
  44. </button>
  45. <video
  46. autoplay
  47. object-fit="contain"
  48. show-mute-btn
  49. :poster="item.cover_img_url"
  50. :src="item.video_url"
  51. enable-play-gesture
  52. :id="item.road_video_id"
  53. @ended="handleVideoEnd"
  54. @pause="handleVideoPause"
  55. @timeupdate="handleTimeUpdate"
  56. v-if="item.road_video_id==curVideoId"
  57. ></video>
  58. <image @click="handelClickPlay(item)" v-else class="poster" :src="item.cover_img_url" mode="aspectFill" lazy-load/>
  59. <view class="time">发布时间:{{item.publish_time}}</view>
  60. <view class="user-name">{{item.admin_real_name}}</view>
  61. </view>
  62. </view>
  63. <!-- 筛选 -->
  64. <van-popup
  65. :show="showFilter"
  66. position="bottom"
  67. :safe-area-inset-bottom="true"
  68. round
  69. @close="showFilter=false"
  70. >
  71. <view class="filter-wrap" @touchmove.stop>
  72. <view class="flex top">
  73. <text style="color:#000">全部筛选</text>
  74. <text style="color:#E3B377" @click="showFilter=false">取消</text>
  75. </view>
  76. <view class="list-box">
  77. <van-collapse accordion @change="change" :value="active" :border="false">
  78. <van-collapse-item
  79. :title="item.ClassifyName"
  80. :name='item.ClassifyName'
  81. :border="false"
  82. v-for="item in options"
  83. :key="item.ClassifyName"
  84. >
  85. <van-row gutter="5">
  86. <van-col
  87. :span="_item.PermissionName.length>7?16:8"
  88. v-for="_item in item.Items"
  89. :key="_item.PermissionId"
  90. >
  91. <text
  92. :class="['list-item',_item.PermissionId==selectPerId&&'list-item-active']"
  93. @click="handleSelectPerItem(_item)"
  94. >{{_item.PermissionName}}</text>
  95. </van-col>
  96. </van-row>
  97. </van-collapse-item>
  98. </van-collapse>
  99. </view>
  100. </view>
  101. </van-popup>
  102. <!-- 跳转去提问悬浮按钮 -->
  103. <dragButton :existTabBar="true">
  104. <navigator url="/pages-question/hasQuestion">
  105. <view class="to-question-fixed-box">
  106. <image src="@/static/toquestion-icon.png" mode="widthFix" />
  107. <text>我要提问</text>
  108. </view>
  109. </navigator>
  110. </dragButton>
  111. </view>
  112. <noAuth :info="noAuthData" v-else/>
  113. </template>
  114. <script>
  115. import {apiRoadShowVideoList,apiRoadShowVideoPlayLog} from '@/api/roadShow'
  116. import {apiGetSceneToParams,apiUserBindPermission,apiViewLogUpdate} from '@/api/common'
  117. import noAuth from './components/noAuth.vue'
  118. import dragButton from '@/components/dragButton/dragButton.vue'
  119. export default {
  120. components:{
  121. noAuth,
  122. dragButton
  123. },
  124. data() {
  125. return {
  126. showFilter:false,
  127. active:'',
  128. options:[],
  129. selectPerId:0,
  130. videoId:0,
  131. page:1,
  132. pageSize:10,
  133. finished:false,
  134. list:[],
  135. curVideoId:0,
  136. curVideoIns:null,
  137. curVideoTime:0,
  138. videoRecordId:0,
  139. isAuth:true,
  140. noAuthData:null,
  141. noShareData:false,//用户从分享进入没有该分享的视频的权限
  142. }
  143. },
  144. onLoad(options){
  145. this.init(options)
  146. this.getPermissionList()
  147. },
  148. onShow(){
  149. //无权限时刷新列表
  150. if(!this.isAuth){
  151. this.getList()
  152. }
  153. },
  154. onHide(){
  155. this.showFilter=false
  156. // this.curVideoId=0
  157. },
  158. onShareAppMessage({from,target}) {
  159. console.log(from,target);
  160. let path='/pages/roadShow/video/list?videoId=0'
  161. let title='FICC线上路演'
  162. let imageUrl=''
  163. if(from=='button'){
  164. title=target.dataset.item.title
  165. path=`/pages/roadShow/video/list?videoId=${target.dataset.item.road_video_id}`
  166. imageUrl=target.dataset.item.cover_img_url
  167. }
  168. return {
  169. title:title,
  170. path:path,
  171. imageUrl:imageUrl
  172. }
  173. },
  174. onPullDownRefresh(){
  175. this.videoId=0
  176. this.noShareData=false
  177. this.selectPerId=0
  178. this.page=1
  179. this.list=[]
  180. this.finished=false
  181. this.getList()
  182. setTimeout(() => {
  183. uni.stopPullDownRefresh()
  184. }, 1500)
  185. },
  186. onReachBottom() {
  187. if(this.finished) return
  188. this.page++
  189. this.getList()
  190. },
  191. methods: {
  192. async init(options){
  193. if(options.scene){
  194. const resScene=await apiGetSceneToParams({scene_key:options.scene})
  195. if(resScene.code===200){
  196. const obj=JSON.parse(resScene.data)
  197. this.videoId=obj.videoId||0
  198. }
  199. }else{
  200. this.videoId=options.videoId||0
  201. }
  202. this.getList()
  203. },
  204. goSearchPage(){
  205. uni.navigateTo({
  206. url: '/pages-roadShow/video/search',
  207. });
  208. },
  209. change(e){
  210. this.active=e.detail
  211. },
  212. //点击分类某项
  213. handleSelectPerItem(item){
  214. if(this.selectPerId==item.PermissionId){
  215. this.selectPerId=0
  216. }else{
  217. this.selectPerId=item.PermissionId
  218. }
  219. this.videoId=0//重置掉分享进入的状态
  220. this.noShareData=false
  221. this.curVideoId=0
  222. this.page=1
  223. this.list=[]
  224. this.finished=false
  225. this.getList()
  226. this.showFilter=false
  227. },
  228. async getList(){
  229. const res=await apiRoadShowVideoList({
  230. page_index:Number(this.page),
  231. page_size:Number(this.pageSize),
  232. video_id:Number(this.videoId),
  233. chart_permission_id:Number(this.selectPerId)
  234. })
  235. if(res.code===200){
  236. let arr=res.data.list||[]
  237. this.list=[...this.list,...arr]
  238. if(res.data.paging.is_end){
  239. this.finished=true
  240. }
  241. this.isAuth=true
  242. }else if(res.code===403){
  243. //无权限用户
  244. this.isAuth=false
  245. this.noAuthData=res.data
  246. }else if(res.code===4001){
  247. // 用户从分享进入没有这个视频的权限
  248. this.noShareData=true
  249. this.finished=true
  250. }
  251. },
  252. //获取筛选项
  253. async getPermissionList(){
  254. const res=await apiUserBindPermission()
  255. if(res.code===200){
  256. const result = res.data.permission_list||[];
  257. this.options = result.map(item=>{
  258. let obj = {};
  259. obj.ClassifyName = item.classify_name;
  260. obj.Items = item.list.map(_item=>{
  261. return {PermissionId:_item.chart_permission_id,PermissionName:_item.chart_permission_name};
  262. })
  263. return obj;
  264. })
  265. }
  266. },
  267. handelClickPlay(item){
  268. this.curVideoId=item.road_video_id
  269. setTimeout(() => {
  270. this.curVideoIns=uni.createVideoContext(this.curVideoId.toString())
  271. }, 300);
  272. // 记录播放
  273. apiRoadShowVideoPlayLog({video_id:Number(item.road_video_id)}).then(res=>{
  274. if(res.code===200){
  275. console.log('视频埋点成功');
  276. this.videoRecordId=res.data
  277. }
  278. })
  279. },
  280. //视频播放结束
  281. handleVideoEnd(){
  282. // 此处因为如果不调用退出全屏方法 安卓和ios页面均会表现异常,安卓横屏不恢复竖屏,ios底部tabbar渲染异常
  283. this.curVideoIns.exitFullScreen()
  284. setTimeout(() => {
  285. this.curVideoId=0
  286. this.curVideoIns=null
  287. }, 200);
  288. },
  289. //时长变化
  290. handleTimeUpdate(e){
  291. // console.log(this.curVideoId,e.detail.currentTime);
  292. this.curVideoTime=e.detail.currentTime
  293. },
  294. handleVideoPause(){
  295. // console.log(`视频 pause---${this.videoRecordId}----${this.curVideoTime}`);
  296. this.handleUpdateVideoPlayTime()
  297. },
  298. // 更新播放时长
  299. handleUpdateVideoPlayTime(){
  300. if(!this.videoRecordId) return
  301. apiViewLogUpdate({
  302. id:this.videoRecordId,
  303. stop_seconds:parseInt(this.curVideoTime),
  304. source:4
  305. }).then(res=>{
  306. console.log('更新播放时长成功');
  307. })
  308. }
  309. },
  310. }
  311. </script>
  312. <style lang='scss'>
  313. .search-wrap .van-search{
  314. padding: 0 !important;
  315. }
  316. .video-list-page{
  317. .filter-wrap{
  318. .van-cell__title, .van-cell__value{
  319. flex: none !important;
  320. }
  321. .van-cell:after{
  322. border: none !important;
  323. }
  324. .van-cell__title{
  325. font-size: 14px;
  326. }
  327. .van-hairline--top:after{
  328. border-top-width: 0 !important;
  329. }
  330. }
  331. }
  332. </style>
  333. <style lang="scss" scoped>
  334. .video-list-page{
  335. .search-wrap {
  336. background-color: #fff;
  337. padding: 30rpx 34rpx;
  338. align-items: center;
  339. .menu-icon{
  340. width: 52rpx;
  341. height: 40rpx;
  342. display: block;
  343. flex-shrink: 0;
  344. margin-left: 30rpx;
  345. }
  346. }
  347. .list-wrap{
  348. .item{
  349. border-top: 10rpx solid #f9f9f9;
  350. padding: 30rpx 34rpx;
  351. position: relative;
  352. .title-box{
  353. padding-right: 40rpx;
  354. }
  355. .share-btn{
  356. position: absolute;
  357. top: 34rpx;
  358. right: 34rpx;
  359. background-color: transparent;
  360. width: 36rpx;
  361. height: 36rpx;
  362. line-height: 1;
  363. padding: 0;
  364. &::after{
  365. border: none;
  366. }
  367. }
  368. .share-img{
  369. width: 32.5rpx;
  370. height: 32rpx;
  371. }
  372. .tag{
  373. color: #E4B478;
  374. background-color: #333;
  375. padding: 5rpx 20rpx;
  376. border-radius: 20rpx;
  377. font-size: 24rpx;
  378. margin-right: 26rpx;
  379. max-width: 250rpx;
  380. overflow: hidden;
  381. text-overflow: ellipsis;
  382. white-space: nowrap;
  383. display: inline-block;
  384. vertical-align: middle;
  385. }
  386. .title{
  387. font-size: 32rpx;
  388. color: #000;
  389. vertical-align: middle;
  390. }
  391. video{
  392. width: 100%;
  393. height: 400rpx;
  394. margin: 30rpx 0 20rpx 0;
  395. border-radius: 20rpx;
  396. }
  397. .poster{
  398. width: 100%;
  399. height: 400rpx;
  400. margin: 30rpx 0 20rpx 0;
  401. border-radius: 20rpx;
  402. position: relative;
  403. &::after{
  404. content:'';
  405. display: block;
  406. position: absolute;
  407. width: 120rpx;
  408. height: 120rpx;
  409. top: 50%;
  410. left: 50%;
  411. transform: translate(-50%,-50%);
  412. background-image: url('@/static/video-play-btn.png');
  413. background-size: cover;
  414. }
  415. }
  416. .time{
  417. font-size: 28rpx;
  418. color: #999;
  419. display: inline-block;
  420. }
  421. .user-name{
  422. float: right;
  423. font-size: 28rpx;
  424. color: #999;
  425. }
  426. }
  427. }
  428. .empty-box{
  429. text-align: center;
  430. font-size: 32rpx;
  431. color: #999;
  432. padding-top: 150rpx;
  433. image{
  434. width: 80vw;
  435. margin-bottom: 57rpx;
  436. }
  437. }
  438. }
  439. .filter-wrap{
  440. background-color: #fff;
  441. padding-top: 53rpx;
  442. padding-bottom: 100rpx;
  443. .top{
  444. font-size: 32rpx;
  445. justify-content: space-between;
  446. margin-bottom: 40rpx;
  447. padding: 0 34rpx;
  448. }
  449. .list-box{
  450. min-height: 30vh;
  451. max-height: 60vh;
  452. .list-item{
  453. display: block;
  454. margin: 10rpx;
  455. height: 76rpx;
  456. line-height: 76rpx;
  457. color: #000;
  458. background: #F6F6F6;
  459. border-radius: 4px 4px 4px 4px;
  460. text-align: center;
  461. }
  462. .list-item-active{
  463. background-color: #FAEEDE;
  464. }
  465. }
  466. }
  467. </style>