8 changed files with 324 additions and 7 deletions
Split View
Diff Options
-
+1 -1App.vue
-
+206 -0components/list/videoList - 副本 (2).vue
-
+8 -3components/list/videoList.vue
-
+16 -2components/tourGuide/locations.vue
-
+3 -0pages.json
-
+84 -0pages_order/service/areaDetail.vue
-
+5 -1pages_order/service/situation.vue
-
+1 -0store/store.js
+ 1
- 1
App.vue
View File
+ 206
- 0
components/list/videoList - 副本 (2).vue
View File
| @ -0,0 +1,206 @@ | |||
| <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="30rpx" | |||
| 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 { | |||
| .video-item { | |||
| margin: 20rpx; | |||
| background-color: #fff; | |||
| position: relative; | |||
| .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: 26rpx; | |||
| } | |||
| } | |||
| } | |||
| .showVideo{ | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| height: 100%; | |||
| width: 1000%; | |||
| video{ | |||
| // width: 100%; | |||
| // height: 100%; | |||
| } | |||
| } | |||
| } | |||
| </style> | |||
+ 8
- 3
components/list/videoList.vue
View File
+ 16
- 2
components/tourGuide/locations.vue
View File
+ 3
- 0
pages.json
View File
+ 84
- 0
pages_order/service/areaDetail.vue
View File
| @ -0,0 +1,84 @@ | |||
| <template> | |||
| <!-- 景区详情 --> | |||
| <view class="page"> | |||
| <navbar | |||
| :title="detail.areaName" | |||
| leftClick | |||
| @leftClick="$utils.navigateBack" /> | |||
| <view class="" | |||
| style="padding: 20rpx;"> | |||
| <uv-parse :content="detail.areaDetail"></uv-parse> | |||
| </view> | |||
| <!-- <StudyAndPathDetailSubmit | |||
| article | |||
| submiitTitle="线上预约" | |||
| v-if="type == 'experience'" | |||
| :detail="detail" | |||
| @getData="queryArticleById" | |||
| @submit="toPayUrl(detail, type)" | |||
| :collectonFlag="collectonFlag" | |||
| :collectType="dict.collectType" | |||
| /> --> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import StudyAndPathDetailSubmit from '../components/submit/StudyAndPathDetailSubmit.vue' | |||
| export default { | |||
| components : { | |||
| StudyAndPathDetailSubmit, | |||
| }, | |||
| data() { | |||
| return { | |||
| detail : {}, | |||
| id : 0, | |||
| type : '', | |||
| dict : {}, | |||
| collectonFlag : false, | |||
| } | |||
| }, | |||
| onLoad(args) { | |||
| this.id = args.id | |||
| // this.type = args.type | |||
| // this.dict = this.$config.dict[args.type] | |||
| }, | |||
| onShow() { | |||
| this.queryArticleById() | |||
| }, | |||
| onPullDownRefresh(){ | |||
| this.queryArticleById() | |||
| }, | |||
| methods: { | |||
| queryArticleById(){ | |||
| let data = { | |||
| areaId : this.id, | |||
| } | |||
| if(uni.getStorageSync('token')){ | |||
| data.token = uni.getStorageSync('token') | |||
| } | |||
| this.$api('queryAreaListById', data, res => { | |||
| uni.stopPullDownRefresh() | |||
| if(res.code == 200){ | |||
| this.detail = res.result.travelExperience || res.result | |||
| this.collectonFlag = res.result.collectonFlag | |||
| } | |||
| }) | |||
| }, | |||
| toPayUrl(item, dictKey){ | |||
| uni.navigateTo({ | |||
| url: `/pages_order/order/orderSubscribe?type=${dictKey}&id=${item.id}` | |||
| }) | |||
| }, | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .page{ | |||
| } | |||
| </style> | |||