3 changed files with 233 additions and 25 deletions
Split View
Diff Options
-
+189 -0components/list/videoList - 副本.vue
-
+41 -24components/list/videoList.vue
-
+3 -1pages/index/index.vue
+ 189
- 0
components/list/videoList - 副本.vue
View File
| @ -0,0 +1,189 @@ | |||
| <template> | |||
| <scroll-view | |||
| scroll-y="true" | |||
| :style="{height: height}" | |||
| @scrolltolower="loadMoreData"> | |||
| <view class="videoList"> | |||
| <view class="video-item" v-for="(item, index) in list" :key="index" | |||
| > | |||
| <view class="image" @click="showVideo(item, index)"> | |||
| <image :src="item.travelVideo.videoImage" mode="aspectFill"> | |||
| </image> | |||
| <view class="icon"> | |||
| <uv-icon size="35rpx" name="play-right-fill"> | |||
| </uv-icon> | |||
| </view> | |||
| </view> | |||
| <view class="bottom"> | |||
| <view class="headImage"> | |||
| <!-- <image src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img" mode="aspectFill"> | |||
| </image> --> | |||
| {{ item.travelVideo.videoTitle }} | |||
| </view> | |||
| <view class="like" | |||
| @click="addThumpup(item.travelVideo.id)"> | |||
| <uv-icon size="45rpx" color="#FF4340" v-if="item.thumpupFlag" name="heart-fill"></uv-icon> | |||
| <uv-icon size="45rpx" v-else name="heart"></uv-icon> | |||
| {{ item.travelVideo.videoThumpup }} | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </scroll-view> | |||
| </template> | |||
| <script> | |||
| import index from '../../uni_modules/uv-ui-tools' | |||
| export default { | |||
| props : { | |||
| height : { | |||
| default : 'auto' | |||
| }, | |||
| roleId : { | |||
| } | |||
| }, | |||
| data() { | |||
| return { | |||
| queryParams: { | |||
| pageNo: 1, | |||
| pageSize: 10, | |||
| }, | |||
| total : 0, | |||
| list : [], | |||
| } | |||
| }, | |||
| methods: { | |||
| showVideo(item, current){ | |||
| // this.$utils.hanldePreview | |||
| // uni.previewMedia({ | |||
| // current : item.videoContent | |||
| // }) | |||
| let sources = [] | |||
| this.list.forEach(n => { | |||
| sources.push({ | |||
| url : n.travelVideo.videoContent, | |||
| type : 'video' | |||
| }) | |||
| }) | |||
| wx.previewMedia({ | |||
| sources, // 需要预览的资源列表 | |||
| current, // 当前显示的资源序号 | |||
| // url: url // 当前预览资源的url链接 | |||
| }) | |||
| }, | |||
| queryVideoList(){ | |||
| if(this.roleId){ | |||
| this.queryParams.roleInfoId = this.roleId | |||
| } | |||
| if(uni.getStorageSync('token')){ | |||
| this.queryParams.token = uni.getStorageSync('token') | |||
| } | |||
| this.$api('queryVedioById', this.queryParams, res => { | |||
| if(res.code == 200){ | |||
| this.list = res.result | |||
| // this.total = res.result.total | |||
| } | |||
| }) | |||
| }, | |||
| loadMoreData(){ | |||
| if(this.queryParams.pageSize <= this.list.length){ | |||
| this.queryParams.pageSize += 10 | |||
| this.queryVideoList() | |||
| } | |||
| }, | |||
| addThumpup(videoId){ | |||
| this.$api('addThumpup', { | |||
| videoId | |||
| }, res => { | |||
| if(res.code == 200){ | |||
| this.queryVideoList() | |||
| uni.showToast({ | |||
| title: res.message, | |||
| icon: 'none' | |||
| }) | |||
| } | |||
| }) | |||
| }, | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .videoList { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| .video-item { | |||
| margin: 20rpx; | |||
| width: 335rpx; | |||
| .image { | |||
| position: relative; | |||
| width: 100%; | |||
| height: 420rpx; | |||
| border-radius: 30rpx; | |||
| overflow: hidden; | |||
| image { | |||
| width: 100%; | |||
| height: 100%; | |||
| } | |||
| .icon { | |||
| position: absolute; | |||
| right: 30rpx; | |||
| top: 30rpx; | |||
| width: 60rpx; | |||
| height: 60rpx; | |||
| background-color: #ffffffaa; | |||
| border-radius: 50%; | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| } | |||
| } | |||
| .bottom { | |||
| padding: 10rpx 0; | |||
| font-size: 22rpx; | |||
| display: flex; | |||
| justify-content: space-between; | |||
| .headImage { | |||
| display: flex; | |||
| align-items: center; | |||
| image { | |||
| width: 50rpx; | |||
| height: 50rpx; | |||
| border-radius: 50%; | |||
| margin-right: 6rpx; | |||
| } | |||
| } | |||
| .like { | |||
| display: flex; | |||
| align-items: center; | |||
| } | |||
| } | |||
| } | |||
| .showVideo{ | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| height: 100%; | |||
| width: 1000%; | |||
| video{ | |||
| // width: 100%; | |||
| // height: 100%; | |||
| } | |||
| } | |||
| } | |||
| </style> | |||