nzhbsr/pages/user/user.vue

<template>
	<view class="content">
		<view class="allmoneybox">
			<view class="allmbox_1">
				<image v-if="show" @click="look(false)" src="../../static/icon/user-eyes.png" mode=""></image>
				<image v-if="!show" @click="look(true)" src="../../static/icon/user-eyesb.png" mode=""></image>
			</view>
			<view class="allmbox_2 flex">
				<view class="allmbox_2_font">賬戶總資產折合(USDT)</view>
				<view class="allmbox_2_icon" @click="open()"><image src="../../static/icon/user-th.png" mode=""></image></view>
			</view>
			<view class="allmbox_3">{{ show ? money : '****.****' }}</view>

			<view class="allmbox_btn">
				<view class="allmbox_btn_1">
					<view class="allmbox_cbtn btn_active" @click="navTo('/pages/transaction/cblist')">充幣</view>
					<view class="allmbox_tbtn" @click="navTo('/pages/transaction/tblist')">提幣</view>
				</view>
			</view>
		</view>
		<view class="findbox">
			<view class="findbox_1">
				<view class="findbox_2"><view class="findbox_3">資產列表</view></view>
			</view>

			<scroll-view :scroll-y="true" class="swiper-box" :style="{ height: maxheight }">
				<view class="listbox" v-for="(item, index) in list">
					<view class="listbox_title flex">
						<view class="listbox_title_l">{{ item.name.toLocaleUpperCase() }}</view>
						<view class="listbox_title_r"><image src="../../static/icon/user-back.png" mode=""></image></view>
					</view>
					<view class="main flex">
						<view class="main-item">
							<view class="main-item-font">可用</view>
							<view class="main-item-num">{{ item.data.num || '0.0000' }}</view>
						</view>
						<view class="main-item">
							<view class="main-item-font">冻结</view>
							<view class="main-item-num">{{ item.data.numd || '0.0000' }}</view>
						</view>
						<view class="main-item">
							<view class="main-item-font">折合(USDT)</view>
							<view class="main-item-num">{{ item.data.zhe || '0.0000' }}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="popup-box">
				<view class="img"><image src="../../static/img/user-index.png" mode=""></image></view>
				<view class="popup-font">由於資金統計存在延時，賬戶餘額不一定是並非最新余額，如需準確餘額請到相關賬戶頁面進行查詢</view>
				<view class="btn" @click="cancel()">確定</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { usercoin, getallzhehe } from '@/api/wallet.js';
export default {
	onReady(res) {
		var _this = this;
		uni.getSystemInfo({
			success: resu => {
				const query = uni.createSelectorQuery();
				query.select('.swiper-box').boundingClientRect();
				query.exec(function(res) {
					_this.maxheight = resu.windowHeight - res[0].top + 'px';
					console.log('打印页面的剩余高度', _this.maxheight);
				});
			},
			fail: res => {
				console.log('打印页面的剩余高度', res);
			}
		});
	},
	data() {
		return {
			maxheight: '',
			show: false,
			list: '',
			money: ''
		};
	},
	onLoad() {},
	onShow() {
		this.loadData();
	},
	methods: {
		look(type) {
			this.show = type;
		},
		loadData() {
			usercoin({}).then(({ data }) => {
				this.list = data;
			});
			getallzhehe({}).then(e => {
				this.money = e.allzhehe;
				console.log(e, '123456');
			});
		},
		cancel() {
			this.$refs.popup.close();
		},
		open() {
			this.$refs.popup.open();
		},
		navTo(url) {
			uni.navigateTo({
				url
			});
		}
	}
};
</script>

