yzf/pages/user/money.vue

<template>
	<view class="container">
		<view class="topBox">
			<image  :src="dataMoney[type]?dataMoney[type].LOGO:''" class="logo" mode="scaleToFill"></image>
			<view class="money">{{money}}</view>
		</view>
		<view class="listBox">
			<view class="listName">交易记录</view>
			<view class="listTpl flex" v-for="item,index in list" :key="index">
				<view class="tplInfo flex_item">
					<image src="/static/image/img33.png" style="width: 39rpx;height: 43rpx;" mode="widthFix"></image>
					<view class="tpl">{{item.title}}<text>{{item.add_time}}</text></view>
				</view>
				<view class="tip" :style="{color:( item.pm == 0? '#fff' :'#0C5AFA')}">
					{{ item.pm == 1?'+':'-'}}
					{{item.number}}
				</view>
			</view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>
<script>
	import {
		moneyLog,
	} from '@/api/game.js';
	import {
		qianBao
	} from '@/api/wallet.js';
	export default {
		data() {
			return{
				money:0,
				page:1,
				loadingType: "more",
				list:[],
				type:'',
				dataMoney:{}
				
			};
		},
		onLoad(opt) {
			this.type = opt.type;
			this.loadData();
			this.qianbao();
			uni.setNavigationBarTitle({
				title:this.type
			})
		},
		onShow() {},
		onReachBottom() {
			// this.loadData()
		},
		methods: {
			qianbao() {
				const that = this;
				qianBao().then((res) => {
					that.dataMoney = res.data.back;
					that.money = that.dataMoney[that.type].money.money*1;
					console.log(that.dataMoney,'that.money');
				})
			},
			loadData(){
				let obj = this;
				if (obj.loadingType == "nomore" ||
					obj.loadingType == "loading"){
					return;
				}
				obj.loadingType = "loading";
				moneyLog({
					page:obj.page,
					limit:10,
					moneyType:obj.type
				},obj.status).then(res => {
					let ar = res.data.list.map((re)=>{
						re.number = +re.number
						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";
						}
					}
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.container{
		padding: 25rpx 25rpx;
	}
	.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;
			color: #FFFFFF;
			padding-bottom: 30rpx;
		}
		.listTpl{
			background: #1F2A4A;
			border-radius: 10rpx;
			padding: 40rpx 40rpx;
			margin-bottom: 20rpx;
			.tplInfo{
				.tpl{
					padding-left: 25rpx;
					font-weight: 400;
					font-size: 30rpx;
					color: #FFFFFF;
					text{
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						padding-left: 15rpx;
					}
				}
			}
			.tip{
				font-weight: 400;
				font-size: 36rpx;
				color: #4C5D97;
			}
		}
	}
</style>