Skip to content

W
wxapp
Commit fa9a74f2 by 汪睦雄
Options

123

parent c57f617f
Showing with 209 additions and 8 deletions
pages/search/index.js
// pages/search/index.js // pages/search/index.js
import api from '../../utils/Api.js'
import Wx from '../../utils/Wx.js'
import Schedule from '../../utils/Schedule.js'
const {
$Toast
} = require('../../iview/base/index');
Page({ Page({
/** /**
* 页面的初始数据 * 页面的初始数据
*/ */
data: { data: {
projects: [],
currentPage: 1,
loading: true,
hasMore: true,
}, },
/** /**
* 生命周期函数--监听页面加载 * 生命周期函数--监听页面加载
*/ */
onLoad: function (options) { onLoad: function (options) {
this.getListData()
},
/**
* 加载
*/
getListData: function (callback){
const p = this.data.currentPage
api.search.index({
p
}).then(res => {
if (res.code) {
this.setData({
hasMore: false,
loading: false
})
} else {
let _projects = this.data.projects
this.setData({
projects: _projects.concat(res.data),
loading: false,
hasMore: res.data && res.data.length > 0 ? true : false,
currentPage: res.data && res.data.length > 0 ? p : (p - 1)
})
typeof callback == "function" && callback()
}
})
}, },
/** /**
...@@ -21,7 +58,7 @@ Page({ ...@@ -21,7 +58,7 @@ Page({
onReady: function () { onReady: function () {
}, },
/** /**
* 生命周期函数--监听页面显示 * 生命周期函数--监听页面显示
*/ */
...@@ -47,14 +84,40 @@ Page({ ...@@ -47,14 +84,40 @@ Page({
* 页面相关事件处理函数--监听用户下拉动作 * 页面相关事件处理函数--监听用户下拉动作
*/ */
onPullDownRefresh: function () { onPullDownRefresh: function () {
this.setData({
projects: [],
loading: true,
hasMore: true,
currentPage: 1
})
wx.showNavigationBarLoading()
wx.showLoading({
title: '加载中...',
})
new Schedule().task(this.getListData).delay(1600).task(() => {
wx.hideNavigationBarLoading()
wx.stopPullDownRefresh()
wx.hideLoading()
})
}, },
/** /**
* 页面上拉触底事件的处理函数 * 页面上拉触底事件的处理函数
*/ */
onReachBottom: function () { onReachBottom: function () {
let that = this
if (that.data.loading || !that.data.hasMore) {
return;
} else {
let page = that.data.currentPage + 1
new Schedule().task(() => {
that.setData({
loading: true,
currentPage: page
})
}).delay(1000).task(that.getListData)
}
}, },
/** /**
......
pages/search/index.json
{ {
"navigationBarTitleText": "搜索", "navigationBarTitleText": "搜索",
"enablePullDownRefresh": true,
"usingComponents": { "usingComponents": {
"search-filter": "/components/search-filter/index" "search-filter": "/components/search-filter/index",
"more": "/components/more/index"
} }
} }
\ No newline at end of file
pages/search/index.wxml
<!--pages/search/index.wxml--> <!--pages/search/index.wxml-->
<view class="page-wrapper"> <view class="page-wrapper">
<view class='search-wrapper'> <view class="search-header">
<image class="search-icon" src='/images/icon_search.png'></image> <view class='search-wrapper'>
<view class='search-input'>关键词如地名、游泳等</view> <image class="search-icon" src='/images/icon_search.png'></image>
<view class='search-input'>关键词如地名、游泳等</view>
</view>
<search-filter bind:filter="filterChange" />
</view> </view>
<search-filter bind:filter="filterChange" />
<view class="projects-wrapper">
<view class="project-item" wx:for="{{projects}}" wx:for-index="idx" wx:for-item="item" wx:key="n.id">
<image class="prj-poster" src="{{item.poster==''?'/images/personal_center/info_background.png':item.poster}}" mode="scaleToFill"></image>
<view class="prj-info">
<text class='ptitle'>{{item.title}}</text>
<view class="ptags">
<text wx-if="{{item.type=='1'}}">限{{item.sign_limits}}组</text>
<text wx-if="{{item.type=='2'}}">可预约</text>
<text class='tags'>{{item.tags}}</text>
</view>
<view class="pactivity" wx-if="{{item.type=='1'}}">
<view class="price-wrapper">
<text class="price">￥{{item.price}}</text>
<text class="vip_price">￥{{item.vip_price}}</text>
<image class="ic_vip_price" src='/images/icon_vip_price.png'></image>
</view>
<text class="endtime">{{item.sign_endtime_str}}</text>
</view>
<view class="pshop" wx-if="{{item.type=='2'}}">
<text class="address">{{item.location}}</text>
<text class="shop">{{item.sign_endtime_str}}</text>
</view>
</view>
</view>
</view>
<more hasMore="{{hasMore}}" loading="{{loading}}" page="{{currentPage}}" />
</view> </view>
\ No newline at end of file
pages/search/index.wxss
/* pages/search/index.wxss */ /* pages/search/index.wxss */
.page-wrapper{ .page-wrapper{
}
.search-header{
background: white; background: white;
} }
.search-wrapper{ .search-wrapper{
...@@ -25,3 +27,104 @@ ...@@ -25,3 +27,104 @@
.search-input:-moz-placeholder, .search-input:-ms-input-placeholder, .search-input::-webkit-input-placeholder{ .search-input:-moz-placeholder, .search-input:-ms-input-placeholder, .search-input::-webkit-input-placeholder{
color: rgb(153, 153, 153); color: rgb(153, 153, 153);
} }
.projects-wrapper{
margin-top: 20rpx;
background: white;
}
.project-item{
padding: 20rpx 30rpx;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
border-bottom: 1px solid rgb(230, 230, 230);
}
.prj-poster{
width: 260rpx;
height: 190rpx;
border-radius: 2rpx;
margin-right: 30rpx;
}
.prj-info{
width: 430rpx;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: flex-start;
}
.prj-info .ptitle{
padding-top: 10rpx;
font-size: 28rpx;
color: rgb(51, 51, 51);
margin-bottom: 23rpx;
}
.prj-info .ptags{
display: flex;
width: 100%;
font-size: 24rpx;
color: rgb(153, 153, 153);
margin-bottom: 70rpx;
}
.prj-info .ptags .tags{
width: 75%;
margin-left: 20rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.prj-info .pactivity{
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
}
.prj-info .pactivity .price{
font-size: 34rpx;
color: rgb(255, 68, 0);
}
.prj-info .pactivity .vip_price{
font-size: 24rpx;
color: rgb(60, 54, 29);
}
.prj-info .pactivity .ic_vip_price{
margin-left: 4rpx;
height: 10px;
width: 15px;
}
.prj-info .pactivity .endtime{
font-size: 24rpx;
color: rgb(43, 163, 215);
border: 1px solid rgb(43, 163, 215);
height: 42rpx;
line-height: 42rpx;
padding: 0 10rpx;
border-radius: 2px;
max-width: 70px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.prj-info .pshop{
display: flex;
width: 100%;
justify-content: space-between;
}
.prj-info .pshop .address{
font-size: 24rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: rgb(153, 153, 153);
}
.prj-info .pshop .shop{
color: white;
padding: 0rpx 12rpx;
font-size: 24rpx;
line-height: 36rpx;
height: 36rpx;
background: #2691CD;
border-radius: 18rpx;
}
\ 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 to comment