xpl/pages/conversion/candy.vue

<template>
	<view class="center">
		<view class="content-money">
			<view class="buttom">
				<text class="text">可兑换积分</text>
				<view class="icon">{{ money }}</view>
			</view>
			<view class="interval"></view>
			<view class="buttom">
				<text class="text">申请兑换积分数量</text>
				<view class=" icon"><input class="input" type="number" v-model="withdrawal" placeholder="申请兑换积分数量" placeholder-class="placeholder" /></view>
			</view>
			<view class="interval"></view>
			<view class="buttom">
				<text class="text">可兑换成</text>
				<view class="input">{{ moneyReta }}糖果</view>
			</view>
			<view class="interval"></view>
			<view class="tip">
				<view class=" tip-icon" @click="allbuy()">全部转换</view>
			</view>
		</view>
		<view class="code">
			
		</view>
		<view class="btn" @click="buy()">
			提交申请
		</view>
	</view>
</template>

<script>
import { wallet } from '@/api/finance.js';
export default {
	data(){
		return{
			money: 0,
			withdrawal: "",
			buying: false,
			all:'',
			add:'',
		}
	},
	computed: {
		// 转换金额
		moneyReta() {
			// 保存当前选中的对象
			const obj = this.all;
			return (this.withdrawal * +obj.usdt_price) / +this.add.usdt_price;
		},
	},
	onLoad() {
		wallet({}).then(({ data }) => {
			const obj = this
			const arr = Object.keys(data.back);
			arr.forEach(e => {
				if(e == 'USDC'){
					obj.money = (data.back[e].money.money*1)
					obj.all = data.back[e]
				}
				if(e == 'LALA'){
					obj.money = (data.back[e].money.money*1)
					obj.add = data.back[e]
				}
			});
		});
	},
	methods:{
		allbuy(){
			this.withdrawal = this.money
		},
		buy(){
			if (this.buying) {
			
			} else {
				this.buying = true
				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">
page,.center {
	height: 100%;
	background: #FFFFFF;
}
.content-money {
	padding: 0 20rpx;
	background-color: #ffffff;
	.buttom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 110rpx;
	}
	.interval {
		width: 100%;
		height: 1px;
		background: #E6E6E6;
	}
	.icon {
		font-size: 48rpx;
		font-family: SourceHanSansCN;
		font-weight: 500;
		color: #333333;
		text{
			font-size: 32rpx;
		}
		.input {
			text-align: right;
			flex: 1;
			font-size: 30rpx;
			color: $font-color-dark;
		}
		.iconlocation {
			text-align: right;
			font-size: 36rpx;
			color: $font-color-light;
		}
	}
	.text {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.tip {
		height: 74rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		.tip-text {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
		.tip-icon {
			font-size: 26rpx;
			font-family: SourceHanSansCN;
			font-weight: 400;
			color: #EF041F;
		}
	}
}
.btn {
	text-align: center;
	margin: 134rpx auto;
	width: 670rpx;
	height: 88rpx;
	background: linear-gradient(0deg, #2E58FF, #32C6FF);
	border-radius: 10px;
	text-align: center;
	line-height: 88rpx;
	font-size: 32rpx;
	font-family: SourceHanSansCN;
	font-weight: 500;
	color: #FEFEFE;
}
.code {
	width: 750rpx;
	height: 20rpx;
	background: #F7F7F7;
}
</style>