distribution-uni/pages/index/uparrears.vue

<template>
	<view>
		<u-alert description="点击可跳转至入库单" type="primary"></u-alert>
		<view class="ulList" v-if="list.length > 0">
			<ul>
				<li v-for="item in list" @tap="returnPrice(item)">
					<uni-card :title="'供应商：'+(item.supplierName == null ?'暂无':item.supplierName)" :sub-title="item.createTime == null ?'暂无':item.createTime" :extra="'共'+(item.totalAmount == null ?'暂无':item.totalAmount) + '件'"
						thumbnail="/static/images/dingdan/dd1.png">
						<view class="uni-body"><text class="cardText">入库人：</text> {{item.createByName == null ?'暂无':item.createByName}}</view>
						<view class="uni-body"> <text class="cardText"> 总成本：</text> <text class="priceText">
								{{item.shouldPay == null ?'暂无':item.shouldPay}} </text> <text decode class="cardText">
								{{'&nbsp;&nbsp;&nbsp;&nbsp; 欠款： '}} </text> <text class="priceText">{{item.noPay == null ?'暂无':item.noPay}}
							</text></view>
						<view class="uni-body"> <text class="cardText">
							订单状态：</text>{{item.inStorageStatus == 0 ?'未入库' :'已入库'}}
						</view>
						<view class="return-price" @tap.stop="returnPrice(item)">回款</view>
					</uni-card>
				</li>
			</ul>
			<u-loadmore :status="status" />
		</view>
		<u-empty v-else mode="order" margin-top="200"></u-empty>
	</view>
</template>
<script>
	import color from "../../uni_modules/uview-ui/libs/config/color";

	export default {
		name: "uparrears",
		computed: {
			color() {
				return color
			}
		},
		data() {
			return {
				supplierId: '',
				consigneeName: '',
				list: [],
				status: 'loadmore',
				pages:1,
				pageNumber:1,
			}
		},
		onShow(){
			this.getList()
		},
		onLoad(options) {
			this.supplierId = options.supplierId
			this.consigneeName = options.consigneeName
		},
		onReachBottom() {
			if (this.pages >= this.pageNum) return;
			this.status = 'loading';
			this.pages = ++this.pages;
			this.getList();
		},
		methods: {
			getList() {
				this.tui.request("/app/purchase/debtPurchase", "get", {
					supplierId: this.supplierId,
					pageVo: {
						pageSize: 10, 
						pageNumber: this.pageNumber
					}
				}, false, true).then((res) => {
					this.status = 'nomore';
					if (res.code == 200) {
						// this.list = res.result
						if (this.pages == 1) {
							this.list = res.result
						} else {
							this.list = [...this.list, ...res.result]
						}
						this.pageNumber = res.result.pages
					} else {
						this.tui.toast(res.message)
					}

				})
			},
			returnPrice(item){
				uni.navigateTo({
					url: '/package1/index/waitStorageDetail?id='+ item.id
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.ulList {
		ul {
			li {
				font-size: 12px;
	
				.floatRight {
					float: right;
					padding: 14rpx;
					color: $u-primary;
					font-size: 26upx;
				}
	
				.cardText {
					font-size: 12px;
				}
	
				.priceText {
					color: $u-primary;
					font-size: 14px;
				}
			}
		}
	}
	.return-price{
		position: absolute;
		bottom: 30rpx;
		right: 30rpx;
		background: #5fd9ee;
		color: #fff;
		width: 80rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 10px;
	}
</style>