<template> <view class="content"> <!-- 筛选弹框 --> <search-modal v-if="openScreen" :visible="openScreen" :defaultParams="searchForm" @refresh="refresh" @close="openScreen=false"></search-modal> <view class="page-head" @click="openScreen=true"> <text>筛选</text> <image class="filter-icon" src="@/static/filter.png"></image> </view> <scroll-view class="list" scroll-y :scroll-top="scrollTop" @scrolltolower="onreachBottom"> <view class="list-box" v-for="item in listdata" :key="item.id"> <view class="list-time">{{item.deliveryTime}}</view> <view class="list-cons"> <view class="list-imgs"> <u-image width="80rpx" height="80rpx" :src="`/static/${item.rubbishType}.png`"></u-image> <view class="cls-names">{{item.rubbishTypeDictValue}}</view> </view> <view class="list-md"> <view> <text class="red">{{item.rubbishWeight}}</text> 克 </view> <view>{{item.customerMobile}}</view> </view> <view class="list-end"> <text class="red">{{item.goldNum}}</text> <u-image width="40rpx" height="40rpx" src="/static/ledou.png"></u-image> </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 searchModal from './searchModal.vue' import {getDeliveryLog} from '@/api/delivery.js' export default { components: { searchModal }, data() { return { openScreen: false, searchForm: { // 查询条件 beginDate: '', // 创建时间默认筛选近7天 endDate: '', // 创建时间默认筛选近7天 customerMobile: '' // 手机号 }, scrollTop:0, pageNo: 1, // 当前页码 pageSize: 10, // 每页条数 total: 0, listdata: [], noDataText: '暂无数据', // 列表请求状态提示语 status: 'loadmore', // 加载中状态 rubbishType: [] } }, onLoad() { this.rubbishType = this.$store.state.vuex_rubbishType }, onShow() { this.openScreen = false // 关闭筛选框 this.refresh({}) }, methods: { // 获取查询参数 刷新列表 refresh(params){ this.searchForm = params this.listdata = [] this.total = 0 this.searchHandle(1) }, // 搜索查询 searchHandle (pageNo) { this.status = "loading" pageNo ? this.pageNo = pageNo : null getDeliveryLog({ pageNo: this.pageNo, pageSize: this.pageSize, beginDate: this.searchForm.beginDate, endDate: this.searchForm.endDate, customerMobile: this.searchForm.customerMobile, operatorNo : this.$store.state.vuex_userData.id }).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.scrollTop = 0 } this.total = res.data.count || 0 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"> .content{ width: 100%; 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; height: calc(100vh - 76rpx); overflow: auto; } .list-box{ background: #FFFFFF; border-radius: 10rpx; padding: 20rpx; box-shadow: 2rpx 2rpx 6rpx #eee; margin-bottom: 20rpx; .list-time{ font-size: 28rpx; color: #666666; } .list-cons{ display: flex; align-items: center; } .list-imgs{ padding:20rpx 0 0; width: 180rpx; display: flex; align-items: center; flex-direction: column; justify-content: center; .cls-names{ padding:10rpx 0; font-size: 24rpx; } } .list-md{ flex-grow: 1; padding:0 20rpx; > view{ padding:6rpx 0; display: flex; align-items: center; font-size: 30rpx; } } .list-end{ padding:20rpx; font-size: 30rpx; display: flex; align-items: center; .red{ font-size: 50rpx; color: #ff5500; } } .red{ font-weight: bold; color: red; font-size: 36rpx; margin-right: 8rpx; } } } </style>