videoList.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406
  1. <template>
  2. <view class="video-list-page">
  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>暂无数据</view>
  24. </view>
  25. <view class="list-wrap">
  26. <view class="item" v-for="item in list" :key="item.community_video_id">
  27. <view class="title-box">
  28. <text class="tag">{{item.variety_tag_name}}</text>
  29. <text class="title">{{item.title}}</text>
  30. </view>
  31. <button
  32. class="share-btn"
  33. open-type="share"
  34. :data-item="item">
  35. <image class="share-img" src="@/static/share-icon.png" mode="aspectFill"/>
  36. </button>
  37. <video
  38. autoplay
  39. object-fit="contain"
  40. show-mute-btn
  41. :poster="item.cover_img_url"
  42. :src="item.video_url"
  43. enable-play-gesture
  44. :id="item.community_video_id"
  45. @ended="handleVideoEnd"
  46. v-if="item.community_video_id==curVideoId"
  47. ></video>
  48. <image @click="handelClickPlay(item)" v-else class="poster" :src="item.cover_img_url" mode="aspectFill" lazy-load/>
  49. <view class="time">发布时间:{{item.publish_time}}</view>
  50. </view>
  51. </view>
  52. <!-- 筛选 -->
  53. <van-popup
  54. :show="showFilter"
  55. position="bottom"
  56. :safe-area-inset-bottom="true"
  57. round
  58. @close="showFilter=false"
  59. >
  60. <view class="filter-wrap">
  61. <view class="flex top">
  62. <text style="color:#000">全部筛选</text>
  63. <text style="color:#E3B377" @click="showFilter=false">取消</text>
  64. </view>
  65. <view class="list-box">
  66. <van-collapse accordion @change="change" :value="active" :border="false">
  67. <van-collapse-item
  68. :title="item.ClassifyName"
  69. :name='item.ClassifyName'
  70. :border="false"
  71. v-for="item in options"
  72. :key="item.ClassifyName"
  73. >
  74. <van-row gutter="5">
  75. <van-col
  76. :span="_item.PermissionName.length>7?16:8"
  77. v-for="_item in item.Items"
  78. :key="_item.PermissionId"
  79. >
  80. <text
  81. :class="['list-item',_item.PermissionId==selectPerId&&'list-item-active']"
  82. @click="handleSelectPerItem(_item)"
  83. >{{_item.PermissionName}}</text>
  84. </van-col>
  85. </van-row>
  86. </van-collapse-item>
  87. </van-collapse>
  88. </view>
  89. </view>
  90. </van-popup>
  91. </view>
  92. </template>
  93. <script>
  94. import {apiVideoList,apiVideoPlayLog} from '@/api/video'
  95. import {apiOptionList} from '@/api/question'
  96. import {apiGetSceneToParams,apiGetTagTree} from '@/api/common'
  97. export default {
  98. data() {
  99. return {
  100. showFilter:false,
  101. active:'',
  102. options:[],
  103. selectPerId:0,
  104. videoId:0,
  105. page:1,
  106. pageSize:10,
  107. finished:false,
  108. list:[],
  109. curVideoId:0,
  110. curVideoIns:null
  111. }
  112. },
  113. onLoad(options){
  114. this.init(options)
  115. this.getPermissionList()
  116. },
  117. onHide(){
  118. this.showFilter=false
  119. this.curVideoId=0
  120. },
  121. onShareAppMessage({from,target}) {
  122. console.log(from,target);
  123. let path='/pages/video/videoList?videoId=0'
  124. let title='FICC视频社区'
  125. let imageUrl=''
  126. if(from=='button'){
  127. title=`${target.dataset.item.chart_permission_name}:${target.dataset.item.title}`
  128. path=`/pages/video/videoList?videoId=${target.dataset.item.community_video_id}`
  129. imageUrl=target.dataset.item.cover_img_url
  130. }
  131. return {
  132. title:title,
  133. path:path,
  134. imageUrl:imageUrl
  135. }
  136. },
  137. onPullDownRefresh(){
  138. this.videoId=0
  139. this.selectPerId=0
  140. this.page=1
  141. this.list=[]
  142. this.finished=false
  143. this.getList()
  144. setTimeout(() => {
  145. uni.stopPullDownRefresh()
  146. }, 1500)
  147. },
  148. onReachBottom() {
  149. if(this.finished) return
  150. this.page++
  151. this.getList()
  152. },
  153. methods: {
  154. async init(options){
  155. if(options.scene){
  156. const resScene=await apiGetSceneToParams({scene_key:options.scene})
  157. if(resScene.code===200){
  158. const obj=JSON.parse(resScene.data)
  159. this.videoId=obj.videoId||0
  160. }
  161. }else{
  162. this.videoId=options.videoId||0
  163. }
  164. this.getList()
  165. },
  166. goSearchPage(){
  167. uni.navigateTo({
  168. url: '/pages/video/videoSearch',
  169. });
  170. },
  171. change(e){
  172. this.active=e.detail
  173. },
  174. //点击分类某项
  175. handleSelectPerItem(item){
  176. if(this.selectPerId==item.PermissionId){
  177. this.selectPerId=0
  178. }else{
  179. this.selectPerId=item.PermissionId
  180. }
  181. this.videoId=0//重置掉分享进入的状态
  182. this.curVideoId=0
  183. this.page=1
  184. this.list=[]
  185. this.finished=false
  186. this.getList()
  187. this.showFilter=false
  188. },
  189. async getList(){
  190. const res=await apiVideoList({
  191. page_index:Number(this.page),
  192. page_size:Number(this.pageSize),
  193. video_id:Number(this.videoId),
  194. variety_tag_id:Number(this.selectPerId)
  195. })
  196. if(res.code===200){
  197. let arr=res.data||[]
  198. this.list=[...this.list,...arr]
  199. if(arr.length===0){
  200. this.finished=true
  201. }
  202. }
  203. },
  204. //获取筛选项
  205. async getPermissionList(){
  206. /* const res=await apiOptionList()
  207. if(res.code===200){
  208. this.options=res.data
  209. } */
  210. const res=await apiGetTagTree()
  211. if(res.code===200){
  212. const result = res.data||[];
  213. this.options = result.map(item=>{
  214. let obj = {};
  215. obj.ClassifyName = item.classify_name;
  216. obj.Items = item.tags.map(_item=>{
  217. return {PermissionId:_item.tag_id,PermissionName:_item.tag_name,PriceDrivenState:_item.price_driven_state};
  218. })
  219. return obj;
  220. })
  221. }
  222. },
  223. handelClickPlay(item){
  224. this.curVideoId=item.community_video_id
  225. setTimeout(() => {
  226. this.curVideoIns=uni.createVideoContext(this.curVideoId.toString())
  227. }, 300);
  228. // 记录播放
  229. apiVideoPlayLog({video_id:Number(item.community_video_id)}).then(res=>{
  230. if(res.code===200){
  231. console.log('视频埋点成功');
  232. }
  233. })
  234. },
  235. //视频播放结束
  236. handleVideoEnd(){
  237. // 此处因为如果不调用退出全屏方法 安卓和ios页面均会表现异常,安卓横屏不恢复竖屏,ios底部tabbar渲染异常
  238. this.curVideoIns.exitFullScreen()
  239. setTimeout(() => {
  240. this.curVideoId=0
  241. this.curVideoIns=null
  242. }, 200);
  243. }
  244. },
  245. }
  246. </script>
  247. <style lang='scss'>
  248. .search-wrap .van-search{
  249. padding: 0 !important;
  250. }
  251. .video-list-page{
  252. .filter-wrap{
  253. .van-cell__title, .van-cell__value{
  254. flex: none !important;
  255. }
  256. .van-cell:after{
  257. border: none !important;
  258. }
  259. .van-cell__title{
  260. font-size: 14px;
  261. }
  262. .van-hairline--top:after{
  263. border-top-width: 0 !important;
  264. }
  265. }
  266. }
  267. </style>
  268. <style lang="scss" scoped>
  269. .video-list-page{
  270. .search-wrap {
  271. background-color: #fff;
  272. padding: 30rpx 34rpx;
  273. align-items: center;
  274. .menu-icon{
  275. width: 52rpx;
  276. height: 40rpx;
  277. display: block;
  278. flex-shrink: 0;
  279. margin-left: 30rpx;
  280. }
  281. }
  282. .list-wrap{
  283. .item{
  284. border-top: 10rpx solid #f9f9f9;
  285. padding: 30rpx 34rpx;
  286. position: relative;
  287. .title-box{
  288. padding-right: 40rpx;
  289. }
  290. .share-btn{
  291. position: absolute;
  292. top: 34rpx;
  293. right: 34rpx;
  294. background-color: transparent;
  295. width: 36rpx;
  296. height: 36rpx;
  297. line-height: 1;
  298. padding: 0;
  299. &::after{
  300. border: none;
  301. }
  302. }
  303. .share-img{
  304. width: 32.5rpx;
  305. height: 32rpx;
  306. }
  307. .tag{
  308. color: #E4B478;
  309. background-color: #333;
  310. padding: 5rpx 20rpx;
  311. border-radius: 20rpx;
  312. font-size: 24rpx;
  313. margin-right: 26rpx;
  314. }
  315. .title{
  316. font-size: 32rpx;
  317. color: #000;
  318. }
  319. video{
  320. width: 100%;
  321. height: 400rpx;
  322. margin: 30rpx 0 20rpx 0;
  323. border-radius: 20rpx;
  324. }
  325. .poster{
  326. width: 100%;
  327. height: 400rpx;
  328. margin: 30rpx 0 20rpx 0;
  329. border-radius: 20rpx;
  330. position: relative;
  331. &::after{
  332. content:'';
  333. display: block;
  334. position: absolute;
  335. width: 120rpx;
  336. height: 120rpx;
  337. top: 50%;
  338. left: 50%;
  339. transform: translate(-50%,-50%);
  340. background-image: url('@/static/video-play-btn.png');
  341. background-size: cover;
  342. }
  343. }
  344. .time{
  345. font-size: 28rpx;
  346. color: #999;
  347. }
  348. }
  349. }
  350. .empty-box{
  351. text-align: center;
  352. font-size: 32rpx;
  353. color: #999;
  354. padding-top: 150rpx;
  355. image{
  356. width: 80vw;
  357. margin-bottom: 57rpx;
  358. }
  359. }
  360. }
  361. .filter-wrap{
  362. background-color: #fff;
  363. padding-top: 53rpx;
  364. padding-bottom: 100rpx;
  365. .top{
  366. font-size: 32rpx;
  367. justify-content: space-between;
  368. margin-bottom: 40rpx;
  369. padding: 0 34rpx;
  370. }
  371. .list-box{
  372. min-height: 30vh;
  373. max-height: 60vh;
  374. .list-item{
  375. display: block;
  376. margin: 10rpx;
  377. height: 76rpx;
  378. line-height: 76rpx;
  379. color: #000;
  380. background: #F6F6F6;
  381. border-radius: 4px 4px 4px 4px;
  382. text-align: center;
  383. }
  384. .list-item-active{
  385. background-color: #FAEEDE;
  386. }
  387. }
  388. }
  389. </style>