|
@@ -3,16 +3,16 @@
|
|
|
<!-- 筛选弹框 -->
|
|
|
<search-modal v-if="openScreen" :visible="openScreen" :defaultParams="searchForm" @refresh="refresh" @close="openScreen=false"></search-modal>
|
|
|
<view class="page-head">
|
|
|
- 筛选
|
|
|
+ <text>筛选</text>
|
|
|
<image class="filter-icon" src="@/static/filter.png" @tap="openScreen=true"></image>
|
|
|
</view>
|
|
|
- <view class="list">
|
|
|
- <view class="list-box">
|
|
|
+ <scroll-view class="list" scroll-y :scroll-top="scrollTop" @scrolltolower="onreachBottom">
|
|
|
+ <view class="list-box" v-for="item in 12" :key="item">
|
|
|
<view class="list-time">2020-01-13 15:25:25</view>
|
|
|
<view class="list-cons">
|
|
|
<view class="list-imgs">
|
|
|
<u-image width="80rpx" height="80rpx" src="/static/GLASS.png"></u-image>
|
|
|
- <view class="cls-names">废旧纸张</view>
|
|
|
+ <view class="cls-names">废旧金属/塑料</view>
|
|
|
</view>
|
|
|
<view class="list-md">
|
|
|
<view>
|
|
@@ -21,11 +21,16 @@
|
|
|
<view>13709146191</view>
|
|
|
</view>
|
|
|
<view class="list-end">
|
|
|
- <text class="red">32</text> 乐豆
|
|
|
+ <text class="red">32</text>
|
|
|
+ <u-image width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ <u-empty class="nodata" :text="noDataText" v-if="listdata.length==0 && status!='loading'" mode="list"></u-empty>
|
|
|
+ <view class="loadmore">
|
|
|
+ <u-loadmore v-if="total>pageSize || status=='loading'" :status="status" />
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
@@ -41,10 +46,13 @@
|
|
|
endDate: '', // 创建时间默认筛选近7天
|
|
|
customerMobile: '' // 手机号
|
|
|
},
|
|
|
+ scrollTop:0,
|
|
|
pageNo: 1, // 当前页码
|
|
|
pageSize: 10, // 每页条数
|
|
|
total: 0,
|
|
|
- listdata: []
|
|
|
+ listdata: [],
|
|
|
+ noDataText: '暂无数据', // 列表请求状态提示语
|
|
|
+ status: 'loadmore', // 加载中状态
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
@@ -57,6 +65,16 @@
|
|
|
},
|
|
|
searchHandle(){
|
|
|
|
|
|
+ },
|
|
|
+ // scroll-view到底部加载更多
|
|
|
+ onreachBottom() {
|
|
|
+ if(this.listdata.length < this.total){
|
|
|
+ this.pageNo += 1
|
|
|
+ this.searchHandle()
|
|
|
+ }else{
|
|
|
+ uni.showToast({ title: '已经到底了', icon: 'none' })
|
|
|
+ this.status = "nomore"
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -65,12 +83,21 @@
|
|
|
<style lang="less">
|
|
|
.content{
|
|
|
width: 100%;
|
|
|
- padding: 20rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
height: 100vh;
|
|
|
.page-head{
|
|
|
padding: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ .filter-icon{
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ }
|
|
|
}
|
|
|
.list{
|
|
|
flex-grow: 1;
|
|
@@ -90,18 +117,19 @@
|
|
|
}
|
|
|
.list-imgs{
|
|
|
padding:20rpx 0 0;
|
|
|
- width: 220rpx;
|
|
|
+ width: 180rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
.cls-names{
|
|
|
padding:10rpx 0;
|
|
|
- font-size: 28rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
}
|
|
|
}
|
|
|
.list-md{
|
|
|
flex-grow: 1;
|
|
|
+ padding:0 20rpx;
|
|
|
> view{
|
|
|
padding:6rpx 0;
|
|
|
display: flex;
|
|
@@ -122,7 +150,7 @@
|
|
|
.red{
|
|
|
font-weight: bold;
|
|
|
color: red;
|
|
|
- font-size: 40rpx;
|
|
|
+ font-size: 36rpx;
|
|
|
margin-right: 8rpx;
|
|
|
}
|
|
|
}
|