NFT/pages/assets/assets.vue

<template>
	<view class="container">
		<view class="status_bar"></view>
		<view class="title">资产</view>
		<view>
			<view class="list-box">
				<view class="bg"><image src="../../static/img/assets-bg.png" mode=""></image></view>
				<view class="info-box">
					<view class="flex" v-show="show == true">
						<view class="info">
							<view class="list-title">总资产合计(USDT）</view>
							<view class="list-name clamp">{{ like_usdt * 1 }}</view>
							<view class="ustd">≈ {{ like_rmb * 1 }}RMB</view>
						</view>
						<image class="image" src="../../static/img/eyes.png" @click="showPick(false)"></image>
					</view>
					<view class="flex" v-show="show == false">
						<view class="info">
							<view class="list-title">总资产合计(USDT）</view>
							<view class="list-name clamp">****</view>
							<view class="ustd">≈ ****RMB</view>
						</view>
						<image class="image" src="../../static/img/img43.png" @click="showPick(true)"></image>
					</view>
				</view>
				<view class="list-tpl flex">
					<view class="tpl" @click="navTo('/pages/assets/transfer')">
						<image class="zhuanz" src="../../static/img/zhuan.png"></image>
						<view class="tpl-name">转账</view>
					</view>
					<view class="tpl" @click="navTo('/pages/assets/recharge')">
						<!-- @click="recharge" -->
						<image src="../../static/img/chong.png"></image>
						<view class="tpl-name">充币</view>
					</view>
					<view class="tpl" @click="navTo('/pages/assets/withdraw')">
						<image src="../../static/img/ti.png"></image>
						<view class="tpl-name">提币</view>
					</view>
				</view>

				<!-- <view class="list-tips flex_item">
				<image src="../../static/img/img07.png"></image>
				<view>资产正在保护中</view>
			</view> -->
			</view>
			<view class="list-cell" v-for="(ls, index) in list" :key="index" @click="toDateils(ls, index)">
				<view class="cell flex">
					<view class="cell-title flex">
						<image :src="ls.LOGO" mode="scaleToFill" class="logo"></image>
						<view class="name">{{ ls.name }}</view>
					</view>
					<image src="../../static/img/img16.png"></image>
				</view>
				<view class="flex cell-list">
					<view class="cell-tpl tips">
						<view class="name">可用</view>
						<view class="tpl">{{ ls.money.money * 1 }}</view>
					</view>
					<view class="cell-tpl tips">
						<view class="name">冻结中</view>
						<view class="tpl">{{ ls.lock_money * 1 }}</view>
					</view>
					<view class="cell-tpl tip-box">
						<view class="name">折合(USDT）</view>
						<view class="tpl clamp">{{ ls.usdt * 1 }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import { wallet } from '@/api/finance.js';
import easyselect from '@/components/easy-select/easy-select.vue';
export default {
	components: {
		easyselect
	},
	data() {
		return {
			num: '',
			money: '',
			type: '',
			moneyTypeList: [],
			list: [],
			show: true,
			like_rmb: '',
			like_usdt: '',
			wallet: ''
		};
	},
	onLoad(option) {
		this.loadData();
	},
	onShow() {
		this.loadData();
		let show = uni.getStorageSync('showPick');
		if (show == false) {
			this.show = false;
		}
		if (show == true) {
			this.show = true;
		}
	},
	//下拉刷新
	onPullDownRefresh() {
		this.loadData();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
		// 请求载入数据
		loadData() {
			let obj = this;
			uni.showLoading({
				title: '加载中'
			});
			obj.loading = true;
			wallet({}).then(({ data }) => {
				console.log(data);
				obj.like_rmb = data.all_rmb;
				obj.like_usdt = data.all_usdt;
				const arr = Object.keys(data.back);
				console.log(arr);
				let ar = [];
				arr.forEach(e => {
					ar.push(data.back[e]);
				});
				obj.list = ar;
				uni.hideLoading();
			});
		},
		showPick(item) {
			this.show = item;
			uni.setStorage({
				key: 'showPick',
				data: item,
				success: function() {}
			});
		},
		selectOne(options) {
			this.money = options.name;
			this.type = options.code;
		},
		useOutClickSide() {
			this.$refs.easySelect.hideOptions && this.$refs.easySelect.hideOptions();
		},
		close() {
			this.$refs.popup.close();
		},
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		toDateils(ls) {
			console.log(ls, '55');
			let wayaddress = {};
			uni.navigateTo({
				url: '/pages/assets/details?name=' + ls.name
			});
		}
	}
};
</script>

<style lang="scss">
page {
	min-height: 100%;
	background-color: #ffffff;
	.container {
		width: 100%;
		padding: 25rpx 40rpx;
	}
}
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}
.title {
	font-size: 46rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: $font-color-dark;
	margin-bottom: 30rpx;
}
.list-tips {
	position: absolute;
	right: 0;
	top: 25rpx;
	font-size: 24rpx;
	background-color: #f4ca1c;
	padding: 14rpx 27rpx;
	border-bottom-left-radius: 50rpx;
	border-top-left-radius: 50rpx;
	color: #5771df;
	image {
		width: 30rpx;
		height: 31rpx;
		margin-right: 12rpx;
	}
}
.list-box {
	.bg {
		position: absolute;
		right: 0;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		image {
			height: 100%;
			width: 100%;
		}
	}
	position: relative;
	color: #ffffff;
	border-radius: 20rpx;
	margin-bottom: 60rpx;
	.info-box {
		z-index: 10;
		position: relative;
		padding: 31rpx 43rpx;
		.image {
			width: 44rpx !important;
			height: 30rpx !important;
		}
		.info {
			width: 80%;
			.list-title {
				position: relative;
				z-index: 10;
				font-size: 30rpx;
				font-weight: 500;
				color: #ffffff;
			}
			.list-name {
				width: 100%;
				font-size: 64rpx;
				font-weight: bold;
				padding: 25rpx 0rpx;
			}
			.ustd {
				font-size: 30rpx;
				font-weight: normal;
			}
		}
	}
	.list-tpl {
		z-index: 10;
		position: relative;
		padding: 30rpx 100rpx;
		.tpl {
			text-align: center;
			image {
				width: 45rpx;
				height: 42rpx;
			}
			.zhuanz {
				width: 45rpx;
				height: 42rpx;
			}
			.tpl-name {
				font-size: 27rpx;
				font-weight: bold;
				padding-left: 10rpx;
				color: #ffffff;
			}
		}
	}
}
.list-cell {
	padding-bottom: 58rpx;
	.cell {
		padding-bottom: 31rpx;
		image {
			width: 12rpx;
			height: 24rpx;
		}
		.cell-title {
			font-size: 34rpx;
			font-weight: 500;
			color: #5771df;
			.logo {
				border-radius: 99rpx;
				width: 50rpx;
				height: 50rpx;
			}
			.name {
				margin-left: 20rpx;
				color: $font-color-dark;
				font-weight: bold;
			}
		}
	}
	.cell-list {
		width: 100%;
		justify-content: space-between;
		.cell-tpl {
			text-align: left;
			.name {
				font-size: 24rpx;
				font-weight: 500;
				color: #999999;
				padding-bottom: 15rpx;
			}
		}
		.tip-box {
			text-align: right;
			// width: 40%;
		}
		.tip-tpl {
			text-align: center;
			// width: 30%;
		}
		.tips {
			// width: 30%;
		}
	}
}
//弹窗
.popup {
	background-color: #ffffff;
	border-radius: 25rpx;
	font-size: 30rpx;
	.cancel {
		text-align: center;
		width: 100%;
		line-height: 60rpx;
		.tip {
			background-color: #5771df;
			color: #ffffff;
			width: 70rpx;
			height: 70rpx;
			border-top-right-radius: 25rpx;
		}
	}
	.list-boxs {
		padding: 0rpx 80rpx;
		.password {
			padding: 50rpx 0rpx;
			width: 100%;
			input {
				width: 70%;
				height: 80rpx;
				border: 2rpx solid #999999;
				padding-left: 25rpx;
				box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.27);
				border-radius: 11rpx;
			}
		}
		.confirm-btn {
			padding-bottom: 120rpx;
			padding-top: 30rpx;
			text {
				background-color: #5771df;
				color: #ffffff;
				width: 70%;
				text-align: center;
				padding: 25rpx 90rpx;
				border-radius: 15rpx;
			}
		}
	}
}
.loading {
	width: 100%;
	height: 100%;
}
</style>