BCMM/pages/user/money.vue

<template>
	<view class="container">
		<view class="topBox">
			<image :src="`../../static/img/userIcon${type=='USDT'?1:2}.png`" class="logo" mode="scaleToFill"></image>
			<view class="money">{{money}}</view>
		</view>
		<view class="listBox">
			<view class="listName flex">
				<text>
					{{$t('user.交易记录')}}
				</text>
				<navigator :url="'./transfer?type='+type">
					<view class="targetText">
						{{$t('user.转账')}}
					</view>
				</navigator>
			</view>
			<view class="listTpl flex" v-for="item,index in list" :key="index">
				<view class="tplInfo flex_item">
					<image src="/static/img/moneyIcon.png" style="width: 39rpx;height: 43rpx;" mode="widthFix"></image>
					<view class="tpl">{{item.title}}<text>{{item.createtime|dateFormat}}</text></view>
				</view>
				<view class="tip" :class="{'text-linear-gradient':item.pm == 1}">
					{{ item.pm == 1?'+':'-'}}
					{{item.money*1}}
				</view>
			</view>
		</view>
		<u-loadmore :status="loadingType" line :loadmoreText="$t('base.加载更多')" :loadingText="$t('base.正在加载')"
			:nomoreText="$t('base.没有更多了')" />
	</view>
</template>
<script>
	import {
		moneyLog,
	} from '@/api/index.js';
	import {
		getUserInfo
	} from '@/api/user.js';
	import dayjs from '@/libs/dayjs/dayjs.min.js';
	export default {
		data() {
			return {
				money: 0,
				page: 1,
				limit:10,
				loadingType: "more",
				list: [],
				type: '',
			};
		},
		filters: {
			dateFormat: function(value) {
				return dayjs(value * 1000).format('YYYY/MM/DD hh:mm:ss');
			}
		},
		onLoad(opt) {
			this.type = opt.type;
			this.loadData();
			this.getUserInfo();
			uni.setNavigationBarTitle({
				title: this.type
			})
		},
		onShow() {},
		onReachBottom() {
			this.loadData()
		},
		methods: {
			getUserInfo() {
				const that = this;
				getUserInfo().then((res) => {
					that.money = res.data[that.type] * 1;
					console.log(that.money)
				})
			},
			loadData() {
				let obj = this;
				if (obj.loadingType == "nomore" ||
					obj.loadingType == "loading") {
					return;
				}
				obj.loadingType = "loading";
				moneyLog({
					page: obj.page,
					limit: obj.limit,
					token: obj.type
				}).then(res => {
					let ar = res.data.list.map((re) => {
						return re;
					})
					if (ar.length > 0) {
						obj.list = obj.list.concat(ar);
						obj.page++;
						if (obj.limit == ar.length) {
							obj.loadingType = "more";
						} else {
							obj.loadingType = "nomore";
						}
					} else {
						obj.loadingType = "nomore";
					}
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.targetText {
		background: linear-gradient(90deg, #7D32FF, #3EE0FF);
		border-top-left-radius: 100rpx;
		border-bottom-left-radius: 100rpx;
		padding: 10rpx 30rpx;
		padding-left: 50rpx;
	}

	.container {
		padding: 25rpx 25rpx;
		line-height: 1;
		background-color: rgb(12, 8, 21);
		min-height: 100vh;
	}

	.logo {
		width: 120rpx;
		height: 120rpx;
		border-radius: 100%;
		background-color: #e3e3e3;
	}

	.topBox {
		text-align: center;
		padding-top: 25rpx;

		.money {
			font-family: Kozuka Gothic Pr6N;
			font-weight: normal;
			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 55rpx;
		}
	}

	.listBox {
		color: #FFFFFF;

		.listName {
			font-weight: 500;
			font-size: 30rpx;
			padding-bottom: 30rpx;
		}

		.listTpl {
			background: rgba(255, 255, 255, .09);
			border-radius: 10rpx;
			padding: 40rpx 40rpx;
			margin-bottom: 20rpx;
			font-weight: 400;

			.tplInfo {
				.tpl {
					padding-left: 25rpx;
					font-size: 30rpx;

					text {
						font-size: 24rpx;
						color: #999999;
						padding-left: 15rpx;
					}
				}
			}

			.tip {
				font-size: 36rpx;
			}
		}
	}
</style>