nzhbsr/pages/user/tbRecord.vue

<template>
	<view class="content">
		<view class="main">
			<view class="main-title">
				<view class="main-title-item">{{ $t('cb.bz') }}</view>
				<view class="main-title-item">{{ $t('cb.sj') }}</view>
			</view>
			<view class="main-info" v-for="(item, index) in list" @click="navTo('/pages/user/tbDetail?id=' + item.id)">
				<view class="main-info-top flex">
					<view class="main-info-title">{{ item.coinname.toUpperCase() }}</view>
					<view class="main-info-type">{{ item.status == 1 ? $t('cb.dsh') : item.status == 2 ? $t('cb.wc') : $t('cb.sb') }}</view>
				</view>
				<view class="main-info-bottom flex">
					<view class="main-bottom-item left">
						<view class="main-bottom-item-font">{{ $t('tb.sjdz') }}</view>
						<view class="main-bottom-item-num">{{ item.mum }}</view>
					</view>
					<view class="main-bottom-item center">
						<view class="main-bottom-item-font">{{ $t('cb.sxf') }}</view>
						<view class="main-bottom-item-num">{{ item.fee }}</view>
					</view>
					<view class="main-bottom-item right">
						<view class="main-bottom-item-font">{{ $t('cb.sj') }}</view>
						<view class="main-bottom-item-num">{{ item.addtime }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { txlist } from '@/api/wallet.js';
export default {
	data() {
		return {
			list: []
		};
	},
	onLoad() {
		uni.setNavigationBarTitle({ title: this.$t('tb.tblb') });
	},
	onShow() {
		this.loadData();
	},
	methods: {
		loadData() {
			txlist({ page: 1, limit: 1000 }).then(e => {
				this.list = e.data;
			});
		},
		navTo(url) {
			uni.navigateTo({
				url
			});
		}
	}
};
</script>

<style lang="scss">
page,
.content {
	min-height: 100%;
	height: auto;
	background: #f5f5f5;
}
.main {
	margin: 10rpx 0 0;
	background: #fff;
	padding: 20rpx;
	.main-title {
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1px solid #fcfcfc;
	}
	.main-info {
		padding: 20rpx 20rpx;
		border-bottom: 1px solid #fcfcfc;
		.main-info-top {
			.main-info-title {
				font-size: 36rpx;
				font-weight: 500;
				color: #707a8a;
			}
			.main-info-type {
				font-size: 28rpx;
				color: #707a8a;
			}
		}
		.main-info-bottom {
			margin: 20rpx 0 0;
			.left {
				text-align: left;
			}
			.center {
				text-align: center;
			}
			.right {
				text-align: right;
			}
			.main-bottom-item {
				width: 33%;
				.main-bottom-item-font {
					font-size: 28rpx;
					color: #cbcbcb;
				}
				.main-bottom-item-num {
					height: 80rpx;
					margin-top: 20rpx;
					font-size: 28rpx;
					color: #000;
				}
			}
		}
	}
}
</style>