agent-app/agentApp/pages/index/index.vue

<template>
	<view class="app-container">
		<view class="agent-content">
			<view class="ag-sign" @click="cashManager">
				提现管理
			</view>
			<view class="agent-top">
				<view class="ag-num">
					<view class="au-font">
						￥
					</view>
					<view class="au-num">
						{{accountInfo.wallet_balance}}
					</view>
				</view>
				<view class="age-font">
					可提现
				</view>
				<view class="age-line">
					<img src="../../static/index/line-style.png" style="width: 200rpx;height: 2rpx;" alt="" srcset="" />
				</view>
				<view class="age-wait">
					待入账：￥{{accountInfo.waiting_amount}}
				</view>
				<view class="divider-style"></view>
				<view class="information-id-content">

					<view class="content-id-item">
						<view class="id-text">
							代理ID：
						</view>
						<view class="id-value">
							{{accountInfo.id}}
						</view>
						<view class="id-text" style="margin-left:2em;">
							商户数量：
						</view>
						<view class="id-value">
							{{accountInfo.merchant_count}}
						</view>
					</view>
				</view>

			</view>
			<view class="agent-main">
				<view class="agm-title">
					订单列表
				</view>
				<view class="ordering-information">
					<view class="ordering-information-item" v-if="!orderList.length">
						<view class="order-number">暂无订单</view>
					</view>
					<view class="ordering-information-item" v-for="order in orderList" :key="order.out_trade_no">
						<view class="order-number">订单编号 {{order.out_trade_no}}</view>
						<view class="ordering-item-content">
							<view class="ordering-pic">
								<image class="order-chart" :src="order.merchant.logo" />
							</view>
							<view class="ordering-text">
								<view class="ordering-text-title">{{order.merchant.name}}</view>
								<view class="amount-of-money">金额：<span class="price-style">￥{{order.amount}}</span></view>
								<view class="amount-of-money">收益：<span class="price-style">￥{{order.agent_income}}</span></view>
								<view class="order-time">订单时间：{{order.paid_at}}</view>
							</view>
						</view>
					</view>
				</view>

				<view class="load-more" @click="getOrderList">{{ hasMore ? '加载更多数据...' : '已加载完毕' }}</view>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		agentAccountInfo,
		agentOrderList
	} from '../../common/api.js'

	export default {
		data() {
			return {
				accountInfo: {},
				orderList: [],
				hasMore: true,
				page: 0,
			}
		},
		onLoad() {
			this.getAccountInfo();
			this.getOrderList();
		},
		onReachBottom() {
			this.getOrderList()
		},
		methods: {
			getAccountInfo() {
				agentAccountInfo().then(data => this.accountInfo = data)
			},
			getOrderList() {
				if (!this.hasMore) {
					return
				}
				this.page++
				agentOrderList({
					page: this.page,
					page_size: 15
				}).then(data => {
					this.orderList = [...this.orderList, ...data.list]
					this.hasMore = data.has_more
				})
			},
			cashManager() {
				uni.navigateTo({
					url: '/pages/cash/cash'
				});
			}
		}
	}
</script>

