BCMM/pages/index/buling.vue

<template>
	<view class="container">
		<navBar :show-title="true" :title="$t('user.闪兑')" url="/pages/index/index"></navBar>
		<view class="content">
			<view class="title">
				{{$t('user.兑换')}}
			</view>
			<view class="item">
				<view class="flex">
					<view class="flex">
						<image class="topIcon" src="../../static/img/nav01.png" mode="scaleToFill"></image>
						<view class="text">
							BCMM
						</view>
					</view>
					<view class="money">
						{{$t('user.余额')}}：{{userInfo.BCMM*1}}
					</view>
				</view>
				<view class="flex input">
					<input placeholder-class="placeholder" placeholder="请填写花费数量" class="num" v-model="bcmm"
						type="number" />
					<view class="tipText" @click="bcmm = userInfo.BCMM*1">
						MAX
					</view>
				</view>
			</view>
			<view class="imageTab">
				<image class="tabIcon" src="../../static/img/tarIcon.png" mode="scaleToFill"></image>
			</view>
			<view class="item">
				<view class="flex">
					<view class="flex">
						<image class="topIcon" src="../../static/img/homeUSDT.png" mode="scaleToFill"></image>
						<view class="text">
							USDT
						</view>
					</view>
					<view class="money">
						{{$t('user.余额')}}：{{userInfo.USDT*1}}
					</view>
				</view>
				<view class="flex input">
					<input disabled placeholder-class="placeholder" placeholder="填写BCMM自动计算" v-model="usdt" class="num"
						type="number" />
					<view class="tipText">
						MAX
					</view>
				</view>
			</view>
			<view class="bottomText">
				{{$t('user.兑换比率')}}：1BCMM≈{{bl}}USDT
			</view>
			<view class="buttomBtn" @click="buttomBtn">
				{{$t('user.立即兑换')}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex";
	import {
		loadIndexs,
		exchange
	} from '@/api/index.js';
	import {
		getUserInfo
	} from '@/api/user.js';
	import navBar from "@/components/nav/nav.vue"
	export default {
		data() {
			return {
				usdt: '',
				bcmm: '',
				bl: 0,
			}
		},
		watch: {
			bcmm(newValue, oldValue) {
				this.usdt = newValue * this.bl;
			}
		},
		components: {
			navBar
		},
		computed: {
			...mapState("user", ['userInfo']),
		},
		onLoad(option) {
			this.getUserInfo();
			this.loadData();
		},
		methods: {
			...mapMutations('user', ['setUserInfo']),
			buttomBtn() {
				if(this.bcmm>this.userInfo.BCMM*1){
					uni.showToast({
						title: this.$t('home.BCMM余额不足'),
						icon: 'error'
					})
					return
				}
				uni.showLoading({
					mask: true
				});
				exchange({
					num: this.bcmm
				}).then((res) => {
					uni.showToast({
						title: this.$t('user.兑换成功'),
					})
					this.bcmm='';
					this.getUserInfo();
				}).catch((res) => {
					console.log(res)
					uni.showToast({
						title: this.$t('user.兑换失败'),
						icon: 'error'
					})
					console.log(res);
				})
			},
			loadData() {
				loadIndexs().then((res) => {
					this.bl = res.data.price;
				}).catch((res) => {
					console.log(res);
				})
			},
			// 获取更新用户信息
			getUserInfo() {
				getUserInfo().then((res) => {
					this.setUserInfo(res.data);
				}).catch((res) => {
					console.log(res);
				})
			},
		},
	}
</script>

<style lang="scss">

	.container {
		width: 100%;
		line-height: 1;
		background-color: rgb(12, 8, 21);
		min-height: 100vh;
	}

	.content {
		margin: 25rpx;
		border-radius: 20px;
		border: 2px solid transparent;
		background-clip: padding-box, border-box;
		background-origin: padding-box, border-box;
		background-image: linear-gradient(270deg, #0c0815, #0c0815), linear-gradient(to right, #7D32FF, #3EE0FF);
		padding: 56rpx;

		.bottomText {
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
			padding: 50rpx 0;
		}

		.title {
			color: #FFF;
			font-weight: bold;
			font-size: 34rpx;
			padding-bottom: 30rpx;
		}

		.buttomBtn {
			background: linear-gradient(90deg, #7D32FF, #3EE0FF);
			border-radius: 10rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			width: 100%;
			padding: 26rpx;
		}

		.item {
			color: #FFF;
			font-size: 30rpx;
			font-weight: 500;
			background-color: #2A2C39;
			padding: 50rpx 30rpx;
			border-radius: 30rpx;

			.topIcon {
				width: 50rpx;
				height: 50rpx;
				margin-right: 10rpx;
			}

			.input {
				margin-top: 100rpx;

				.num {
					text-align: center;
				}
			}
		}
	}

	.tipText {
		font-weight: bold;
		font-size: 28rpx;
		background: linear-gradient(to right, #7D32FF 0%, #3EE0FF 100%);
		background-clip: text;
		color: rgba(0, 0, 0, 0);
	}

	.imageTab {
		text-align: center;
		margin-top: -30rpx;
		margin-bottom: -30rpx;

		.tabIcon {
			width: 85rpx;
			height: 85rpx;
		}
	}
</style>