Myth
5 years ago
20 changed files with 1099 additions and 33 deletions
@ -0,0 +1,180 @@ |
|||
// pages/activity/artfestival/index.js
|
|||
import commonApi from "../../../utils/https/common" |
|||
let app = getApp() |
|||
Page({ |
|||
|
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
index:1, |
|||
page:1, |
|||
total:1, |
|||
list:[], |
|||
left:[], |
|||
right:[], |
|||
imgIndex:-1, |
|||
leftHeight:0, |
|||
rightHeight:0, |
|||
ajaxFlag:true |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad: function (options) { |
|||
this.getList() |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面初次渲染完成 |
|||
*/ |
|||
onReady: function () { |
|||
|
|||
}, |
|||
getList:function(){ |
|||
if((this.data.left.length+this.data.right.length)>=this.data.total || !this.data.ajaxFlag) return; |
|||
this.setData({ |
|||
ajaxFlag:false |
|||
}) |
|||
commonApi._post("multimedia/media_list",{ |
|||
page:this.data.page, |
|||
limit:10, |
|||
tenscenic_id:0, |
|||
class_id:this.data.index, |
|||
type:2 |
|||
}).then(res=>{ |
|||
wx.showLoading({ |
|||
title: '加载中', |
|||
}) |
|||
this.setData({ |
|||
total:res.data.total, |
|||
page:this.data.page+1, |
|||
list:res.data.data, |
|||
imgIndex:0 |
|||
}) |
|||
}) |
|||
}, |
|||
imageLoad:function(e){ |
|||
if(this.data.imgIndex==-1) return; |
|||
let h = 304 * e.detail.height/e.detail.width + 33 + 26,leftHeight=this.data.leftHeight,rightHeight = this.data.rightHeight,left=this.data.left,right=this.data.right; |
|||
let item = this.data.list[this.data.imgIndex]; |
|||
item.h = h - 33 - 26; |
|||
if(leftHeight<=rightHeight){ |
|||
left.push(item); |
|||
leftHeight = leftHeight + h; |
|||
} |
|||
else { |
|||
right.push(item); |
|||
rightHeight = rightHeight + h; |
|||
} |
|||
this.setData({ |
|||
// imgIndex:this.data.imgIndex+1,
|
|||
left:left, |
|||
right:right, |
|||
leftHeight:leftHeight, |
|||
rightHeight:rightHeight |
|||
}) |
|||
if(this.data.imgIndex>=this.data.list.length-1){ |
|||
wx.hideLoading({ |
|||
}); |
|||
this.setData({ |
|||
ajaxFlag:true |
|||
}) |
|||
} |
|||
else { |
|||
this.setData({ |
|||
imgIndex:this.data.imgIndex+1 |
|||
}) |
|||
} |
|||
}, |
|||
changeType:function(e){ |
|||
let index = e.currentTarget.dataset.type; |
|||
this.setData({ |
|||
list:[], |
|||
total:1, |
|||
page:1, |
|||
index:index, |
|||
left:[], |
|||
right:[], |
|||
leftHeight:0, |
|||
rightHeight:0, |
|||
imgIndex:-1, |
|||
ajaxFlag:true |
|||
}) |
|||
this.getList() |
|||
}, |
|||
goTop:function(){ |
|||
wx.pageScrollTo({ |
|||
duration: 200, |
|||
scrollTop:0 |
|||
}) |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
onHide: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面卸载 |
|||
*/ |
|||
onUnload: function () { |
|||
|
|||
}, |
|||
previewImg:function(e){ |
|||
let item = e.currentTarget.dataset.item; |
|||
wx.showLoading({ |
|||
title: '加载中', |
|||
}) |
|||
wx.downloadFile({ |
|||
url: item.head_img, |
|||
success:function(r){ |
|||
console.log(r) |
|||
wx.previewImage({ |
|||
urls: [r.tempFilePath], |
|||
current:r.tempFilePath |
|||
}) |
|||
}, |
|||
complete:function(){ |
|||
wx.hideLoading({ |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
goVr:function(){ |
|||
app.globalData.weburl = "https://video.9jiexia.com/QuanJMY/suzhou/suzhoumeishuguan/index.html" |
|||
wx.navigateTo({ |
|||
url: '/pages/pbService/web/index' |
|||
}) |
|||
}, |
|||
/** |
|||
* 页面相关事件处理函数--监听用户下拉动作 |
|||
*/ |
|||
onPullDownRefresh: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom: function () { |
|||
this.getList() |
|||
}, |
|||
|
|||
/** |
|||
* 用户点击右上角分享 |
|||
*/ |
|||
onShareAppMessage: function () { |
|||
|
|||
} |
|||
}) |
|||
@ -0,0 +1,3 @@ |
|||
{ |
|||
"usingComponents": {} |
|||
} |
|||
@ -0,0 +1,40 @@ |
|||
<!--pages/activity/artfestival/index.wxml--> |
|||
<image class="main-img" src="https://m.cloud.sz-trip.com/static/images/activity/artfestival/top.png" mode="widthFix"></image> |
|||
<image wx:if="{{imgIndex>-1 && imgIndex<list.length}}" src="{{list[imgIndex].head_img}}?x-oss-process=image/resize,w_500,m_lfit" bindload="imageLoad" mode="widthFix" class="testimg"></image> |
|||
<view class="vr-box" bindtap="goVr">点击体验VR观展</view> |
|||
<view class="menus"> |
|||
<view bindtap="changeType" data-type="1" class="menu{{index==1?' active':''}}"> |
|||
<image src="https://m.cloud.sz-trip.com/static/images/activity/artfestival/bg{{index==1?'1':'0'}}.png" mode="aspectFill"></image> |
|||
<view>美术作品</view> |
|||
</view> |
|||
<view bindtap="changeType" data-type="3" class="menu{{index==3?' active':''}}"> |
|||
<image src="https://m.cloud.sz-trip.com/static/images/activity/artfestival/bg{{index==3?'1':'0'}}.png" mode="aspectFill"></image> |
|||
<view>书法篆刻</view> |
|||
</view> |
|||
<view bindtap="changeType" data-type="2" class="menu{{index==2?' active':''}}"> |
|||
<image src="https://m.cloud.sz-trip.com/static/images/activity/artfestival/bg{{index==2?'1':'0'}}.png" mode="aspectFill"></image> |
|||
<view>评委作品</view> |
|||
</view> |
|||
<view bindtap="changeType" data-type="4" class="menu{{index==4?' active':''}}"> |
|||
<image src="https://m.cloud.sz-trip.com/static/images/activity/artfestival/bg{{index==4?'1':'0'}}.png" mode="aspectFill"></image> |
|||
<view>特邀作品</view> |
|||
</view> |
|||
</view> |
|||
<view class="list"> |
|||
<view class="list-left"> |
|||
<view class="list-item" bindtap="previewImg" data-item="{{item}}" wx:for="{{left}}"> |
|||
<image style="height:{{item.h}}rpx" src="{{item.head_img}}?x-oss-process=image/resize,w_500,m_lfit" mode="aspectFill"></image> |
|||
<view class="img-text textOver">{{item.title}}</view> |
|||
</view> |
|||
</view> |
|||
<view class="list-left"> |
|||
<view class="list-item" bindtap="previewImg" data-item="{{item}}" wx:for="{{right}}"> |
|||
<image style="height:{{item.h}}rpx" src="{{item.head_img}}?x-oss-process=image/resize,w_500,m_lfit" mode="aspectFill"></image> |
|||
<view class="img-text textOver">{{item.title}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="nomore" wx:if="{{(left.length+right.length)>=total}}">没有更多数据了</view> |
|||
<image src="https://m.cloud.sz-trip.com/static/images/activity/artfestival/text.png" mode="widthFix" class="bottomimg"></image> |
|||
<image bindtap="goTop" src="https://m.cloud.sz-trip.com/static/images/activity/artfestival/topbtn.png" mode="widthFix" class="btnimg"></image> |
|||
<view style="height:1rpx"></view> |
|||
@ -0,0 +1,115 @@ |
|||
/* pages/activity/artfestival/index.wxss */ |
|||
.main-img { |
|||
display: block; |
|||
width: 100%; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
} |
|||
.menus { |
|||
display: flex; |
|||
margin: 0 30rpx; |
|||
margin-top: 354rpx; |
|||
margin-bottom: 46rpx; |
|||
justify-content: space-between; |
|||
} |
|||
.menu { |
|||
position: relative; |
|||
width: 153rpx; |
|||
line-height: 53rpx; |
|||
font-size: 32rpx; |
|||
color: #fff; |
|||
text-align: center; |
|||
} |
|||
.menu image { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
width: 153rpx; |
|||
height: 53rpx; |
|||
} |
|||
.menu.active { |
|||
font-weight: 500; |
|||
color: #C9161E; |
|||
} |
|||
.menu view { |
|||
position: relative; |
|||
z-index: 1; |
|||
} |
|||
page { |
|||
background: url(https://m.cloud.sz-trip.com/static/images/activity/artfestival/bg.png); |
|||
background-size: 100%; |
|||
background-repeat: repeat-y; |
|||
} |
|||
.list { |
|||
margin: 0 30rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
flex-wrap: wrap; |
|||
min-height: 100rpx; |
|||
} |
|||
.list-left { |
|||
width: 330rpx; |
|||
} |
|||
.list-item { |
|||
position: relative; |
|||
padding: 13rpx; |
|||
background: #FEE5C6; |
|||
margin-bottom: 33rpx; |
|||
} |
|||
.list-item image { |
|||
width: 100%; |
|||
display: block; |
|||
} |
|||
.img-text { |
|||
line-height: 46rpx; |
|||
font-size: 27rpx; |
|||
color: #fff; |
|||
padding: 0 15rpx; |
|||
position: absolute; |
|||
left: 13rpx; |
|||
right: 13rpx; |
|||
bottom: 40rpx; |
|||
background: rgba(0, 0, 0, 0.3); |
|||
} |
|||
.testimg { |
|||
position: absolute; |
|||
width: 304rpx; |
|||
opacity: 0; |
|||
z-index: -1; |
|||
display: block; |
|||
} |
|||
.bottomimg { |
|||
display: block; |
|||
width: 356rpx; |
|||
margin: 40rpx auto; |
|||
} |
|||
.btnimg { |
|||
position: fixed; |
|||
right: 30rpx; |
|||
bottom: 70rpx; |
|||
width: 84rpx; |
|||
display: block; |
|||
z-index: 2; |
|||
} |
|||
.nomore { |
|||
text-align: center; |
|||
margin-top: 30rpx; |
|||
font-size: 26rpx; |
|||
color: #ddd; |
|||
} |
|||
.vr-box { |
|||
width: 240rpx; |
|||
text-align: center; |
|||
line-height: 56rpx; |
|||
font-size: 25rpx; |
|||
border-radius: 29rpx; |
|||
border: 1px solid #fff; |
|||
color: #fff; |
|||
position: absolute; |
|||
left: 50%; |
|||
margin-left: -120rpx; |
|||
z-index: 1; |
|||
top: 236rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
@ -0,0 +1,95 @@ |
|||
// pages/activity/redlist/index.js
|
|||
import commonApi from "../../../utils/https/common" |
|||
import util from "../../../utils/util" |
|||
Page({ |
|||
|
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
list:[], |
|||
isMore:true |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad: function (options) { |
|||
this.getList() |
|||
}, |
|||
gotoDetail:function(e){ |
|||
util.gotoDetail(e.currentTarget.dataset.item) |
|||
}, |
|||
getList:function(){ |
|||
if(!this.data.isMore) return; |
|||
commonApi._post("product/get_product_by_tag",{ |
|||
tag_id:66, |
|||
offset:this.data.list.length, |
|||
limit:10 |
|||
}).then(res=>{ |
|||
res.data.list.map(item=>{ |
|||
item.display_tags = item.display_tags?item.display_tags.split(","):[]; |
|||
item.display_tags = item.display_tags.splice(0,2); |
|||
}) |
|||
this.setData({ |
|||
isMore:res.data.list.length==10, |
|||
list:this.data.list.concat(res.data.list) |
|||
}) |
|||
}) |
|||
}, |
|||
|
|||
goTop:function(){ |
|||
wx.pageScrollTo({ |
|||
duration: 200, |
|||
scrollTop:0 |
|||
}) |
|||
}, |
|||
/** |
|||
* 生命周期函数--监听页面初次渲染完成 |
|||
*/ |
|||
onReady: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
onHide: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面卸载 |
|||
*/ |
|||
onUnload: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面相关事件处理函数--监听用户下拉动作 |
|||
*/ |
|||
onPullDownRefresh: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom: function () { |
|||
this.getList() |
|||
}, |
|||
|
|||
/** |
|||
* 用户点击右上角分享 |
|||
*/ |
|||
onShareAppMessage: function () { |
|||
|
|||
} |
|||
}) |
|||
@ -0,0 +1,3 @@ |
|||
{ |
|||
"usingComponents": {} |
|||
} |
|||
@ -0,0 +1,16 @@ |
|||
<!--pages/activity/redlist/index.wxml--> |
|||
<image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/listtop/redlist.png" mode="widthFix" class="mainimg"></image> |
|||
<view class="item" wx:for="{{list}}" bindtap="gotoDetail" data-item="{{item}}"> |
|||
<image src="{{item.headimg}}" mode="aspectFill" class="mainimg"></image> |
|||
<view class="item-info"> |
|||
<view class="item-title textOver">{{item.title}}</view> |
|||
<view class="tags"> |
|||
<view class="tag textOver" wx:for="{{item.display_tags}}">{{item}}</view> |
|||
</view> |
|||
<view class="product-bottom"> |
|||
<view class="price"><text>￥</text><text>{{item.price/100}}</text>起</view> |
|||
<view class="btn">立即购买</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<image bindtap="goTop" mode="widthFix" src="https://m.cloud.sz-trip.com/static/images/activity/redTravel/return.png" class="top"></image> |
|||
@ -0,0 +1,78 @@ |
|||
/* pages/activity/redlist/index.wxss */ |
|||
.mainimg { |
|||
display: block; |
|||
width: 100%; |
|||
} |
|||
page { |
|||
background: #b9080e; |
|||
} |
|||
.item { |
|||
margin: 20rpx 30rpx; |
|||
border-radius: 20rpx; |
|||
overflow: hidden; |
|||
background: white; |
|||
} |
|||
.item image { |
|||
height: 300rpx; |
|||
border-radius: 20rpx; |
|||
} |
|||
.item-info { |
|||
margin: 20rpx; |
|||
margin-top: 10rpx; |
|||
} |
|||
.title { |
|||
font-size: 31rpx; |
|||
font-weight: bold; |
|||
} |
|||
.tags { |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 21rpx; |
|||
margin-top: 10rpx; |
|||
margin-bottom: 20rpx; |
|||
color: #E40008; |
|||
} |
|||
.tag { |
|||
line-height: 34rpx; |
|||
padding: 0 17rpx; |
|||
border: 1rpx solid; |
|||
border-radius: 6rpx; |
|||
margin-right: 10rpx; |
|||
} |
|||
.product-bottom { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
.product-bottom text { |
|||
color: #E40008; |
|||
} |
|||
.price { |
|||
font-size: 27rpx; |
|||
color: #666666; |
|||
} |
|||
.price text:nth-child(2){ |
|||
font-weight: bold; |
|||
font-size: 40rpx; |
|||
} |
|||
.price text:nth-child(1){ |
|||
font-size: 30rpx; |
|||
} |
|||
.btn { |
|||
width: 200rpx; |
|||
line-height: 60rpx; |
|||
background: linear-gradient(0deg, #B9080E, #E83632); |
|||
border-radius: 30rpx; |
|||
text-align: center; |
|||
color: #FFEE8C; |
|||
font-size: 28rpx; |
|||
font-weight: bold; |
|||
} |
|||
.top { |
|||
position: fixed; |
|||
z-index: 2; |
|||
width: 120rpx; |
|||
display: block; |
|||
right: 20rpx; |
|||
bottom: 50rpx; |
|||
} |
|||
@ -0,0 +1,287 @@ |
|||
// pages/activity/subway/index.js
|
|||
import commonApi from "../../../utils/https/common" |
|||
import util from "../../../utils/util" |
|||
Page({ |
|||
|
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
line:0, |
|||
colors:["#2EAE4F","#00A5AF","#E99A10","#278AE7","#C652A7"], |
|||
tagIndex:0, |
|||
isFixed:false, |
|||
tags:[ |
|||
[{ |
|||
id:74, |
|||
name:"全部" |
|||
},{ |
|||
id:31, |
|||
name:"木渎站" |
|||
},{ |
|||
id:32, |
|||
name:"西环路站" |
|||
},{ |
|||
id:33, |
|||
name:"养育巷站" |
|||
},{ |
|||
id:34, |
|||
name:"乐桥站" |
|||
},{ |
|||
id:35, |
|||
name:"临顿路站" |
|||
},{ |
|||
id:36, |
|||
name:"相门站" |
|||
},{ |
|||
id:37, |
|||
name:"东方之门站" |
|||
},{ |
|||
id:38, |
|||
name:"文化博览中心站" |
|||
},{ |
|||
id:39, |
|||
name:"时代广场站" |
|||
}],[{ |
|||
id:75, |
|||
name:"全部" |
|||
},{ |
|||
id:40, |
|||
name:"山塘街站" |
|||
},{ |
|||
id:41, |
|||
name:"石路站" |
|||
},{ |
|||
id:42, |
|||
name:"桐泾公园站" |
|||
},{ |
|||
id:43, |
|||
name:"独墅湖邻里中心站" |
|||
},{ |
|||
id:44, |
|||
name:"月亮湾站" |
|||
},{ |
|||
id:45, |
|||
name:"桑田岛站" |
|||
}],[{ |
|||
id:76, |
|||
name:"全部" |
|||
},{ |
|||
id:46, |
|||
name:"文昌路站" |
|||
},{ |
|||
id:47, |
|||
name:"索山桥西站" |
|||
},{ |
|||
id:48, |
|||
name:"石湖北站" |
|||
},{ |
|||
id:48, |
|||
name:"石湖北站" |
|||
},{ |
|||
id:49, |
|||
name:"新郭站" |
|||
},{ |
|||
id:50, |
|||
name:"迎春路站" |
|||
},{ |
|||
id:51, |
|||
name:"李公堤西站" |
|||
},{ |
|||
id:52, |
|||
name:"东方之门站" |
|||
},{ |
|||
id:53, |
|||
name:"唯亭站" |
|||
}],[{ |
|||
id:77, |
|||
name:"全部" |
|||
},{ |
|||
id:54, |
|||
name:"龙道浜站" |
|||
},{ |
|||
id:55, |
|||
name:"孙武纪念园站" |
|||
},{ |
|||
id:56, |
|||
name:"北寺塔站" |
|||
},{ |
|||
id:57, |
|||
name:"乐桥站" |
|||
},{ |
|||
id:58, |
|||
name:"三元坊站" |
|||
},{ |
|||
id:59, |
|||
name:"南门站" |
|||
},{ |
|||
id:60, |
|||
name:"苏州湾东站" |
|||
},{ |
|||
id:61, |
|||
name:"松陵大道站" |
|||
},{ |
|||
id:62, |
|||
name:"同里站" |
|||
},{ |
|||
id:63, |
|||
name:"越溪站" |
|||
}],[{ |
|||
id:78, |
|||
name:"全部" |
|||
},{ |
|||
id:64, |
|||
name:"太湖香山站" |
|||
},{ |
|||
id:65, |
|||
name:"胥口站" |
|||
},{ |
|||
id:66, |
|||
name:"灵岩山站" |
|||
},{ |
|||
id:67, |
|||
name:"索山桥西站" |
|||
},{ |
|||
id:68, |
|||
name:"新市桥站" |
|||
},{ |
|||
id:69, |
|||
name:"南门站" |
|||
},{ |
|||
id:70, |
|||
name:"李公堤南站" |
|||
},{ |
|||
id:71, |
|||
name:"斜塘站" |
|||
},{ |
|||
id:72, |
|||
name:"苏州奥体中心站" |
|||
},{ |
|||
id:73, |
|||
name:"阳澄湖南站" |
|||
}] |
|||
], |
|||
list:[], |
|||
total:1 |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad: function (options) { |
|||
this.getList() |
|||
}, |
|||
changeLine:function(e){ |
|||
this.setData({ |
|||
line:e.currentTarget.dataset.index, |
|||
tagIndex:0, |
|||
list:[], |
|||
total:1 |
|||
}) |
|||
this.getList(); |
|||
}, |
|||
changeTag:function(e){ |
|||
this.setData({ |
|||
tagIndex:e.currentTarget.dataset.index, |
|||
list:[], |
|||
total:1 |
|||
}) |
|||
this.getList(); |
|||
}, |
|||
getList:function(){ |
|||
if(this.data.list.length>=this.data.total) return; |
|||
commonApi._post('scene/get_scene_by_tag',{ |
|||
tag_id:this.data.tags[this.data.line][this.data.tagIndex].id, |
|||
limit:10, |
|||
offset:this.data.list.length |
|||
}).then(res=>{ |
|||
this.setData({ |
|||
total:res.data.count, |
|||
list:this.data.list.concat(res.data.list) |
|||
}) |
|||
}) |
|||
}, |
|||
toTop:function(){ |
|||
wx.pageScrollTo({ |
|||
duration: 200, |
|||
scrollTop:0 |
|||
}) |
|||
}, |
|||
showMap:function(e){ |
|||
wx.showLoading({ |
|||
title: '加载中', |
|||
}) |
|||
let src = e.currentTarget.dataset.src; |
|||
wx.downloadFile({ |
|||
url: src, |
|||
success:function(e){ |
|||
wx.previewImage({ |
|||
urls: [e.tempFilePath], |
|||
current:e.tempFilePath |
|||
}) |
|||
}, |
|||
complete:function(){ |
|||
wx.hideLoading({ |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
gotoDetail:function(e){ |
|||
let item = e.currentTarget.dataset.item; |
|||
util.gotoDetail(item) |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面初次渲染完成 |
|||
*/ |
|||
onReady: function () { |
|||
|
|||
}, |
|||
onPageScroll:function(e){ |
|||
let sys = wx.getSystemInfoSync(),ratio = sys.screenWidth/750,height = 949 * ratio; |
|||
this.setData({ |
|||
isFixed:e.scrollTop>=height |
|||
}) |
|||
}, |
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
onHide: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面卸载 |
|||
*/ |
|||
onUnload: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面相关事件处理函数--监听用户下拉动作 |
|||
*/ |
|||
onPullDownRefresh: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 用户点击右上角分享 |
|||
*/ |
|||
onShareAppMessage: function () { |
|||
|
|||
} |
|||
}) |
|||
@ -0,0 +1,5 @@ |
|||
{ |
|||
"usingComponents": { |
|||
"title":"/pages/component/TitleHeader" |
|||
} |
|||
} |
|||
@ -0,0 +1,33 @@ |
|||
<!--pages/activity/subway/index.wxml--> |
|||
<title title="坐着地铁游苏州"></title> |
|||
<image style="position:absolute;left:0;height:994rpx" class="mainimg" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/subway/top.png" mode="aspectFill"></image> |
|||
<view style="height:949rpx"></view> |
|||
<view class="lines{{isFixed?' fixed-lines':''}}"> |
|||
<view bindtap="changeLine" data-index="{{index}}" class="line{{index==line?' active':''}}" wx:for="{{5}}">{{index+1}}号线</view> |
|||
</view> |
|||
<view wx:if="{{isFixed}}" style="height:110rpx"></view> |
|||
<view class="content" id="content" style="background:{{colors[line]}}"> |
|||
<image mode="widthFix" class="mainimg" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/subway/title{{line+1}}.png"></image> |
|||
<image bindtap="showMap" data-src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/subway/map{{line+1}}-1.png" class="mapimg" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/subway/map{{line+1}}.png"></image> |
|||
<view class="tags"> |
|||
<view bindtap="changeTag" style="color:{{colors[line]}}" data-index="{{index}}" class="tag{{tagIndex==index?' active':''}}" wx:for="{{tags[line]}}"><view class="tagtext">{{item.name}}</view><image wx:if="{{tagIndex==index}}" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/subway/arrow.png"></image></view> |
|||
<view style="width:1rpx;height:1rpx;flex-shrink:0"></view> |
|||
</view> |
|||
<view class="item" wx:for="{{list}}" bindtap="gotoDetail" data-item="{{item}}" style="background-image:url('https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/subway/bg{{line+1}}.png');background-size:100% 100%;"> |
|||
<image src="{{item.headimg}}" class="headimg" mode="aspectFill"></image> |
|||
<view class="right-info"> |
|||
<view class="title textOver">{{item.title}}</view> |
|||
<view style="color:{{colors[line]}} !important" class="subtitle textOver">{{item.display_tags}}</view> |
|||
<view class="right-bottom"><view style="background:{{colors[line]}}">查看详情</view></view> |
|||
</view> |
|||
</view> |
|||
<view wx:if="{{list.length<total}}" class="morebtn" bindtap="getList">点击查看更多 <text>>></text></view> |
|||
<view style="height:1rpx"></view> |
|||
</view> |
|||
<image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/subway/text.png" mode="widthFix" class="textimg"></image> |
|||
<view style="height:53rpx"></view> |
|||
<image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/subway/bottom.png" mode="widthFix" class="mainimg bottomimg"></image> |
|||
<view class="topbtn" bindtap="toTop"> |
|||
<image mode="wdithFix" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/subway/totop.png"></image> |
|||
<view>顶部</view> |
|||
</view> |
|||
@ -0,0 +1,185 @@ |
|||
/* pages/activity/subway/index.wxss */ |
|||
.mainimg { |
|||
display: block; |
|||
width: 100%; |
|||
} |
|||
page { |
|||
background: #D4F0FF; |
|||
font-size: 32rpx; |
|||
position: relative; |
|||
} |
|||
.lines { |
|||
padding: 0 27rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
background: #5BB7E8; |
|||
justify-content: space-between; |
|||
color: #fff; |
|||
height: 67rpx; |
|||
margin-bottom: 43rpx; |
|||
position: relative; |
|||
z-index: 1; |
|||
} |
|||
.line { |
|||
width: 120rpx; |
|||
line-height: 47rpx; |
|||
border-radius: 23rpx; |
|||
text-align: center; |
|||
} |
|||
.line.active { |
|||
color: #0789D0; |
|||
background: white; |
|||
font-weight: bold; |
|||
} |
|||
.content { |
|||
margin: 0 27rpx; |
|||
margin-bottom: 60rpx; |
|||
border-radius: 13rpx; |
|||
overflow: hidden; |
|||
position: relative; |
|||
z-index: 1; |
|||
} |
|||
.mapimg { |
|||
display: block; |
|||
width: 665rpx; |
|||
margin: 0 auto; |
|||
margin-top: 11rpx; |
|||
} |
|||
.tags { |
|||
display: flex; |
|||
overflow-x: auto; |
|||
height: 110rpx; |
|||
margin-left: 16rpx; |
|||
} |
|||
.tag { |
|||
margin-right: 13rpx; |
|||
flex-shrink: 0; |
|||
position: relative; |
|||
color: #2EAE4F; |
|||
} |
|||
.tagtext { |
|||
padding: 0 20rpx; |
|||
background: white; |
|||
border-radius: 25rpx; |
|||
height: 50rpx; |
|||
margin-top: 30rpx; |
|||
line-height: 50rpx; |
|||
} |
|||
.tag.active .tagtext{ |
|||
font-weight: 500; |
|||
background: rgba(0, 0, 0, 0.4); |
|||
color: #fff; |
|||
} |
|||
.tag.active image { |
|||
position: absolute; |
|||
width: 24rpx; |
|||
height: 13rpx; |
|||
left: 50%; |
|||
margin-left: -12rpx; |
|||
top: 78rpx; |
|||
display: block; |
|||
} |
|||
.item { |
|||
display: flex; |
|||
width: 665rpx; |
|||
height: 207rpx; |
|||
margin: 0 auto; |
|||
margin-bottom: 17rpx; |
|||
background-color: white; |
|||
border-radius: 10rpx; |
|||
} |
|||
.item .headimg { |
|||
width: 266rpx; |
|||
height: 207rpx; |
|||
display: block; |
|||
flex-shrink: 0; |
|||
margin-right: 33rpx; |
|||
} |
|||
.right-info { |
|||
width: 236rpx; |
|||
margin-right: 30rpx; |
|||
flex: 1; |
|||
} |
|||
.title { |
|||
font-size: 36rpx; |
|||
font-weight: 500; |
|||
color: #2A2A2A; |
|||
margin-top: 20rpx; |
|||
} |
|||
.subtitle { |
|||
font-size: 24rpx !important; |
|||
color: #00A5AF; |
|||
margin-top: 10rpx; |
|||
line-height: 32rpx; |
|||
height: 32rpx; |
|||
} |
|||
.right-bottom { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
} |
|||
.right-bottom view { |
|||
width: 153rpx; |
|||
line-height: 47rpx; |
|||
background: #00A5AF; |
|||
border-radius: 23rpx; |
|||
text-align: center; |
|||
color: #FFFFFF; |
|||
font-size: 27rpx; |
|||
margin-top: 20rpx; |
|||
} |
|||
.morebtn { |
|||
width: 227rpx; |
|||
border: 1rpx solid #FFFFFF; |
|||
border-radius: 27rpx; |
|||
line-height: 52rpx; |
|||
text-align: center; |
|||
color: #fff; |
|||
font-size: 25rpx; |
|||
margin: 30rpx auto; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.morebtn text { |
|||
font-size: 18rpx; |
|||
margin-left: 6rpx; |
|||
} |
|||
.bottomimg { |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0; |
|||
} |
|||
.textimg { |
|||
width: 301rpx; |
|||
display: block; |
|||
margin: 0 auto; |
|||
margin-top: 64rpx; |
|||
} |
|||
.topbtn { |
|||
width: 83rpx; |
|||
height: 83rpx; |
|||
background: #3795FF; |
|||
opacity: 0.7; |
|||
border-radius: 50%; |
|||
position: fixed; |
|||
right: 27rpx; |
|||
bottom: 171rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 25rpx; |
|||
color: #fff; |
|||
flex-direction: column; |
|||
z-index: 2; |
|||
} |
|||
.topbtn image { |
|||
width: 25rpx; |
|||
height: 25rpx; |
|||
} |
|||
.fixed-lines { |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
z-index: 2; |
|||
margin-top: -949rpx; |
|||
} |
|||
Loading…
Reference in new issue