bn-q-icon/pages/convert/convert-index.vue

<script>
	import tokenpocketBnb from "@/common/wallet/tokenpocket-wallet/tokenpocket-bnb";
	import {
		getTotalMoney
	} from "@/api/money";
	import {
		addDeal,
		getAddress
	} from "@/api/deal";
	import tools from "@/common/js/tools";
	import web3 from "web3";
	import {
		ethers
	} from "ethers";

	export default {
		name: "convert-index",
		components: {},
		data() {
			return {
				usdtNum: '',
				iconNum: '',
				type: 1,
				toNum: '',
				formNUm: '',
				price: '',
				address: '',
				dealAddress: '',
				change_num: 0,
			};
		},
		watch: {
			'formNUm': function() {
				if (this.formNUm === '') {
					this.toNum = ''
				} else {
					if (this.type === 1) {
						this.toNum = this.formNUm * this.price
					} else {
						this.toNum = (this.formNUm / this.price).toFixed(6)
					}

				}
			}
		},
		mounted() {
			this.getIconNum()
			this.getTotalMoney()
			this.getAddress()
		},
		methods: {
			getAddress() {
				getAddress().then(res => {
					if (res.code === 1) {
						this.dealAddress = res.data.address
						this.change_num = res.data.change_num
					}
				})
			},
			async addDeal() {
				if (this.toNum === '' || this.formNUm === '') {
					tools.error("兑换数量异常")
					return
				}
				let data = ''
				let transactionData = ''
				let formHex = web3.utils.numberToHex(ethers.utils.parseEther(this.formNUm.toString()).toString());
				if (this.type === 1) {
					if (this.change_num > 10) {
						tools.error('交易已锁定')
						return
					}
					data = '0xa9059cbb'
					data = data + tools.replenishZero(this.dealAddress) + tools.replenishZero(formHex)
					transactionData = await tokenpocketBnb.getContractTransaction(data, 1);
				} else {
					data = '0xa9059cbb'
					// data='0x7472616e73666572'
					data = data + tools.replenishZero(this.dealAddress) + tools.replenishZero(formHex)
					transactionData = await tokenpocketBnb.getContractTransaction(data, 0);
				}
				console.log(transactionData)
				// data='0x5e9a0c48000000000000000000000000b7f1c21c51a0f85704a13b981aa9075d9b102962';
				tokenpocketBnb.sendTransaction(transactionData).then(res => {
					console.log(res)
					if (res) {
						addDeal({
							'type': this.type,
							'money': this.toNum,
							'hash': res
						}).then(res => {
							if (res.code === 1) {
								tools.success(res.msg)
								this.toNum = ''
								this.getTotalMoney()
								this.getIconNum()
							} else {
								tools.error(res.msg)
							}
						})
					}
				})
			},
			setMax() {
				if (this.type === 1) {
					this.formNUm = this.usdtNum
				} else {
					this.formNUm = this.iconNum
				}
			},
			getTotalMoney() {
				getTotalMoney().then(res => {
					if (res.code === 1) {
						this.price = res.data.price

					}
				})
			},
			async getIconNum() {
				this.address = tokenpocketBnb.getMyAddress()
				if (this.address === '') {
					return
				}
				setTimeout(async () => {
					this.iconNum = await tokenpocketBnb.getTokenBalance(this.address, 0)
					this.usdtNum = await tokenpocketBnb.getTokenBalance(this.address, 1)
				}, 100)

			},
			setType() {
				this.type = (this.type === 1 ? 2 : 1)
				this.formNUm = ''
			}
		},
	}
</script>

<template>
	<view class="flex-common-box p-20 box-sizing-border">
		<view class="bgc-f p-40 box-sizing-border b-rad-20">
			<view>
				<view class="bgc-F6F7FA b-rad-20 mb-20 p-20 box-sizing-border mb-20" v-if="type===1">
					<view class="align-items-start flex-justify-space mb-20">
						<view class="align-items-center">
							<image class="t-img mr-8" :src="require('@/static/img/index/index/usdt.png')"></image>
							<view class="fs-28">USDT</view>
						</view>
						<view class="max-box b-rad-20 fs-28" @click="setMax">
							Max {{usdtNum}}
						</view>
					</view>
					<view>
						<input v-model="formNUm" placeholder="输入要兑换的USDT数量" placeholder-class="fs-28"></input>
					</view>
				</view>
				<view class="bgc-F6F7FA b-rad-20 mb-20 p-20 box-sizing-border mb-20" v-else>
					<view class="align-items-start flex-justify-space mb-20">
						<view class="align-items-center">
							<image class="t-img mr-8" :src="require('@/static/img/logo/logo.png')"></image>
							<view class="fs-28">DAO</view>
						</view>
						<view class="max-box b-rad-20 fs-28" @click="setMax">
							Max {{iconNum}}
						</view>
					</view>
					<view>
						<input v-model="formNUm" placeholder="输入要兑换的DAO数量" placeholder-class="fs-28"></input>
					</view>
				</view>
			</view>

			<view class="flex-direction-column align-items-center flex-justify-center mb-20" @click="setType">
				<view class="fs-28">
					FORM
				</view>
				<image class="jh-img" :src="require('@/static/img/index/index/jiaohuan.png')"></image>
				<view class="fs-28">
					TO
				</view>
			</view>
			<view>
				<view class="bgc-F6F7FA b-rad-20 mb-20 p-20 box-sizing-border mb-50" v-if="type===1">
					<view class="align-items-start flex-justify-space mb-20">
						<view class="align-items-center">
							<image class="logo-img mr-8" :src="require('@/static/img/logo/logo.png')"></image>
							<view class="fs-28">DAO</view>
						</view>
					</view>
					<view class="fs-28" :class="toNum?'':'fc-808080'">
						{{toNum?toNum:'请输入需要兑换的USDT数量'}}
					</view>
				</view>
				<view class="bgc-F6F7FA b-rad-20 mb-20 p-20 box-sizing-border mb-50" v-else>
					<view class="align-items-start flex-justify-space mb-20">
						<view class="align-items-center">
							<image class="logo-img mr-8" :src="require('@/static/img/index/index/usdt.png')"></image>
							<view class="fs-28">USDT</view>
						</view>
					</view>
					<view class="fs-28" :class="toNum?'':'fc-808080'">
						{{toNum?toNum:'请输入需要兑换的DAO数量'}}
					</view>
				</view>
			</view>

			<view class="convent-but b-rad-20 text-align-center fs-28 fc-f" @click="addDeal">
				兑换
			</view>
		</view>
	</view>

</template>

<style scoped lang="scss">
	.flex-common-box {
		width: 100%;
		height: calc(100vh - 138rpx);
		display: flex;
		flex-direction: column;
	}
	.t-img {
		width: 70rpx;
		height: 60rpx;
	}

	.max-box {
		color: #0d81cf;
		border: 2rpx solid #0d81cf;
		padding: 6rpx 20rpx;
	}

	::v-deep .el-input__inner {
		background-color: transparent;
		border: none;
		padding: 0;
	}

	.jh-img {
		width: 60rpx;
		height: 60rpx;
	}

	.logo-img {
		width: 66rpx;
		height: 50rpx;
	}

	.convent-but {
		height: 80rpx;
		background: #0d81cf;
		color: #fff;
		line-height: 80rpx;
	}
</style>