mh/pages/me/wallet.vue

<template>
	<view class="yue">
		<view class="yue-top">
			<view class="yue-top-font">余额:(金币）</view>
			<view class="yue-top-money">{{ wallet || 0 }}</view>
			<view class="yue-top-btn"><button hover-class="hover-view" @click="navTo('/pages/me/recharge')">充值</button></view>
		</view>
		<view class="main">
			<view class="main-font center">账单明细</view>
			<view class="main-main">
				<view class="main-item flex" v-for="(item, index) in walletList" :key="index">
					<view class="main-item-left">
						<view class="main-item-font">{{ item.type }}</view>
						<view class="main-item-time">时间：{{ item.create_time }}</view>
					</view>
					<view class="main-item-money" :class="{ blue: item.coin < 0 }">{{ item.coin }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			page: 1,
			pages: 0,
			wallet: '', //金币数量
			walletList: [] //金币列表
		};
	},
	methods: {
		//去充值
		navTo(url) {
			uni.navigateTo({ url });
		},
		//获取金币列表
		loadData() {
			this.$api.myCoin({ page: this.page, msg: '数据加载中' }).then(res => {
				if (res.code === 1) {
					this.wallet = res.data.balance;
					this.pages = res.data.record.last_page;
					this.walletList = this.page == 1 ? res.data.record.data : [...this.walletList, ...res.data.record.data];
				}
			});
		}
	},
	onLoad({ token }) {
		if (token) {
			uni.setStorageSync('token', token);
		}
		this.loadData();
	},
	onReachBottom() {
		if (this.page < this.pages) {
			this.page++;
			this.loadData();
		}
	}
};
</script>

<style lang="scss">
.yue {
	padding: 30rpx 30rpx 0 30rpx;
}
.yue-top {
	height: 220rpx;
	margin-bottom: 60rpx;
	background: url(https://www.chaomangdao.com/image/yuebeijing@2x.png) no-repeat;
	background-size: cover;
	padding: 30rpx 30rpx 30rpx 40rpx;
	.yue-top-font {
		color: #ffffff;
		font-size: 28rpx;
	}
	.yue-top-money {
		color: #ffffff;
		font-size: 60rpx;
		font-weight: bold;
		line-height: 1;
	}
	.yue-top-btn {
		display: flex;
		justify-content: flex-end;
		button {
			width: 150rpx;
			height: 60rpx;
			background: #f6af32;
			border-radius: 30rpx;
		}
	}
}
.main-font {
	background: #ffffff;
	height: 80rpx;
	font-size: 30rpx;
	font-weight: bold;
	border-radius: 10rpx 10rpx 0rpx 0rpx;
	border-bottom: 2rpx solid #fafafa;
}
.main-main {
	background: #ffffff;
	border-radius: 0rpx 0rpx 10rpx 10rpx;
	.main-item {
		padding: 20rpx 30rpx;
		border-bottom: 2rpx solid #fafafa;
		.main-item-font {
			color: #666666;
			font-size: 26rpx;
			margin-bottom: 20rpx;
		}
		.main-item-time {
			color: #999999;
		}
		.main-item-money {
			color: #f6af32;
			font-size: 30rpx;
		}
		.blue {
			color: #fe3b3b;
		}
	}
}
</style>