<template> <view class="content flex flex_column"> <view> <view class="p-header" @click="jumpPage('/pages/sales/chooseShelf?customerSn=' + (targetSn ? targetSn : ''))"> <text>{{ curCustomerName || '全部客户' }}</text> <u-icon name="arrow-right"></u-icon> </view> <u-tabs :list="tabsList" :is-scroll="false" :current="current" @change="change"></u-tabs> </view> <view class="p-content"> <view v-if="billList && billList.length > 0"> <view class="list" @click="jumpPage('/pages/sales/billHistoryDetail?billId=' + item.verifySn)" v-for="(item, i) in billList" :key="i"> <view class="list_t u-flex u-row-between"> <view class="u-line-1">{{ item.customer.customerName }}</view> <view>¥{{ toThousands(item.settleAmount || 0, 2) }}</view> </view> <view class="list_b u-flex u-row-between"> <view>{{ item.createDate }}</view> <u-tag size="mini" :text="item.billStatus == 'UNSETTLE'?'未付款':'已结清'" :type="item.billStatus == 'UNSETTLE'?'info':'success'" /> </view> </view> </view> <view v-if="billList && billList.length == 0"> <u-empty v-if="status != 'loading'" :src="`/static/${$config('themePath')}/def_no_data@3x.png`" icon-size="180" :text="noDataText" mode="list" :margin-top="50" ></u-empty> </view> <view style="padding: 20upx;" v-else><u-loadmore :status="status" v-if="status == 'loading'" /></view> </view> </view> </template> <script> import { queryPage } from '@/api/verify.js'; import { toThousands } from '@/libs/tools.js'; export default { data() { return { toThousands, wordColor: this.$config('infoColor'), curCustomerName: '', pageNo: 1, pageSize: 10, totalNum: 0, status: 'loadmore', noDataText: '暂无数据', billList: [], targetSn: undefined, tabsList: [ { id: 1, billStatus:'', name: '全部' }, { id: 2, billStatus:'UNSETTLE', name: '未付款' }, { id: 3, billStatus:'SETTLED', name: '已结清' } ], current: 0 }; }, onLoad() { uni.$on('chooseShelfOk', data => { this.pageNo = 1; this.targetSn = data.customerSn ? data.customerSn : undefined; this.curCustomerName = data.customerName; this.getList(); }); }, onReady() { setTimeout(() => { this.getList(); }, 500); }, methods: { change(index) { this.current = index; this.pageNo = 1 this.getList() }, jumpPage(url) { uni.navigateTo({ url }); }, getList() { let params = { targetSn: this.targetSn,billStatus:this.tabsList[this.current].billStatus, pageNo: this.pageNo, pageSize: this.pageSize }; this.status = 'loading'; queryPage(params).then(res => { if (res.status == 200) { if (this.pageNo > 1) { this.billList = this.billList.concat(res.data.list || []); } else { this.billList = res.data.list || []; } this.totalNum = res.data.count || 0; } else { this.billList = []; this.totalNum = 0; this.noDataText = res.message; } this.status = 'loadmore'; }); } }, onReachBottom() { if (this.billList.length < this.totalNum) { this.pageNo += 1; this.getList(); } else { this.status = 'nomore'; } }, onUnload() { uni.$off('chooseShelfOk'); } }; </script> <style lang="scss" scoped> .content { height: 100vh; width: 100%; .p-header { background-color: #fff; text-align: center; padding-bottom: 20rpx; } .p-content { flex-grow: 1; padding:20rpx 20rpx 0; overflow-y: scroll; .list { width: 100%; background: #ffffff; padding: 30rpx 20rpx; border-radius: 20rpx; box-sizing: border-box; margin-bottom: 20rpx; .list_t { margin-bottom: 20rpx; view { &:first-child { width: calc(100% - 200rpx); } &:last-child { color: $uni-color-warning; } } } .list_b { color: $uni-text-color-grey; font-size: $uni-font-size-sm; font-weight: 500; } } } } </style>