Myth
5 years ago
23 changed files with 743 additions and 22 deletions
@ -0,0 +1,151 @@ |
|||
// pages/activity/springten/index.js
|
|||
import commonApi from "../../../utils/https/common" |
|||
import util from "../../../utils/util" |
|||
let app = getApp() |
|||
Page({ |
|||
|
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
types:['必赏','必吃','必游','必玩','必购','必住','赏夜戏','品夜饮','尝夜宴','逛夜市'], |
|||
type:0, |
|||
list:[], |
|||
total:1, |
|||
areas:[], |
|||
areaIndex:-1 |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad: function (options) { |
|||
// 获取当前定位
|
|||
commonApi._post("act/get_suzhou_areas").then(res=>{ |
|||
res.data.unshift({ |
|||
area_id:"", |
|||
area_title:"苏州" |
|||
}) |
|||
this.setData({ |
|||
areas:res.data, |
|||
areaIndex:0 |
|||
}) |
|||
}) |
|||
this.getList() |
|||
}, |
|||
changeArea:function(e){ |
|||
this.setData({ |
|||
areaIndex:e.detail.value, |
|||
list:[], |
|||
total:1 |
|||
}) |
|||
this.getList(); |
|||
}, |
|||
changeType:function(e){ |
|||
this.setData({ |
|||
type:e.currentTarget.dataset.type, |
|||
list:[], |
|||
total:1 |
|||
}) |
|||
this.getList(); |
|||
}, |
|||
getList:function(){ |
|||
if(this.data.total<=this.data.list.length) return; |
|||
commonApi._post("scene/get_scene_by_tag",{ |
|||
offset:this.data.list.length, |
|||
limit:30, |
|||
tag_id:this.data.type!=0?161+Number(this.data.type):171, |
|||
area_id:this.data.areaIndex>-1?this.data.areas[this.data.areaIndex].area_id:null |
|||
}).then(res=>{ |
|||
res.data.list.map(item=>{ |
|||
if(item.type && item.type.indexOf('tenscenic')!=-1){ |
|||
item.isYunHe = true; |
|||
} |
|||
else { |
|||
item.isYunHe = false; |
|||
} |
|||
item.brief_intro = item.brief_intro?item.brief_intro.replace(/<\/?.+?>/g,""):""; |
|||
item.display_tags = item.display_tags?item.display_tags.split(","):[]; |
|||
item.display_tags = item.display_tags.splice(0,2); |
|||
}) |
|||
this.setData({ |
|||
list:this.data.list.concat(res.data.list), |
|||
total:res.data.count |
|||
}) |
|||
}) |
|||
}, |
|||
gotoWeb:function(e){ |
|||
let item = e.currentTarget.dataset.item; |
|||
app.globalData.weburl = item.ext_link; |
|||
wx.navigateTo({ |
|||
url: '/pages/pbService/web/index', |
|||
}) |
|||
}, |
|||
gotoDetail:function(e){ |
|||
let item = e.currentTarget.dataset.item; |
|||
util.gotoDetail(item) |
|||
}, |
|||
gotoLocation:function(e){ |
|||
let item = e.currentTarget.dataset.item; |
|||
wx.openLocation({ |
|||
latitude: item.lat, |
|||
longitude: item.lon, |
|||
name:item.title, |
|||
address:item.address |
|||
}) |
|||
}, |
|||
gotoFoodInfo:function(e){ |
|||
let item = e.currentTarget.dataset.item; |
|||
wx.navigateTo({ |
|||
url: '/pages/info/foodInfo/index?id='+item.id, |
|||
}) |
|||
}, |
|||
/** |
|||
* 生命周期函数--监听页面初次渲染完成 |
|||
*/ |
|||
onReady: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
onHide: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面卸载 |
|||
*/ |
|||
onUnload: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面相关事件处理函数--监听用户下拉动作 |
|||
*/ |
|||
onPullDownRefresh: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom: function () { |
|||
// this.getList()
|
|||
}, |
|||
|
|||
/** |
|||
* 用户点击右上角分享 |
|||
*/ |
|||
onShareAppMessage: function () { |
|||
|
|||
} |
|||
}) |
|||
@ -0,0 +1,5 @@ |
|||
{ |
|||
"usingComponents": { |
|||
"title":"/pages/component/TitleHeader" |
|||
} |
|||
} |
|||
@ -0,0 +1,38 @@ |
|||
<!--pages/activity/springten/index.wxml--> |
|||
<title title="苏州游必选榜"></title> |
|||
<image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/autumnten/top.png" mode="widthFix" class="top-img"></image> |
|||
<picker mode="selector" value="{{areaIndex}}" range="{{areas}}" range-key="area_title" bindchange="changeArea"> |
|||
<view class="picker"> |
|||
<view class="areatext">{{areas[areaIndex].area_title}}</view> |
|||
<view class="iconfont icon-xia"></view> |
|||
</view> |
|||
</picker> |
|||
<view class="type-icons"> |
|||
<view wx:for="{{types}}" bindtap="changeType" data-type="{{index}}" class="type-icon {{type==index?'type-icon-active':''}}"> |
|||
<image mode="widthFix" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/autumnten/bg{{type==index?'1':''}}.png"></image> |
|||
<view class="icon-text">{{item}}</view> |
|||
</view> |
|||
</view> |
|||
<view style="height:13rpx"></view> |
|||
<view class="list" style="padding-bottom:30rpx"> |
|||
<view class="item-box" wx:for="{{list}}"> |
|||
<view class="item-bg"></view> |
|||
<image mode="widthFix" class="lefticon" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/autumnten/lefticon.png"></image> |
|||
<image mode="widthFix" class="righticon" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/autumnten/righticon.png"></image> |
|||
<view class="item"> |
|||
<view class="item-in"> |
|||
<image src="{{item.headimg}}" mode="aspectFill"></image> |
|||
<view class="item-info"> |
|||
<view class="item-title textOver">{{item.title}}</view> |
|||
<view class="item-result textOver">上榜理由：{{item.brief_intro}}</view> |
|||
<view class="item-address textOver">地址：{{item.address}}</view> |
|||
</view> |
|||
</view> |
|||
<view class="item-btn" bindtap="gotoLocation" data-item="{{item}}" wx:if="{{item.is_nav}}">打开导航</view> |
|||
<view class="item-btn" bindtap="gotoFoodInfo" data-item="{{item}}" wx:elif="{{item.isYunHe}}">查看详情</view> |
|||
<view bindtap="gotoDetail" data-item="{{item}}" class="item-btn" wx:else>立即预订</view> |
|||
</view> |
|||
</view> |
|||
<!-- <view class="nomore" wx:if="{{list.length>=total || list.length==0}}">—— 没有更多了 ——</view> --> |
|||
</view> |
|||
<navigator wx:if="{{total>30}}" class="btn" url="list/index?type={{type}}&area_id={{areas[areaIndex].area_id}}">查看更多</navigator> |
|||
@ -0,0 +1,202 @@ |
|||
/* pages/activity/springten/index.wxss */ |
|||
page { |
|||
background: #fffce8; |
|||
} |
|||
.top-img { |
|||
display: block; |
|||
width: 100%; |
|||
position: absolute; |
|||
left: 0; |
|||
z-index: 0; |
|||
} |
|||
.type-icons { |
|||
position: relative; |
|||
z-index: 1; |
|||
margin: 0 20rpx; |
|||
margin-top: 357rpx; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: space-between; |
|||
} |
|||
.type-icon { |
|||
width: 131rpx; |
|||
height: 109rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
text-align: center; |
|||
font-size: 28rpx; |
|||
color: #fff; |
|||
font-weight: 500; |
|||
position: relative; |
|||
margin-top: 20rpx; |
|||
} |
|||
.type-icon-active { |
|||
color: #000; |
|||
} |
|||
.icon-text { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
right: 0; |
|||
/* bottom: 20rpx; */ |
|||
line-height: 88rpx; |
|||
z-index: 1; |
|||
} |
|||
.type-icon image { |
|||
width: 131rpx; |
|||
height: 109rpx; |
|||
} |
|||
.type-icon-active image { |
|||
width: 131rpx; |
|||
height: 109rpx; |
|||
} |
|||
.list { |
|||
/* background:url(https://m.cloud.sz-trip.com/static/images/activity/topten/hua0326.png) repeat-y; */ |
|||
background-size: 100%; |
|||
} |
|||
.item-box { |
|||
margin: 0 20rpx; |
|||
padding-top: 23rpx; |
|||
margin-top: 20rpx; |
|||
position: relative; |
|||
width: 710rpx; |
|||
height: 200rpx; |
|||
} |
|||
.item-bg { |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
width: 710rpx; |
|||
height: 183rpx; |
|||
background: #F59224; |
|||
border-radius: 13rpx; |
|||
top: 20rpx; |
|||
transform: rotate(2deg); |
|||
} |
|||
.lefticon,.righticon { |
|||
position: absolute; |
|||
top: 0; |
|||
margin-top: -30rpx; |
|||
display: block; |
|||
width: 53rpx; |
|||
} |
|||
.lefticon { |
|||
margin-left: -10rpx; |
|||
} |
|||
.righticon { |
|||
width: 42rpx; |
|||
right: 0; |
|||
margin-right: -10rpx; |
|||
margin-top: -20rpx; |
|||
} |
|||
.item { |
|||
background: white; |
|||
position: relative; |
|||
z-index: 1; |
|||
height: 177rpx; |
|||
width: 700rpx; |
|||
margin: 0 5rpx; |
|||
border-radius: 13rpx; |
|||
} |
|||
.nomore { |
|||
margin-top: 50rpx; |
|||
line-height: 50rpx; |
|||
font-size: 23rpx; |
|||
text-align: center; |
|||
} |
|||
.item-in { |
|||
display: flex; |
|||
padding: 20rpx; |
|||
justify-content: space-between; |
|||
} |
|||
.item-in image { |
|||
width: 199rpx; |
|||
height: 133rpx; |
|||
display: block; |
|||
flex-shrink: 0; |
|||
} |
|||
.item-info { |
|||
flex: 1; |
|||
width: 351rpx; |
|||
margin-left: 30rpx; |
|||
} |
|||
.item-title { |
|||
font-size: 35rpx; |
|||
font-weight: bold; |
|||
} |
|||
.item-tags { |
|||
display: flex; |
|||
margin-top: 30rpx; |
|||
margin-bottom: 18rpx; |
|||
font-size: 24rpx; |
|||
} |
|||
.item-tags .tag { |
|||
line-height: 36rpx; |
|||
background: linear-gradient(0deg, #BE8CDF, #724796); |
|||
border-radius: 7rpx; |
|||
color: #fff; |
|||
padding: 0 13rpx; |
|||
margin-right: 12rpx; |
|||
} |
|||
.item-tags .tag:last-child { |
|||
margin-right: 0; |
|||
} |
|||
.item-address { |
|||
font-size: 23rpx; |
|||
color: #666666; |
|||
width: 280rpx; |
|||
} |
|||
.item-result { |
|||
font-size: 25rpx; |
|||
color: #E06400; |
|||
margin:10rpx 0 |
|||
} |
|||
.item-btn { |
|||
position: absolute; |
|||
right: 20rpx; |
|||
bottom: 12rpx; |
|||
width: 160rpx; |
|||
line-height: 50rpx; |
|||
background: linear-gradient(180deg, #ED9C4D, #F9750A); |
|||
text-align: center; |
|||
color: #fff; |
|||
font-size: 29rpx; |
|||
border-radius: 27rpx; |
|||
} |
|||
.item-result span { |
|||
font-size: 25rpx !important; |
|||
} |
|||
.picker { |
|||
position: fixed; |
|||
right: 30rpx; |
|||
margin-top: 30rpx; |
|||
z-index: 2; |
|||
display: flex; |
|||
align-items: center; |
|||
width: 105rpx; |
|||
height: 52rpx; |
|||
border-radius: 26rpx; |
|||
justify-content: center; |
|||
background: #FFFFFF; |
|||
font-size: 27rpx; |
|||
border: 1rpx solid #333; |
|||
} |
|||
.picker .iconfont { |
|||
font-size: 20rpx; |
|||
margin-bottom: 4rpx; |
|||
margin-left: 4rpx; |
|||
} |
|||
.areatext { |
|||
} |
|||
.btn { |
|||
width: 220rpx; |
|||
line-height: 57rpx; |
|||
text-align: center; |
|||
background: #FFFFFF; |
|||
border: 1rpx solid #999999; |
|||
border-radius: 29rpx; |
|||
color: #333; |
|||
font-size: 23rpx; |
|||
margin: 40rpx auto; |
|||
} |
|||
@ -0,0 +1,138 @@ |
|||
// pages/activity/springten/list/index.js
|
|||
import commonApi from "../../../../utils/https/common" |
|||
import util from "../../../../utils/util" |
|||
Page({ |
|||
|
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
types:['必赏','必吃','必游','必玩','必购','必住','赏夜戏','品夜饮','尝夜宴','逛夜市'], |
|||
type:0, |
|||
list:[], |
|||
area_id:"" |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad: function (options) { |
|||
this.setData({ |
|||
type:options.type, |
|||
area_id:options.area_id |
|||
}) |
|||
this.getList(); |
|||
}, |
|||
getList:function(){ |
|||
if(this.data.total<=this.data.list.length) return; |
|||
commonApi._post("scene/get_scene_by_tag",{ |
|||
offset:this.data.list.length, |
|||
limit:30, |
|||
tag_id:this.data.type!=0?17+Number(this.data.type):27, |
|||
area_id:this.data.area_id |
|||
}).then(res=>{ |
|||
res.data.list.map(item=>{ |
|||
if(item.type && item.type.indexOf('tenscenic')!=-1){ |
|||
item.isYunHe = true; |
|||
} |
|||
else { |
|||
item.isYunHe = false; |
|||
} |
|||
item.brief_intro = item.brief_intro.replace(/<\/?.+?>/g,""); |
|||
item.display_tags = item.display_tags?item.display_tags.split(","):[]; |
|||
item.display_tags = item.display_tags.splice(0,2); |
|||
}) |
|||
this.setData({ |
|||
list:this.data.list.concat(res.data.list), |
|||
total:res.data.count |
|||
}) |
|||
}) |
|||
}, |
|||
detail:function(e){ |
|||
let item = e.currentTarget.dataset.item; |
|||
if(item.is_nav){ |
|||
this.gotoLocation(e); |
|||
} |
|||
else if(item.type && item.type.indexOf('tenscenic')!=-1){ |
|||
this.gotoFoodInfo(e) |
|||
} |
|||
else { |
|||
this.gotoDetail(e) |
|||
} |
|||
}, |
|||
gotoWeb:function(e){ |
|||
let item = e.currentTarget.dataset.item; |
|||
app.globalData.weburl = item.ext_link; |
|||
wx.navigateTo({ |
|||
url: '/pages/pbService/web/index', |
|||
}) |
|||
}, |
|||
gotoDetail:function(e){ |
|||
let item = e.currentTarget.dataset.item; |
|||
util.gotoDetail(item) |
|||
}, |
|||
gotoLocation:function(e){ |
|||
let item = e.currentTarget.dataset.item; |
|||
wx.openLocation({ |
|||
latitude: item.lat, |
|||
longitude: item.lon, |
|||
name:item.title, |
|||
address:item.address |
|||
}) |
|||
}, |
|||
gotoFoodInfo:function(e){ |
|||
let item = e.currentTarget.dataset.item; |
|||
wx.navigateTo({ |
|||
url: '/pages/info/foodInfo/index?id='+item.id, |
|||
}) |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面初次渲染完成 |
|||
*/ |
|||
onReady: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
onHide: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面卸载 |
|||
*/ |
|||
onUnload: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面相关事件处理函数--监听用户下拉动作 |
|||
*/ |
|||
onPullDownRefresh: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom: function () { |
|||
this.getList() |
|||
}, |
|||
|
|||
/** |
|||
* 用户点击右上角分享 |
|||
*/ |
|||
onShareAppMessage: function () { |
|||
|
|||
} |
|||
}) |
|||
@ -0,0 +1,5 @@ |
|||
{ |
|||
"usingComponents": { |
|||
"title":"/pages/component/TitleHeader" |
|||
} |
|||
} |
|||
@ -0,0 +1,12 @@ |
|||
<!--pages/activity/springten/list/index.wxml--> |
|||
<title title="{{types[type]}}榜单"></title> |
|||
<view wx:for="{{list}}" bindtap="detail" data-item="{{item}}" class="item-box"> |
|||
<view class="item-bg"></view> |
|||
<view class="item"> |
|||
<view style="flex:1;width:500rpx"> |
|||
<view class="title textOver">{{item.title}}</view> |
|||
<view class="address textOver"><text class="iconfont icon-location"></text>{{item.address}}</view> |
|||
</view> |
|||
<image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/autumnten/btn.png" mode="aspectFill"></image> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,54 @@ |
|||
/* pages/activity/springten/list/index.wxss */ |
|||
.item { |
|||
width: 626rpx; |
|||
display: flex; |
|||
background: white; |
|||
/* background:url(https://static.ticket.sz-trip.com/uploads/20210401/09b3cdf766827f3194a021511cf33030.png); */ |
|||
height: 116rpx; |
|||
padding: 0 30rpx; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
background-size: 100% 100%; |
|||
position: relative; |
|||
z-index: 1; |
|||
border-radius: 13rpx; |
|||
} |
|||
.item-bg { |
|||
background: #F59224; |
|||
border-radius: 13rpx; |
|||
top: 20rpx; |
|||
transform: rotate(2deg); |
|||
position: absolute; |
|||
left: 25rpx; |
|||
right: 25rpx; |
|||
top: 0; |
|||
/* height: 130rpx; */ |
|||
bottom: 0; |
|||
} |
|||
.item-box { |
|||
position: relative; |
|||
height: 130rpx; |
|||
margin: 50rpx 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.item image { |
|||
width: 86rpx; |
|||
height: 86rpx; |
|||
display: block; |
|||
flex-shrink: 0; |
|||
} |
|||
.item .title { |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
} |
|||
.item .address { |
|||
color: #666; |
|||
font-size: 24rpx; |
|||
margin-top: 8rpx; |
|||
} |
|||
.item .iconfont { |
|||
font-size: 24rpx; |
|||
margin-right: 4rpx; |
|||
} |
|||
Loading…
Reference in new issue