<style lang="scss">
page,
.content {
	height: auto;
	min-height: 100%;
}
::-webkit-input-placeholder {
	color: #b5b5b5;
	font-size: 12px;
}
::-moz-placeholder {
	color: #b5b5b5;
	font-size: 12px;
}
input:focus {
	background: #fff;
	outline: 1px solid #fff;
}
a:hover,
a:link,
a:visited,
a:active {
	color: #707a8a;
	text-decoration: none;
}
.no_header {
	position: fixed;
	z-index: 9999;
	padding: 0px 10px;
	top: 0px;
	height: 45px;
	// box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
}
.txtl {
	line-height: 50px;
	width: 20%;
	text-align: center;
	border-bottom: 3px solid #fcd535;
}
.titlebox {
	width: 100%;
	height: 120px;
	background: #fff;
	margin-top: 55px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}
.allmoneybox {
	width: 100%;
	height: 300rpx;
	background: #f5f5f5;
	// box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
	// position: fixed;
	// top: 44px;
}
.allmbox_1 {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	padding: 22px 15px 10rpx;
	image {
		width: 36rpx;
		height: 30rpx;
	}
}
.allmbox_2 {
	justify-content: flex-start;
	width: 100%;
	text-align: left;
	padding: 0px 15px;
	.allmbox_2_font {
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #070707;
		margin-right: 10rpx;
	}
	.allmbox_2_icon {
		width: 34rpx;
		height: 34rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
}
.allmbox_3 {
	line-height: 1;
	width: 100%;
	margin-top: 24rpx;
	text-align: left;
	padding: 0px 15px;
	font-size: 40rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #070707;
}
.allmbox_btn {
	width: 100%;
	height: 35px;
	line-height: 35px;
	padding: 0px 10px;
}
.allmbox_btn_1 {
	width: 60%;
	height: 35px;
	float: right;
}
.allmbox_cbtn {
	width: 45%;
	height: 35px;
	line-height: 35px;
	text-align: center;
	float: left;
	border: 1px solid #fcd535;
	border-radius: 5px;
}
.allmbox_tbtn {
	width: 45%;
	height: 35px;
	line-height: 35px;
	text-align: center;
	float: right;
	border: 1px solid #e6e6e6;
	border-radius: 5px;
	background: #e6e6e6;
}
.btn_active {
	background: linear-gradient(to left, #eeb80d, #ffe35b);
}
.findbox {
	background: #fff;
}
.findbox_1 {
	width: 100%;
	height: 40px;
	line-height: 40px;
	padding: 0px 15px;
	border-bottom: 1px solid #f5f5f5;
}
.findbox_2 {
	width: 60%;
	height: 40px;
	line-height: 40px;
	float: left;
}
.findbox_3 {
	height: 40px;
	background: #ffffff;
	border-bottom: 2px solid #fcd535;
	float: left;
	text-align: center;
}
.listbox {
	padding: 33rpx 20rpx 24rpx;
	width: 100%;
	background: #fff;
	border-bottom: 1px solid #f5f5f5;
}
.listbox_title {
	margin-top: 30rpx;
	width: 100%;
}
.listbox_title_l {
	width: 50%;
	font-size: 27rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #767682;
	text-align: left;
}
.listbox_title_r {
	image {
		width: 28rpx;
		height: 28rpx;
	}
}
.main {
	margin-top: 30rpx;
	.main-item {
		width: 33%;
		line-height: 1;
		.main-item-font {
			font-size: 25rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #cdcdcd;
		}
		.main-item-num {
			margin-top: 14rpx;
			font-size: 23rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
		}
	}
}
.popup-box {
	background: #fff;
	border-radius: 30rpx;
	width: 580rpx;
	padding: 20rpx;
	.img {
		padding: 10rpx 0 0 0;
		display: flex;
		justify-content: center;
		image {
			width: 72rpx;
			height: 72rpx;
		}
	}
	.popup-font {
		font-size: 28rpx;
		color: #000;
		padding: 10rpx 20rpx;
	}
	.btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background: linear-gradient(to left, #eeb80d, #ffe35b);
		border-radius: 10rpx;
		text-align: center;
		margin-top: 20rpx;
	}
}
</style>