lilei 2 年之前
父節點
當前提交
7475a3e239
共有 2 個文件被更改,包括 52 次插入4 次删除
  1. 8 0
      api/video.js
  2. 44 4
      pages/videos/index.vue

+ 8 - 0
api/video.js

@@ -23,4 +23,12 @@ export const getVideoList = (params) => {
     data: params,
     method: 'post'
   })
+}
+// 视频详情
+export const videoDetail = params => {
+  return request({
+    url: `content/findById/${params.id}`,
+    method: 'get',
+    data: ''
+  })
 }

+ 44 - 4
pages/videos/index.vue

@@ -16,10 +16,17 @@
 							>
 								<view class="video-item">
 									<view>
+										<view class="play-btn" v-if="!item.showVideo&&item.contentType == 'VIDEO'">
+											<u-icon size="80" color="#d0d0d0" name="play-circle"></u-icon>
+										</view>
+										<view class="pnums" v-if="!item.showVideo&&item.contentType == 'VIDEO'">
+											<u-icon size="24" color="#fff" name="play-right"></u-icon>
+											{{item.viewNum}}
+										</view>
 										<u-image v-if="!item.showVideo" :src="item.imageSet[0]" height="200px" width="100%"></u-image>
 										<video v-else autoplay :src="item.content" style="width: 100%;height: 200px;" controls></video>
 									</view>
-									<view>{{item.titile}}</view>
+									<view class="ellipsis-two">{{item.titile}}</view>
 								</view>
 							 </view>
 							 <view style="padding: 20upx;">
@@ -39,7 +46,7 @@
 	    mapState,
 	    mapMutations,
 	} from 'vuex'
-	import { getVideoList } from "@/api/video.js"
+	import { getVideoList, videoDetail } from "@/api/video.js"
 	import { openWebView } from "@/utils/index.js"
 	export default {
 		data() {
@@ -147,8 +154,13 @@
 			},
 			// 详细页
 			viewRow(item){
-				if(item.contentType == 'VIDEO'){
+				if(item.contentType == 'VIDEO'&&!item.showVideo){
 					item.showVideo = true
+					videoDetail({id: item.id}).then(res => {
+						if(res.data){
+							item.viewNum = res.data.viewNum
+						}
+					})
 				}else{
 					openWebView({url:item.content})
 				}
@@ -216,11 +228,39 @@
 					> view{
 						&:first-child{
 							padding-top: 20rpx;
+							position: relative;
+							.play-btn{
+								width: 100rpx;
+								height: 100rpx;
+								background: rgba(0,0,0,0.5);
+								border-radius: 150rpx;
+								position: absolute;
+								top: 50%;
+								left: 50%;
+								margin-left: -50rpx;
+								margin-top: -50rpx;
+								z-index: 100;
+								display: flex;
+								align-items: center;
+								justify-content: center;
+							}
+							.pnums{
+								position: absolute;
+								width: 100%;
+								left:0;
+								bottom: 0;
+								background: rgba(0,0,0,0.2);
+								padding: 10rpx;
+								display: flex;
+								align-items: center;
+								color:#fff;
+								z-index: 110;
+							}
 						}
 						&:last-child{
 							text-align: center;
 							font-size: 36rpx;
-							padding: 20rpx;
+							margin: 20rpx 0;
 						}
 					}
 				}