kunpeng/pages/finance/index.vue

<template>
	<view class="container">
		<view class="list-box">
			<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/img29.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/finance/transfer')">
					<image class="zhuanz" src="../../static/img/img10.png"></image>
					<view class="tpl-name">转账</view>
				</view>
				<view class="tpl" @click="navTo('/pages/finance/recharge')"><!-- @click="recharge" -->
					<image src="../../static/img/img08.png"></image>
					<view class="tpl-name">充币</view>
				</view>
				<view class="tpl" @click="navTo('/pages/finance/withdraw')">
					<image src="../../static/img/img09.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)">
			<view class="cell flex">
				<view class="cell-title">{{ls.name}}</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 tip-tpl">
					<view class="name">冻结</view>
					<view class="tpl">{{ls.lock_moeny}}</view>
				</view>
				<view class="cell-tpl tip-box">
					<view class="name">折合(USDT）</view>
					<view class="tpl clamp">{{ls.usdt*1}}</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="popup">
				<view class="cancel flex" @click="close">
					<view></view>
					<view class="tip">x</view>
				</view>
				<view class="list-boxs">
					<view class="popup-text">购买数量：</view>
					<view class="password"><input type="number" v-model="num" placeholder="请输入算力数量"></view>
					<view class="popup-text">币种选择：</view>
					 <view class="content" @click="useOutClickSide">
					        <easy-select ref="easySelect" :options='moneyTypeList' :value="money" @selectOne="selectOne"></easy-select>
					    </view>
					<view class="confirm-btn" @click="pay"><text>确认充币</text></view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
import { moneyType } from '@/api/index.js';
import { recharge,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:''
		};
	},
	onLoad(option){
		this.moneyType();
		this.loadData();
	},
	onShow() {
		let show = uni.getStorageSync('showPick');
		if(show == false){
			this.show = false;
		}
		if(show == true){
			this.show = true;
		}
		
	},
	//下拉刷新
	onPullDownRefresh() {
		this.loadData();
		this.moneyType();
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
		// 所有币种
		async moneyType(){
			let obj = this;
			moneyType({}).then(({ data }) => {
				obj.moneyTypeList = data;
			});
		},
		// 请求载入数据
		loadData() {
			let obj = this;
			wallet({}).then(({ data }) => {
				obj.like_rmb = data.like_rmb;
				obj.like_usdt = data.like_usdt;
				obj.list = data.back;
			});
		},
		showPick(item){
			this.show = item;
			uni.setStorage({
			    key: 'showPick',
			    data: item,
			    success: function () {
				   
			    }
			});
		},
		recharge(){
			this.$refs.popup.open();
		},
		 selectOne(options) {
			this.money = options.name;
			this.type = options.code;
		},
		useOutClickSide() {
			this.$refs.easySelect.hideOptions && this.$refs.easySelect.hideOptions()
		},
		// pay(){
		// 	let obj = this;
		// 	recharge({
		// 		num:obj.num,
		// 		money_type:obj.type
		// 	},obj.buyId).then(({ data }) => {
		// 		console.log(data)
		// 		obj.$api.msg(data.msg);
		// 		obj.$refs.popup.close();
		// 		obj.num='';
		// 		obj.type = '';
		// 		uni.navigateTo({
		// 			url:'/pages/finance/recharge?LOGO='+data._address_qr+'&order_id='+data.order_id+'&ddress='+data.__money_address+'&id='+data.id
		// 		})
		// 	}).catch(e => {
		// 		obj.$refs.popup.close();
		// 	});
		// },
		close() {
			this.$refs.popup.close();
		},
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		toDateils(ls){
			console.log(ls,88)
			uni.navigateTo({
				url:'/pages/finance/details?code='+ls.code+'&name='+ls.name+'&logo='+ls.LOGO+'&price='+ls.money.money+'&_address_qr='+ls._address_qr+'&__money_address='+ls.__money_address+'&mark='+ls.mark+'&ids='+ls.money.id+'&keysAddr='+ls.money.address
			})
		},
	}
};
</script>

<style lang="scss">
page {
	min-height: 100%;
	background-color: #ffffff;
	.container {
		width: 100%;
		padding: 25rpx 40rpx;
	}
}
.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{
	background: linear-gradient(234.593deg, #0ADFFF  0%,#0171FD 100%);
	position: relative;
	color: #FFFFFF;
	border-radius: 20rpx;
	margin-bottom: 60rpx;
	.info-box{
		padding: 31rpx 43rpx;
		.image{
			width: 44rpx !important;
			height: 30rpx !important;
		}
		.info{
			width: 80%;
			.list-title{
				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{
		padding: 30rpx 100rpx;
		background-color: #064285;
		.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;
			}
		}
	}
}
.list-cell{
	padding-bottom: 58rpx;
	.cell{
		padding-bottom: 31rpx;
		image{
			width: 12rpx;
			height: 24rpx;
		}
		.cell-title{
			font-size: 34rpx;
			font-weight: 500;
			color: #5771DF;
		}
	}
	.cell-list{
		width: 100%;
		.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;
				}
			}
		}
	}
</style>