xingmingyi_applet/pages/user/funManage/funManage.vue

<template>
	<view class="content">
		<view class="order-item">
			<view class="head dffd">
				<view class="top dfsb">
					<text class="white fontmid">账户余额（元）</text>
					<navigator url="/pages/user/funManage/fundCash" class="btn">提现</navigator>
				</view>
				<view class="mon">{{ topInfo.money }}</view>
				<view class="bot dfsb">
					<view class="monBox flex1 dffd">
						<text class="fontmid white">推荐奖励（元）</text>
						<text class="fontmid white">{{ topInfo.recom_money || 0.0 }}</text>
					</view>
					<view class="monBox flex1 dffd">
						<text class="fontmid white">邀请总人数（人）</text>
						<text class="fontmid white">{{ topInfo.pepo_num || 0.0 }}</text>
					</view>
				</view>
			</view>
			<view class="pageCon">
				<view class="pgConTitle">收支明细</view>
				<view class="listBox">
					<view v-for="(item, ind) in list" :key="ind" class="pgConBox bb">
						<view class="pgConTop dfsb">
							<text class="elli">{{ item.content }}</text>
							<text :class="[item.check == 1 ? 'red' : 'green', 'mon']">{{ item.money }}</text>
						</view>
						<view class="pgConBot dfsb">
							<text>{{ item.create_time }}</text>
							<text class="">余额: {{ item.after_money }}</text>
						</view>
					</view>
				</view>
				<view class="nodata" v-if="list.length < 1"><u-empty icon-size="200" text="还没有记录哦" mode="list"></u-empty></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			topInfo: {},
			list: [],
			status: 'more',
			page: 1,
			pagenum: 10
		};
	},

	async onLoad(options) {
		await this.loadData();
		await this.getMon();
	},
	onReachBottom() {
		if (this.status == 'nomore') return;
		this.page = ++this.page;
		this.loadData();
	},
	methods: {
		getMon() {
			this.$api.request('user/getTj').then(data => {
				if (data.code == 200) {
					this.topInfo = data.data;
				} else {
					this.$api.toast(data.msg);
				}
			});
		},
		//获取订单列表
		loadData() {
			// flag Number 类型: 1=余额   2=学豆
			this.$api
				.request('user/getMoneyLog', {
					flag: 1,
					page: this.page,
					limit: this.pagenum
				})
				.then(data => {
					if (data.code == 200) {
						this.list = this.list.concat(data.data.list);
						this.status = 'more';

						if (data.data.list.length < this.limit) {
							this.status = 'nomore';
						}
					} else {
						this.$api.toast(data.msg);
					}
				})
				.catch(function(error) {
					console.log(error);
				});
		},

		//提现
		tocash(url) {
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>

<style lang="scss">
.content {
	background: #fff;
	min-height: 100vh;
	padding: 20rpx 30rpx;
}

.order-item {
	background: #fff;
	margin: 0rpx 6rpx;
	.head {
		background: linear-gradient(120deg, #fba54a 0%, #fbc948 100%);
		border-radius: 23rpx 23rpx 0rpx 0rpx;
		height: 296rpx;
		padding: 33rpx 30rpx;
		.top {
			width: 100%;
		}
		.mon {
			font-size: 62rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #ffffff;
			line-height: 87rpx;
		}
		.bot {
			width: 100%;
			margin-top: 20rpx;
		}
		.btn {
			width: 105rpx;
			height: 46rpx;
			line-height: 46rpx;
			text-align: center;
			border-radius: 42rpx;
			color: #ed742e;
			background-color: rgba(255, 255, 255, 1);
			font-size: 24rpx;
			color: $prosecond;
			margin: 0 10rpx;
		}
		.fundMon {
			justify-content: center;
		}
	}

	.pageCon {
		margin-top: 45rpx;
		.pgConTitle {
			font-size: 36rpx;
			line-height: 44rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
		}
		.listBox {
			.pgConBox {
				padding: 30rpx 0;
				.pgConTop {
					align-items: flex-start;
					.elli {
						margin-right: 5rpx;
						flex: 1;
					}
					text {
						font-size: 30rpx;
					}
					.mon {
						font-size: 36rpx;
						font-family: DIN-Medium, DIN;
						font-weight: 500;
					}
				}
				.pgConBot {
					margin-top: 20rpx;
					text {
						color: $textgrey;
						font-size: 26rpx;
						line-height: 36rpx;
					}
				}
			}
		}
	}
}
</style>