FXB/pages/index/exchange.vue

<template>
	<view class="container" style="padding-top: 100rpx;">
		<topView :backg="'#1A1A17'"></topView>
		<view class="infoBox">
			<view class="navBack" @click="navTo('/pages/index/index')">
				<u-icon name="arrow-left" size="25" color="#fff" style="position: absolute;left: 0;top: 0;font-weight: bold;"></u-icon>
				<view class="title">{{$t("exchange.闪兑")}}</view>
			</view>
			<view class="listBox">
				<view class="name">{{$t("exchange.兑换")}}</view>
				<view class="redion">
					 <u-radio-group class="flex" v-model="value">
					    <u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in currList"
					      :key="index" :label="item" :name="item" activeColor="#C29963">
					    </u-radio>
					  </u-radio-group>
				</view>
				<view class="listTpl">
					<view class="flex tplBox">
						<view class="flex_item tpl">
							<image src="/static/img/img23.png" style="width: 60rpx;height: 59rpx;"></image>
							<view class="title">NICE</view>
						</view>
						<view class="money">{{$t("exchange.余额")}}：{{userInfo.NICE * 1}}</view>
					</view>
					<view class="flex inputBox">
						<input type="number" v-model="money" @input="moneyInput" :placeholder='$t("exchange.请填写兑换的NICE数量")'/>
						<view class="all">MAX</view>
					</view>
				</view>
				<image class="reImg" src="../../static/img/img24.png" style="width: 85rpx;height: 86rpx;"></image>
				<view class="listTpl">
					<view class="flex tplBox">
						<view class="flex_item tpl">
							<image v-if="value == 'USDT'" src="/static/img/img25.png" style="width: 57rpx;height: 57rpx;"></image>
							<image v-if="value == 'NUSD'" src="/static/img/img23.png" style="width: 57rpx;height: 57rpx;"></image>
							<view class="title">{{value}}</view>
						</view>
						<view class="money" v-if="value == 'USDT'">{{$t("exchange.余额")}}：{{userInfo.USDT * 1}}</view>
						<view class="money" v-if="value == 'NUSD'">{{$t("exchange.余额")}}：{{userInfo.NUSD * 1}}</view>
					</view>
					<view class="flex inputBox">
						<input type="number" v-model="numUsdt" :placeholder='$t("exchange.实际到账的")+value' disabled/>
						<view class="all">MAX</view>
					</view>
				</view>
				<view class="tip">{{$t("exchange.兑换比率")}}：1NICE≈{{userInfo.nice_price}}{{value}}</view>
				<view class="submitBtn" :class="{ submitNo: !payOn }" @click="payOn ? clickSubmit() : ''" >{{$t("exchange.立即兑换")}}</view>
			</view>
		</view>
	</view>
</template>
<script>
	import topView from '../components/topView.vue';
	import {mapState,mapActions,mapMutations} from "vuex";
	import {exchange} from "@/api/index.js";
	export default {
		components: {
			topView
		},
		data() {
			return {
				money:'',
				numUsdt:'',
				payOn:true,
				currList:['USDT','NUSD'],
				value:'USDT',
			}
		},
		onLoad () {},
		onShow () {},
		computed: {
			...mapState('user', ['userInfo']),
		},
		methods: {
			moneyInput(e){
				this.numUsdt = (e.detail.value)*this.userInfo.nice_price
			},
			clickSubmit(){
				let obj = this
				if(obj.money == ''){
					uni.showToast({
						title: obj.$t('exchange.请填写兑换的NICE数量'),
						icon: "none",
					});
					return;
				}
				if (obj.money > obj.userInfo.NICE) {
					uni.showToast({
						title: "NICE" + obj.$t('exchange.余额不足'),
						icon: "none",
					});
					return;
				}
				obj.payOn = false
				ethereum.request({
					method: 'eth_requestAccounts'
				}).then((account) => {
					const PKR_EXCHANGE = 'PKR_EXCHANGE' + (new Date()).getTime();
					ethereum.request({
						"method": "personal_sign",
						"params": [
							PKR_EXCHANGE,
							account[0]
						]
					}).then((res) => {
						obj.exchange(res,PKR_EXCHANGE);
					});
				});
			},
			exchange(sign,msg){
				let obj = this
				exchange({
					sign,
					msg,
					num:obj.money,
					to_token:obj.value
				}).then(function(res){
					if(res.code == 0){
						obj.payOn = true
						uni.showToast({
							title:res.msg,
							icon: "error",
						});
					}else{
						obj.payOn = true
						uni.showToast({
							title: obj.$t('exchange.兑换成功'),
							icon: "success",
						});
						setTimeout(function () {
							obj.$router.go(0)
						}, 1000);
					}
				}).catch(e => {
					obj.payOn = true
				});
			},
			navTo(url){
				uni.navigateTo({
					url:url
				})
			},
		},
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		min-height: 100vh;
		.container {
			width: 100%;
			min-height: 100vh;
		}
	}
	.redion{
		padding:25rpx 100rpx 25rpx 100rpx;
	}
	.infoBox{
		padding: 0rpx 25rpx;
	}
	.listBox{
		color: #fff;
		border-radius: 30rpx;
		border: 4rpx solid #DAB787;
		padding: 42rpx 57rpx;
		position: relative;
		.name{
			font-weight: bold;
			font-size: 34rpx;
			color: #FFFFFF;
			padding-bottom: 30rpx;
		}
		.listTpl{
			background: #2F2F2D;
			padding: 55rpx 30rpx;
			border-radius: 30rpx;
			margin-bottom: 31rpx;
			.tplBox{
				.title{
					font-size: 30rpx;
					padding-left: 15rpx;
				}
				.money{
					font-size: 30rpx;
				}
			}
			.inputBox{
				padding-top: 115rpx;
				padding-left: 25rpx;
				padding-bottom: 25rpx;
				.all{
					font-weight: 500;
					font-size: 32rpx;
					color: #1D69E2;
					background: linear-gradient(258deg, #FFF0CF 0%, #CBA16B 30.0048828125%, #FCE9CF 67.67578125%, #C29963 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}
		}
		.reImg{
			position: absolute;
			left: 45%;
			top:42%;
		}
	}
	.tip{
		font-size: 30rpx;
		color: #FFFFFF;
		padding: 40rpx 0;
	}
	.submitBtn{
		background: linear-gradient(258deg, #FFF0CF, #CBA16B, #FCE9CF, #C29963);
		border-radius: 10rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #31190B;
		line-height:90rpx;
		text-align: center;
		margin:25rpx 0;
	}
	.submitNo {
		background: #999999 !important;
		color: #fff !important;
	}
	.navBack{
		position: relative;
		color: #fff;
		text-align: center;
		margin: 30rpx 0rpx 40rpx 0rpx;
		.title{
			font-weight: bold;
			font-size: 34rpx;
		}
	}
</style>