Myth
5 years ago
35 changed files with 1088 additions and 113 deletions
@ -0,0 +1,169 @@ |
|||||
|
// pages/activity/tenscenic/index.js
|
||||
|
import commonApi from "../../../utils/https/common" |
||||
|
import util from "../../../utils/util" |
||||
|
Page({ |
||||
|
|
||||
|
/** |
||||
|
* 页面的初始数据 |
||||
|
*/ |
||||
|
data: { |
||||
|
areas:[], |
||||
|
tag1:0, |
||||
|
tag2:0, |
||||
|
areaIndex:0, |
||||
|
list:[], |
||||
|
total:1, |
||||
|
playFlag:false, |
||||
|
scrollTop:0, |
||||
|
realScrollTop:0, |
||||
|
navList: [ |
||||
|
{name: '全部', tag_id: [81,89,97,105,113,121,129,137,145,153]}, |
||||
|
{name: '必吃', tag_id: [82,90,98,106,114,122,130,138,146,154]}, |
||||
|
{name: '必住', tag_id: [83,91,99,107,115,123,131,139,147,155]}, |
||||
|
{name: '必游', tag_id: [84,92,100,108,116,124,132,140,148,156]}, |
||||
|
{name: '必购', tag_id: [85,93,101,109,117,125,133,141,149,157]}, |
||||
|
{name: '必娱', tag_id: [86,94,102,110,118,126,134,142,150,158]}, |
||||
|
{name: '必行', tag_id: [87,95,103,111,119,127,135,143,151,159]}, |
||||
|
{name: '必玩', tag_id: [88,96,104,112,120,128,136,144,152,160]}, |
||||
|
] |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面加载 |
||||
|
*/ |
||||
|
onLoad: function (options) { |
||||
|
commonApi._post("act/get_suzhou_areas",{}).then(res=>{ |
||||
|
res.data.unshift({ |
||||
|
area_title:"全部", |
||||
|
area_id:"" |
||||
|
}) |
||||
|
this.setData({ |
||||
|
areas:res.data |
||||
|
}) |
||||
|
this.getList() |
||||
|
}) |
||||
|
}, |
||||
|
changeArea:function(e){ |
||||
|
this.setData({ |
||||
|
areaIndex:e.detail.value, |
||||
|
list:[], |
||||
|
total:1 |
||||
|
}) |
||||
|
this.getList() |
||||
|
}, |
||||
|
changeTag2:function(e){ |
||||
|
let tag = e.currentTarget.dataset.tag; |
||||
|
this.setData({ |
||||
|
tag2:tag, |
||||
|
list:[], |
||||
|
total:1, |
||||
|
realScrollTop:this.data.scrollTop |
||||
|
}) |
||||
|
this.getList(1) |
||||
|
}, |
||||
|
changeTag:function(e){ |
||||
|
let tag = e.currentTarget.dataset.tag; |
||||
|
this.setData({ |
||||
|
tag1:tag, |
||||
|
list:[], |
||||
|
total:1, |
||||
|
realScrollTop:this.data.scrollTop |
||||
|
}) |
||||
|
this.getList(1) |
||||
|
}, |
||||
|
getList:function(type){ |
||||
|
if(this.data.list.length>=this.data.total) return; |
||||
|
commonApi._post("scene/get_scene_by_tag",{ |
||||
|
area_id:this.data.areas[this.data.areaIndex].area_id, |
||||
|
tag_id:this.data.navList[this.data.tag2].tag_id[this.data.tag1], |
||||
|
offset:this.data.list.length, |
||||
|
limit:10, |
||||
|
del_html:true |
||||
|
}).then(res=>{ |
||||
|
this.setData({ |
||||
|
total:res.data.count, |
||||
|
list:this.data.list.concat(res.data.list) |
||||
|
}) |
||||
|
if(type==1){ |
||||
|
wx.pageScrollTo({ |
||||
|
duration: 0, |
||||
|
scrollTop:this.data.realScrollTop |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
goTop:function(){ |
||||
|
wx.pageScrollTo({ |
||||
|
duration: 200, |
||||
|
scrollTop:0 |
||||
|
}) |
||||
|
}, |
||||
|
play:function(){ |
||||
|
this.setData({ |
||||
|
playFlag:true |
||||
|
}) |
||||
|
}, |
||||
|
playEnd:function(){ |
||||
|
this.setData({ |
||||
|
playFlag:false |
||||
|
}) |
||||
|
}, |
||||
|
gotoDetail:function(e){ |
||||
|
let item = e.currentTarget.dataset.item |
||||
|
util.gotoDetail(item) |
||||
|
}, |
||||
|
/** |
||||
|
* 生命周期函数--监听页面初次渲染完成 |
||||
|
*/ |
||||
|
onReady: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面显示 |
||||
|
*/ |
||||
|
onShow: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面隐藏 |
||||
|
*/ |
||||
|
onHide: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面卸载 |
||||
|
*/ |
||||
|
onUnload: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 页面相关事件处理函数--监听用户下拉动作 |
||||
|
*/ |
||||
|
onPullDownRefresh: function () { |
||||
|
|
||||
|
}, |
||||
|
onPageScroll:function(e){ |
||||
|
console.log() |
||||
|
this.setData({ |
||||
|
scrollTop:e.scrollTop |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 页面上拉触底事件的处理函数 |
||||
|
*/ |
||||
|
onReachBottom: function () { |
||||
|
this.getList() |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 用户点击右上角分享 |
||||
|
*/ |
||||
|
onShareAppMessage: function () { |
||||
|
|
||||
|
} |
||||
|
}) |
||||
@ -0,0 +1,5 @@ |
|||||
|
{ |
||||
|
"usingComponents": { |
||||
|
"title":"/pages/component/TitleHeader" |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,59 @@ |
|||||
|
<!--pages/activity/tenscenic/index.wxml--> |
||||
|
<title title="打卡苏州“运河十景”"></title> |
||||
|
<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> |
||||
|
<image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/tenscenic/top.png" mode="widthFix" class="topimg"></image> |
||||
|
<view class="video-box" wx:if="{{playFlag==false}}" bindtap="play"> |
||||
|
<image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/tenscenic/play.png" mode="widthFix"></image> |
||||
|
</view> |
||||
|
<view class="video-box1" wx:else> |
||||
|
<video autoplay="{{true}}" bindended="playEnd" src="https://static.ticket.sz-trip.com/uploads/20210803/9acc76d92267c923044c8a335301e13e.mp4"></video> |
||||
|
</view> |
||||
|
<view class="bridge-box"> |
||||
|
<view class="tags absoluetTags"> |
||||
|
<view bindtap="changeTag" data-tag="0" class="tag{{tag1==0?' active':''}}">吴门望亭</view> |
||||
|
<view bindtap="changeTag" data-tag="1" class="tag{{tag1==1?' active':''}}">虎丘塔</view> |
||||
|
<view bindtap="changeTag" data-tag="2" class="tag{{tag1==2?' active':''}}">平江古巷</view> |
||||
|
<view bindtap="changeTag" data-tag="3" class="tag{{tag1==3?' active':''}}">横塘驿站</view> |
||||
|
<view bindtap="changeTag" data-tag="4" class="tag{{tag1==4?' active':''}}">宝带桥</view> |
||||
|
</view> |
||||
|
<image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/tenscenic/bridge.png" mode="widthFix"></image> |
||||
|
<view class="tags" style="position:static;margin-top:20rpx"> |
||||
|
<view bindtap="changeTag" data-tag="5" class="tag{{tag1==5?' active':''}}">浒墅关</view> |
||||
|
<view bindtap="changeTag" data-tag="6" class="tag{{tag1==6?' active':''}}">枫桥夜泊</view> |
||||
|
<view bindtap="changeTag" data-tag="7" class="tag{{tag1==7?' active':''}}">水陆盘门</view> |
||||
|
<view bindtap="changeTag" data-tag="8" class="tag{{tag1==8?' active':''}}">石湖五堤</view> |
||||
|
<view bindtap="changeTag" data-tag="9" class="tag{{tag1==9?' active':''}}" style="height:auto;line-height:40rpx"> |
||||
|
<view>平望</view> |
||||
|
<view>·四河汇集</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="new-tags"> |
||||
|
<view wx:for="{{navList}}" bindtap="changeTag2" data-tag="{{index}}" class="new-tag{{tag2==index?' active':''}}">{{item.name}}</view> |
||||
|
<!-- <view bindtap="changeTag2" data-tag="67" class="new-tag{{tag2==67?' active':''}}">必吃</view> |
||||
|
<view bindtap="changeTag2" data-tag="68" class="new-tag{{tag2==68?' active':''}}">必住</view> |
||||
|
<view bindtap="changeTag2" data-tag="69" class="new-tag{{tag2==69?' active':''}}">必游</view> |
||||
|
<view bindtap="changeTag2" data-tag="70" class="new-tag{{tag2==70?' active':''}}">必购</view> |
||||
|
<view bindtap="changeTag2" data-tag="71" class="new-tag{{tag2==71?' active':''}}">必娱</view> |
||||
|
<view bindtap="changeTag2" data-tag="72" class="new-tag{{tag2==72?' active':''}}">必行</view> |
||||
|
<view bindtap="changeTag2" data-tag="73" class="new-tag{{tag2==73?' active':''}}">必玩</view> --> |
||||
|
</view> |
||||
|
<view bindtap="gotoDetail" data-item="{{item}}" class="item" wx:for="{{list}}"> |
||||
|
<image src="{{item.headimg}}" mode="aspectFill"></image> |
||||
|
<view class="info"> |
||||
|
<view class="textOver title">{{item.title}}</view> |
||||
|
<view class="textOver subtitle">上榜理由：{{item.brief_intro}}</view> |
||||
|
<view class="btn">查看详情</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view wx:if="{{list.length==total}}" class="nomore">没有更多了</view> |
||||
|
<view style="height:50rpx"></view> |
||||
|
<view class="fixed-top" bindtap="goTop"> |
||||
|
<image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/tenscenic/arrow.png" mode="widthFix"></image> |
||||
|
<view>顶部</view> |
||||
|
</view> |
||||
@ -0,0 +1,219 @@ |
|||||
|
/* pages/activity/tenscenic/index.wxss */ |
||||
|
page { |
||||
|
background: #61C6D1; |
||||
|
} |
||||
|
.picker { |
||||
|
position: absolute; |
||||
|
right: 30rpx; |
||||
|
margin-top: 30rpx; |
||||
|
padding: 0 20rpx; |
||||
|
line-height: 50rpx; |
||||
|
text-align: center; |
||||
|
height: 50rpx; |
||||
|
border: 1rpx solid #333333; |
||||
|
border-radius: 26rpx; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
font-size: 27rpx; |
||||
|
} |
||||
|
.picker .iconfont { |
||||
|
font-size: 22rpx; |
||||
|
margin-left: 5rpx; |
||||
|
} |
||||
|
.topimg { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
} |
||||
|
.video-box { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 677rpx; |
||||
|
height: 375rpx; |
||||
|
margin: 0 auto; |
||||
|
background: url(https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/tenscenic/video.png); |
||||
|
background-size: 100% 100%; |
||||
|
margin-top: -235rpx; |
||||
|
position: relative; |
||||
|
z-index: 1; |
||||
|
} |
||||
|
.video-box1 { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 677rpx; |
||||
|
height: 375rpx; |
||||
|
margin: 0 auto; |
||||
|
margin-top: -235rpx; |
||||
|
position: relative; |
||||
|
z-index: 1; |
||||
|
} |
||||
|
.video-box1 video { |
||||
|
display: block; |
||||
|
width: 677rpx; |
||||
|
height: 382rpx; |
||||
|
border-radius: 20rpx; |
||||
|
} |
||||
|
.video-box image { |
||||
|
width: 93rpx; |
||||
|
height: 93rpx; |
||||
|
display: block; |
||||
|
} |
||||
|
.bridge-box { |
||||
|
position: relative; |
||||
|
padding-top: 87rpx; |
||||
|
} |
||||
|
.bridge-box image { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
} |
||||
|
.tags { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
position: absolute; |
||||
|
left: 24rpx; |
||||
|
right: 24rpx; |
||||
|
top: 35rpx; |
||||
|
} |
||||
|
.tag { |
||||
|
min-width: 130rpx; |
||||
|
max-width: 147rpx; |
||||
|
border: 1rpx solid; |
||||
|
margin-right: 9rpx; |
||||
|
height: 45rpx; |
||||
|
text-align: center; |
||||
|
position: relative; |
||||
|
color: #fff; |
||||
|
line-height: 45rpx; |
||||
|
font-size: 30rpx; |
||||
|
} |
||||
|
.tag::after { |
||||
|
content: "1"; |
||||
|
font-size: 0; |
||||
|
width: 4rpx; |
||||
|
height: 36rpx; |
||||
|
background: white; |
||||
|
position: absolute; |
||||
|
left: 63rpx; |
||||
|
display: block; |
||||
|
top: 0; |
||||
|
margin-top: -50rpx; |
||||
|
} |
||||
|
.absoluetTags .tag::after { |
||||
|
top: auto; |
||||
|
margin-top: 10rpx; |
||||
|
} |
||||
|
.tags .tag:last-child { |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
.absoluetTags .tag:nth-child(1),.absoluetTags .tag:nth-child(5){ |
||||
|
margin-top: 25rpx; |
||||
|
} |
||||
|
.absoluetTags .tag:nth-child(2),.absoluetTags .tag:nth-child(4){ |
||||
|
margin-top: 8rpx; |
||||
|
} |
||||
|
.tags .tag.active { |
||||
|
background: white; |
||||
|
color: #27899E; |
||||
|
border-color: #ffffff; |
||||
|
} |
||||
|
.new-tags { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
margin: 0 23rpx; |
||||
|
margin-top: 35rpx; |
||||
|
justify-content: space-between; |
||||
|
padding-top: 9rpx; |
||||
|
padding-bottom: 4rpx; |
||||
|
border-top: 1px solid #27899E; |
||||
|
border-bottom: 1px solid #27899E; |
||||
|
} |
||||
|
.new-tag { |
||||
|
width: 158rpx; |
||||
|
height: 67rpx; |
||||
|
background: url(https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/tenscenic/noselect.png); |
||||
|
background-size: 100% 100%; |
||||
|
color: #27899E; |
||||
|
font-size: 28rpx; |
||||
|
text-align: center; |
||||
|
line-height: 67rpx; |
||||
|
margin-bottom: 11rpx; |
||||
|
} |
||||
|
.new-tag.active { |
||||
|
background: url(https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/tenscenic/select.png); |
||||
|
background-size: 100% 100%; |
||||
|
} |
||||
|
.item { |
||||
|
margin: 24rpx; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
padding: 21rpx; |
||||
|
border-radius: 20rpx; |
||||
|
background: url(https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/tenscenic/bg.png); |
||||
|
background-size: 100% 100%; |
||||
|
height: 135rpx; |
||||
|
} |
||||
|
.item image { |
||||
|
display: block; |
||||
|
flex-shrink: 0; |
||||
|
width: 200rpx; |
||||
|
height: 135rpx; |
||||
|
border-radius: 10rpx; |
||||
|
} |
||||
|
.info { |
||||
|
flex: 1; |
||||
|
margin-left: 25rpx; |
||||
|
width: 400rpx; |
||||
|
} |
||||
|
.info .title { |
||||
|
font-size: 31rpx; |
||||
|
color: #333333; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
.info .subtitle { |
||||
|
color: #DD952B; |
||||
|
font-size: 24rpx; |
||||
|
margin: 5rpx 0; |
||||
|
} |
||||
|
.info .btn { |
||||
|
width: 153rpx; |
||||
|
line-height: 44rpx; |
||||
|
background: #27899E; |
||||
|
border-radius: 22rpx; |
||||
|
text-align: center; |
||||
|
font-size: 24rpx; |
||||
|
color: #fff; |
||||
|
float: right; |
||||
|
} |
||||
|
.fixed-top { |
||||
|
position: fixed; |
||||
|
width: 83rpx; |
||||
|
height: 83rpx; |
||||
|
background-color: rgba(221, 149, 43, .5); |
||||
|
color: #fff; |
||||
|
border-radius: 50%; |
||||
|
text-align: center; |
||||
|
right: 30rpx; |
||||
|
bottom: 30rpx; |
||||
|
z-index: 2; |
||||
|
font-size: 25rpx; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
.fixed-top image { |
||||
|
display: block; |
||||
|
width: 25rpx; |
||||
|
height: 26rpx; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
.fixed-top view { |
||||
|
} |
||||
|
.nomore { |
||||
|
text-align: center; |
||||
|
font-size: 26rpx; |
||||
|
color: #fff; |
||||
|
opacity: 0.5; |
||||
|
} |
||||
@ -0,0 +1,134 @@ |
|||||
|
// pages/info/guideInfo/index.js
|
||||
|
import commonApi from "../../../utils/https/common" |
||||
|
Page({ |
||||
|
|
||||
|
/** |
||||
|
* 页面的初始数据 |
||||
|
*/ |
||||
|
data: { |
||||
|
info:null, |
||||
|
images:[], |
||||
|
page:0 |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面加载 |
||||
|
*/ |
||||
|
onLoad: function (options) { |
||||
|
commonApi._post("travels/getDetail",{ |
||||
|
id:options.id |
||||
|
}).then(res=>{ |
||||
|
console.log(res) |
||||
|
let images = []; |
||||
|
//匹配图片（g表示匹配所有结果i表示区分大小写）
|
||||
|
var imgReg = /<img.*?(?:>|\/>)/gi; |
||||
|
//匹配src属性
|
||||
|
var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; |
||||
|
var arr = res.data.detail.match(imgReg); |
||||
|
for (var i = 0; i < arr.length; i++) { |
||||
|
var src = arr[i].match(srcReg); |
||||
|
//获取图片地址
|
||||
|
if (src[1]) { |
||||
|
images.push(src[1]) |
||||
|
} |
||||
|
} |
||||
|
this.setData({ |
||||
|
images:images |
||||
|
}) |
||||
|
}) |
||||
|
commonApi._post("travels/addView",{ |
||||
|
id:options.id |
||||
|
}).then(res=>{ |
||||
|
}) |
||||
|
}, |
||||
|
prevPage:function(){ |
||||
|
if(this.data.page==0) return; |
||||
|
this.setData({ |
||||
|
page:this.data.page-1 |
||||
|
}) |
||||
|
}, |
||||
|
nextPage:function(){ |
||||
|
if(this.data.page==this.data.images.length-1) return; |
||||
|
this.setData({ |
||||
|
page:this.data.page+1 |
||||
|
}) |
||||
|
}, |
||||
|
changePage:function(e){ |
||||
|
this.setData({ |
||||
|
page:e.detail.current |
||||
|
}) |
||||
|
}, |
||||
|
showImg:function(e){ |
||||
|
// wx.showLoading({
|
||||
|
// title: '加载中'
|
||||
|
// })
|
||||
|
wx.previewImage({ |
||||
|
urls: this.data.images, |
||||
|
current:e.currentTarget.dataset.img |
||||
|
}) |
||||
|
return; |
||||
|
wx.downloadFile({ |
||||
|
url: e.currentTarget.dataset.img, |
||||
|
success:function(res){ |
||||
|
if (res.statusCode === 200) { |
||||
|
wx.previewImage({ |
||||
|
urls: [res.tempFilePath], |
||||
|
current:res.tempFilePath |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
complete:function(){ |
||||
|
wx.hideLoading({ |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
/** |
||||
|
* 生命周期函数--监听页面初次渲染完成 |
||||
|
*/ |
||||
|
onReady: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面显示 |
||||
|
*/ |
||||
|
onShow: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面隐藏 |
||||
|
*/ |
||||
|
onHide: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面卸载 |
||||
|
*/ |
||||
|
onUnload: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 页面相关事件处理函数--监听用户下拉动作 |
||||
|
*/ |
||||
|
onPullDownRefresh: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 页面上拉触底事件的处理函数 |
||||
|
*/ |
||||
|
onReachBottom: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 用户点击右上角分享 |
||||
|
*/ |
||||
|
onShareAppMessage: function () { |
||||
|
|
||||
|
} |
||||
|
}) |
||||
@ -0,0 +1,5 @@ |
|||||
|
{ |
||||
|
"usingComponents": { |
||||
|
"title":"/pages/component/TitleHeader" |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,15 @@ |
|||||
|
<!--pages/info/guideInfo/index.wxml--> |
||||
|
<wxs src="../../../utils/filter.wxs" module="tool" /> |
||||
|
<!-- <title title="详情"></title> --> |
||||
|
<view class="info"> |
||||
|
<swiper bindchange="changePage" current="{{page}}"> |
||||
|
<swiper-item wx:for="{{images}}" class="img-box"> |
||||
|
<image bindtap="showImg" data-img="{{item}}" src="{{item}}?x-oss-process=image/resize,w_750,m_lfit" mode="aspectFit"></image> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
<view class="pages"> |
||||
|
<view class="btn" bindtap="prevPage">上一页</view> |
||||
|
<view class="pagenum"> {{page+1}} / {{images.length}}</view> |
||||
|
<view class="btn" bindtap="nextPage">下一页</view> |
||||
|
</view> |
||||
|
</view> |
||||
@ -0,0 +1,48 @@ |
|||||
|
/* pages/info/guideInfo/index.wxss */ |
||||
|
.swiper,.info image { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.info { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
top: 0; |
||||
|
} |
||||
|
.pages { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 100rpx; |
||||
|
} |
||||
|
.pages .btn { |
||||
|
font-size: 28rpx; |
||||
|
background: white; |
||||
|
line-height: 50rpx; |
||||
|
width: 140rpx; |
||||
|
text-align: center; |
||||
|
color: #815D3A; |
||||
|
border: 1rpx solid #815D3A; |
||||
|
border-radius: 20rpx; |
||||
|
} |
||||
|
.pagenum { |
||||
|
margin: 0 30rpx; |
||||
|
color: #815D3A; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
swiper { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.img-box { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
@ -0,0 +1,82 @@ |
|||||
|
// pages/pbService/activity/index.js
|
||||
|
import https from "../../../utils/https/common" |
||||
|
Page({ |
||||
|
|
||||
|
/** |
||||
|
* 页面的初始数据 |
||||
|
*/ |
||||
|
data: { |
||||
|
list:[], |
||||
|
page:1, |
||||
|
total:1 |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面加载 |
||||
|
*/ |
||||
|
onLoad: function (options) { |
||||
|
this.getList() |
||||
|
}, |
||||
|
getList:function(){ |
||||
|
if(this.data.list.length>=this.data.total) return; |
||||
|
https._post("review/getList",{ |
||||
|
limit:10, |
||||
|
page:this.data.page |
||||
|
}).then(res=>{ |
||||
|
this.setData({ |
||||
|
total:res.data.total, |
||||
|
list:this.data.list.concat(res.data.data), |
||||
|
page:this.data.page+1 |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面初次渲染完成 |
||||
|
*/ |
||||
|
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,13 @@ |
|||||
|
<!--pages/pbService/activity/index.wxml--> |
||||
|
<title title="精彩回顾"></title> |
||||
|
<image mode="widthFix" class="topimg" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/pbservice/hgtop.png"></image> |
||||
|
<view class="list"> |
||||
|
<navigator url="{{item.mini_url}}" class="item" wx:for="{{list}}" wx:if="{{item.mini_url}}"> |
||||
|
<image mode="aspectFill" class="bgimg" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/pbservice/hgbg.png"></image> |
||||
|
<image src="{{item.head_image}}" mode="aspectFill" class="main-img"></image> |
||||
|
<view class="info"> |
||||
|
<view class="textOver title">{{item.title}}</view> |
||||
|
<view class="textOver">{{item.desc}}</view> |
||||
|
</view> |
||||
|
</navigator> |
||||
|
</view> |
||||
@ -0,0 +1,43 @@ |
|||||
|
/* pages/pbService/activity/index.wxss */ |
||||
|
.topimg { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
} |
||||
|
.item { |
||||
|
margin: 40rpx 27rpx; |
||||
|
position: relative; |
||||
|
} |
||||
|
.item .bgimg { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 427rpx; |
||||
|
} |
||||
|
.list .item:nth-child(1){ |
||||
|
margin-top: -40rpx; |
||||
|
z-index: 1; |
||||
|
} |
||||
|
page { |
||||
|
background: #D1C0A5; |
||||
|
} |
||||
|
.main-img { |
||||
|
width: 539rpx; |
||||
|
height: 293rpx; |
||||
|
background: #D1C0A5; |
||||
|
border-radius: 33rpx; |
||||
|
position: absolute; |
||||
|
left: 20rpx; |
||||
|
top: 25rpx; |
||||
|
} |
||||
|
.info { |
||||
|
position: absolute; |
||||
|
bottom: 15rpx; |
||||
|
color: #fff; |
||||
|
left: 35rpx; |
||||
|
font-size: 23rpx; |
||||
|
right: 135rpx; |
||||
|
} |
||||
|
.info .title { |
||||
|
margin-bottom: 6rpx; |
||||
|
font-size: 33rpx; |
||||
|
font-weight: 600; |
||||
|
} |
||||
Loading…
Reference in new issue