mh/pages/me/balance.vue

<template>
	<view class="balance">
		<view class="balance-top">
			<view class="balance-top-bg center">
				<text>{{ balancePrice }}</text>
				<text>余额</text>
			</view>
			<view class="xian flex" style="justify-content: center;"></view>
		</view>
		<view class="main">
			<view class="main-top flexs">
				<view class="main-item center" v-for="(item, index) in 2" :key="index" :class="{ active: index == i }" @click="changeMoney(index)">
					{{ index == 0 ? '收入' : '支出' }}
				</view>
			</view>
			<view class="main-list">
				<view class="main-list-item flex" v-for="(item, index) in balanceList" :key="index">
					<view class="main-list-main">
						<view class="main-list-main-name">{{ item.type }}</view>
						<view class="main-list-main-time">时间：{{ item.create_time }}</view>
					</view>
					<view class="main-list-main-price" :class="{ blue: i == 1 }">{{ item.money }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			i: 0, //
			page: 1, //页码
			pages: null, //总页数
			balanceList: [], //
			balancePrice: '' //余额详情
		};
	},
	methods: {
		//切换
		changeMoney(index) {
			this.i = index;
			this.page = 1;
			this.balanceList = [];
			this.loadData();
		},
		//
		loadData() {
			this.$api.myBalance({ page: this.page, type: this.i == 0 ? 'in' : 'out', msg: '数据加载中' }).then(res => {
				uni.stopPullDownRefresh();
				if (res.code === 1) {
					this.balancePrice = res.data.balance;
					this.pages = res.data.record.last_page;
					this.balanceList = this.page == 1 ? res.data.record.data : [...this.balanceList, ...res.data.record.data];
				}
			});
		},
		//卡密充值记录列表
		carpassList() {
			uni.navigateTo({
				url: '/pages/me/carpassList/carpassList'
			});
		}
	},
	onLoad() {
		this.loadData();
	},
	onPullDownRefresh() {
		this.page = 1;
		this.balanceList = [];
		this.getBalanceList();
	},
	onReachBottom() {
		if (this.page < this.pages) {
			this.page++;
			this.getBalanceList();
		}
	}
};
</script>

<style lang="scss">
.balance {
	padding: 0 30rpx;
	.balance-top {
		.balance-top-bg {
			height: 220rpx;
			margin-bottom: 30rpx;
			background: url(https://www.chaomangdao.com/image/yuebeijing@2x.png) no-repeat;
			background-size: cover;
			flex-direction: column;
			text {
				color: #ffffff;
				&:first-child {
					font-size: 60rpx;
					font-weight: bold;
				}
				&:last-child {
					font-size: 28rpx;
					margin-top: 30rpx;
				}
			}
		}
		.balance-top_li {
			width: 330rpx;
			height: 78rpx;
			margin-bottom: 20rpx;
			color: #ffffff;
			font-size: 30rpx;
			border-radius: 39rpx;
			&:first-child {
				background: -webkit-linear-gradient(60deg, #ffb0d0 0%, #ff67a4 100%);
				margin-right: 10rpx;
			}
			&:last-child {
				background: -webkit-linear-gradient(0deg, #89f7fe 0%, #66a6ff 100%);
				margin-left: 10rpx;
			}
		}
	}
}
.main-top {
	background: #ffffff;
	border-radius: 10rpx 10rpx 0rpx 0rpx;
	border-bottom: 2rpx solid #fafafa;
	.main-item {
		width: 50%;
		height: 80rpx;
		font-size: 30rpx;
	}
	.active {
		color: #fff;
		position: relative;
		font-weight: bold;
		background: -webkit-linear-gradient(0deg, #89f7fe 0%, #66a6ff 100%);
		&::after {
			position: absolute;
			content: '';
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 40rpx;
			height: 4rpx;
			background: #89f7fe;
			border-radius: 2rpx;
		}
	}
}
.main-list {
	background: #ffffff;
	border-radius: 0rpx 0rpx 10rpx 10rpx;
	.main-list-item {
		padding: 20rpx 30rpx;
		border-bottom: 2rpx solid #fafafa;
		.main-list-main-name {
			color: #666666;
			font-size: 26rpx;
			margin-bottom: 20rpx;
		}
		.main-list-main-time {
			color: #999999;
		}
		.main-list-main-price {
			color: #ff4891;
			font-size: 30rpx;
		}
		.blue {
			color: #327cf6;
		}
	}
}
</style>