BCMM/pages/user/user.vue

<template>
	<view class="container">
		<navBar :show-title="true" :title="$t('user.我的资产')" url="/pages/index/index"></navBar>
		<view class="centerBox">
			<view class="myMoney flex-center position-relative">
				<view class="myMoneyBox">
					<view class="moneyTitle">
						<text>{{$t('user.我的资产')}}</text>
						<image class="myIcon margin-l-10" src="../../static/img/userIcon4.png" mode="scaleToFill">
						</image>
					</view>
					<view class="money margin-t-30">
						<text class="font-size-sm">≈</text>{{(userInfo.usdt*1).toFixed(5)}}U
					</view>
				</view>
			</view>
			<view class="flex cardBottom" @click="navto('./withdrawal')">
				<view class="cardLeft flex">
					<image class="leftTip" src="../../static/img/userIcon5.png" mode="scaleToFill"></image>
					<view class="moneyUp">
						USDT{{$t('user.提现')}}
					</view>
					<view class="moneyOut">
						({{$t('user.手续费')}}{{num}}%)
					</view>
				</view>
				<view class="cardRight flex">
					<text class="margin-r-10">{{$t('user.去提现')}}</text>
					<image class="rightTip" src="../../static/img/mininext.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="title">
				{{$t('user.我的资产')}}
			</view>
			<view class="list">
				<view class="item flex " @click="navto('./money?type=USDT')" >
					<view class="left flex-start">
						<image class="typeIcon" src="../../static/img/userIcon1.png" mode="scaleToFill"></image>
						<text>
							USDT
						</text>
					</view>
					<view class="right flex">
						<view class="moneyBox margin-r-20">
							<view class="num">
								{{(userInfo.USDT*1).toFixed(5)}}
							</view>
							<!-- <view class="tip">
								≈{{money}}RMB
							</view> -->
						</view>
						<image class="itemTip" src="../../static/img/mininext.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="item flex" @click="navto('./money?type=BCMM')">
					<view class="left flex-start">
						<image class="typeIcon" src="../../static/img/userIcon2.png" mode="scaleToFill"></image>
						<text>
							BCMM
						</text>
					</view>
					<view class="right flex">
						<view class="moneyBox margin-r-20">
							<view class="num">
								{{(userInfo.BCMM*1).toFixed(5)}}
							</view>
							<!-- <view class="tip">
								≈{{money}}RMB
							</view> -->
						</view>
						<image class="itemTip" src="../../static/img/mininext.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex";
	import {
		loadIndexs
	} from '@/api/index.js';
	import {
		getUserInfo
	} from '@/api/user.js';
	import navBar from "@/components/nav/nav.vue"
	export default {
		data() {
			return {
				money: 0.00,
				num:0
			}
		},
		components: {
			navBar
		},
		computed: {
			...mapState("user", ['userInfo']),
		},
		onLoad(option) {
			this.getUserInfo();
		},
		methods: {
			...mapMutations('user', ['setUserInfo']),
			navto(url) {
				uni.navigateTo({
					url,
				});
			},
			// 获取更新用户信息
			getUserInfo() {
				getUserInfo().then((res) => {
					this.setUserInfo(res.data);
				}).catch((res) => {
					console.log(res);
				})
				loadIndexs().then((res) => {
					this.num = +res.data.commission;
				}).catch((res) => {
					console.log(res);
				})
				
			},
		},
	}
</script>

<style lang="scss">
	.centerBox {
		padding: 30rpx;
		color: #FFF;


		.title {
			padding: 50rpx 0;
			font-weight: 500;
			font-size: 36rpx;
		}

		.myMoney {
			background: url("../../static/img/userIcon3.png");
			height: 199rpx;
			background-size: 100% 100%;
			padding: 30rpx;
			font-weight: bold;

			.myMoneyBox {
				width: 100%;

				.moneyTitle {
					font-size: 29rpx;
				}

				.myIcon {
					width: 36rpx;
					height: 22rpx;
				}

				.money {
					font-size: 33rpx;
				}
			}
		}

		.item {
			margin-bottom: 50rpx;

			.left {
				.typeIcon {
					width: 80rpx;
					height: 80rpx;
					margin-right: 20rpx;
				}
			}

			.right {
				flex-shrink: 0;
				flex-grow: 1;
				justify-content: flex-end;
				font-weight: 500;
				text-align: right;

				.moneyBox {
					.num {
						font-size: 32rpx;
					}

					.tip {
						font-size: 26rpx;
						color: #999999;
					}
				}

				.itemTip {
					width: 18rpx;
				}
			}
		}
	}
	.cardBottom{
		background: #292D40;
		border-bottom-left-radius: 22rpx;
		border-bottom-right-radius: 22rpx;
		padding:44rpx 30rpx 34rpx 30rpx;
		margin-top: -20rpx;
		.leftTip{
			width: 31rpx;
			height: 32rpx;
		}
		.moneyUp{
			padding-left: 10rpx;
			font-weight: 500;
			font-size: 31rpx;
		}
		.moneyOut{
			font-weight: 500;
			font-size: 24rpx;
			color: rgba(255,255,255,.7);
		}
		.rightTip{
			width: 11rpx;
		}
		.cardRight{
			font-size: 24rpx;
			color: rgba(255,255,255,.7);
		}
	}
	.container {
		width: 100%;
		line-height: 1;
		background-color: rgb(12, 8, 21);
		min-height: 100vh;
	}
</style>