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 " v-if="info.czstatus == 1" @click="navto('/pages/transaction/cbdetail?type=' + id)">充幣</view>
			<view class="btnbox_b " v-if="info.txstatus == 1" @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>