nzhbsr/pages/user/coininfo.vue

<template>
	<view class="content">
		<view class="top-base">
			<view class="contentbox_top">
				{{info.name}}
			</view>
			<view class="base-info flex">
				<view class="info-item">
					<view class="item-name">
						可用
					</view>
					<view class="item-val">
						{{info.num}}
					</view>
				</view>
				<view class="info-item">
					<view class="item-name">
						凍結
					</view>
					<view class="item-val">
						{{info.numd}}
					</view>
				</view>
				<view class="info-item">
					<view class="item-name" style="text-align: right;">
						折合(USDT)
					</view>
					<view class="item-val" style="text-align: right;">
						{{info.zhe}}
					</view>
				</view>
			</view>
			
		</view>
		<view class="" style="height: 20rpx;background-color: #f5f5f5;">
			
		</view>
		<view class="tit">
			財務記錄
		</view>
		<view class="cwjl-wrap" v-for="item in list">
			<view class="jl-tit">
				{{item.remark}}
			</view>
			<view class="jl-info flex" >
				<view class="info-item">
					<view class="item-name">
						數量
					</view>
					<view class="item-val">
						{{item.num}}
					</view>
				</view>
				<view class="info-item">
					<view class="item-name" >
						狀態
					</view>
					<view class="item-val">
						{{item.st == 1? '增加': (item.st == 2 ? '減少': '')}}
					</view>
				</view>
				<view class="info-item">
					<view class="item-name" style="text-align: right;">
						時間
					</view>
					<view class="item-val" style="text-align: right;">
						{{item.addtime}}
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
		<view class="tianc" style="height: 120rpx;background-color: #fff;">
			
		</view>
		<view class="btm-btn flex">
			<view class="btnbox_a " @click="navto('/pages/transaction/cbdetail?type=' + id)">
				充幣
			</view>
			<view class="btnbox_b " @click="navto('/pages/transaction/tbdetail?type=' + id)">
				提幣
			</view>
			<view class="btnbox_b " v-if="id == 4" @click="navto('/pages/transaction/transfer')">
				劃轉
			</view>
		</view>
	</view>
</template>

<script>
	import {
		coininfo,
		bill
	} from '@/api/login.js'
	export default {
		data() {
			return {
				id: '',
				info: {},
				page: 1,
				limit: 10,
				loadingType: 'more',
				loaded: false,
				list: []
			}
		},
		onLoad(opt) {
			if (opt.id) {
				this.id = opt.id
				this.coininfo()
			}
		},
		onShow() {

		},
		onReachBottom() {
			console.log('dao')
			this.bill()
		},
		onReady() {

		},
		methods: {
			navto(url) {
				uni.navigateTo({
					url
				})
			},
			coininfo() {
				let obj = this
				coininfo({
					cid: obj.id
				}).then(res => {
					console.log(res)
					obj.info = res.data
					obj.bill()
				})
			},
			bill() {
				let obj = this
				if(obj.loadingType == 'loading' || obj.loadingType == 'noMore') {
					return
				}
				obj.loadingType = 'loading'
				bill({
					name: obj.info.name,
					page: obj.page,
					limit: obj.limit
				}).then(res => {
					console.log(res)
					// if()
					obj.list = obj.list.concat(res.data)
					if(obj.limit == res.data.length) {
						obj.loadingType = 'more'
					}else {
						obj.loadingType = 'noMore'
					}
					obj.loaded = true
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
		height: 100%;
	}
	.top-base {
		width: 750rpx;
		height: 240rpx;
		background-color: #fff;
		padding: 10rpx 30rpx;
	}

	.contentbox_top {
		color: #FCD535;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 52rpx;
	}
	.base-info {
		width: 100%;
		justify-content: space-between;
		.info-item {
			width: 33%;
			height: 100rpx;
			color: #000;
			font-size: 28rpx;
			.item-name {
				color: #707A8A;
			}
		}
	}
	.tit {
		height: 100rpx;
		line-height: 100rpx;
		padding: 20rpx;
		color: #000;
		font-size: 40rpx;
	}
	.cwjl-wrap {
		width: 660rpx;
		height: 180rpx;
		border-bottom: 1px solid #f5f5f5;
		margin: auto;
		padding: 10rpx 20rpx;
		color: #000;
		font-size: 28rpx;
		.jl-tit {
			
			
		}
		.jl-info {
			justify-content: space-between;
			
			.info-item {
				width: 33%;
				.item-name {
					color: #707A8A;
					padding: 20rpx 0 10rpx;
				}
				.item-val {
					padding: 10rpx 0;
				}
			}
		}
	}
	.btm-btn {
		width: 750rpx;
		height: 120rpx;
		padding: 20rpx;
		font-size: 28rpx;
		color: #000;
		justify-content: flex-start;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		.btnbox_a {
			width: 198rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: linear-gradient(to left,#eeb80d,#ffe35b);
			margin-right: 20rpx;
			border-radius: 20rpx;
		}
		.btnbox_b {
			width: 198rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #f5f5f5;
			margin-right: 20rpx;
			border-radius: 20rpx;
		}
	}
</style>