Commit 01a66768 by 严立

LL - 畅玩首页逻辑完成

parent e730b085
...@@ -273,6 +273,10 @@ Page({ ...@@ -273,6 +273,10 @@ Page({
} }
} }
} }
// 查询之后参数失效,避免返回页面时继续查询
this.setData({
option: {}
})
this.onCommodityDetail(funcEvent) this.onCommodityDetail(funcEvent)
break break
} }
......
...@@ -213,7 +213,7 @@ ...@@ -213,7 +213,7 @@
</view> </view>
</block> </block>
<block wx:for="{{shopCommodityData[4]}}" wx:for-index="index" wx:for-item="item" wx:key="index"> <block wx:for="{{shopCommodityData[3]}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="commodity-item row"> <view class="commodity-item row">
<view class="commodity-cover"> <view class="commodity-cover">
<image src="{{item.cover}}"></image> <image src="{{item.cover}}"></image>
......
...@@ -5,7 +5,7 @@ Page({ ...@@ -5,7 +5,7 @@ Page({
imageBase: App.globalData.appImageBase, imageBase: App.globalData.appImageBase,
resourcesBase: App.globalData.appResourcesBase, resourcesBase: App.globalData.appResourcesBase,
shopInfo: {},
shopId: '', shopId: '',
shopLogo: '', shopLogo: '',
shoppingCart: [], // 购物车列表 shoppingCart: [], // 购物车列表
...@@ -100,7 +100,8 @@ Page({ ...@@ -100,7 +100,8 @@ Page({
let funcShopInfo = wx.getStorageSync('shopInfoBuffer') let funcShopInfo = wx.getStorageSync('shopInfoBuffer')
this.setData({ this.setData({
shopId: funcShopInfo.id, shopId: funcShopInfo.id,
shopLogo: funcShopInfo.commodityLogo shopLogo: funcShopInfo.commodityLogo,
shopInfo: funcShopInfo
}) })
console.log(this.data.shopLogo) console.log(this.data.shopLogo)
...@@ -325,7 +326,7 @@ Page({ ...@@ -325,7 +326,7 @@ Page({
// 在此之前需要校验用户是否登录,以及商品库存是否充足 // 在此之前需要校验用户是否登录,以及商品库存是否充足
wx.navigateTo({ wx.navigateTo({
url: '/pages/pay/order-input/order-input?type=5' url: '/pages/pay/order-input/order-input?type=' + this.data.shopInfo.shopType
}) })
}, },
......
...@@ -134,7 +134,7 @@ ...@@ -134,7 +134,7 @@
</view> </view>
<view class="empty col con-c align-c" wx:else> <view class="empty col con-c align-c" wx:else>
<image class="empty-cart" src=""></image> <image src="{{imageBase + 'icon/cart-4.png'}}"></image>
<view class="empty-title"> <view class="empty-title">
<text>购物车还没有商品哦</text> <text>购物车还没有商品哦</text>
</view> </view>
......
...@@ -313,10 +313,9 @@ ...@@ -313,10 +313,9 @@
height: 100vh; height: 100vh;
} }
.empty-cart { .empty > image {
width: 176rpx; width: 176rpx;
height: 176rpx; height: 176rpx;
background-color: #ccc;
} }
.empty-title { .empty-title {
......
Component({
/**
* 组件的属性列表
*/
properties: {
data: Object
},
/**
* 组件的初始数据
*/
data: {
},
lifetimes: {
attached: function () {
// console.log(this.data.data)
},
detached: function () {
// 在组件实例被从页面节点树移除时执行
},
},
/**
* 组件的方法列表
*/
methods: {
}
})
\ No newline at end of file
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
<!-- demo.wxml -->
<view class="component-strategy-item">
<image wx:if="{{data.index === 1}}" class="short" src="{{data.image}}" mode="aspectFill"></image>
<image wx:else src="{{data.image}}" mode="widthFix"></image>
<text class="component-strategy-item-title">{{data.title}}</text>
<text class="component-strategy-item-content">{{data.date}}</text>
</view>
\ No newline at end of file
.component-strategy-item {
display: flex;
flex-direction: column;
margin-top: 16rpx;
border-radius: 4rpx;
overflow: hidden;
background: #ffffff;
}
.component-strategy-item image {
width: 328rpx;
}
.component-strategy-item .short {
width: 328rpx;
height: 354rpx;
}
.component-strategy-item-title {
display: -webkit-box;
margin: 24rpx 20rpx;
font-size: 26rpx;
font-weight: bolder;
color: #000000;
overflow: hidden;
text-overflow: ellipsis;
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.component-strategy-item-content {
margin: 0 24rpx 24rpx 24rpx;
font-size: 22rpx;
color: #959DA9;
}
\ No newline at end of file
...@@ -47,7 +47,6 @@ Page({ ...@@ -47,7 +47,6 @@ Page({
}, },
strategy: [], strategy: [],
strategyList: [], strategyList: [],
strategyOriginList: [],
loading: false, loading: false,
moreData: true, moreData: true,
...@@ -237,83 +236,6 @@ Page({ ...@@ -237,83 +236,6 @@ Page({
}, },
// // 游客攻略列表
// loadVisiterPlanList() {
// this.data.loading = true
// var that = this
// App.wxRequest({
// url: '/api/v1/strategy/getList',
// data: { pageSize: that.data.pageSize+'', pageNo: that.data.pageNo+''},
// success: function (res) {
// console.log(res)
// that.setData({
// loading: false
// })
// if (res.data.list.length > 0) {
// let count = that.data.strategyOriginList.length
// if (that.data.pageNo == 1) {
// count = 0
// }
// let tempArray = []
// for(let i = 0; i < res.data.list.length; i++) {
// let item = res.data.list[i]
// let strategy = {
// id: item.id,
// image: (count == 0 && i == 0) ? item.topImg : item.cover,
// title: item.title,
// date: item.updateDate,
// index: count + i - 1,
// }
// tempArray.push(strategy)
// }
// if (that.data.pageNo == 1) {
// var newArr = tempArray.slice(1)
// var firstItem = tempArray[0]
// that.setData({
// moreData: (tempArray.length >= Number(res.data.count)) ? false : true,
// ['strategyFirstItem.id']: firstItem.id,
// ['strategyFirstItem.image']: firstItem.image,
// ['strategyFirstItem.title']: firstItem.title,
// ['strategyFirstItem.date']: firstItem.date,
// strategyList: newArr,
// strategyOriginList: tempArray,
// })
// } else {
// that.setData({
// moreData: (count + tempArray.length >= Number(res.data.count)) ? false : true,
// strategyOriginList: that.data.strategyOriginList.concat(tempArray),
// strategyList: tempArray,
// })
// }
// // 游客攻略瀑布列表
// // wx.lin.renderWaterFlow(that.data.strategyList, that.data.pageNo == 1 ? true : false, () => {})
// } else {
// }
// },
// fail: function(err) {
// that.setData({
// loading: false
// })
// }
// })
// },
// onReachBottom: function() {
// // console.log('触底啦')
// if (this.data.loading || !this.data.moreData) {
// return
// }
// this.data.pageNo += 1
// this.loadVisiterPlanList()
// },
// 最新动态列表 // 最新动态列表
getNoticeList() { getNoticeList() {
var that = this var that = this
......
{ {
"usingComponents": { "usingComponents": {}
"strategy-item": "./component/strategy-item/strategy-item"
}
} }
\ No newline at end of file
...@@ -77,22 +77,6 @@ ...@@ -77,22 +77,6 @@
</view> </view>
</view> </view>
</view> </view>
<!-- 游客攻略 -->
<!-- <block wx:if="{{strategyOriginList.length > 0}}">
<view class="strategy detail-item" bindtap="onFirstStrategyDetail">
<image src="./image/title-strategy.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>
<view class="footer"> <view class="footer">
......
...@@ -139,7 +139,7 @@ Page({ ...@@ -139,7 +139,7 @@ Page({
buyContentAmount: '360.00', buyContentAmount: '360.00',
quantityTitle: '选择购买数量', quantityTitle: '选择购买数量',
quantityTipText: '剩余库存', quantityTipText: '剩余库存',
contactTitle: '填写取货人信息', contactTitle: '填写购买人信息',
winBuyContent: true, // 购买内容 winBuyContent: true, // 购买内容
winShoppingCart: false, // 购买清单 winShoppingCart: false, // 购买清单
......
...@@ -2,7 +2,9 @@ const App = getApp() ...@@ -2,7 +2,9 @@ const App = getApp()
Page({ Page({
data: { data: {
bannerImg: App.globalData.appResourcesBase + 'play/home/type.png', imageBase: App.globalData.appImageBase,
resourcesBase: App.globalData.appResourcesBase,
navigationLogoTop: 0, navigationLogoTop: 0,
navigationLogoMarginTop: 0, navigationLogoMarginTop: 0,
...@@ -17,20 +19,26 @@ Page({ ...@@ -17,20 +19,26 @@ Page({
loading: false, loading: false,
moreData: true, moreData: true,
activity: [], activityList: [],
swiperRecentCurrent: 0, swiperRecentCurrent: 0,
movieList: [], movieList: [],
swiperMovieCurrent: 0 swiperMovieCurrent: 0,
touristRouteList: [],
}, },
onLoad: function (options) { onLoad: function (options) {
this.setNavigationLogo() this.setNavigationLogo()
this.loadVisiterPlanList()
}, },
onShow: function () { onShow: function () {
this.queryActivity() this.queryActivity()
this.queryMovie() this.queryMovie()
this.routeList()
}, },
/** /**
...@@ -57,7 +65,6 @@ Page({ ...@@ -57,7 +65,6 @@ Page({
* @returns * @returns
*/ */
queryActivity: function () { queryActivity: function () {
var that = this
App.wxRequest({ App.wxRequest({
url: '/api/v1/activity/getList', url: '/api/v1/activity/getList',
data: { data: {
...@@ -81,7 +88,7 @@ Page({ ...@@ -81,7 +88,7 @@ Page({
}) })
this.setData({ this.setData({
activity: tmpArr activityList: tmpArr
}) })
} }
}) })
...@@ -148,9 +155,8 @@ Page({ ...@@ -148,9 +155,8 @@ Page({
}, },
onActivityDetail: function (funcItem) { onActivityDetail: function (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.item.id
}) })
}, },
...@@ -223,73 +229,56 @@ Page({ ...@@ -223,73 +229,56 @@ Page({
url: '/pages/play/movie-detail/movie-detail?id=' + id url: '/pages/play/movie-detail/movie-detail?id=' + id
}) })
}, },
// 游客攻略列表
loadVisiterPlanList() { /**
this.data.loading = true * 查询游客攻略
var that = this * @function
* @param
* @returns
*/
routeList: function () {
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: this.data.pageSize + '', pageNo: this.data.pageNo + '' },
success: function (res) { success: (response) => {
console.log(res) let funcResponse = response.data
that.setData({ let funcList = []
loading: false for (let i = 0, l = funcResponse.list.length; i < l; i++) {
}) let funcItem = {
if (res.data.list.length > 0) { 'id': funcResponse.list[i].id,
let count = that.data.strategyOriginList.length 'cover': funcResponse.list[i].cover,
if (that.data.pageNo == 1) { 'title': funcResponse.list[i].title,
count = 0 'content': funcResponse.list[i].content,
} 'date': funcResponse.list[i].updateDate,
let tempArray = [] 'tags': funcResponse.list[i].tags.split('#'),
for (let i = 0; i < res.data.list.length; i++) { // 'isTop': Number(funcResponse.list[i].top) === 1 ? true : false,
let item = res.data.list[i] // 'topCover': '',
let strategy = {
id: item.id,
image: (count == 0 && i == 0) ? item.topImg : item.cover,
title: item.title,
date: item.updateDate,
index: count + i - 1,
tags: item.tags.split(' '),
content: item.content
}
tempArray.push(strategy)
}
console.log('tempArray', tempArray)
if (that.data.pageNo == 1) {
var newArr = tempArray.slice(1)
var firstItem = tempArray[0]
console.log('firstItem', firstItem)
that.setData({
moreData: (tempArray.length >= Number(res.data.count)) ? false : true,
['strategyFirstItem.id']: firstItem.id,
['strategyFirstItem.image']: firstItem.image,
['strategyFirstItem.title']: firstItem.title,
['strategyFirstItem.date']: firstItem.date,
strategyList: newArr,
strategyOriginList: tempArray,
})
} else {
that.setData({
moreData: (count + tempArray.length >= Number(res.data.count)) ? false : true,
strategyOriginList: that.data.strategyOriginList.concat(tempArray),
strategyList: tempArray,
})
} }
// 游客攻略瀑布列表
// wx.lin.renderWaterFlow(that.data.strategyList, that.data.pageNo == 1 ? true : false, () => { })
wx.lin.renderWaterFlow(this.data.strategyList, false, () => {})
} else {
// if (funcItem) funcItem.topCover = funcResponse.list[i].topImg
funcList.push(funcItem)
} }
},
fail: function (err) { this.setData({
that.setData({ touristRouteList: funcList
loading: false
}) })
},
fail: (err) => {
} }
}) })
}, },
/**
* 游客攻略详情
* @function
* @param
* @returns
*/
onTouristRouteDetail: function (event) {
let funcItem = event.currentTarget.dataset.item
wx.navigateTo({
url: '/pages/play/strategy-detail/strategy-detail?id=' + funcItem.id
})
},
}) })
\ No newline at end of file
...@@ -6,8 +6,9 @@ ...@@ -6,8 +6,9 @@
<image src="./image/title-minor.png"></image> <image src="./image/title-minor.png"></image>
</view> </view>
<!-- 畅玩分类 -->
<view class="banner"> <view class="banner">
<image src="{{bannerImg}}"></image> <image src="{{resourcesBase + 'play/home/type.png'}}"></image>
<button class="art-button" bindtap="onToArt"></button> <button class="art-button" bindtap="onToArt"></button>
<button class="health-button" bindtap="onToHealth"></button> <button class="health-button" bindtap="onToHealth"></button>
<button class="food-button" bindtap="onToFood"></button> <button class="food-button" bindtap="onToFood"></button>
...@@ -15,24 +16,26 @@ ...@@ -15,24 +16,26 @@
<button class="hotel-button" bindtap="onToHotel"></button> <button class="hotel-button" bindtap="onToHotel"></button>
</view> </view>
<!-- 近期活动 -->
<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="onAllRecent" bindtap="onAllActivity">查看全部</text>
</view> </view>
<swiper class="recent-swiper" next-margin="38rpx" bindchange="swiperRecentChange"> <swiper class="activity-swiper" next-margin="38rpx" bindchange="swiperRecentChange">
<block wx:for="{{activity}}" wx:key="id"> <block wx:for="{{activityList}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<swiper-item class="recent-item"> <swiper-item class="activity-item" data-item="{{item}}" bindtap="onActivityDetail">
<image class="{{swiperRecentCurrent === index ? 'recent-item-left' : '' }} {{swiperRecentCurrent === banner.length - 1 ? 'recent-item-center' : ''}}" src="{{item.cover}}"></image> <image class="{{swiperRecentCurrent === index ? 'activity-item-left' : '' }} {{swiperRecentCurrent === banner.length - 1 ? 'activity-item-center' : ''}}" src="{{item.cover}}"></image>
</swiper-item> </swiper-item>
</block> </block>
</swiper> </swiper>
<!-- 热映影片 -->
<view class="title row con-b align-c"> <view class="title row con-b align-c">
<image src="./image/title-movie.png">热映影片</image> <image src="./image/title-movie.png"></image>
<text bindtap="onAllMovie">查看全部</text> <text bindtap="onAllMovie">查看全部</text>
</view> </view>
<swiper class="movie-swiper" next-margin="38rpx" bindchange="swiperMovieChange"> <swiper class="movie-swiper" next-margin="38rpx" bindchange="swiperMovieChange">
<block wx:for="{{movieList}}" wx:key="id"> <block wx:for="{{movieList}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<swiper-item class="movie-item col con-e"> <swiper-item class="movie-item col con-e">
<view class="movie-wrapper {{swiperMovieCurrent === index ? 'movie-item-left' : '' }} {{swiperMovieCurrent === movieList.length - 1 ? 'movie-item-center' : ''}}" bindtap="onMovieDetail" data-id="{{item.name}}"> <view class="movie-wrapper {{swiperMovieCurrent === index ? 'movie-item-left' : '' }} {{swiperMovieCurrent === movieList.length - 1 ? 'movie-item-center' : ''}}" bindtap="onMovieDetail" data-id="{{item.name}}">
<view class="movie-cover"> <view class="movie-cover">
...@@ -44,7 +47,7 @@ ...@@ -44,7 +47,7 @@
<text>{{item.movieName}}</text> <text>{{item.movieName}}</text>
</view> </view>
<view class="movie-tags row"> <view class="movie-tags row">
<block wx:for="{{item.tags}}" wx:for-item="tags" wx:key="index"> <block wx:for="{{item.tags}}" wx:for-index="index" wx:for-item="tags" wx:key="index">
<text>{{tags}}</text> <text>{{tags}}</text>
</block> </block>
</view> </view>
...@@ -76,25 +79,47 @@ ...@@ -76,25 +79,47 @@
<!-- 游客攻略 --> <!-- 游客攻略 -->
<view class="route"> <view class="route">
<view class="title row align-c"> <block wx:if="{{touristRouteList.length > 0}}">
<image src="./image/title-route.png">游客攻略</image> <view class="title row align-c">
</view> <image src="./image/title-route.png"></image>
<view style="margin-bottom:10px"> </view>
<l-water-flow column-gap="14rpx" generic:l-water-flow-item="strategy-item" bind:linitemtap="onStrategyDetail"></l-water-flow> <view class="route-list row con-b">
</view> <!-- 左侧列表 -->
</view> <view class="route-list-left">
<!-- <block wx:if="{{strategyOriginList.length > 0}}"> <block wx:for="{{touristRouteList}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="strategy detail-item" bindtap="onFirstStrategyDetail"> <view class="route-item" wx:if="{{index % 2 === 0}}" data-item="{{item}}" bindtap="onTouristRouteDetail">
<image src="./image/title-route.png"></image> <view class="row con-c align-c">
<view class="strategy-content"> <image src="{{item.cover}}" mode="aspectFill"></image>
<image class="background-image" src="{{strategyFirstItem.image}}" mode="aspectFit"></image> </view>
<view class="operation col"> <view class="route-item-tags row align-c">
<text>{{strategyFirstItem.title}}</text> <block wx:for="{{item.tags}}" wx:for-index="indexTags" wx:for-item="itemTags" wx:key="indexTags">
<text>{{'# ' + itemTags}}</text>
</block>
</view>
<text class="route-item-title">{{item.title}}</text>
<text class="route-item-content">{{item.date}}</text>
</view>
</block>
</view>
<!-- 右侧列表 -->
<view class="route-list-right">
<block wx:for="{{touristRouteList}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="route-item" wx:if="{{index % 2 === 1}}" data-item="{{item}}" bindtap="onTouristRouteDetail">
<view class="row con-c align-c">
<image src="{{item.cover}}" mode="aspectFill"></image>
</view>
<view class="route-item-tags row align-c">
<block wx:for="{{item.tags}}" wx:for-index="indexTags" wx:for-item="itemTags" wx:key="indexTags">
<text>{{'# ' + itemTags}}</text>
</block>
</view>
<text class="route-item-title">{{item.title}}</text>
<text class="route-item-content">{{item.date}}</text>
</view>
</block>
</view> </view>
</view> </view>
</view> </block>
<view style="margin-bottom:10px"> </view>
<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
/* page { .title {
background: linear-gradient(182deg,#FFFFFF 0%,#EBEDF7 100%); width: 670rpx;
} */ margin-top: 30rpx;
}
.navigation { .title > image {
z-index: 1900; width: 184rpx;
height: 44rpx;
} }
/* 顶部标题 */
.logo { .logo {
z-index: 1900; z-index: 1900;
position: fixed; position: fixed;
...@@ -30,6 +33,7 @@ ...@@ -30,6 +33,7 @@
height: 20rpx; height: 20rpx;
} }
/* 畅玩分类 */
.banner { .banner {
position: relative; position: relative;
margin-top: 200rpx; margin-top: 200rpx;
...@@ -37,6 +41,11 @@ ...@@ -37,6 +41,11 @@
height: 1200rpx; height: 1200rpx;
} }
.banner > image {
width: 750rpx;
height: 1200rpx;
}
.art-button { .art-button {
position: absolute; position: absolute;
top: 40rpx; top: 40rpx;
...@@ -82,38 +91,32 @@ ...@@ -82,38 +91,32 @@
background: transparent; background: transparent;
} }
/* 近期活动 */
.activity-swiper {
.all {
width: 104rpx;
height: 36rpx;
background-color: #ccc;
}
.recent-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;
} }
/* 热映影片 */
.movie-swiper { .movie-swiper {
width: 750rpx; width: 750rpx;
height: 366rpx; height: 366rpx;
...@@ -121,6 +124,11 @@ ...@@ -121,6 +124,11 @@
padding-bottom: 50rpx; padding-bottom: 50rpx;
} }
.movie-swiper image {
width: 100%;
height: 100%;
}
.movie-item { .movie-item {
width: 712rpx; width: 712rpx;
} }
...@@ -214,205 +222,80 @@ ...@@ -214,205 +222,80 @@
border-radius: 4rpx; border-radius: 4rpx;
} }
/* .banner, /* 游客攻略 */
swiper { .route {
position: relative;
width: 100%;
min-height: 480rpx;
margin-top: 100rpx;
} */
/*
swiper-item {
position: relative;
left: 56rpx;
width: 638rpx !important;
height: 480rpx !important;
} */
.banner-content {
width: 638rpx;
height: 408rpx;
margin-top: 36rpx;
padding: 0 24rpx;
border-radius: 2px;
overflow: hidden;
}
.banner-content-active {
width: 638rpx;
height: 480rpx;
border-radius: 2px;
overflow: hidden;
transition: all 0.2s ease-in 0s;
}
/* 更多活动 */
.activity {
width: 100%;
height: 34rpx;
margin-top: 32rpx;
padding: 0 56rpx;
font-size: 26rpx;
font-weight: bolder;
color: #1e2025;
}
.activity image {
width: 32rpx;
height: 32rpx;
}
/* 装饰波浪 */
.ornament-wave {
width: 750rpx;
height: 60rpx;
margin-top: 20rpx;
}
.ornament-wave image {
width: 750rpx;
height: 60rpx;
}
/* 标签选择 */
.tab {
width: 100%;
padding: 40rpx 40rpx 0 40rpx;
background: #fff;
}
.tab-fixed {
z-index: 1700;
position: fixed;
top: 68px;
left: 0;
padding: 40rpx;
}
.tab-blank {
width: 750rpx; width: 750rpx;
height: 190rpx; padding: 0 40rpx 100rpx 40rpx;
background: #fff; background: linear-gradient(180deg, #FFFFFF 0%, #F2F2F2 100%);
}
.tab .tab-item-active {
width: 100rpx;
height: 100rpx;
margin-bottom: 16rpx;
border-radius: 50%;
background: #e3eeff;
}
.tab .tab-item-inactive {
width: 100rpx;
height: 100rpx;
margin-bottom: 16rpx;
border-radius: 50%;
background: #f5f6f8;
}
.tab .tab-item-text-active {
color: #15191f;
} }
.tab .tab-item-text-inactive { .route-list {
color: #959da9; margin-top: 50rpx;
} }
.tab-item text { .route-list-left,
font-size: 24rpx; .route-list-right {
text-align: center; width: 328rpx;
} }
.tab-item image { .route-item {
width: 52rpx; display: flex;
height: 52rpx; flex-direction: column;
} max-width: 328rpx;
margin-top: 16rpx;
/* 标签详情 */ border-radius: 4rpx;
overflow: hidden;
.detail { background: #ffffff;
width: 750rpx;
min-height: 500rpx;
background: #fefefe;
} }
.detail image { .route-item image {
display: block; height: 468rpx;
width: 100%;
height: 100%;
} }
/* 商店详情 */ .route-list-right .route-item:first-child image {
height: 354rpx;
.shop-item {
position: relative;
width: 750rpx;
height: 1152rpx;
background: #f3f6fc;
} }
.shop-item image { .route-item-title {
display: block; display: -webkit-box;
width: 750rpx; margin: 24rpx 20rpx;
height: 1152rpx; font-size: 26rpx;
font-size: 0; font-weight: bolder;
} color: #000000;
.shop-item .button {
position: absolute;
width: 534rpx;
height: 96rpx;
background: #86c5e1;
border-radius: 2px;
overflow: hidden; overflow: hidden;
font-size: 30rpx; text-overflow: ellipsis;
font-weight: 500; line-clamp: 2;
color: #fff; -webkit-line-clamp: 2;
line-height: 42rpx; -webkit-box-orient: vertical;
}
image {
width: 100%;
height: 100%;
} }
/* 游客攻略 */ .route-item-tags {
.title { flex-wrap: wrap;
width: 670rpx; height: 32rpx;
margin-top: 30rpx; margin-top: 24rpx;
} padding: 0 24rpx;
.title > image {
width: 184rpx;
height: 44rpx;
}
.strategy-content {
z-index: 3;
position: relative;
width: 670rpx;
height: 320rpx;
margin-top: 32rpx;
border-radius: 2px;
overflow: hidden; overflow: hidden;
word-wrap: break-word;
} }
.strategy-content .operation { .route-item-tags text {
position: absolute; display: inline-block;
bottom: 32rpx; height: 32rpx;
margin: 0 40rpx; margin-right: 16rpx;
} padding: 0 12rpx;
border-radius: 4px;
background: #15191F;
.strategy-content .operation text { white-space: nowrap;
/* height: 40rpx; */ font-size: 18rpx;
font-size: 38rpx; font-weight: 500;
font-weight: 800; line-height: 32rpx;
color: #ffffff; color: #FFFFFF;
} }
.detail-item {
margin-top: 58rpx; .route-item-content {
margin: 0 24rpx 24rpx 24rpx;
font-size: 22rpx;
color: #959DA9;
} }
\ No newline at end of file
...@@ -245,19 +245,15 @@ Page({ ...@@ -245,19 +245,15 @@ Page({
// 读取预设信息,banner 图片等等 // 读取预设信息,banner 图片等等
for (let i = 0, l = funcDetail.length; i < l; i++) { for (let i = 0, l = funcDetail.length; i < l; i++) {
console.log(funcAppId)
console.log(funcDetail[i].appId)
if (funcAppId === funcDetail[i].appId) { if (funcAppId === funcDetail[i].appId) {
funcIndex = i funcIndex = i
break break
} }
} }
console.log(funcIndex)
// 缓存当前商店信息 // 缓存当前商店信息
for (let i = 0, l = App.globalData.shopId.length; i < l; i++) { for (let i = 0, l = App.globalData.shopId.length; i < l; i++) {
if (funcAppId === App.globalData.shopId[i].appId) { if (funcAppId === App.globalData.shopId[i].appId) {
console.log(funcAppId)
let funcItem = { let funcItem = {
'id': App.globalData.shopId[i].id, 'id': App.globalData.shopId[i].id,
'appId': App.globalData.shopId[i].appId, 'appId': App.globalData.shopId[i].appId,
...@@ -303,7 +299,6 @@ Page({ ...@@ -303,7 +299,6 @@ Page({
let shopInfo = wx.getStorageSync('shopInfoBuffer') let shopInfo = wx.getStorageSync('shopInfoBuffer')
let officeId = shopInfo.id let officeId = shopInfo.id
let genre = shopInfo.shopType let genre = shopInfo.shopType
console.log(shopInfo)
App.wxRequest({ App.wxRequest({
url: '/api/v1/commodity/recommend', url: '/api/v1/commodity/recommend',
data: { data: {
...@@ -313,7 +308,6 @@ Page({ ...@@ -313,7 +308,6 @@ Page({
}, },
success: function(res) { success: function(res) {
let funcResponse = res.data let funcResponse = res.data
console.log(funcResponse)
let funcList = [] let funcList = []
for (let i = 0, l = funcResponse.length; i < l; i++) { for (let i = 0, l = funcResponse.length; i < l; i++) {
let funcItem = { let funcItem = {
...@@ -417,7 +411,6 @@ Page({ ...@@ -417,7 +411,6 @@ Page({
}, },
onPageScroll: function (funcEvent) { onPageScroll: function (funcEvent) {
// console.log(funcEvent)
// 优化滚动事件触发频率 // 优化滚动事件触发频率
if (logicData.pageScrollLock) return if (logicData.pageScrollLock) return
logicData.pageScrollLock = true logicData.pageScrollLock = true
...@@ -537,7 +530,6 @@ Page({ ...@@ -537,7 +530,6 @@ Page({
}) })
}, },
onToBuy: function (event) { onToBuy: function (event) {
console.log(event.currentTarget.dataset)
let id = event.currentTarget.dataset.id let id = event.currentTarget.dataset.id
let classifyId = event.currentTarget.dataset.classid let classifyId = event.currentTarget.dataset.classid
wx.navigateTo({ wx.navigateTo({
......
let logicData = {
pageScrollLock: false,
pageScrollTimer: 0,
}
const App = getApp()
Page({ Page({
data: { data: {
isNavigationWhite: false,
banner: [],
bannerIndex: 0,
title: '',
content: '', // 内容
detailImage: [],
detailImageUrl: [],
detailIndex: 0,
date: '',
//接口参数
id: '',
relation: [], // 文中提及列表
}, },
onLoad: function (options) { onLoad: function (options) {
this.setData({
id: options.id,
})
this.queryTouristRouteDetail()
},
/**
* 游客攻略详情
* @function
* @param
* @returns
*/
queryTouristRouteDetail() {
App.wxRequest({
url: '/api/v1/strategy/getDetail',
data: { id: this.data.id },
success: (res) => {
// 此代码段处理目的为,匹配富文本代码中的 <img> 标签,并将其图片的宽度修改为适应屏幕
// width:100% --- 图片宽度加以限制,避免超出屏幕
// height:auto --- 高度自适应
// display:block --- 此代码,可以去掉图片之间的空白间隔,个人觉得好用
let 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>');
this.setData({
banner: res.data.banners,
content: content,
date: res.data.updateDate,
title: res.data.title
})
this.queryRelation(res.data.smParkIds)
},
})
},
/**
* 文中提及列表
* @function
* @param
* @returns
*/
queryRelation: function (parkIds) {
if (!parkIds) {
return
}
App.wxRequest({
url: '/api/v1/park/getParksByParkIds',
data: { smParkIds: parkIds },
success: (response) => {
let funcResponse = response.data
let funcList = []
for (let i = 0, l = funcResponse.length; i < l; i++) {
let funcItem = {
'id': funcResponse[i].id,
'cover': funcResponse[i].cardImg,
'title': funcResponse[i].name,
'time': '营业时间 ' + funcResponse[i].businessTime,
'price': funcResponse[i].chargeStandard,
'describe': '',
}
funcList.push(funcItem)
}
this.setData({
relation: funcList
})
}
})
},
/**
* 文中提及跳转
* @function
* @param
* @returns
*/
onRelation: function (event) {
let funcShopId = event.currentTarget.dataset.id
let funcShopAppId = ''
for (let i = 0, l = App.globalData.pointInfo.length; i < l; i++) {
if (funcShopId === App.globalData.pointInfo[i].id) {
funcShopAppId = App.globalData.pointInfo[i].appId
break
}
}
if (funcShopAppId && funcShopAppId !== 3) {
wx.navigateTo({
url: '/pages/play/service-detail/service-detail?id=' + funcShopAppId
})
return
}
if (funcShopAppId && funcShopAppId === 3) {
wx.navigateTo({
url: '/pages/campsite/home-mirror/home-mirror'
})
return
}
},
/**
* banner 变换事件
* @function
* @param
* @returns
*/
eventSwiperChange: function (event) {
this.setData({
bannerIndex: event.detail.current
})
},
/**
* 页面滚动事件
* @function
* @param
* @returns
*/
eventPageScroll: function (event) {
// 优化滚动事件触发频率
if (logicData.pageScrollLock) return
logicData.pageScrollLock = true
if (event.scrollTop > 40 && !this.data.isNavigationWhite) {
this.setData({
isNavigationWhite: true
})
wx.setNavigationBarColor({
frontColor: '#000000',
backgroundColor: '#000000',
})
}
if (event.scrollTop <= 40) {
this.setData({
isNavigationWhite: false
})
wx.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#ffffff',
})
}
// 恢复滚动事件
logicData.pageScrollTimer = setTimeout(function () {
logicData.pageScrollLock = false
clearTimeout(logicData.pageScrollTimer)
}, 40)
}, },
}) })
\ No newline at end of file
{ {
"usingComponents": {} "usingComponents": {
"parser": "../../component/parser.min/parser"
}
} }
\ No newline at end of file
<!--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="eventPageScroll">
<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="onRelation">
<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/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;
}
\ 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