NFT/pages/index/convert.vue

<template>
	<view class="center">
		<view class="rateBox">
			<view class="rateTitle">实时汇率</view>
			<view class="rate">{{ exchange }}</view>
		</view>
		<view class="rateConetnt" v-if="lodingType">
			<view class="titleBox flex">
				<view class="leftTip"></view>
				<view class="title">兑换币种</view>
			</view>
			<view class="content">
				<view class="moneyText">兑出币种</view>
				<view class="Type flex">
					<image class="moneylogo" :src="moneyType[index].LOGO" mode="scaleToFill"></image>
					<view class="moneyName clamp" @click="show = true">{{moneyType[index].name}}</view>
					<u-icon name="arrow-down-fill" color="#0F253A" size="10"></u-icon>
					<u-input :height="45" class="input" v-model="pushMoney" type="number" :border="false" placeholder="请输入需要兑换的数量" />
				</view>
				<view class="contentImg"><image class="img" src="../../static/img/tab.png" mode="scaleToFill"></image></view>
				<view class="moneyText">兑入币种</view>
				<view class="Type flex">
					<image class="moneylogo" :src="add.LOGO" mode="scaleToFill"></image>
					<view class="moneyName clamp">{{ add.name }}</view>
					<view class="line"></view>
					<view class="input">{{ moneyReta }}</view>
				</view>
			</view>
		</view>
		<view class="lsButtom" @click="buy()">确认兑换</view>
		<u-action-sheet :list="moneyType" v-model="show" @click="changeIndex"></u-action-sheet>
	</view>
</template>
<script>
import { recharge, wallet, moneyType } from '@/api/finance.js';
export default {
	data() {
		return {
			index: 0, //当前选中的兑出币种
			moneyType: [],//兑出币种类型
			add: { LOGO: '', name: '' }, //兑入币种
			pushMoney: '',//要兑换的金额
			lodingType: false, //判断是否已经载入币种分类分类数据
			show: false
		};
	},
	computed: {
		// 转换金额
		moneyReta() {
			// 保存当前选中的对象
			const obj = this.moneyType[this.index];
			return (this.pushMoney * +obj.usdt_price) / +this.add.usdt_price;
		},
		// 实时汇率
		exchange() {
			try {
				const data = this.moneyType[this.index];
				return 1 + data.name + '≈' + data.usdt_price / this.add.usdt_price + this.add.name;
			} catch (e) {
				console.log(e);
				return '加载中...';
			}
		}
	},
	//页面加载即刻发生
	onLoad() {
		this.init();
	},
	methods: {
		// 初始化页面
		init() {
			this.wallet();
		},
		// 弹出层选择事件
		changeIndex(e){
			console.log(e);
			this.index = e;
		},
		// 加载币种分类
		wallet() {
			let that = this;
			console.log('请求兑换');
			uni.showLoading({
				title: '载入数据中...',
				mask: true
			});
			wallet()
				.then(e => {
					uni.hideLoading();
					that.lodingType = true;
					const moneyType = Object.keys(e.data.back);
					moneyType.forEach(es => {
						const data = e.data.back[es];
						data.text = data.name;
						if (+data.do_exchange == 1) {
							that.moneyType.push(data);
						}
						if (+data.exchange == 1) {
							that.add = data;
							console.log(e.data.back[es], '555');
						}
					});
					console.log(that.moneyType);
					console.log(that.add, '兑入');
				})
				.catch(e => {
					uni.hideLoading();
					if (e.status != 410000) {
						that.lodingType = true;
						uni.showModal({
							title: '错误',
							content: '加载失败请刷新页面',
							cancelText: '关闭',
							confirmText: '刷新',
							success: res => {
								if (res.confirm) {
									that.init();
								}
							}
						});
						console.log(e);
					}
				});
		}
	}
};
</script>
<style lang="scss">
.center {
	min-height: 100%;
}
.lsButtom {
	font-size: 30rpx;
	background-image: $bg-green-gradual;
	text-align: center;
	color: $font-color-white;
	padding: 30rpx 0;
	border-radius: 99rpx;
	margin: 50rpx 30rpx 0rpx 30rpx;
	line-height: 1;
}
.rateBox {
	padding: $page-row-spacing;
	background-color: #ffffff;
	.rateTitle {
		font-size: 26rpx;
		font-weight: 500;
		color: $font-color-dark;
	}
	.rate {
		margin-top: 10rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: $font-color-light;
	}
}
.rateConetnt {
	margin-top: 10rpx;
	background-color: #ffffff;
	line-height: 1;
	padding-bottom: 60rpx;
	.titleBox {
		align-items: stretch;
		justify-content: flex-start;
		padding: $page-row-spacing;
		border-bottom: 1px solid $border-color-light;
		.leftTip {
			width: 7rpx;
			border-radius: 99rpx;
			background-color: $base-color;
		}
		.title {
			margin-left: 20rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: $font-color-dark;
		}
	}
	.content {
		.moneyText {
			font-size: 24rpx;
			font-weight: 500;
			color: $font-color-dark;
			padding: $page-row-spacing;
		}
		.Type {
			padding: 0 $page-row-spacing;
			.moneylogo {
				width: 50rpx;
				height: 50rpx;
				border-radius: 99rpx;
			}
			.moneyName {
				width: 180rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: $font-color-dark;
				margin: 0 20rpx;
			}
			.input {
				flex-grow: 1;
				height: 45rpx;
				line-height: 45rpx;
				margin-left: 40rpx;
				color: $font-color-light;
				border-bottom: 1px solid $border-color-light;
			}
			.line {
				width: 2rpx;
				background-color: $font-color-dark;
				margin: 0 10rpx;
				height: 30rpx;
			}
		}
		.contentImg {
			width: 70rpx;
			height: 70rpx;
			margin: 40rpx auto 0;

			.img {
				width: 100%;
				height: 100%;
			}
		}
	}
}
</style>