kunpeng/pages/finance/index.vue

<template>
	<view class="container">
		<view>
			<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, index)">
				<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>
	</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: '',
			wallet: '',
		};
	},
	onLoad(option) {
		this.moneyType();
		this.loadData();
	},
	onShow() {
		this.moneyType();
		this.loadData();
		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;
			uni.showLoading({
				title:'加载中'
			})
			obj.loading = true;
			wallet({}).then(({ data }) => {
				console.log(data);
				obj.like_rmb = data.like_rmb;
				obj.like_usdt = data.like_usdt;
				obj.list = data.back;
				uni.hideLoading();
			});
		},
		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, index) {
			console.log(ls, 88);
			let way = ls.way.split(',');
			console.log(way[0], 'money-----------', ls.money);
			let path = 'address_' + way[0];
			console.log(path);
			console.log(path === 'address_TRC20');
			let address = ls.money[path];
			let wayaddress = {};
			way.forEach(item => {
				let path = 'address_' + item;
				wayaddress[item] = ls.money[path];
			});
			let waypath = JSON.stringify(wayaddress);
			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 +
					'&charge=' +
					ls.charge +
					'&address=' +
					address +
					'&way=' +
					ls.way +
					'&waypath=' +
					waypath+
					'&less=' +
					ls.less
			});
		}
	}
};
</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;
			}
		}
	}
}
.loading {
	width: 100%;
	height: 100%;
}
</style>