7 changed files with 286 additions and 42 deletions
Split View
Diff Options
-
+5 -5api/api.js
-
+211 -0components/list/scenicSpot - 副本.vue
-
+2 -20components/list/scenicSpot.vue
-
+52 -7pages/index/index.vue
-
+4 -4pages_order/service/newsList.vue
-
BINstatic/image/home/g8a.png
-
+12 -6store/store.js
+ 5
- 5
api/api.js
View File
+ 211
- 0
components/list/scenicSpot - 副本.vue
View File
| @ -0,0 +1,211 @@ | |||
| <template> | |||
| <scroll-view | |||
| scroll-y="true" | |||
| :style="{height: height}" | |||
| @scrolltolower="loadMoreData"> | |||
| <view class="videoList"> | |||
| <view class="video-item" v-for="(item, index) in spotListWord" :key="index" | |||
| > | |||
| <view class="image" @click="showVideo(item, index)"> | |||
| <image :src="item.spotImage && item.spotImage.split(',')[0]" mode="aspectFill"> | |||
| </image> | |||
| </view> | |||
| <view class="bottom"> | |||
| <view class="headImage"> | |||
| {{ item.spotName }} | |||
| </view> | |||
| <view class="like"> | |||
| <view class=""> | |||
| 查看详情 | |||
| </view> | |||
| <view class="" | |||
| style="margin-top: 10rpx;"> | |||
| <uv-icon size="26rpx" | |||
| name="arrow-right"></uv-icon> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </scroll-view> | |||
| </template> | |||
| <script> | |||
| import { mapState } from 'vuex' | |||
| export default { | |||
| props : { | |||
| height : { | |||
| default : 'auto' | |||
| }, | |||
| roleId : { | |||
| } | |||
| }, | |||
| data() { | |||
| return { | |||
| queryParams: { | |||
| pageNo: 1, | |||
| pageSize: 10, | |||
| }, | |||
| total : 0, | |||
| list : [], | |||
| } | |||
| }, | |||
| computed : { | |||
| ...mapState(['spotList']), | |||
| spotListWord(){ | |||
| return this.spotList.filter(n => n.categoryId == 0) | |||
| }, | |||
| }, | |||
| methods: { | |||
| showVideo(item, current){ | |||
| // this.$utils.hanldePreview | |||
| // uni.previewMedia({ | |||
| // current : item.videoContent | |||
| // }) | |||
| this.$utils.navigateTo(`/pages_order/service/articleDetail?id=${item.id}&type=Inheritance`) | |||
| return | |||
| 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; | |||
| margin-right: 20rpx; | |||
| .video-item { | |||
| background-color: #fff; | |||
| position: relative; | |||
| width: calc(50% - 20rpx); | |||
| margin-left: 20rpx; | |||
| margin-top: 20rpx; | |||
| .image { | |||
| position: relative; | |||
| width: 100%; | |||
| height: 420rpx; | |||
| overflow: hidden; | |||
| image { | |||
| width: 100%; | |||
| height: 420rpx; | |||
| border-radius: 30rpx; | |||
| } | |||
| .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 { | |||
| font-size: 30rpx; | |||
| display: flex; | |||
| justify-content: space-between; | |||
| position: absolute; | |||
| bottom: 0; | |||
| left: 0; | |||
| background-color: #ffffffaa; | |||
| width: calc(100% - 40rpx); | |||
| padding: 30rpx; | |||
| font-weight: 900; | |||
| align-items: center; | |||
| .headImage { | |||
| display: flex; | |||
| align-items: center; | |||
| image { | |||
| width: 50rpx; | |||
| height: 50rpx; | |||
| border-radius: 50%; | |||
| margin-right: 6rpx; | |||
| } | |||
| } | |||
| .like { | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| font-weight: 500; | |||
| font-size: 22rpx; | |||
| } | |||
| } | |||
| } | |||
| .showVideo{ | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| height: 100%; | |||
| width: 1000%; | |||
| video{ | |||
| // width: 100%; | |||
| // height: 100%; | |||
| } | |||
| } | |||
| } | |||
| </style> | |||
+ 2
- 20
components/list/scenicSpot.vue
View File
+ 52
- 7
pages/index/index.vue
View File
+ 4
- 4
pages_order/service/newsList.vue
View File
BIN
static/image/home/g8a.png
View File
| Before | After |
|---|---|
|
|
| Width: 77 | Height: 77 | Size: 873 B |