<style lang="scss">
	.agent-content {
		position: relative;
		width: 100%;
		height: 1400rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		background: url(../../static/index/principal-sheet-bg.png) no-repeat top center;
		background-size: 100% 100%;
		box-sizing: border-box;

		.ag-sign {
			position: absolute;
			right: 0;
			top: 0;
			width: 150rpx;
			height: 60rpx;
			line-height: 60rpx;
			padding-left: 40rpx;
			border-top-left-radius: 30rpx;
			border-bottom-left-radius: 30rpx;
			color: #fff;
			font-size: 12px;
			background: #FCC565;
			box-sizing: border-box;
			cursor: pointer;
		}

		.agent-top {
			text-align: center;

			.ag-num {
				display: flex;
				justify-content: center;
				padding-top: 20rpx;
				color: #fff;

				.au-font {
					margin-top: 45rpx;
					font-size: 14px;
					margin-right: 10rpx;
					line-height: 28rpx;
				}

				.au-num {
					font-size: 30px;
					font-weight: bold;
				}
			}

			.age-font {
				margin-top: 10rpx;
				font-size: 16px;
				line-height: 1.5;
				font-family: PingFangSC-Regular, sans-serif;
				font-size: 30rpx;
				color: #fff;
				font-weight: bold;
			}

			.age-line {
				margin: 20rpx auto 0;
				width: 200rpx;
				height: 2rpx;

				img {
					display: block;
					margin: 0 auto;
				}
			}

			.age-wait {
				margin-top: 20rpx;
				font-family: PingFangSC-Regular, sans-serif;
				color: #fff;
				font-size: 30rpx;
				font-weight: bold;
			}
		}

		.agent-main {
			margin-top: 30rpx;
			padding-top: 30rpx;
			padding-bottom: 30rpx;
			background: #fff;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;

			.agm-title {
				padding-left: 30rpx;
				margin-left: 30rpx;
				color: #454545;
				font-weight: normal;
				font-size: 30rpx;
				line-height: 1.5;
				background: url(../../static/index/title-style.png) no-repeat left center;
				background-size: 15rpx 19rpx;
			}

			.agm-sitem {

				.ags-cell {
					display: flex;
					justify-content: space-between;
					height: 90rpx;
					line-height: 90rpx;
					margin-left: 30rpx;
					margin-right: 30rpx;

					.agc-title {
						height: 90rpx;
						line-height: 90rpx;
						font-size: 12px;
						color: #454545;
					}

					.agc-detail {
						height: 90rpx;
						line-height: 90rpx;
						font-size: 12px;
						color: #666;

						.price {
							color: #F52F3E;
						}
					}
				}

				.u-border-bottom {
					border-color: #eee !important
				}



			}

			.loadmore {
				width: 172rpx;
				margin: 30rpx auto;
				padding-right: 20rpx;
				color: #1783FF;
				font-size: 14px;
				background: url(../../static/index/down.png) no-repeat right center;
				background-size: 17rpx 20rpx;
				cursor: pointer;
			}
		}
	}

	.divider-style {
		width: 720rpx;
		height: 1rpx;
		background: #9ECBFF;
		margin: 20rpx 0;
	}

	.information-id-content {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.content-id-item {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.id-text {
		font-family: PingFangSC-Regular, sans-serif;
		font-size: 24rpx;
		color: #fff;
	}

	.id-value {
		font-family: PingFangSC-Regular, sans-serif;
		font-size: 24rpx;
		color: #fff;
	}
	
	.ordering-information {
		padding: 30rpx;
		background: #fff;
		margin-top: 20rpx;
		border-radius: 20rpx;
		padding-top: 0;
	}
	
	.order-number {
		font-family: PingFangSC-Regular, sans-serif;
		font-size: 26rpx;
		color: #454545;
		padding: 30rpx 0;
	}
	
	.ordering-pic {
		width: 120rpx;
		height: 120rpx;
		background-size: cover;
		border-radius: 15rpx;
	}
	
	image.order-chart {
		width: 120rpx;
		height: 120rpx;
		background-size: cover;
		border-radius: 15rpx;
	}
	
	.ordering-text {
		margin-left: 30rpx;
	}
	
	.ordering-text-title {
		font-family: PingFangSC-Regular, sans-serif;
		font-size: 30rpx;
		color: #454545;
	}
	
	.amount-of-money {
		font-family: PingFangSC-Regular, sans-serif;
		font-size: 24rpx;
		color: #999;
		padding: 2rpx 0;
	}
	
	span.price-style {
		font-family: PingFangSC-Regular, sans-serif;
		font-size: 24rpx;
		color: #F52F3E;
	}
	
	.order-time {
		font-family: PingFangSC-Regular, sans-serif;
		font-size: 24rpx;
		color: #999;
		padding: 2rpx 0;
	}
	
	.ordering-item-content {
		display: flex;
		justify-content: left;
		align-items: center;
		border-bottom: 1rpx solid #eee;
		padding-bottom: 30rpx;
	}
	
	
	.load-more {
		text-align: center;
		font-size: 14px;
	}
</style>