|
@@ -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;
|
|
|
}
|
|
|
}
|
|
|
}
|