Skip to content

严立 / mini-shimao

Go to a project
Commit b7a7a811 by wjw
Options

ww-畅玩电影修改

parent f6b14b04
Inline Side-by-side
Showing with 1177 additions and 171 deletions
app.json
...@@ -60,6 +60,7 @@ ...@@ -60,6 +60,7 @@
"usingComponents": { "usingComponents": {
"navigation": "./component/navigation/navigation", "navigation": "./component/navigation/navigation",
"swiper-point": "./component/swiper-point/swiper-point", "swiper-point": "./component/swiper-point/swiper-point",
"strategy-item": "./component/strategy-item/strategy-item",
"l-avatar": "./miniprogram_npm/lin-ui/avatar/index", "l-avatar": "./miniprogram_npm/lin-ui/avatar/index",
"l-button": "./miniprogram_npm/lin-ui/button/index", "l-button": "./miniprogram_npm/lin-ui/button/index",
"l-capsule-bar": "./miniprogram_npm/lin-ui/capsule-bar/index", "l-capsule-bar": "./miniprogram_npm/lin-ui/capsule-bar/index",
......
component/strategy-item/strategy-item.js
...@@ -12,7 +12,6 @@ Component({ ...@@ -12,7 +12,6 @@ Component({
data: { data: {
}, },
lifetimes: { lifetimes: {
attached: function () { attached: function () {
// console.log(this.data.data) // console.log(this.data.data)
......
component/strategy-item/strategy-item.wxml
...@@ -2,6 +2,11 @@ ...@@ -2,6 +2,11 @@
<view class="component-strategy-item"> <view class="component-strategy-item">
<image wx:if="{{data.index === 1}}" class="short" src="{{data.image}}" mode="aspectFill"></image> <image wx:if="{{data.index === 1}}" class="short" src="{{data.image}}" mode="aspectFill"></image>
<image wx:else src="{{data.image}}" mode="widthFix"></image> <image wx:else src="{{data.image}}" mode="widthFix"></image>
<view class="component-strategy-item-tags row align-c">
<block wx:for="{{data.tags}}" wx:key="index">
<text>{{'# ' + item}}</text>
</block>
</view>
<text class="component-strategy-item-title">{{data.title}}</text> <text class="component-strategy-item-title">{{data.title}}</text>
<text class="component-strategy-item-content">{{data.date}}</text> <text class="component-strategy-item-content">{{data.date}}</text>
</view> </view>
\ No newline at end of file
component/strategy-item/strategy-item.wxss
...@@ -16,13 +16,28 @@ ...@@ -16,13 +16,28 @@
height: 354rpx; height: 354rpx;
} }
.component-strategy-item-tags {
margin: 24rpx 24rpx 0;
height: 44rpx;
flex-wrap: wrap;
overflow: hidden;
}
.component-strategy-item-tags text{
margin-right: 16rpx;
padding: 4rpx 12rpx;
color: #fff;
font-size: 18rpx;
line-height: 32rpx;
background-color: #15191F;
border-radius: 4rpx;
}
.component-strategy-item-title { .component-strategy-item-title {
display: -webkit-box; display: -webkit-box;
margin: 24rpx 20rpx; margin: 24rpx 24rpx 0;
font-size: 26rpx; font-size: 26rpx;
font-weight: bolder; font-weight: bolder;
color: #000000; color: #000000;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
line-clamp: 2; line-clamp: 2;
...@@ -31,7 +46,7 @@ ...@@ -31,7 +46,7 @@
} }
.component-strategy-item-content { .component-strategy-item-content {
margin: 0 24rpx 24rpx 24rpx; margin: 12rpx 24rpx 24rpx 24rpx;
font-size: 22rpx; font-size: 22rpx;
color: #959DA9; color: #959DA9;
} }
\ No newline at end of file
image/wechat.png
image/wechat.png

3.17 KB | W: | H:

image/wechat.png

1.48 KB | W: | H:

image/wechat.png
image/wechat.png
image/wechat.png
image/wechat.png
  • 2-up
  • Swipe
  • Onion skin
pages/home/history/history.js
let App = getApp() let App = getApp()
let logicData = {
pageScrollLock: false,
pageScrollTimer: 0,
}
Page({ Page({
data: { data: {
// 导航栏相关属性
navigationStyle: {
normal: {
backIcon: '/image/back.png',
color: '#000000',
background: 'rgba(255, 255, 255, 0)'
},
change: {
backIcon: '/image/back.png',
color: '#000000',
background: 'rgba(255, 255, 255, 1)'
},
scroll: '100rpx',
},
navigationScroll: 0,
sideBarTopMargin: 0,
history: {} history: {}
}, },
onLoad: function (options) { onLoad: function (options) {
let { index } = options let { index } = options
this.setSideBarStyle()
this.getBrands(index) this.getBrands(index)
}, },
onPageScroll: function (funcEvent) {
// console.log(funcEvent)
// 优化滚动事件触发频率
if (logicData.pageScrollLock) return
logicData.pageScrollLock = true
this.setData({
navigationScroll: funcEvent.scrollTop
})
// 恢复滚动事件
logicData.pageScrollTimer = setTimeout(function () {
logicData.pageScrollLock = false
clearTimeout(logicData.pageScrollTimer)
}, 10)
},
// 获取导航栏高度
setSideBarStyle: function () {
this.setData({
sideBarTopMargin: wx.getStorageSync('navigationStatusHeight') + wx.getStorageSync('navigationCapsuleHeight') + 16
})
},
getBrands: function (index) { getBrands: function (index) {
let that = this let that = this
App.wxRequest({ App.wxRequest({
......
pages/home/history/history.wxml
<navigation class="navigation" titleText="{{history.name}}" backIcon="/image/back.png"></navigation> <navigation class="navigation" titleText="{{history.name}}" backIcon="/image/back.png" scrollStyle="{{navigationStyle}}" scrollHeight="{{navigationScroll}}"></navigation>
<view class="container"> <view class="container" style="{{'margin-top: ' + sideBarTopMargin + 'px;'}}">
<block wx:for="{{history.content}}" wx:key="index"> <block wx:for="{{history.content}}" wx:key="index">
<image mode="widthFix" src="{{item}}"></image> <image mode="widthFix" src="{{item}}"></image>
</block> </block>
......
pages/home/history/history.wxss
.container {
margin-top: 208rpx;
}
image { image {
width: 750rpx; width: 750rpx;
} }
\ No newline at end of file
pages/home/home/home.js
...@@ -79,9 +79,14 @@ Page({ ...@@ -79,9 +79,14 @@ Page({
}, },
setLogin: function () { setLogin: function () {
let funcUserInfo = wx.getStorageSync('userInfo') let funcUserInfo = wx.getStorageSync('userInfo')
if (funcUserInfo.phone && funcUserInfo.name && funcUserInfo.avatar) { // if (funcUserInfo.phone && funcUserInfo.name && funcUserInfo.avatar) {
// this.setData({
// isLogin: true,
// })
// }
if (funcUserInfo.isSignIn) {
this.setData({ this.setData({
isLogin: true, isLogin: true
}) })
} }
}, },
......
pages/home/home/image/into.png
pages/home/home/image/into.png

35.7 KB | W: | H:

pages/home/home/image/into.png

141 KB | W: | H:

pages/home/home/image/into.png
pages/home/home/image/into.png
pages/home/home/image/into.png
pages/home/home/image/into.png
  • 2-up
  • Swipe
  • Onion skin
pages/play/home/home.js
...@@ -12,15 +12,15 @@ Page({ ...@@ -12,15 +12,15 @@ Page({
strategyOriginList: [], strategyOriginList: [],
//接口参数 //接口参数
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 3,
loading: false, loading: false,
moreData: true, moreData: true,
activity: [], activity: [],
swiperRecentCurrent: 0, swiperActivityCurrent: 0,
movieList: [], movieList: [],
swiperMovieCurrent: 0 swiperMovieCurrent: 0,
}, },
onLoad: function (options) { onLoad: function (options) {
...@@ -122,7 +122,7 @@ Page({ ...@@ -122,7 +122,7 @@ Page({
'priceSpecialText': App.modular.utils.formatAmount(funcResponse[i].ownerPrice), // 业主价文本格式 'priceSpecialText': App.modular.utils.formatAmount(funcResponse[i].ownerPrice), // 业主价文本格式
'priceType': 1, 'priceType': 1,
'tagsId': funcResponse[i].tagIds, 'tagsId': funcResponse[i].tagIds,
'tags': funcResponse[i].tags.split(' '), 'tags': funcResponse[i].tags.replace(/( )?热映影片( )?/, ' ').split(' '),
} }
if (funcItem.tagsId.includes('102')) { if (funcItem.tagsId.includes('102')) {
funcList.push(funcItem) funcList.push(funcItem)
...@@ -148,9 +148,9 @@ Page({ ...@@ -148,9 +148,9 @@ Page({
}, },
onActivityDetail: function (funcItem) { onActivityDetail: function (funcItem) {
// console.log(funcItem) console.log(funcItem)
wx.navigateTo({ wx.navigateTo({
url: '/pages/activity-detail/activity-detail?id=' + funcItem.currentTarget.dataset.id url: '/pages/play/activity-detail/activity-detail?id=' + funcItem.currentTarget.dataset.id
}) })
}, },
...@@ -191,10 +191,10 @@ Page({ ...@@ -191,10 +191,10 @@ Page({
}, },
// 近期活动swiper // 近期活动swiper
swiperRecentChange: function (e) { swiperActivityChange: function (e) {
let swiperRecentCurrent = e.detail.current let swiperActivityCurrent = e.detail.current
this.setData({ this.setData({
swiperRecentCurrent swiperActivityCurrent
}) })
}, },
// 热门电影swiper // 热门电影swiper
...@@ -229,9 +229,8 @@ Page({ ...@@ -229,9 +229,8 @@ Page({
var that = this var that = this
App.wxRequest({ App.wxRequest({
url: '/api/v1/strategy/getList', url: '/api/v1/strategy/getList',
data: { pageSize: that.data.pageSize + '', pageNo: that.data.pageNo + '' }, data: { pageSize: that.data.pageSize+'', pageNo: that.data.pageNo+''},
success: function (res) { success: function (res) {
console.log(res)
that.setData({ that.setData({
loading: false loading: false
}) })
...@@ -241,7 +240,7 @@ Page({ ...@@ -241,7 +240,7 @@ Page({
count = 0 count = 0
} }
let tempArray = [] let tempArray = []
for (let i = 0; i < res.data.list.length; i++) { for(let i = 0; i < res.data.list.length; i++) {
let item = res.data.list[i] let item = res.data.list[i]
let strategy = { let strategy = {
id: item.id, id: item.id,
...@@ -249,18 +248,15 @@ Page({ ...@@ -249,18 +248,15 @@ Page({
title: item.title, title: item.title,
date: item.updateDate, date: item.updateDate,
index: count + i - 1, index: count + i - 1,
tags: item.tags.split(' '), tags: item.tags.split('#')
content: item.content
} }
tempArray.push(strategy) tempArray.push(strategy)
} }
// console.log('tempArray', tempArray)
console.log('tempArray', tempArray)
if (that.data.pageNo == 1) { if (that.data.pageNo == 1) {
var newArr = tempArray.slice(1) var newArr = tempArray.slice(1)
var firstItem = tempArray[0] var firstItem = tempArray[0]
console.log('firstItem', firstItem) // console.log('firstItem', firstItem)
that.setData({ that.setData({
moreData: (tempArray.length >= Number(res.data.count)) ? false : true, moreData: (tempArray.length >= Number(res.data.count)) ? false : true,
['strategyFirstItem.id']: firstItem.id, ['strategyFirstItem.id']: firstItem.id,
...@@ -278,13 +274,12 @@ Page({ ...@@ -278,13 +274,12 @@ Page({
}) })
} }
// 游客攻略瀑布列表 // 游客攻略瀑布列表
// wx.lin.renderWaterFlow(that.data.strategyList, that.data.pageNo == 1 ? true : false, () => { }) wx.lin.renderWaterFlow(that.data.strategyList, that.data.pageNo == 1 ? true : false, () => {})
wx.lin.renderWaterFlow(this.data.strategyList, false, () => {})
} else { } else {
} }
}, },
fail: function (err) { fail: function(err) {
that.setData({ that.setData({
loading: false loading: false
}) })
...@@ -292,4 +287,20 @@ Page({ ...@@ -292,4 +287,20 @@ Page({
}) })
}, },
onReachBottom: function() {
console.log('触底啦')
if (this.data.loading || !this.data.moreData) {
return
}
this.data.pageNo += 1
this.loadVisiterPlanList()
},
// 游客攻略详情
onStrategyDetail: function (funcItem) {
console.log(funcItem)
wx.navigateTo({
url: '/pages/play/strategy-detail/strategy-detail?id=' + funcItem.detail.item.id
})
},
}) })
\ No newline at end of file
pages/play/home/home.wxml
...@@ -17,12 +17,12 @@ ...@@ -17,12 +17,12 @@
<view class="title row con-b align-c"> <view class="title row con-b align-c">
<image src="./image/title-activity.png">近期活动</image> <image src="./image/title-activity.png">近期活动</image>
<text bindtap="onAllRecent" bindtap="onAllActivity">查看全部</text> <text bindtap="onAllActivity" bindtap="onAllActivity">查看全部</text>
</view> </view>
<swiper class="recent-swiper" next-margin="38rpx" bindchange="swiperRecentChange"> <swiper class="activity-swiper" next-margin="38rpx" bindchange="swiperActivityChange">
<block wx:for="{{activity}}" wx:key="id"> <block wx:for="{{activity}}" wx:key="id">
<swiper-item class="recent-item"> <swiper-item class="activity-item" bindtap="onActivityDetail" data-id="{{item.id}}">
<image class="{{swiperRecentCurrent === index ? 'recent-item-left' : '' }} {{swiperRecentCurrent === banner.length - 1 ? 'recent-item-center' : ''}}" src="{{item.cover}}"></image> <image class="{{swiperActivityCurrent === index ? 'activity-item-left' : '' }} {{swiperActivityCurrent === activity.length - 1 ? 'activity-item-center' : ''}}" src="{{item.cover}}"></image>
</swiper-item> </swiper-item>
</block> </block>
</swiper> </swiper>
...@@ -79,22 +79,8 @@ ...@@ -79,22 +79,8 @@
<view class="title row align-c"> <view class="title row align-c">
<image src="./image/title-route.png">游客攻略</image> <image src="./image/title-route.png">游客攻略</image>
</view> </view>
<view style="margin-bottom:10px"> <view style="margin-top: 50rpx">
<l-water-flow column-gap="14rpx" generic:l-water-flow-item="strategy-item" bind:linitemtap="onStrategyDetail"></l-water-flow> <l-water-flow column-gap="15rpx" generic:l-water-flow-item="strategy-item" bind:linitemtap="onStrategyDetail"></l-water-flow>
</view> </view>
</view> </view>
<!-- <block wx:if="{{strategyOriginList.length > 0}}">
<view class="strategy detail-item" bindtap="onFirstStrategyDetail">
<image src="./image/title-route.png"></image>
<view class="strategy-content">
<image class="background-image" src="{{strategyFirstItem.image}}" mode="aspectFit"></image>
<view class="operation col">
<text>{{strategyFirstItem.title}}</text>
</view>
</view>
</view>
<view style="margin-bottom:10px">
<l-water-flow column-gap="14rpx" generic:l-water-flow-item="strategy-item" bind:linitemtap="onStrategyDetail"></l-water-flow>
</view>
</block> -->
</view> </view>
\ No newline at end of file
pages/play/home/home.wxss
/* page { /* page {
background: linear-gradient(182deg,#FFFFFF 0%,#EBEDF7 100%); background: linear-gradient(180deg, #FFFFFF 0%, #F2F2F2 100%);
} */ } */
.navigation { .navigation {
...@@ -90,27 +90,27 @@ ...@@ -90,27 +90,27 @@
background-color: #ccc; background-color: #ccc;
} }
.recent-swiper { .activity-swiper {
width: 750rpx; width: 750rpx;
height: 721rpx; height: 721rpx;
margin-top: 80rpx; margin-top: 80rpx;
padding-bottom: 50rpx; padding-bottom: 50rpx;
} }
.recent-item { .activity-item {
width: 712rpx; width: 712rpx;
} }
.recent-item image { .activity-item image {
width: 648rpx; width: 648rpx;
background-color: #ccc; background-color: #ccc;
} }
.recent-item-left { .activity-item-left {
margin-left: 40rpx; margin-left: 40rpx;
} }
.recent-item-center { .activity-item-center {
margin-left: 51rpx; margin-left: 51rpx;
} }
...@@ -382,6 +382,10 @@ image { ...@@ -382,6 +382,10 @@ image {
} }
/* 游客攻略 */ /* 游客攻略 */
.route {
padding: 0 40rpx;
background: linear-gradient(180deg, #FFFFFF 0%, #F2F2F2 100%);
}
.title { .title {
width: 670rpx; width: 670rpx;
margin-top: 30rpx; margin-top: 30rpx;
......
pages/play/movie-detail/movie-detail.js
let App = getApp() let App = getApp()
let logicData = {
pageScrollLock: false,
pageScrollTimer: 0,
}
Page({ Page({
data: { data: {
bannerIndex: 0, bannerIndex: 0,
...@@ -9,50 +14,42 @@ Page({ ...@@ -9,50 +14,42 @@ Page({
statusList: [], statusList: [],
movieInfo: {}, movieInfo: {},
showList: {}, showList: {},
// 导航栏相关属性
navigationStyle: {
normal: {
backIcon: '/image/back-w.png',
color: '#FFFFFF',
background: 'rgba(255, 255, 255, 0)'
},
change: {
backIcon: '/image/back-w.png',
color: '#ffffff',
background: 'rgba(28, 28, 37, 1)'
},
scroll: '200rpx',
},
navigationScroll: 0,
}, },
onLoad: function (options) { onLoad: function (options) {
let activityId = options.id let activityId = options.id
App.wxRequest({ this.queryDetail(activityId)
url: '/api/v1/film/getFilmDetail',
data: {
'activityId': activityId,
},
success: (response) => {
let movieInfo = response.data
movieInfo.tags = movieInfo.tags.split(' ')
// for (let key in movieInfo.allTimes) {
// console.log(key)
// }
let showList = {}
showList[0] = movieInfo.today
showList[1] = movieInfo.tomorrow
this.setData({
movieInfo,
showList
})
}
})
this.getNowTime()
}, },
// 获取标签日期 onPageScroll: function (funcEvent) {
getNowTime: function () { // console.log(funcEvent)
let now = new Date() // 优化滚动事件触发频率
let month = now.getMonth() + 1 if (logicData.pageScrollLock) return
let day = now.getDate() logicData.pageScrollLock = true
if (month < 10) {
month = '0' + month
}
if (day < 10) {
day = '0' + day
}
console.log(month, day)
console.log(App.modular.miment().format('YYYY-MM-DD'))
this.setData({ this.setData({
statusList: [ navigationScroll: funcEvent.scrollTop
{ 'id': 0, 'name': `今日${month}月${day}日`},
{ 'id': 1, 'name': `明日${month}月${day+1}日`},
],
}) })
// 恢复滚动事件
logicData.pageScrollTimer = setTimeout(function () {
logicData.pageScrollLock = false
clearTimeout(logicData.pageScrollTimer)
}, 10)
}, },
// 选择标签页日期 // 选择标签页日期
onSelectionStatus: function (event) { onSelectionStatus: function (event) {
...@@ -72,7 +69,70 @@ Page({ ...@@ -72,7 +69,70 @@ Page({
bannerIndex: funcEvent.detail.current bannerIndex: funcEvent.detail.current
}) })
}, },
// 获取电影详情场次
queryDetail: function (activityId) {
App.wxRequest({
url: '/api/v1/film/getFilmDetail',
data: {
'activityId': activityId,
},
success: (response) => {
let movieInfo = response.data
console.log(movieInfo)
let showList = {}
let statusList = []
let day = 2
let index = 0
let timeList = []
// 添加电影日期场次
for (let key in movieInfo.allTimes) {
timeList.push(App.modular.miment(key).stamp())
}
timeList = timeList.sort((a, b) => a-b )
timeList = timeList.map(v => App.modular.miment(v).format('YYYY-MM-DD'))
// console.log(timeList)
timeList.forEach(key => {
let tempItem = {}
if (key === App.modular.miment().format('YYYY-MM-DD')) {
tempItem = {
id: 0,
name: '今日' + App.modular.miment().format('MM月DD日')
}
statusList.push(tempItem)
showList[index] = movieInfo.allTimes[key]
index++
} else if (key === App.modular.miment().add(1, 'DD').format('YYYY-MM-DD')) {
tempItem = {
id: 1,
name: '明日' + App.modular.miment().add(1, 'DD').format('MM月DD日')
}
statusList.push(tempItem)
showList[index] = movieInfo.allTimes[key]
index++
} else if (key === App.modular.miment().add(day, 'DD').format('YYYY-MM-DD')) {
tempItem = {
id: day,
name: App.modular.miment().add(day, 'DD').format('MM月DD日')
}
statusList.push(tempItem)
showList[index] = movieInfo.allTimes[key]
index++
day++
}
})
// console.log(showList)
movieInfo.tags = movieInfo.tags.replace(/( )?热映影片( )?/, ' ').split(' ')
movieInfo.free = movieInfo.ownerPrice == '0' && movieInfo.visitorPrice == '0' ? '免费' : `￥${movieInfo.ownerPrice.toFixed(2)}`
this.setData({
movieInfo,
showList,
statusList
})
}
})
},
// 跳转到报名页面 // 跳转到报名页面
onReportMovie: function (event) { onReportMovie: function (event) {
let id = event.currentTarget.dataset.movieid let id = event.currentTarget.dataset.movieid
......
pages/play/movie-detail/movie-detail.wxml
<navigation class="navigation" titleText="{{movieInfo.filmName}}" color="#ffffff" backIcon="/image/back-w.png"></navigation> <navigation class="navigation" titleText="{{movieInfo.filmName}}" color="#ffffff" backIcon="/image/back-w.png" scrollStyle="{{navigationStyle}}" scrollHeight="{{navigationScroll}}"></navigation>
<view class="container"> <view class="container">
<!-- 顶部轮播图 --> <!-- 顶部轮播图 -->
...@@ -82,7 +82,7 @@ ...@@ -82,7 +82,7 @@
<text>{{item.endTime + '散场'}}</text> <text>{{item.endTime + '散场'}}</text>
</view> </view>
<view class="show-free"> <view class="show-free">
<text>{{item.ownerPrice === 0 ? '免费' : item.ownerPrice}}</text> <text>{{movieInfo.free}}</text>
</view> </view>
<view class="show-btn" bindtap="onReportMovie" data-movieId="{{item.filmId}}"> <view class="show-btn" bindtap="onReportMovie" data-movieId="{{item.filmId}}">
<text>报名观影</text> <text>报名观影</text>
...@@ -90,4 +90,5 @@ ...@@ -90,4 +90,5 @@
</view> </view>
</block> </block>
</view> </view>
<view class="blank"></view>
</view> </view>
\ No newline at end of file
pages/play/movie-detail/movie-detail.wxss
...@@ -114,16 +114,25 @@ page { ...@@ -114,16 +114,25 @@ page {
width: 750rpx; width: 750rpx;
height: 76rpx; height: 76rpx;
margin-top: 48rpx; margin-top: 48rpx;
padding: 0 8rpx; padding: 0 40rpx;
border-bottom: 1px #3A3A40 solid; border-bottom: 1px #3A3A40 solid;
overflow: scroll;
flex-wrap: nowrap;
} }
.status-item { .status-item {
width: 220rpx;
height: 76rpx; height: 76rpx;
font-size: 26rpx; margin-right: 64rpx;
font-size: 30rpx;
font-weight: 400; font-weight: 400;
color: #959DA9; color: #959DA9;
} }
.status-item text {
display: inline-block;
white-space: nowrap;
}
.status-item:last-child {
padding-right: 40rpx;
}
.status-item-active { .status-item-active {
height: 76rpx; height: 76rpx;
color: #fff; color: #fff;
...@@ -131,6 +140,12 @@ page { ...@@ -131,6 +140,12 @@ page {
border-bottom: 4rpx #fff solid; border-bottom: 4rpx #fff solid;
} }
.status::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.show-wrapper { .show-wrapper {
width: 710rpx; width: 710rpx;
height: 160rpx; height: 160rpx;
...@@ -150,7 +165,6 @@ page { ...@@ -150,7 +165,6 @@ page {
font-size: 26rpx; font-size: 26rpx;
} }
.show-free { .show-free {
width: 60rpx;
margin-left: 130rpx; margin-left: 130rpx;
color: #fff; color: #fff;
font-size: 26; font-size: 26;
...@@ -174,7 +188,6 @@ page { ...@@ -174,7 +188,6 @@ page {
.show-end image { .show-end image {
width: 112rpx; width: 112rpx;
height: 112rpx; height: 112rpx;
background-color: #ccc;
} }
.show-end text{ .show-end text{
margin-top: 10rpx; margin-top: 10rpx;
...@@ -186,3 +199,8 @@ image { ...@@ -186,3 +199,8 @@ image {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.blank {
width: 100%;
height: 168rpx;
}
\ No newline at end of file
pages/play/movie/movie.js
let App = getApp() let App = getApp()
let logicData = {
pageScrollLock: false,
pageScrollTimer: 0,
}
Page({ Page({
data: { data: {
// 请求参数 // 请求参数
...@@ -8,6 +13,22 @@ Page({ ...@@ -8,6 +13,22 @@ Page({
pageSize: '-1' pageSize: '-1'
}, },
// 导航栏相关属性
navigationStyle: {
normal: {
backIcon: '/image/back-w.png',
color: '#FFFFFF',
background: 'rgba(255, 255, 255, 0)'
},
change: {
backIcon: '/image/back-w.png',
color: '#ffffff',
background: 'rgba(28, 28, 37, 1)'
},
scroll: '100rpx',
},
navigationScroll: 0,
statusActive: 0, statusActive: 0,
statusList: [ statusList: [
{ 'id': 0, 'name': '今日放映' }, { 'id': 0, 'name': '今日放映' },
...@@ -32,6 +53,22 @@ Page({ ...@@ -32,6 +53,22 @@ Page({
this.getTodayFilm() this.getTodayFilm()
this.getAllFilm() this.getAllFilm()
}, },
onPageScroll: function (funcEvent) {
// console.log(funcEvent)
// 优化滚动事件触发频率
if (logicData.pageScrollLock) return
logicData.pageScrollLock = true
this.setData({
navigationScroll: funcEvent.scrollTop
})
// 恢复滚动事件
logicData.pageScrollTimer = setTimeout(function () {
logicData.pageScrollLock = false
clearTimeout(logicData.pageScrollTimer)
}, 10)
},
/** /**
* 查询今日放映 * 查询今日放映
* @function * @function
...@@ -53,8 +90,8 @@ Page({ ...@@ -53,8 +90,8 @@ Page({
v.filmType = v.filmType.replace(/\//g, ' / ') v.filmType = v.filmType.replace(/\//g, ' / ')
v.filmDirector = v.filmDirector.replace(/\//g, ' ') v.filmDirector = v.filmDirector.replace(/\//g, ' ')
v.filmLead = v.filmLead.replace(/\//g, ' ') v.filmLead = v.filmLead.replace(/\//g, ' ')
v.free = v.ownerPrice === '0' ? '免费' : `￥${v.ownerPrice.toFixed(2)}` v.free = v.ownerPrice == '0' ? '免费' : `￥${v.ownerPrice.toFixed(2)}`
v.tags = v.tags.split(' ') v.tags = v.tags.replace(/( )?热映影片( )?/, ' ').split(' ')
}) })
this.setData({ this.setData({
movieToday movieToday
...@@ -87,8 +124,8 @@ Page({ ...@@ -87,8 +124,8 @@ Page({
v.filmType = v.filmType.replace(/\//g, ' / ') v.filmType = v.filmType.replace(/\//g, ' / ')
v.filmDirector = v.filmDirector.replace(/\//g, ' ') v.filmDirector = v.filmDirector.replace(/\//g, ' ')
v.filmLead = v.filmLead.replace(/\//g, ' ') v.filmLead = v.filmLead.replace(/\//g, ' ')
v.free = v.ownerPrice === 0 ? '免费' : `￥${v.ownerPrice.toFixed(2)}` v.free = v.ownerPrice == '0' ? '免费' : `￥${v.ownerPrice.toFixed(2)}`
v.tags = v.tags.split(' ') v.tags = v.tags.replace(/( )?热映影片( )?/, ' ').replace(/( )+$/, '').split(' ')
}) })
this.setData({ this.setData({
'movieAll.movieWeek': { 'movieAll.movieWeek': {
...@@ -112,8 +149,8 @@ Page({ ...@@ -112,8 +149,8 @@ Page({
v.filmType = v.filmType.replace(/\//g, ' / ') v.filmType = v.filmType.replace(/\//g, ' / ')
v.filmDirector = v.filmDirector.replace(/\//g, ' ') v.filmDirector = v.filmDirector.replace(/\//g, ' ')
v.filmLead = v.filmLead.replace(/\//g, ' ') v.filmLead = v.filmLead.replace(/\//g, ' ')
v.free = v.ownerPrice === 0 ? '免费' : `￥${v.ownerPrice.toFixed(2)}` v.free = v.ownerPrice == '0'? '免费' : `￥${v.ownerPrice.toFixed(2)}`
v.tags = v.tags.split(' ') v.tags = v.tags.replace(/( )?热映影片( )?/, ' ').split(' ')
}) })
this.setData({ this.setData({
'movieAll.movieNextWeek': { 'movieAll.movieNextWeek': {
......
pages/play/movie/movie.wxml
<navigation class="navigation" titleText="所有影片" color="#ffffff" backIcon="/image/back-w.png"></navigation> <navigation class="navigation" titleText="所有影片" color="#ffffff" backIcon="/image/back-w.png" scrollStyle="{{navigationStyle}}" scrollHeight="{{navigationScroll}}"></navigation>
<view class="contaniner con-s"> <view class="contaniner con-s">
<view class="status row align-c"> <view class="status row align-c">
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
</view> </view>
<view wx:if="{{statusActive === 0}}"> <view wx:if="{{statusActive === 0}}">
<block wx:for="{{movieToday}}" wx:key="id"> <block wx:for="{{movieToday}}" wx:key="id" wx:if="{{movieToday.length !== 0}}">
<view class="movie-wrapper row" bindtap="onToMovieDetail" data-movieId="{{item.activityId}}"> <view class="movie-wrapper row" bindtap="onToMovieDetail" data-movieId="{{item.activityId}}">
<view class="movie-time-wrapper row align-c"> <view class="movie-time-wrapper row align-c">
<view class="movie-time-start"> <view class="movie-time-start">
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
</view> </view>
<view class="movie-tags row"> <view class="movie-tags row">
<block wx:for="{{item.tags}}" wx:for-item="tagsItem" wx:for-index="tagsIndex" wx:key="tagsIndex"> <block wx:for="{{item.tags}}" wx:for-item="tagsItem" wx:for-index="tagsIndex" wx:key="tagsIndex">
<text>{{tagsItem}}</text> <text wx:if="{{tagsItem}}">{{tagsItem}}</text>
</block> </block>
</view> </view>
</view> </view>
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
</view> </view>
</view> </view>
<view class="movie-label"> <view class="movie-label">
<text>{{item.keyword}}</text> <text wx:if="{{item.keyword}}">{{item.keyword}}</text>
</view> </view>
<view class="movie-free"> <view class="movie-free">
<text>{{item.free}}</text> <text>{{item.free}}</text>
...@@ -75,9 +75,16 @@ ...@@ -75,9 +75,16 @@
</view> </view>
</view> </view>
</block> </block>
<block wx:if="{{movieToday.length === 0}}">
<view class="show-end col align-c">
<image src="/image/no-movie.png"></image>
<text>观影已结束，请期待后续排片</text>
</view>
</block>
</view> </view>
<view wx:else> <view wx:else>
<block wx:for="{{movieAll}}" wx:for-index="key" wx:for-item="movieList" wx:key="key"> <block wx:for="{{movieAll}}" wx:for-index="key" wx:for-item="movieList" wx:key="key" wx:if="{{movieAll.moviewWeek.list.length > 0 || movieAll.movieNextWeek.list.length > 0}}">
<view class="movie-week row align-c con-c" wx:if="{{movieList.list.length > 0}}"> <view class="movie-week row align-c con-c" wx:if="{{movieList.list.length > 0}}">
<view class="line"></view> <view class="line"></view>
<view class="movie-week-title"> <view class="movie-week-title">
...@@ -137,6 +144,12 @@ ...@@ -137,6 +144,12 @@
</view> </view>
</block> </block>
</block> </block>
<block wx:if="{{movieAll.moviewWeek.list.length === 0 && movieAll.movieNextWeek.list.length === 0}}">
<view class="show-end col align-c">
<image src="/image/no-movie.png"></image>
<text>观影已结束，请期待后续排片</text>
</view>
</block>
</view> </view>
<view class="footer-img"> <view class="footer-img">
<image src="/image/movie-bottom.png"></image> <image src="/image/movie-bottom.png"></image>
......
pages/play/movie/movie.wxss
page { page {
background-color: #1C1C25; background-color: #1C1C25;
} }
.navigation {
z-index: 1900;
position: fixed;
top: 0;
left: 0;
width: 750rpx;
}
.navigation-bar-image {
z-index: 1100;
position: fixed;
top: 60rpx;
left: 50rpx;
width: 200rpx;
height: 60rpx;
}
.contaniner { .contaniner {
margin-top: 200rpx; margin-top: 200rpx;
} }
...@@ -207,6 +222,20 @@ page { ...@@ -207,6 +222,20 @@ page {
margin-top: 64rpx; margin-top: 64rpx;
} }
.show-end {
width: 750rpx;
margin-top: 400rpx;
}
.show-end image {
width: 112rpx;
height: 112rpx;
}
.show-end text{
margin-top: 10rpx;
font-size: 26rpx;
color: #959DA9;
}
image { image {
width: 100%; width: 100%;
height: 100%; height: 100%;
......
pages/play/service-detail/service-detail.js
...@@ -25,7 +25,7 @@ Page({ ...@@ -25,7 +25,7 @@ Page({
color: '#000000', color: '#000000',
background: 'rgba(255, 255, 255, 1)' background: 'rgba(255, 255, 255, 1)'
}, },
scroll: '600rpx', scroll: '200rpx',
}, },
navigationStyleBlack: { navigationStyleBlack: {
normal: { normal: {
...@@ -76,6 +76,9 @@ Page({ ...@@ -76,6 +76,9 @@ Page({
this.queryDetail(Number(options.id)) this.queryDetail(Number(options.id))
if (Number(options.id) === 2) { if (Number(options.id) === 2) {
this.queryDetailMovie() this.queryDetailMovie()
this.setData({
navigationStyle: this.data.navigationStyleBlack
})
} else { } else {
this.queryDetailCommodity() this.queryDetailCommodity()
} }
...@@ -89,11 +92,13 @@ Page({ ...@@ -89,11 +92,13 @@ Page({
* @returns * @returns
*/ */
queryDetail: function (funcAppId) { queryDetail: function (funcAppId) {
let that = this
let funcIndex = 0 let funcIndex = 0
// 预设数据 // 预设数据
let funcDetail = [ let funcDetail = [
{ {
appId: 1, appId: 1,
id: App.globalData.pointInfo[0].id,
banner: [ banner: [
App.globalData.appResourcesBase + 'shop/banner/banner-1-1-1.png', App.globalData.appResourcesBase + 'shop/banner/banner-1-1-1.png',
App.globalData.appResourcesBase + 'shop/banner/banner-1-1-2.png', App.globalData.appResourcesBase + 'shop/banner/banner-1-1-2.png',
...@@ -155,6 +160,7 @@ Page({ ...@@ -155,6 +160,7 @@ Page({
contact: '13316748039' contact: '13316748039'
}, { }, {
appId: 5, appId: 5,
id: App.globalData.pointInfo[4].id,
banner: [ banner: [
App.globalData.appResourcesBase + 'shop/banner/banner-1-2-1.png', App.globalData.appResourcesBase + 'shop/banner/banner-1-2-1.png',
App.globalData.appResourcesBase + 'shop/banner/banner-1-2-2.png', App.globalData.appResourcesBase + 'shop/banner/banner-1-2-2.png',
...@@ -170,6 +176,7 @@ Page({ ...@@ -170,6 +176,7 @@ Page({
contact: '13316748039' contact: '13316748039'
}, { }, {
appId: 7, appId: 7,
id: App.globalData.pointInfo[6].id,
banner: [ banner: [
App.globalData.appResourcesBase + 'shop/banner/banner-2-1-1.png', App.globalData.appResourcesBase + 'shop/banner/banner-2-1-1.png',
App.globalData.appResourcesBase + 'shop/banner/banner-2-1-2.png', App.globalData.appResourcesBase + 'shop/banner/banner-2-1-2.png',
...@@ -188,6 +195,7 @@ Page({ ...@@ -188,6 +195,7 @@ Page({
contact: '13316748039' contact: '13316748039'
}, { }, {
appId: 6, appId: 6,
id: App.globalData.pointInfo[5].id,
banner: [ banner: [
App.globalData.appResourcesBase + 'shop/banner/banner-3-1-1.png', App.globalData.appResourcesBase + 'shop/banner/banner-3-1-1.png',
App.globalData.appResourcesBase + 'shop/banner/banner-3-1-2.png', App.globalData.appResourcesBase + 'shop/banner/banner-3-1-2.png',
...@@ -209,6 +217,7 @@ Page({ ...@@ -209,6 +217,7 @@ Page({
contact: '13316748039' contact: '13316748039'
}, { }, {
appId: 4, appId: 4,
id: App.globalData.pointInfo[3].id,
banner: [ banner: [
App.globalData.appResourcesBase + 'shop/banner/banner-3-2-1.png', App.globalData.appResourcesBase + 'shop/banner/banner-3-2-1.png',
App.globalData.appResourcesBase + 'shop/banner/banner-3-2-2.png', App.globalData.appResourcesBase + 'shop/banner/banner-3-2-2.png',
...@@ -224,6 +233,7 @@ Page({ ...@@ -224,6 +233,7 @@ Page({
contact: '13316748039' contact: '13316748039'
}, { }, {
appId: 2, appId: 2,
id: App.globalData.pointInfo[1].id,
banner: [ banner: [
App.globalData.appResourcesBase + 'shop/banner/banner-4-1-1.png', App.globalData.appResourcesBase + 'shop/banner/banner-4-1-1.png',
App.globalData.appResourcesBase + 'shop/banner/banner-4-1-2.png', App.globalData.appResourcesBase + 'shop/banner/banner-4-1-2.png',
...@@ -242,6 +252,38 @@ Page({ ...@@ -242,6 +252,38 @@ Page({
contact: '13316748039' contact: '13316748039'
} }
] ]
App.wxRequest({
url: '/api/v1/park/getList',
success: function(res) {
let funcData = res.list
funcDetail.forEach(shop => {
funcData.forEach(item => {
if (shop.id === item .id) {
shop.banner = item.rotationImg
shop.name = item.name
shop.date = item.businessTime
shop.describe = item.content
shop.contact = item.hotTel
}
})
})
that.setData({
banner: funcDetail[funcIndex].banner,
shareImage: funcDetail[funcIndex].shareImage,
info: {
id: funcDetail[funcIndex].id,
name: funcDetail[funcIndex].name,
title: funcDetail[funcIndex].title,
date: funcDetail[funcIndex].date,
describe: funcDetail[funcIndex].describe,
contact: funcDetail[funcIndex].contact,
},
// detailActivity: funcDetail[funcIndex].activity,
// detailCommodity: funcDetail[funcIndex].commodity,
// detailEvaluate: funcDetail[funcIndex].evaluate,
})
}
})
// 读取预设信息，banner 图片等等 // 读取预设信息，banner 图片等等
for (let i = 0, l = funcDetail.length; i < l; i++) { for (let i = 0, l = funcDetail.length; i < l; i++) {
...@@ -269,27 +311,27 @@ Page({ ...@@ -269,27 +311,27 @@ Page({
} }
} }
this.setData({ // this.setData({
banner: funcDetail[funcIndex].banner, // banner: funcDetail[funcIndex].banner,
shareImage: funcDetail[funcIndex].shareImage, // shareImage: funcDetail[funcIndex].shareImage,
info: { // info: {
id: funcDetail[funcIndex].id, // id: funcDetail[funcIndex].id,
name: funcDetail[funcIndex].name, // name: funcDetail[funcIndex].name,
title: funcDetail[funcIndex].title, // title: funcDetail[funcIndex].title,
date: funcDetail[funcIndex].date, // date: funcDetail[funcIndex].date,
describe: funcDetail[funcIndex].describe, // describe: funcDetail[funcIndex].describe,
contact: funcDetail[funcIndex].contact, // contact: funcDetail[funcIndex].contact,
}, // },
detailActivity: funcDetail[funcIndex].activity, // detailActivity: funcDetail[funcIndex].activity,
detailCommodity: funcDetail[funcIndex].commodity, // detailCommodity: funcDetail[funcIndex].commodity,
detailEvaluate: funcDetail[funcIndex].evaluate, // detailEvaluate: funcDetail[funcIndex].evaluate,
}) // })
if (this.data.info.id === 6) { // if (this.data.info.id === 6) {
this.setData({ // this.setData({
isBlack: true // isBlack: true
}) // })
} // }
}, },
queryDetailActivity: function () { queryDetailActivity: function () {
......
pages/play/service-detail/service-detail.wxml
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
<view class="commodity"> <view class="commodity">
<!-- 详情标题，分享，位置 --> <!-- 详情标题，分享，位置 -->
<view class="commodity-title row align-c"> <view class="commodity-title row align-c">
<text>{{info.title}}</text> <text>{{info.name}}</text>
<image src="{{imageBase + 'icon/share-2.png'}}" bindtap="onShare"></image> <image src="{{imageBase + 'icon/share-2.png'}}" bindtap="onShare"></image>
<image src="{{imageBase + 'icon/location-2.png'}}" bind:tap="onLocation"></image> <image src="{{imageBase + 'icon/location-2.png'}}" bind:tap="onLocation"></image>
</view> </view>
......
pages/play/service/service.js
...@@ -16,6 +16,7 @@ Page({ ...@@ -16,6 +16,7 @@ Page({
}, },
queryDetail: function () { queryDetail: function () {
let that = this
let response = [ let response = [
{ {
describe: [ describe: [
...@@ -23,17 +24,18 @@ Page({ ...@@ -23,17 +24,18 @@ Page({
], ],
shop: [{ shop: [{
appId: 1, appId: 1,
id: App.globalData.pointInfo[0].id,
name: '海错图展馆', name: '海错图展馆',
cover: App.globalData.appResourcesBase + 'play/detail/detail-1-2.png', cover: App.globalData.appResourcesBase + 'play/detail/shop-bg-1-1.png',
x: 108, subCover: App.globalData.appResourcesBase + 'play/detail/shop-bg-1-2.png',
y: 232, logo: App.globalData.appResourcesBase + 'shop/logo-1.png',
shopType: '4' shopType: '4'
}, { }, {
appId: 5, appId: 5,
id: App.globalData.pointInfo[4].id,
name: '拾光花坊', name: '拾光花坊',
cover: App.globalData.appResourcesBase + 'play/detail/detail-1-3.png', cover: App.globalData.appResourcesBase + 'play/detail/shop-bg-1-3.png',
x: 108, logo: App.globalData.appResourcesBase + 'shop/logo-5.png',
y: 246,
shopType: '' shopType: ''
}] }]
}, { }, {
...@@ -42,10 +44,10 @@ Page({ ...@@ -42,10 +44,10 @@ Page({
], ],
shop: [{ shop: [{
appId: 7, appId: 7,
id: App.globalData.pointInfo[6].id,
name: '水元养韵SPA', name: '水元养韵SPA',
cover: App.globalData.appResourcesBase + 'play/detail/detail-2-2.png', cover: App.globalData.appResourcesBase + 'play/detail/shop-bg-2-1.png',
x: 108, logo: App.globalData.appResourcesBase + 'shop/logo-7.png',
y: 246,
shopType: '2' shopType: '2'
}] }]
}, { }, {
...@@ -54,17 +56,17 @@ Page({ ...@@ -54,17 +56,17 @@ Page({
], ],
shop: [{ shop: [{
appId: 6, appId: 6,
id: App.globalData.pointInfo[5].id,
name: '原味舒食', name: '原味舒食',
cover: App.globalData.appResourcesBase + 'play/detail/detail-3-2.png', cover: App.globalData.appResourcesBase + 'play/detail/shop-bg-3-1.png',
x: 108, logo: App.globalData.appResourcesBase + 'shop/logo-6.png',
y: 232,
shopType: '5' shopType: '5'
}, { }, {
appId: 4, appId: 4,
id: App.globalData.pointInfo[3].id,
name: '原野MOJITO', name: '原野MOJITO',
cover: App.globalData.appResourcesBase + 'play/detail/detail-3-3.png', cover: App.globalData.appResourcesBase + 'play/detail/shop-bg-bg-3-2.png',
x: 108, logo: App.globalData.appResourcesBase + 'shop/logo-4.png',
y: 246,
shopType: '5' shopType: '5'
}] }]
}, { }, {
...@@ -73,10 +75,10 @@ Page({ ...@@ -73,10 +75,10 @@ Page({
], ],
shop: [{ shop: [{
appId: 2, appId: 2,
id: App.globalData.pointInfo[1].id,
name: '星空影院', name: '星空影院',
cover: App.globalData.appResourcesBase + 'play/detail/detail-4-2.png', cover: App.globalData.appResourcesBase + 'play/detail/shop-bg-bg-4-1.png',
x: 108, logo: App.globalData.appResourcesBase + 'shop/logo-2.png',
y: 246,
shopType: '' shopType: ''
}] }]
}, { }, {
...@@ -86,10 +88,26 @@ Page({ ...@@ -86,10 +88,26 @@ Page({
shop: [] shop: []
}, },
] ]
App.wxRequest({
this.setData({ url: '/api/v1/park/getList',
success: function(res) {
let funcData = res.list
response.forEach(res => {
res.shop.forEach(shop => {
funcData.forEach(item => {
if (shop.id === item.id) {
shop.name = item.name
shop.summary = item.summary
shop.time = item.businessTime
}
})
})
})
that.setData({
tabDetail: response tabDetail: response
}) })
}
})
}, },
onShopDetail: function (funcItem) { onShopDetail: function (funcItem) {
......
pages/play/service/service.wxml
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
</view> </view>
<view class="shop"> <view class="shop">
<block wx:for="{{tabDetail[tabIndex].shop}}" wx:for-index="index" wx:for-item="item" wx:key="index"> <!-- <block wx:for="{{tabDetail[tabIndex].shop}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="shop-item"> <view class="shop-item">
<image src="{{item.cover}}"></image> <image src="{{item.cover}}"></image>
<button <button
...@@ -21,6 +21,133 @@ ...@@ -21,6 +21,133 @@
<text>立即预定</text> <text>立即预定</text>
</button> </button>
</view> </view>
</block> </block> -->
<view class="shop-wrapper" wx:if="{{tabIndex === '0'}}">
<image class="shop-bg" src="{{tabDetail[0].shop[0].cover}}"></image>
<image class="shop-art-cover" src="{{tabDetail[0].shop[0].subCover}}"></image>
<view class="shop-content">
<view class="shop-logo">
<image class="art-logo" src="{{tabDetail[0].shop[0].logo}}"></image>
</view>
<view class="shop-name">
<text>{{tabDetail[0].shop[0].name}}</text>
</view>
<view class="shop-summary">
<text>{{tabDetail[0].shop[0].summary}}</text>
</view>
<view class="shop-date">
<text>时间</text>
<text>{{tabDetail[0].shop[0].time}}</text>
</view>
<view class="shop-btn" data-id="{{tabDetail[0].shop[0].appId}}" data-type="{{tabDetail[0].shop[0].shopType}}" bindtap="onShopDetail">
<text>立即购票</text>
</view>
</view>
</view>
<view class="shop-wrapper" wx:if="{{tabIndex === '0'}}">
<image class="shop-bg" src="{{tabDetail[0].shop[1].cover}}"></image>
<view class="shop-content">
<view class="shop-logo">
<image class="flower-logo" src="{{tabDetail[0].shop[1].logo}}"></image>
</view>
<view class="shop-name">
<text>{{tabDetail[0].shop[1].name}}</text>
</view>
<view class="shop-summary">
<text>{{tabDetail[0].shop[1].summary}}</text>
</view>
<view class="shop-date">
<text>时间</text>
<text>{{tabDetail[0].shop[1].time}}</text>
</view>
<view class="shop-btn" data-id="{{tabDetail[0].shop[1].appId}}" data-type="{{tabDetail[0].shop[1].shopType}}" bindtap="onShopDetail">
<text>查看详情</text>
</view>
</view>
</view>
<view class="shop-wrapper" wx:if="{{tabIndex === '1'}}">
<image class="shop-bg" src="{{tabDetail[1].shop[0].cover}}"></image>
<view class="shop-content">
<view class="shop-logo">
<image class="spa-logo" src="{{tabDetail[1].shop[0].logo}}"></image>
</view>
<view class="shop-name">
<text>{{tabDetail[1].shop[0].name}}</text>
</view>
<view class="shop-summary">
<text>{{tabDetail[1].shop[0].summary}}</text>
</view>
<view class="shop-date">
<text>时间</text>
<text>{{tabDetail[1].shop[0].time}}</text>
</view>
<view class="shop-btn" data-id="{{tabDetail[1].shop[0].appId}}" data-type="{{tabDetail[1].shop[0].shopType}}" bindtap="onShopDetail">
<text>立即购票</text>
</view>
</view>
</view>
<view class="shop-wrapper" wx:if="{{tabIndex === '2'}}">
<image class="shop-bg" src="{{tabDetail[2].shop[0].cover}}"></image>
<view class="shop-content">
<view class="shop-logo">
<image class="food-logo" src="{{tabDetail[2].shop[0].logo}}"></image>
</view>
<view class="shop-name">
<text>{{tabDetail[2].shop[0].name}}</text>
</view>
<view class="shop-summary">
<text>{{tabDetail[2].shop[0].summary}}</text>
</view>
<view class="shop-date">
<text>时间</text>
<text>{{tabDetail[2].shop[0].time}}</text>
</view>
<view class="shop-btn" data-id="{{tabDetail[2].shop[0].appId}}" data-type="{{tabDetail[2].shop[0].shopType}}" bindtap="onShopDetail">
<text>立即预订</text>
</view>
</view>
</view>
<view class="shop-wrapper" wx:if="{{tabIndex === '2'}}">
<image class="shop-bg" src="{{tabDetail[2].shop[1].cover}}"></image>
<view class="shop-content">
<view class="shop-logo">
<image class="mojito-logo" src="{{tabDetail[2].shop[1].logo}}"></image>
</view>
<view class="shop-name">
<text>{{tabDetail[2].shop[1].name}}</text>
</view>
<view class="shop-summary">
<text>{{tabDetail[2].shop[1].summary}}</text>
</view>
<view class="shop-date">
<text>时间</text>
<text>{{tabDetail[2].shop[1].time}}</text>
</view>
<view class="shop-btn" data-id="{{tabDetail[2].shop[1].appId}}" data-type="{{tabDetail[2].shop[1].shopType}}" bindtap="onShopDetail">
<text>立即预订</text>
</view>
</view>
</view>
<view class="shop-wrapper" wx:if="{{tabIndex === '3'}}">
<image class="shop-bg" src="{{tabDetail[3].shop[0].cover}}"></image>
<view class="shop-content">
<view class="shop-logo">
<image class="movie-logo" src="{{tabDetail[3].shop[0].logo}}"></image>
</view>
<view class="shop-name">
<text>{{tabDetail[3].shop[0].name}}</text>
</view>
<view class="shop-summary">
<text>{{tabDetail[3].shop[0].summary}}</text>
</view>
<view class="shop-date">
<text>时间</text>
<text>{{tabDetail[3].shop[0].time}}</text>
</view>
<view class="shop-btn" data-id="{{tabDetail[3].shop[0].appId}}" data-type="{{tabDetail[3].shop[0].shopType}}" bindtap="onShopDetail">
<text>立即购票</text>
</view>
</view>
</view>
</view> </view>
</view> </view>
\ No newline at end of file
pages/play/service/service.wxss
page {
background: linear-gradient(182deg,#FFFFFF 0%,#EBEDF7 100%);
}
.navigation { .navigation {
z-index: 1900; z-index: 1900;
} }
.container { .container {
margin-top: 120rpx; margin-top: 120rpx;
padding-bottom: 20rpx;
background: linear-gradient(182deg, #FFFFFF 0%, #EBEFF7 100%);
} }
/* 详情 */ /* 详情 */
...@@ -51,3 +49,106 @@ page { ...@@ -51,3 +49,106 @@ page {
color: #ffffff; color: #ffffff;
line-height: 42rpx; line-height: 42rpx;
} }
.shop-wrapper {
position: relative;
width: 750rpx;
height: 1106rpx;
}
.shop-bg {
width: 750rpx;
height: 436rpx;
}
.shop-art-cover {
position: absolute;
right: 0;
top: 0;
z-index: 3;
width: 478rpx;
height: 362rpx;
}
.shop-content {
position: absolute;
top: 231rpx;
left: 48rpx;
width: 654rpx;
height: 716rpx;
background-color: #fff;
}
.shop-logo {
height: 206rpx;
}
.art-logo {
width: 66rpx;
height: 122rpx;
margin: 42rpx 0 0 66rpx;
}
.art-logo {
width: 66rpx;
height: 122rpx;
margin: 42rpx 0 0 66rpx;
}
.flower-logo {
width: 124rpx;
height: 88rpx;
margin: 62rpx 0 0 60rpx;
}
.spa-logo {
width: 124rpx;
height: 100rpx;
margin: 56rpx 0 0 50rpx;
}
.food-logo {
width: 100rpx;
height: 104rpx;
margin: 56rpx 0 0 60rpx;
}
.mojito-logo {
width: 182rpx;
height: 70rpx;
margin: 74rpx 0 0 60rpx;
}
.movie-logo {
width: 168rpx;
height: 66rpx;
margin: 84rpx 0 0 60rpx;
}
.shop-name text {
margin: 10rpx 60rpx 0;
font-size: 38rpx;
font-weight: 600;
color: #15191F;
line-height: 52rpx;
}
.shop-summary {
height: 72rpx;
margin: 40rpx 60rpx 0;
font-size: 26rpx;
color: #959DA9;
line-height: 36rpx;
}
.shop-date {
margin: 80rpx 60rpx 0;
}
.shop-date text:nth-child(1) {
font-size: 26rpx;
color: #959DA9;
line-height: 36rpx;
}
.shop-date text:nth-child(2) {
margin-left: 48rpx;
font-size: 26rpx;
color: #15191F;
line-height: 36rpx;
}
.shop-btn {
width: 534rpx;
height: 96rpx;
margin: 64rpx 60rpx;
color: #fff;
font-size: 30rpx;
line-height: 96rpx;
text-align: center;
background: #86C5E1;
border-radius: 4rpx;
}
\ No newline at end of file
pages/play/strategy-detail/strategy-detail.js
let logicData = {
pageScrollLock: false,
pageScrollTimer: 0,
}
const app = getApp()
Page({ Page({
data: { data: {
isNavigationWhite: false,
banner: [],
bannerIndex: 0,
title: '',
content: '', // 内容
detailImage: [],
detailImageUrl: [],
detailIndex: 0,
relation: [],
date: '',
//接口参数
id: '',
}, },
onLoad: function (options) { onLoad: function (options) {
this.setData({
id: options.id,
})
var that = this
app.login({
success: function() {
that.loadStrategyDetail()
}
})
},
onSwiperChange: function (funcEvent) {
this.setData({
bannerIndex: funcEvent.detail.current
})
},
onPageScroll: function(funcEvent) {
// 优化滚动事件触发频率
if (logicData.pageScrollLock) return
logicData.pageScrollLock = true
if (funcEvent.scrollTop > 40 && !this.data.isNavigationWhite) {
this.setData({
isNavigationWhite: true
})
wx.setNavigationBarColor({
frontColor: '#000000',
backgroundColor: '#000000',
})
}
if (funcEvent.scrollTop <= 40) {
this.setData({
isNavigationWhite: false
})
wx.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#ffffff',
})
}
// 恢复滚动事件
logicData.pageScrollTimer = setTimeout(function () {
logicData.pageScrollLock = false
clearTimeout(logicData.pageScrollTimer)
}, 40)
}, },
// 攻略详情
loadStrategyDetail() {
var that = this
app.wxRequest({
url: '/api/v1/strategy/getDetail',
data: { id: that.data.id },
success: function(res) {
/**
* 此代码段处理目的为，匹配富文本代码中的 <img> 标签，并将其图片的宽度修改为适应屏幕
* width:100% --- 图片宽度加以限制，避免超出屏幕
* height:auto --- 高度自适应
* display:block --- 此代码，可以去掉图片之间的空白间隔，个人觉得好用
*/
var content = res.data.content.replace(/<img/gi, '<img style="width:100%;height:auto;display:block" ')
.replace(/<table/gi, '<table style="max-width:100%;height:auto;display:block" ')
.replace(/<section/g, '<div')
.replace(/\/section>/g, '\div>');
that.setData({
banner: res.data.banners,
content: content,
date: res.data.updateDate,
title: res.data.title
})
that.getParksByParkIds(res.data.smParkIds)
},
})
},
shopDetail(e) {
let datasetId = e.currentTarget.dataset.id
let id = ''
if (datasetId == '21a0cbbd39604380bc46fba38ac5fb63') {
// 海错图展馆
id = 1
} else if (datasetId == 'b8f04379bf164b7f8bca69be14146a17') {
// 拾光花坊
id = 2
} else if (datasetId == 'd8922a8f759245d4949b62693099edb5') {
// 元养水韵SPA馆
id = 3
} else if (datasetId == 'd0e5ff414f794e15bc33c4e11f5356a8') {
// 原味舒食
id = 4
} else if (datasetId == '81078c007c034d46b7dfe59935d84f7a') {
// 原野MOJITO
id = 5
} else if (datasetId == '29e79743f0f94e5eb726e0ebdfe64248') {
// 星空影院
id = 6
} else if (datasetId == '559d980e9eaf4459883fb3a556d24347') {
// 儿童营地信息
wx.navigateTo({
url: '/pages/campsite-mirror/campsite-mirror',
})
} else if (datasetId == 'c0a2d795a7a54dcd9459dd1b969c1771') {
// 住宿信息
}
if (id != '') {
wx.navigateTo({
url: '/pages/shop-detail/shop-detail?id=' + id
})
}
},
// 攻略详情文中提及
getParksByParkIds(parkIds) {
if (!parkIds) {
return
}
var that = this
app.wxRequest({
url: '/api/v1/park/getParksByParkIds',
data: { smParkIds: parkIds },
success: function(res) {
var tmpArr = [];
res.data.forEach(item => {
var tmpItem = {
'id': item.id,
'cover': item.guideImg,
'title': item.name,
'time': '营业时间 ' + item.businessTime,
'price': item.chargeStandard,
'describe': '',
}
tmpArr.push(tmpItem)
})
that.setData({
relation: tmpArr
})
}
})
}
}) })
\ No newline at end of file
pages/play/strategy-detail/strategy-detail.json
{ {
"usingComponents": {} "usingComponents": {
"parser":"../../component/parser.min/parser"
}
} }
\ No newline at end of file
pages/play/strategy-detail/strategy-detail.wxml
<!--pages/home/home/home.wxml--> <!-- 首页 - 游客攻略 -->
<text>pages/home/home/home.wxml</text> <navigation
class="navigation"
titleText="攻略详情"
color="{{isNavigationWhite ? '#000000' : '#ffffff'}}"
background="{{isNavigationWhite ? '#ffffff' : 'rgba(0, 0, 0, 0)'}}"
backIcon="{{isNavigationWhite ? '/image/back.png' : '/image/back-w.png'}}"
>
</navigation>
<view class="container">
<view id="banner" class="banner">
<swiper class="banner-swiper" autoplay circular interval="2000" duration="500" indicator-color="rgba(0, 0, 0, 0)" indicator-active-color="rgba(0, 0, 0, 0)" bindchange="onSwiperChange">
<block wx:for="{{banner}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<swiper-item class="banner-swiper-item">
<image class="banner-swiper-image" src="{{item}}"></image>
</swiper-item>
</block>
</swiper>
<view class="banner-swiper-point">
<swiper-point wx:if="{{banner.length > 1}}" bannerActiveIndex="{{bannerIndex}}"></swiper-point>
</view>
</view>
<view class="detail column con-c">
<view class="detail-title">
<text>{{title}}</text>
</view>
<parser html="{{content}}"/>
<view class="detail-date">
<text>{{date}}</text>
</view>
</view>
<view class="relation" wx:if="{{relation.length>0}}">
<view class="relation-title">
<text>文中提及</text>
</view>
<block wx:for="{{relation}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="relation-item row con-b align-c" data-id="{{item.id}}" bindtap="shopDetail">
<image mode="widthFix" src="{{item.cover}}"></image>
<view class="relation-item-info col">
<text>{{item.title}}</text>
<text>{{item.time}}</text>
<text>{{item.price}}</text>
</view>
<view class="relation-item-more row align-c">
<image src="/image/more-g.png"></image>
</view>
</view>
</block>
</view>
</view>
pages/play/strategy-detail/strategy-detail.wxss
/* pages/home/home/home.wxss */ .navigation {
\ No newline at end of file z-index: 1900;
position: fixed;
top: 0;
left: 0;
width: 750rpx;
}
.banner {
position: relative;
width: 750rpx;
height: 870rpx;
background: #ffffff;
}
.banner-swiper,
.banner-swiper-item,
.banner-swiper-image {
position: absolute;
top: 0 !important;
left: 0 !important;
width: 750rpx;
height: 870rpx;
}
.banner-swiper-point {
position: relative;
top: 760rpx;
left: 0;
}
.detail {
width: 750rpx;
padding: 6px 32rpx;
}
.detail-title {
width: 670rpx;
margin: 80rpx 0 64rpx 0;
font-size: 38rpx;
font-weight: 800;
color:#15191F;
line-height: 52rpx;
}
.detail-date {
/* width: 152rpx; */
height: 40rpx;
margin: 64rpx 0 32rpx 0;
font-size: 26rpx;
font-weight: 400;
color: #959DA9;
line-height: 40rpx;
}
.detail > image {
min-width: 100%;
}
rich-text {
margin-bottom: 52rpx;
font-size: 30rpx;
font-weight: 300;
color: #15191F;
line-height: 52rpx;
}
/* 攻略相关 */
.relation-title {
margin: 0 40rpx 90rpx 40rpx;
padding-top: 64rpx;
border-top: 1px #E2E7EF solid;
}
.relation-title text {
width: 120rpx;
height: 42rpx;
margin-top: 40rpx;
font-size: 30rpx;
font-weight: bold;
color:rgba(21,25,31,1);
}
.relation-item {
position: relative;
width: 670rpx;
height: 238rpx;
margin: 0 40rpx 104rpx 40rpx;
background:rgba(245, 246, 248, 1);
border-radius: 2px;
}
.relation-item > image {
position: absolute;
top: -24rpx;
left: 24rpx;
width: 176rpx;
height: 214rpx;
border-radius: 2px;
overflow: hidden;
}
.relation-item {
padding: 32rpx 32rpx 48rpx 230rpx;
}
.relation-item-info text:nth-child(1) {
font-size: 30rpx;
font-weight: bold;
line-height: 42rpx;
color:rgba(21, 25, 31, 1);
}
.relation-item-info text:nth-child(2) {
margin-top: 30rpx;
font-size: 26rpx;
line-height: 36rpx;
color: #656E7B;
}
.relation-item-info text:nth-child(3) {
margin-top: 12rpx;
font-size: 26rpx;
line-height: 36rpx;
color: #656E7B;
}
.relation-item-more {
height: 100%;
}
.relation-item-more image {
width: 32rpx;
height: 32rpx;
}.navigation {
z-index: 1900;
position: fixed;
top: 0;
left: 0;
width: 750rpx;
}
.banner {
position: relative;
width: 750rpx;
height: 870rpx;
background: #ffffff;
}
.banner-swiper,
.banner-swiper-item,
.banner-swiper-image {
position: absolute;
top: 0 !important;
left: 0 !important;
width: 750rpx;
height: 870rpx;
}
.banner-swiper-point {
position: relative;
top: 760rpx;
left: 0;
}
.detail {
width: 750rpx;
padding: 6px 32rpx;
}
.detail-title {
width: 670rpx;
margin: 80rpx 0 64rpx 0;
font-size: 38rpx;
font-weight: 800;
color:#15191F;
line-height: 52rpx;
}
.detail-date {
/* width: 152rpx; */
height: 40rpx;
margin: 64rpx 0 32rpx 0;
font-size: 26rpx;
font-weight: 400;
color: #959DA9;
line-height: 40rpx;
}
.detail > image {
min-width: 100%;
}
rich-text {
margin-bottom: 52rpx;
font-size: 30rpx;
font-weight: 300;
color: #15191F;
line-height: 52rpx;
}
/* 攻略相关 */
.relation-title {
margin: 0 40rpx 90rpx 40rpx;
padding-top: 64rpx;
border-top: 1px #E2E7EF solid;
}
.relation-title text {
width: 120rpx;
height: 42rpx;
margin-top: 40rpx;
font-size: 30rpx;
font-weight: bold;
color:rgba(21,25,31,1);
}
.relation-item {
position: relative;
width: 670rpx;
height: 238rpx;
margin: 0 40rpx 104rpx 40rpx;
background:rgba(245, 246, 248, 1);
border-radius: 2px;
}
.relation-item > image {
position: absolute;
top: -24rpx;
left: 24rpx;
width: 176rpx;
height: 214rpx;
border-radius: 2px;
overflow: hidden;
}
.relation-item {
padding: 32rpx 32rpx 48rpx 230rpx;
}
.relation-item-info text:nth-child(1) {
font-size: 30rpx;
font-weight: bold;
line-height: 42rpx;
color:rgba(21, 25, 31, 1);
}
.relation-item-info text:nth-child(2) {
margin-top: 30rpx;
font-size: 26rpx;
line-height: 36rpx;
color: #656E7B;
}
.relation-item-info text:nth-child(3) {
margin-top: 12rpx;
font-size: 26rpx;
line-height: 36rpx;
color: #656E7B;
}
.relation-item-more {
height: 100%;
}
.relation-item-more image {
width: 32rpx;
height: 32rpx;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment