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,
		getDealList
	} from "@/api/deal";
	import tools from "@/common/js/tools";
	import web3 from "web3";
	import {
		ethers
	} from "ethers";
	import blank from "@/components/en-utils/en-blank/en-blank.vue";

	export default {
		name: "convert-index",
		components: {
			blank
		},
		data() {
			return {
				usdtNum: '',
				iconNum: '',
				type: 1,
				toNum: '',
				formNUm: '',
				price: '',
				address: '',
				dealAddress: '',
				change_num: 0,
				list: [],
				page: 1,
			};
		},
		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()
			this.getDealList()
		},
		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() {
				return
				this.type = (this.type === 1 ? 2 : 1)
				this.formNUm = ''
			},
			abbreviateString(str) {
				let startLength = 4;
				let endLength = 4;
				if (str.length <= startLength + endLength + 1) {
					return str; // 如果字符串长度不足以被截断，则返回原字符串
				}
				return str.slice(0, startLength) + '...' + str.slice(-endLength);
			},
			getDealList() {
				if (this.total >= this.list.length) {
					return
				}
				getDealList({
					'page': this.page
				}).then(res => {
					if (res.code === 1) {
						this.list.push(...res.data.items)
						this.total = res.data.total
							++this.page
					}

				})
			}
		},
	}
</script>

<template>
	<view class="flex-common-box  box-sizing-border">
		<view class="top-b bgc-f plr-20 box-sizing-border align-items-center flex-justify-space">
			<image class="img-box" src="@/static/img/logo/logo.png"></image>
			<view class="fs-30">
				{{abbreviateString(address)}}
			</view>
		</view>
		<scroll-view :scroll-y="true" class="scroll-view-css" @scrolltolower="getDealList">
			<view class="p-20 box-sizing-border">
				<view class="bgc-f p-40 box-sizing-border b-rad-20 ">
					<view class="">
						<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 class="bgc-f p-20 box-sizing-border b-rad-20 m-t-40">
					<view class="fs-28 pt-5 mb-8">
						兑换记录
					</view>
					<view v-if="list.length<=0" class="blank-box align-items-center flex-justify-center">
						<blank :showBlank="list.length<=0?true:false" message="暂无数据"></blank>
					</view>
					<view class="bgc-F6F7FA" v-else>
						<view class="item-box align-items-center flex-justify-space" v-for="item in 10" :key="item.id">
							<view>
								<view class="mb-8 fs-28 fw-b">兑换 {{item.money}} USDT</view>
								<view class="fs-24">{{item.created_date}}</view>
							</view>
							<view class="flex-direction-column flex-justify-end">
								<view class="fs-24"
									:class="item.id<=3?'fc-ED930F':item.id === 4?'fc-FF3B30':'fc-27AE60'">
									{{item.status_str}}</view>
								<view class="fs-28 ">到账: <text class="fc-ED301D">{{item.to_money}} DAO</text></view>
								<button type="primary">页面主操作 Normal</button>
							</view>
						</view>

					</view>
				</view>
			</view>
		</scroll-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;
		transform: rotate(90deg);
	}

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

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

	.img-box {
		width: 78rpx;
		height: 60rpx;
	}

	.top-b {
		width: 100%;
		height: 98rpx;
		line-height: 98rpx;
	}

	.item-box {
		width: 100%;
		height: 120rpx;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		border-top: 2rpx solid #e5e5e5;
	}
</style>