<template> <view class="cleared-container"> <scroll-view class="scroll-con" scroll-y :scroll-top="scrollTop" @scrolltolower="onreachBottom"> <!-- 列表数据 --> <view class="cell-item-con"> <view class="cell-item" v-for="(item, index) in listdata" :key="index"> <view class="cell-item-c"> <view class="cell-item-date">{{item.createDate}}</view> <view class="cell-item-orderNum"> {{item.createDate}} <u-icon name="arrow-right" :size="28" color="#999"></u-icon> </view> </view> <u-grid :col="3" :hover-class="none"> <u-grid-item> <view class="cell-item-main"> <text class="cell-item-number blue">26</text> <text class="cell-item-unit">个</text> </view> <view class="cell-item-exp">清运网点数</view> </u-grid-item> <u-grid-item> <view class="cell-item-main"> <text class="cell-item-number green">26</text> <text class="cell-item-unit">个</text> </view> <view class="cell-item-exp">清运箱体数</view> </u-grid-item> <u-grid-item> <view class="cell-item-main"> <text class="cell-item-number red">26</text> <text class="cell-item-unit">kg</text> </view> <view class="cell-item-exp">清运总重量</view> </u-grid-item> </u-grid> </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 { getGoldLogList, GoldLogCancel } from '@/api/officialPartnerGoldLog.js' export default { data() { return { listdata: [], pageNo: 1, // 当前页码 pageSize: 10, // 每页条数 total: 0, // 数据总条数 noDataText: '暂无数据', // 列表请求状态提示语 status: 'loadmore', // 加载中状态 customBtnStyle: { // 撤销单据 自定义按钮样式 borderColor: '#ed1c24', backgroundColor: '#ed1c24', color: '#fff' }, scrollTop: 0, // 滚动条位置 } }, onLoad() { this.refresh({}) }, methods:{ // 获取查询参数 刷新列表 refresh(){ this.listdata = [] this.total = 0 this.searchHandle(1) }, // 撤销单据 revokeFun(row){ const _this = this uni.showModal({ title: '提示', content: '撤销单据后乐豆将全部退回给原支付账号,确认撤销吗?', success(res) { if (res.confirm) { // GoldLogCancel({ id: row.id }).then(ret => { // if(ret.status == 200){ // uni.showToast({ title: ret.message, icon: 'none' }) // _this.searchHandle(1) // } // }) } } }) }, // 搜索查询 searchHandle (pageNo) { // this.status = "loading" pageNo ? this.pageNo = pageNo : null // getGoldLogList({ // pageNo: this.pageNo, // pageSize: this.pageSize, // customerMobile: '' // }).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="scss"> page{ height: 100%; } .cleared-container { width: 100%; height: 100%; display: flex; flex-direction: column; // 列表 .scroll-con{ flex: 1; overflow: auto; } // 列表样式 .cell-item-con{ .cell-item{ margin: $uni-spacing-col-base $uni-spacing-row-base; background-color: #fff; border-radius: $uni-border-radius-base; color: $uni-text-color; font-size: $uni-font-size-base; box-shadow: 3rpx 3rpx 5rpx #eee; .cell-item-c{ display: flex; justify-content: space-between; padding: $uni-spacing-col-base $uni-spacing-row-base; .cell-item-date{ color: $uni-text-color-grey; } } .cell-item-main{ display: inline-block; margin-bottom: 10rpx; .cell-item-number{ margin-right: 5rpx; } .cell-item-unit{ font-size: 26rpx; } .blue { color: #1890FF; } .green { color: #16b50e; } .red { color: red; } } } } } </style>