lishang/pages/money/conversionIntegral.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/change.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 class="jg" style="height: 30rpx;"></view>
	</view>
</template>
<script>
	import {
		recharge,
		wallet,
		moneyType,
		shan
	} from '@/api/finance.js';
	import {
		lalaprice
	} from '@/api/wallet.js'
	export default {
		data() {
			return {
				index: 0, //当前选中的兑出币种
				moneyType: [], //兑出币种类型
				add: {
					LOGO: '',
					name: ''
				}, //兑入币种
				pushMoney: '', //要兑换的金额
				lodingType: false, //判断是否已经载入币种分类分类数据
				show: false,
				buying: false,
				chart_data: [], //折线图数据
			};
		},
		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];
					console.log(this.add)
					return 1 + data.name + '≈' + (data.usdt_price / this.add.usdt_price).toFixed(4) + this.add.name;
				} catch (e) {
					console.log(e);
					return '加载中...';
				}
			},
		},
		//页面加载即刻发生
		onLoad() {
			this.init();
		},
		mounted() {
			// this.createChart()
		},
		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,'111');
						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);
						}
					});
			},
			//确认兑换
			buy() {
				if (this.buying) {

				} else {
					this.buying = true
					console.log(this.moneyType[this.index].name)
					shan({
						origin_money_type: this.moneyType[this.index].name,
						money_type: this.add.name,
						num: this.pushMoney,
					}).then(({
						data
					}) => {
						console.log(data)
						this.buying = false
						this.$api.msg("闪兑成功")
					}).catch(e => {
						this.buying = false
						console.log(e)
					})
				}
			},
		}
	};
</script>
<style lang="scss">
	.center {
		min-height: 100%;
	}

	.lsButtom {
		font-size: 30rpx;
		background: linear-gradient(90deg, #438BED 0%,  #44BFEC 100%);
		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%;
				}
			}
		}
	}

	.line-chart {
		height: 500rpx;
		width: 730rpx;
		margin: auto;
		background-color: #eee;
	}
</style>