<template> <view class="deliveryRecord-container"> <scroll-view class="scroll-con" scroll-y @scrolltolower="onreachBottom"> <!-- 列表数据 --> <view class="cell-item-con"> <view class="cell-item" v-for="(item, index) in listdata" :key="index"> <text class="cell-item-date">{{item.time}}</text> <view class="cell-item-main"> <u-image width="150rpx" height="150rpx" :src="item.pic" class="cell-item-pic"></u-image> <view class="cell-item-r"> <view class="cell-item-head"> <view class="cell-item-val"><text class="cell-item-num">{{item.rubbishWeight}}</text>克</view> <u-tag :text="item.goldNum + '乐豆'" mode="light" type="warning" size="mini" class="cell-item-price" /> </view> <text class="cell-item-des">{{item.stationName}}</text> </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> <script> import { getDeliveryLogList } from '@/api/deliveryRecord.js' export default { data() { return { listdata: [ // { tit: '255', time: '2020-11-4 10:11', pic: '', price: '38', label: '撒健康的国家啥都给交撒旦教撒健康的国家啥都给交撒旦撒健给交撒旦教' }, // { tit: '255', time: '2020-11-4 10:11', pic: '', price: '38', label: '撒健康的国家啥旦教' }, ], pageNo: 1, // 当前页码 pageSize: 10, // 每页条数 total: 0, // 数据总条数 noDataText: '暂无数据', // 列表请求状态提示语 status: 'loadmore', // 加载中状态 } }, onShow() { this.searchHandle(1) }, onLoad() { }, methods:{ // 搜索查询 searchHandle (pageNo,suppName) { this.status = "loading" pageNo ? this.pageNo = pageNo : null getDeliveryLogList({ pageNo: this.pageNo, pageSize: this.pageSize, // queryWord: this.queryValue }).then(res => { if (res.status == 200) { if(this.pageNo>1){ this.listdata = this.listdata.concat(res.data.list || []) }else{ this.listdata = res.data.list || [] } this.total = res.data.count || 0 this.listdata.length == 0 && this.queryValue != '' ? this.noDataText = '没有搜索到相关结果' : this.noDataText = '暂无数据' } else { this.noDataText = res.message this.listdata = [] this.total = 0 } this.status = "loadmore" }) }, // scroll-view到底部加载更多 onreachBottom() { if(this.listdata.length < this.total){ this.pageNo += 1 this.searchHandle() }else{ uni.showToast({ title: '已经到底了', icon: 'none' }) this.status = "nomore" } } } } </script> <style lang="less"> .deliveryRecord-container{ width: 100%; // 列表 .scroll-con{ height: 100%; overflow: auto; } // 列表样式 .cell-item-con{ .cell-item{ background-color: #fff; color: #606266; padding: 16rpx 32rpx 22rpx; border-bottom: 1rpx solid #e6e6e6; .cell-item-date{ display: block; color: #909399; font-size: 26rpx; } .cell-item-main{ display: flex; justify-content: space-around; align-items: center; padding-top: 14rpx; .cell-item-pic{ flex-shrink: 0; margin-right: 20rpx; } .cell-item-r{ flex-grow: 1; .cell-item-head{ display: flex; justify-content: space-between; align-items: center; padding: 5rpx 0 15rpx; .cell-item-val{ font-size: 32rpx; .cell-item-num{ display: inline-block; margin-right: 6rpx; } } } .cell-item-des{ color: #909399; font-size: 26rpx; } } } } } } </style>