samehome/pages/me/walletHistory.vue

<template>
	<view class="main">
		<!-- nav -->
		<navigation>{{ i18n.WalletHistory }}</navigation>
		<!-- headBtn -->
		<view class="head">
			<view class="headItem" @click="getType('exchange')" :class="{ select: form.ways === 'exchange' }">
				{{ i18n.Balance }}
			</view>
			<view class="headItem" @click="getType('contract')" :class="{ select: form.ways === 'contract' }">
				{{ i18n.Contarct }}
			</view>
		</view>

		<view class="cardList">
			<view class="card" v-for="(item, index) in userInfoObj" :key="index">
				<!-- 卡片条件渲染 -->
				<!-- balance -->
				<card-header v-if="form.ways === 'exchange'"
					:iconName="`../../static/me/${ item.isIncome=='yes' ? 'ic_wallet_add' : 'ic_wallet_minus'}.png`"
					:title="item.witId" :rightName="`${ item.isIncome=='yes' ? '+' : '-'}`+item.amount+' '+item.coinCode"
					:fontColor="`${item.isIncome=='yes'? '#00E8A2' : '#F4506A'}`">
				</card-header>
				<view class="dataBody" v-if="form.ways === 'exchange'">
					<key-value-row :keyName="i18n.Status" :value="item.status"></key-value-row>
					<key-value-row :keyName="i18n.Time" :value="item.addTimeStr"></key-value-row>
					<view class="text">Postscript : {{item.witType}}
					</view>
				</view>


				<!-- contarct -->
				<card-header v-if="form.ways === 'contract'"
					:iconName="`../../static/me/${ item.isIncome=='yes' ? 'ic_wallet_add' : 'ic_wallet_minus'}.png`"
					:title="item.witId" :rightName="`${ item.isIncome=='yes' ? '+' : '-'}`+item.amount+item.coinCode"
					:fontColor="`${item.isIncome=='yes'? '#00E8A2' : '#F4506A'}`">
				</card-header>
				<view class="dataBody" v-if="form.ways === 'contract'">
					<key-value-row :keyName="i18n.Status" :value="item.status"></key-value-row>
					<key-value-row :keyName="i18n.Time" :value="item.addTimeStr"></key-value-row>
					<view class="text">Postscript : {{item.witType}}
					</view>
				</view>



			</view>
		</view>
		<u-empty :text="i18n.Dataisempty" mode="data" v-if="userInfoObj.length==0"></u-empty>
		<u-loadmore :status="loadStatus" :loading-text="loadingText" :loadmore-text="loadmoreText"
			:nomore-text="nomoreText" v-if="userInfoObj.length" height="80" />
	</view>
</template>

<script>
	import api from '@/utils/api'
	import KeyValueRow from '../../components/KeyValueRow/KeyValueRow.vue';
	import CardHeader from '../../components/cardHeader/cardHeader.vue';
	export default {
		components: {
			KeyValueRow,
			CardHeader
		},
		name: "walletHistory",
		data() {
			return {
				isLoadMore: false, //是否加载中
				loadStatus: 'loadmore',
				loadingText: this.$t("login").toload,
				loadmoreText: this.$t("login").pullup,
				nomoreText: this.$t("login").Nomore,
				form: {
					pageNumber: 1,
					pageSize: 20,
					ways: 'exchange',
				},
				userInfoObj: [],
			};
		},
		computed: {
			i18n() {
				return this.$t("me");
			},
		},
		onReachBottom() {
			if (!this.isLoadMore) {
				this.form.pageNumber += 1
				this.getRecordList();
			}
		},
		onLoad() {
			this.getRecordList();
		},
		onShow() {
		},
		methods: {
			getType(type){
				this.form.ways=type
				this.getRecordList()
			},
			// 账单记录
			getRecordList() {
				this.isLoadMore = true
				api.billList(this.form).then(res => {
					if (res.content.length) {
						if (this.form.pageNumber > 1) {
							this.userInfoObj = this.userInfoObj.concat(res.content)
						} else {
							this.userInfoObj = res.content
						}
						if (this.userInfoObj.length >= Number(res.count)) { // 判断接口返回数据量小于请求数据量，则表示此为最后一页
							this.isLoadMore = true
							this.loadStatus = 'nomore'
						} else {
							this.isLoadMore = false
						}
					} else {
						this.isLoadMore = true
						this.loadStatus = 'nomore'
						this.userInfoObj = []
					}

					this.$forceUpdate()
				})
			},

		},
	}
</script>

<style lang="scss" scoped>


	.main {

		.head {
			margin-top: 200rpx;
			margin-left: 60rpx;
			width: 632rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 48rpx 0;

			.headItem {
				width: 300rpx;
				height: 68rpx;
				line-height: 68rpx;
				background: #211F32;
				border-radius: 16rpx;
				text-align: center;
				font-size: 32rpx;
				color: #A1A0A8;

				&.select {
					background: #00E8A2;
					color: #15141F;
				}

			}
		}

		.cardList {
			padding-bottom: 40rpx;

			.card {
				overflow: hidden;
				background: #211F32;
				border-radius: 32rpx;
				margin: 0 32rpx 32rpx;



				.dataBody {
					box-sizing: border-box;
					padding: 32rpx;

					.text {
						margin-top: 20rpx;
						padding: 10rpx 16rpx;
						background: #323045;
						border-radius: 8rpx;
						font-size: 24rpx;
						color: #A1A0A8;
					}
				}

			}
		}

	}
</style>