de-net-official/pages/payment/index.vue

<!-- eslint-disable vue/no-deprecated-filter -->
<template>
	<div class="payment">
		<!-- 选择支付方式 -->
		<template v-if="step === 1">
			<div class="moneyInfo">
				<div class="tips">You Neet to Pay</div>
				<div class="money" v-if="salePlans">
					<FontZoom width="300" :unColor="true" v-if="salePlans && salePlans.price">
						<template v-if="salePlans && salePlans.currencyCode && salePlans.currencyCode !== 'USD'">
							<template v-if="salePlans.price.length + salePlans.currencyInfo.tokenSymbol.length >= 30">
								<div style="text-align: center">
									<div><img class="icon" :src="salePlans.currencyInfo.iconPath" /> {{ salePlans.price | floatPrice(4) }}</div>
									<div>{{ salePlans.currencyInfo.tokenSymbol }} (${{ salePlans.usdPrice | floatPrice(2) }})</div>
								</div>
							</template>
							<template v-else> <img class="icon" :src="salePlans.currencyInfo.iconPath" /> {{ salePlans.price | floatPrice(4) }} {{ salePlans.currencyInfo.tokenSymbol }} (${{ salePlans.usdPrice | floatPrice(2) }}) </template>
						</template>
						<template v-else>
							<span class="info usd">${{ salePlans.usdPrice | floatPrice(2) }}</span>
						</template>
					</FontZoom>
				</div>
			</div>
			<div class="payList">
				<div class="detail" v-if="salePlans && salePlans.currencyCode && salePlans.currencyCode !== 'USD'">
					<div class="title">Crypto Wallet</div>
					<div class="item denet" @click="deNetPay">
						<div>
							<img src="../../static/payment/icon_wallet.png" />
							<span>DeNet Pay</span>
						</div>
						<div class="wallet">
							<FontZoom width="300" :unColor="true"> Balance:{{ currencyInfoData.balance | floatPrice(4) }} {{ currencyInfoData.tokenSymbol }} </FontZoom>
						</div>
					</div>
					<div v-if="ifShowMetaMask" class="item" @click="maskPay">
						<a class="maskLink" :href="maskUrlLink" v-if="Number(usdAmountData.rechargeAmountValue) > 0"></a>
						<img src="../../static/payment/icon_meta_mask.png" />
						<span>MetaMask</span>
					</div>
				</div>
				<div class="detail" v-if="salePlans && salePlans.currencyCode && salePlans.currencyCode === 'USD'">
					<div class="title">Credit/Debit Card</div>
					<div class="item denet" @click="deNetPay">
						<div>
							<img src="../../static/payment/icon_wallet.png" />
							<span>DeNet Pay</span>
						</div>
						<div class="wallet">Balance:{{ currencyInfoData.balance | floatPrice(2) }} {{ currencyInfoData.tokenSymbol }}</div>
					</div>
					<div v-if="ifShowAch" class="item" @click="achPay(true, Report.objectType.mastercardPayButton)">
						<img src="../../static/payment/icon_master_card.png" />
						<span>MasterCard</span>
					</div>
					<div v-if="ifShowAch" class="item" @click="achPay(true, Report.objectType.visaPayButton)">
						<img src="../../static/payment/icon_visa.png" />
						<span>VISA</span>
					</div>
				</div>
				<div class="detail">
					<div class="title">Redemption Code</div>
					<div class="item" @click="showRedeem">
						<img src="../../static/payment/icon_enter_code.png" />
						<span>Enter Code</span>
					</div>
				</div>
			</div>
		</template>

		<!-- 余额足够 -->
		<template v-else-if="step === 2">
			<div class="balanceTop">
				<img class="balance" src="../../static/img/icon_balance.svg" />
				<div class="text">Balance</div>
				<div class="money">
					<FontZoom width="300" :unColor="true">
						<template v-if="salePlans.currencyCode === 'USD'"> <img class="icon" :src="currencyInfoData.iconPath" /> {{ currencyInfoData.balance | floatPrice(2) }} {{ currencyInfoData.tokenSymbol }} </template>
						<template v-else> <img class="icon" :src="currencyInfoData.iconPath" /> {{ currencyInfoData.balance | floatPrice(4) }} {{ currencyInfoData.tokenSymbol }} </template>
					</FontZoom>
				</div>
				<template v-if="waitRefresh">
					<div class="waitFont">It may take some time to credit the funds into your account.</div>
					<div @click="checkWaitInfo" class="waitBtn">
						<img :class="{ 'icon-refresh-rotate': refreshRotate }" src="../../static/img/icon_refresh.svg" />
					</div>
				</template>
			</div>
			<div class="balanceBot">
				<div class="l">
					<div class="neet">You Neet to Pay</div>
					<div class="money">
						<FontZoom width="190" :unColor="true">
							<span class="text">
								<template v-if="salePlans.currencyCode === 'USD'"> {{ salePlans.price | floatPrice(2) }} {{ salePlans.currencyInfo.tokenSymbol }} </template>
								<template v-else> {{ salePlans.price | floatPrice(4) }} {{ salePlans.currencyInfo.tokenSymbol }} </template>
							</span>
						</FontZoom>
					</div>
				</div>
				<div>
					<div class="btn" :class="{ disable: Number(usdAmountData.rechargeAmountValue) > 0 || payDisabled }" @click="pay">Pay Now</div>
				</div>
			</div>
		</template>

		<!-- 余额不足 -->
		<template v-else-if="step === 3">
			<template v-if="salePlans && salePlans.currencyCode && salePlans.currencyCode !== 'USD'">
				<div class="balanceInfo">
					<div class="top">
						<div class="item title">
							<img src="../../static/img/icon_deposit.png" />
							<span>Deposit to Buy</span>
						</div>
						<div class="item column">
							<div class="l">Deposit</div>
							<div class="r">
								<FontZoom width="260" :unColor="true">
									<img :src="currencyInfoData.iconPath" />
									<span
										><span v-if="Number(usdAmountData.rechargeAmountValue) > 0">{{ usdAmountData.rechargeAmountValue | floatPrice(4) }} </span>{{ currencyInfoData.tokenSymbol }}</span
									>
								</FontZoom>
							</div>
						</div>
						<div class="item column">
							<div class="l">Network</div>
							<div class="r">
								<FontZoom width="260" :unColor="true">
									<img :src="currencyInfoData.chainInfo.iconPath" />
									<span>{{ currencyInfoData.chainInfo.chainName }}</span>
								</FontZoom>
							</div>
						</div>
						<div class="address">
							<div class="title">Address</div>
							<QrCode :tokenChain="currencyInfoData.tokenChain" :rechargeAddress="rechargeAddress" @copy="copyErCode"></QrCode>
						</div>
						<div class="notice">
							<div class="icon"><img src="../../static/img/icon_warning.svg" /></div>
							<div class="text">
								Make sure you also selected <Br /><strong>{{ currencyInfoData.chainInfo.chainName }}</strong> <br />as the Network on the platform where you are withdrawing funds for this deposit. Otherwise, you'll lose your assets.
							</div>
						</div>
					</div>
					<div class="line"></div>
					<div class="balance">
						<div class="icon">
							<img src="../../static/img/icon_balance_blue.svg" />
						</div>
						<div class="text">
							<FontZoom width="260" :unColor="true">
								<span>Balance: {{ currencyInfoData.balance | floatPrice(4) }} {{ currencyInfoData.tokenSymbol }}</span>
							</FontZoom>
						</div>
						<div class="refresh" @click="checkCurrencyInfo">
							<img :class="{ 'icon-refresh-rotate': refreshRotate }" src="../../static/img/icon_refresh.svg" />
						</div>
					</div>
				</div>
				<div class="balanceBot">
					<div class="l">
						<div class="neet">You Neet to Pay</div>
						<div class="money">
							<FontZoomMobile width="220" :unColor="true"> {{ salePlans.price | floatPrice(4) }} {{ salePlans.currencyInfo.tokenSymbol }} </FontZoomMobile>
						</div>
					</div>
					<div>
						<div class="btn" :class="{ disable: Number(usdAmountData.rechargeAmountValue) > 0 || payDisabled }" @click="payToken">Pay Now</div>
					</div>
				</div>
			</template>
			<template v-if="salePlans && salePlans.currencyCode && salePlans.currencyCode === 'USD'">
				<div class="balanceInfo">
					<div class="top">
						<div class="item usd">
							<div class="l">Payment amount</div>
							<div class="r fontPayment">${{ usdAmountData.orderAmountValue | floatPrice(2) }}</div>
						</div>
						<div class="item usd">
							<div class="l">Balance</div>
							<div class="r font">${{ usdAmountData.balance | floatPrice(2) }}</div>
						</div>
						<div class="item usd" v-if="Number(usdAmountData.rechargeAmountValue) > 0">
							<div class="l">{{ usdAmountData.feeDesc }}</div>
							<div class="r font">${{ usdAmountData.feeAmountValue | floatPrice(2) }}</div>
						</div>
						<div class="item usd" v-if="Number(usdAmountData.rechargeAmountValue) > 0">
							<div class="l">Deposit Amount</div>
							<div class="r fontDeposit">${{ usdAmountData.rechargeAmountValue }}</div>
						</div>
						<div class="deposit" @click="achPay(false, '')">Deposit</div>
					</div>
					<div class="line"></div>
					<div class="balance">
						<div class="icon">
							<img src="../../static/img/icon_balance_blue.svg" />
						</div>
						<div class="text">Balance: ${{ currencyInfoData.balance | floatPrice(2) }}</div>
						<div class="refresh" @click="checkUsdCurrencyInfo">
							<img :class="{ 'icon-refresh-rotate': refreshRotate }" src="../../static/img/icon_refresh.svg" />
						</div>
					</div>
				</div>
				<div class="balanceBot">
					<div class="l">
						<div class="neet">You Neet to Pay</div>
						<div class="money">
							<FontZoomMobile width="220" :unColor="true"> {{ Number(usdAmountData.rechargeAmountValue) > 0 ? usdAmountData.rechargeAmountValue : usdAmountData.orderAmountValue }} {{ salePlans.currencyInfo.tokenSymbol }} </FontZoomMobile>
						</div>
					</div>
					<div>
						<div class="btn" :class="{ disable: Number(usdAmountData.rechargeAmountValue) > 0 || payDisabled }" @click="payUSD">Pay Now</div>
					</div>
				</div>
			</template>
		</template>

		<!-- 成功支付 -->
		<template v-else-if="step === 4">
			<div class="payInfo">
				<div class="picShow" v-if="buyData">
					<div class="tip">Wow, NFT in the Mystery box is</div>
					<img class="pic" :src="buyData.imagePath" />
					<div class="name">{{ buyData.nftItemName }}</div>
				</div>
			</div>
			<div class="payBtn">
				<button class="btn" @click="goNext">Done</button>
			</div>
		</template>

		<!-- loading -->
		<div class="loading" v-if="loading">
			<van-loading color="#1D9BF0"></van-loading>
		</div>
		<div class="loadingBg" v-if="loading"></div>

		<!-- redeem -->
		<van-popup round v-model="redeemLayer" position="bottom">
			<div class="redeem">
				<div class="tips">Enter Redemption Code</div>
				<div class="footer">
					<div class="input">
						<input type="text" ref="input" v-model="redeemStr" @input="textInput" @blur="textBlur" @focus="textFocus" @keydown.enter="redeemPayment" />
					</div>
					<button class="enter" :class="{ disable: !redeemNext }" @click="redeemPayment">Redeem</button>
				</div>
			</div>
		</van-popup>
	</div>
</template>

<script>
import FontZoom from '../../components/FontZoom.vue';
import FontZoomMobile from '../../components/FontZoomMobile.vue';
import QrCode from '../../components/qrcode.vue';
import { postRequest } from '../../http/index';
import { maskUrl, setStorage, storageKey, OSDetect } from '../../utils/help';
import { Dialog } from 'vant';
import Api from '../../http/api';
import Report from '../../log-center/log';

export default {
	name: 'payment',
	data() {
		return {
			step: 1, // 1: 支付方式列表 2: 余额支付 3: 充值支付 4: 支付完成
			loading: true,
			salePlans: null,
			rechargeAddress: '',
			redeemStr: '',
			redeemNext: false,
			redeemLayer: false,
			buyData: {},
			payDisabled: false,
			waitRefresh: false,
			refreshRotate: false,
			currencyInfoData: {},
			currencyTimer: 0,
			achTimer: 0,
			maskUrlLink: ``,
			usdAmountData: {},
			Report: Report,
			ifShowMetaMask: false,
			ifShowAch: false,
		};
	},
	head() {
		return {
			title: 'Buy NFT Mystery Box',
		};
	},
	components: {
		QrCode,
		FontZoom,
		FontZoomMobile,
	},
	mounted() {
		this.saleInfo();
		this.showMetaMask();
		this.reportView(Report.pageSource.nftPaymentPage);
	},
	beforeUnmount() {
		clearTimeout(this.currencyTimer);
	},
	filters: {
		floatPrice(price, num) {
			if (!price) return;
			if (price.indexOf('.') >= 0) {
				let reg = new RegExp(`^\\D*(\\d*(?:\\.\\d{0,${num}})?).*$`, 'g');
				price = price.replace(reg, '$1');
			}
			return price;
		},
	},
	methods: {
		saleInfo() {
			postRequest(Api.getNftMysteryBoxSaleInfo, {
				params: {
					nftProjectId: this.$route.query.nftProjectId,
				},
			})
				.then((res) => {
					let { code, data } = res;
					if (code === 0) {
						this.salePlans = data.salePlans[0];
						this.getCurrencyInfoByCode();
						// 获取充值地址
						if (this.rechargeAddress === '') {
							this.getAddress();
						}
					}
				})
				.finally(() => {
					setTimeout(() => {
						this.loading = false;
					}, 600);
				});
		},
		showMetaMask() {
			if (OSDetect() === 'ios') {
				this.ifShowMetaMask = true;
			}
		},
		getCurrencyInfoByCode() {
			let where = this.salePlans && this.salePlans.currencyCode;
			if (!where) return;

			postRequest(Api.getCurrencyInfoByCode, {
				params: {
					currencyCode: this.salePlans.currencyCode,
				},
			}).then((res) => {
				let { code, data } = res;
				if (code === 0) {
					this.currencyInfoData = data;
				}
			});
			// 计算金额
			postRequest(Api.calcRechargePayAmount, {
				params: {
					currencyCode: this.salePlans.currencyCode,
					orderAmountValue: this.salePlans.price,
					payChannel: 'ach',
				},
			}).then((res) => {
				let { code, data } = res;
				if (code === 0) {
					this.usdAmountData = data;
				}
			});
		},
		getTokenRechargeRecord() {
			postRequest(Api.syncChainTokenRechargeRecord, {
				params: {
					currencyCode: this.salePlans.currencyCode,
				},
			}).then((res) => {
				let { code, data } = res;
				if (code === 0) {
					if (data.length > 0) {
						let currencyInfo = data[0];
						if (currencyInfo.currencyCode == this.currencyInfoData.currencyCode) {
							this.currencyInfoData.balance = currencyInfo.balance;
						}
					} else {
						this.currencyInfoData.balance = 0;
					}
				}
			});
		},
		currencyInfoTimer() {
			clearTimeout(this.currencyTimer);
			this.currencyTimer = setTimeout(() => {
				this.currencyInfoTimer();
				this.getCurrencyInfoByCode();
			}, 10000);
		},
		checkUsdCurrencyInfo() {
			if (!this.refreshRotate) {
				this.refreshRotate = true;
				this.getCurrencyInfoByCode();
				setTimeout(() => {
					this.refreshRotate = false;
				}, 1000);

				// report
				this.reportDepositCashPageClick(Report.objectType.refreshBalanceButton);
			}
		},
		checkCurrencyInfo() {
			if (!this.refreshRotate) {
				this.refreshRotate = true;
				this.getTokenRechargeRecord();
				setTimeout(() => {
					this.refreshRotate = false;
				}, 1000);

				// report
				this.reportDepositTokenPageClick(Report.objectType.refreshBalanceButton);
			}
		},
		checkWaitInfo(isReport = true) {
			if (!this.refreshRotate) {
				this.refreshRotate = true;
				this.getCurrencyInfoByCode();
				setTimeout(() => {
					this.refreshRotate = false;
				}, 1000);
			}
			if (isReport) {
				this.reportBalanceRefresh();
			}
		},
		showRedeem() {
			this.redeemStr = '';
			this.redeemNext = false;
			this.redeemLayer = true;
			this.$nextTick(() => {
				this.$refs.input.focus();
			});
			this.reportView(Report.pageSource.nftRedeemPage);
			this.reportPaymentBtnClick(Report.objectType.redeemButton);
		},
		textInput() {
			let len = 16;
			let str = this.redeemStr.replace(/[^a-zA-Z0-9]/g, '');
			str = str.toUpperCase();
			str = str.slice(0, len);

			// set
			this.redeemStr = str;
			this.redeemNext = str !== '' && str.length === len;
		},
		textBlur() {
			let isiOS = !!window.navigator.userAgent.match(/\(i\[^;]+;( U;)? CPU.+Mac OS X/);
			if (isiOS) {
				setTimeout(() => {
					const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
					window.scrollTo(0, Math.max(scrollHeight - 1, 0));
				}, 100);
			}
		},
		textFocus() {
			let isiOS = !!window.navigator.userAgent.match(/\(i\[^;]+;( U;)? CPU.+Mac OS X/);
			if (isiOS) {
				setTimeout(() => {
					const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
					window.scrollTo(0, Math.max(scrollHeight - 1, 0));
				}, 100);
			}
		},
		redeemPayment() {
			if (!this.redeemNext) return;

			let params = {
				redeemCode: this.redeemStr,
				nftProjectId: this.$route.query.nftProjectId,
			};

			this.redeemNext = false;
			postRequest(Api.redeemNft, {
				params,
			})
				.then((res) => {
					let { code, data } = res;
					if (code === 0) {
						this.redeemLayer = false;
						if (data.length > 0) {
							this.buyData = data[0];
						}
						// 购买成功
						this.step = 4;
						this.reportSuccessView();
					} else {
						this.payError(code);
					}
				})
				.finally(() => {
					this.redeemNext = true;
				});

			this.reportRedeemBtnClick();
		},
		getAddress() {
			let where = this.salePlans && this.salePlans.currencyInfo && this.salePlans.currencyInfo.tokenChain;
			if (!where) return;

			postRequest(Api.getTokenRechargeAddress, {
				params: {
					tokenChain: this.salePlans.currencyInfo?.tokenChain,
				},
			}).then((res) => {
				let { code, data } = res;
				if (code === 0) {
					this.rechargeAddress = data.rechargeAddress;
					this.maskUrlToLink();
				}
			});
		},
		maskUrlToLink() {
			// MetaMask Link
			let url;
			let price = this.usdAmountData.rechargeAmountValue;
			if (this.salePlans.currencyInfo?.contractAddress) {
				// 代币
				url = maskUrl(
					{
						target_address: this.salePlans.currencyInfo.contractAddress,
						parameters: {
							address: this.rechargeAddress,
							uint256: `${price}e${this.salePlans.currencyInfo?.decimalLength || 18}`,
						},
					},
					false
				);
			} else {
				// 主币
				url = maskUrl({
					target_address: this.rechargeAddress,
					parameters: {
						value: `${price}e${this.salePlans.currencyInfo?.decimalLength || 18}`,
					},
				});
			}
			this.maskUrlLink = url;
		},
		goNext() {
			this.reportSuccessClick();
			setTimeout(() => {
				this.$router.push({
					path: `/nft/${this.$route.query.nftProjectId}/${this.$route.query.account}/show`,
				});
			}, 300);
		},
		pay(isReport = true) {
			if (this.payDisabled || Number(this.usdAmountData.rechargeAmountValue) > 0) return;

			this.payDisabled = true;
			postRequest(Api.payNftMysteryBoxWithBalance, {
				params: {
					nftProjectId: this.$route.query.nftProjectId,
					salePlanId: this.salePlans.salePlanId,
				},
			})
				.then((res) => {
					let { code, data } = res;
					if (code == 0) {
						if (data && data.buyItems.length > 0) {
							this.buyData = data.buyItems[0];
						}
						// 购买成功
						this.step = 4;
						this.reportSuccessView();
					} else {
						this.payError(code);
					}
				})
				.finally(() => {
					this.payDisabled = false;
				});

			// report
			if (isReport) {
				this.reportBalanceBuy();
			}
		},
		payUSD() {
			if (Number(this.usdAmountData.rechargeAmountValue) <= 0) {
				this.pay(false);
				this.reportDepositCashPageClick(Report.objectType.purchaseNftButton);
			}
		},
		payToken() {
			if (Number(this.currencyInfoData.balance) >= Number(this.salePlans.price)) {
				this.pay(false);
				this.reportDepositTokenPageClick(Report.objectType.purchaseNftButton);
			}
		},
		payError(code) {
			let msg;
			switch (code.toString()) {
				case '5001':
					msg = 'nft project not exist';
					break;
				case '5002':
					msg = 'nft project not available';
					break;
				case '5101':
					msg = 'nft sale plan not exist';
					break;
				case '5102':
					msg = 'nft sold out';
					break;
				case '5103':
					msg = 'Purchase limit reached';
					break;
				case '5104':
				case '5105':
				case '5106':
					msg = 'Invalid redemption code';
					break;
				default:
					msg = 'Payment failed, please try again';
					break;
			}
			// Dialog
			Dialog({
				message: msg,
				confirmButtonText: 'OK',
				confirmButtonColor: '#1D9BF0',
			});
		},
		deNetPay() {
			if (!this.salePlans) return;

			let pageSource;
			if (this.salePlans.currencyCode === 'USD') {
				pageSource = Report.pageSource.nftDepositCashPage;
			} else {
				pageSource = Report.pageSource.nftDepositTokenPage;
			}

			if (Number(this.usdAmountData.rechargeAmountValue) > 0) {
				// 余额不够
				this.step = 3;
				this.currencyInfoTimer();
				// Report
				this.reportView(pageSource);
			} else {
				// 余额足够
				this.step = 2;
				this.reportView(Report.pageSource.nftBalancePage);
			}
			this.reportPaymentBtnClick(Report.objectType.denetPayButton);
		},
		maskPay() {
			if (Number(this.usdAmountData.rechargeAmountValue) > 0) {
				this.step = 2;
				this.waitRefresh = true;
				this.currencyInfoTimer();
				Dialog({
					message: `Was the pament successful?`,
					showCancelButton: true,
					confirmButtonText: 'YES',
					confirmButtonColor: '#1D9BF0',
					cancelButtonText: 'NO',
					cancelButtonColor: '#1D9BF0',
				})
					.then(() => {
						this.checkWaitInfo(false);
					})
					.catch(() => {
						this.checkWaitInfo(false);
					});
				this.reportView(Report.pageSource.nftPaymentBalancePage);
			} else {
				this.step = 2;
				this.reportView(Report.pageSource.nftBalancePage);
			}

			this.reportPaymentBtnClick(Report.objectType.metamaskPayButton);
		},
		achPay(modifyStep = true, objectType = '') {
			if (Number(this.usdAmountData.rechargeAmountValue) > 0) {
				if (modifyStep) {
					this.step = 2;
					this.reportView(Report.pageSource.nftPaymentBalancePage);
				}
				this.waitRefresh = true;
				this.currencyInfoTimer();
				Dialog({
					message: `Was the pament successful?`,
					showCancelButton: true,
					confirmButtonText: 'YES',
					confirmButtonColor: '#1D9BF0',
					cancelButtonText: 'NO',
					cancelButtonColor: '#1D9BF0',
				})
					.then(() => {
						this.checkWaitInfo(false);
					})
					.catch(() => {
						this.checkWaitInfo(false);
					});

				// setUrl
				setStorage(storageKey.paymentUrl, window.location.href);

				this.$nextTick(() => {
					let win = window.open();
					win.opener = null;
					win.location.href = `${location.protocol}//${location.host}/payment_ach/${this.usdAmountData.rechargeAmountValue}`;
					this.achTimer = setInterval(() => {
						console.log('pay');
						if (win && win.closed) {
							console.log('done');
							clearInterval(this.achTimer);
						}
					}, 500);
				});
			} else {
				if (modifyStep) {
					this.step = 2;
					this.reportView(Report.pageSource.nftBalancePage);
				}
			}

			if (objectType !== '') {
				this.reportPaymentBtnClick(objectType);
			} else {
				this.reportDepositCashPageClick(Report.objectType.depositButtion);
			}
		},
		copyErCode() {
			this.reportDepositTokenPageClick(Report.objectType.copyButtion);
		},

		reportView(pageSource) {
			Report.log({
				pageSource,
				params: {
					eventData: {
						businessType: Report.businessType.pageView,
					},
					extParams: {
						userAgent: window.navigator.userAgent,
					},
				},
			});
		},
		reportPaymentBtnClick(objectType) {
			Report.log({
				pageSource: Report.pageSource.nftPaymentPage,
				params: {
					eventData: {
						objectType,
						businessType: Report.businessType.buttonClick,
					},
					extParams: {
						userAgent: window.navigator.userAgent,
					},
				},
			});
		},
		reportRedeemBtnClick() {
			Report.log({
				pageSource: Report.pageSource.nftRedeemPage,
				params: {
					eventData: {
						objectType: Report.objectType.redeemButton,
						businessType: Report.businessType.buttonClick,
					},
					extParams: {
						userAgent: window.navigator.userAgent,
					},
				},
			});
		},
		reportDepositCashPageClick(objectType) {
			Report.log({
				pageSource: Report.pageSource.nftDepositCashPage,
				params: {
					eventData: {
						objectType,
						businessType: Report.businessType.buttonClick,
					},
					extParams: {
						userAgent: window.navigator.userAgent,
					},
				},
			});
		},
		reportDepositTokenPageClick(objectType) {
			Report.log({
				pageSource: Report.pageSource.nftDepositTokenPage,
				params: {
					eventData: {
						objectType,
						businessType: Report.businessType.buttonClick,
					},
					extParams: {
						userAgent: window.navigator.userAgent,
					},
				},
			});
		},
		reportBalanceRefresh() {
			let pageSource = this.waitRefresh ? Report.pageSource.nftPaymentBalancePage : Report.pageSource.nftBalancePage;

			Report.log({
				pageSource: pageSource,
				params: {
					eventData: {
						objectType: Report.objectType.refreshBalanceButton,
						businessType: Report.businessType.buttonClick,
					},
					extParams: {
						userAgent: window.navigator.userAgent,
					},
				},
			});
		},
		reportBalanceBuy() {
			let pageSource = this.waitRefresh ? Report.pageSource.nftPaymentBalancePage : Report.pageSource.nftBalancePage;

			Report.log({
				pageSource: pageSource,
				params: {
					eventData: {
						objectType: Report.objectType.purchaseNftButton,
						businessType: Report.businessType.buttonClick,
					},
					extParams: {
						userAgent: window.navigator.userAgent,
					},
				},
			});
		},
		reportSuccessView() {
			Report.log({
				pageSource: Report.pageSource.nftPurchaseSuccessPage,
				params: {
					eventData: {
						businessType: Report.businessType.pageView,
					},
					extParams: {
						userAgent: window.navigator.userAgent,
					},
				},
			});
		},
		reportSuccessClick() {
			Report.log({
				pageSource: Report.pageSource.nftPurchaseSuccessPage,
				params: {
					eventData: {
						businessType: Report.businessType.buttonClick,
						objectType: Report.objectType.finishPurchaseButton,
					},
					extParams: {
						userAgent: window.navigator.userAgent,
					},
				},
			});
		},
	},
};
</script>

<style lang="scss">
html,
body,
#__nuxt,
#__layout {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

.payment {
	width: 100%;
	height: 100%;
}
.moneyInfo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 90px;
	border-bottom: solid 8px rgba($color: #f5f5f5, $alpha: 0.6);
	.tips {
		font-size: 12px;
		font-weight: 500;
	}
	.money {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 10px;
		color: #000;
		font-size: 20px;
		font-weight: 700;
		.icon {
			overflow: hidden;
			width: 26px;
			height: 26px;
			border-radius: 50%;
			margin-right: 10px;
			vertical-align: middle;
			background-color: #f5f5f5;
		}
		.info {
			&.usd {
				margin-top: -5px;
			}
		}
	}
}
.payList {
	overflow-y: auto;
	height: calc(100% - 90px);
	.detail {
		padding: 18px 16px;
		.title {
			color: #adadad;
			height: 26px;
			font-size: 12px;
			font-weight: 500;
		}
		.item {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 500;
			font-size: 16px;
			height: 50px;
			margin-bottom: 14px;
			border-radius: 100px;
			border: 1px solid #ececec;
			&:last-child {
				margin-bottom: 0;
			}
			img {
				width: 24px;
				height: 24px;
				margin-right: 4px;
			}
			&.denet {
				flex-direction: column;
				img {
					margin-top: -6px;
				}
			}
			.wallet {
				width: 100%;
				overflow: hidden;
				color: #adadad;
				font-size: 11px;
				text-align: center;
				margin-top: -2px;
			}
			.maskLink {
				position: absolute;
				z-index: 10;
				width: 100%;
				height: 100%;
			}
		}
	}
}

.loading {
	position: absolute;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.loadingBg {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba($color: #000, $alpha: 0.1);
}

.redeem {
	padding: 18px 16px 38px;
	.tips {
		height: 31px;
		font-size: 15px;
		font-weight: 500;
	}
	.footer {
		display: flex;
		justify-content: space-between;
		.input {
			display: flex;
			align-items: center;
			justify-content: center;
			width: calc(100% - 93px);
			height: 45px;
			border-radius: 5px;
			border: 1px solid #e0e0e0;
			input {
				width: 94%;
				border: 0;
				outline: 0;
			}
		}
		.enter {
			width: 83px;
			height: 45px;
			border: 0;
			padding: 0;
			color: #ffffff;
			font-size: 17px;
			font-weight: 500;
			border-radius: 5px;
			background: #1d9bf0;
			&.disable {
				background: #dedede;
			}
		}
	}
}

.payInfo {
	width: 100%;
	height: calc(100% - 88px);
	.picShow {
		padding: 54px 48px;
		.tip {
			height: 44px;
			font-size: 18px;
			font-weight: 600;
			text-align: center;
		}
		.pic {
			display: block;
			margin: auto;
			width: 280px;
			height: 280px;
			border-radius: 3px;
			margin-bottom: 20px;
		}
		.name {
			font-size: 18px;
			font-weight: 600;
			line-height: 21px;
			text-align: center;
		}
	}
}
.payBtn {
	padding: 0 16px 38px;
	.btn {
		width: 100%;
		height: 50px;
		color: #ffffff;
		font-size: 18px;
		font-weight: 700;
		border-radius: 50px;
		background: #1d9bf0;
	}
}

.balanceTop {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: calc(100% - 100px);
	background-color: #f5f5f5;
	.balance {
		width: 66px;
		height: 66px;
		margin-bottom: 6px;
	}
	.text {
		font-size: 15px;
		font-weight: 500;
		line-height: 18px;
		color: #9d9d9d;
	}
	.money {
		font-size: 22px;
		font-weight: 700;
		line-height: 26px;
		margin-top: 6px;
		.icon {
			width: 22px;
			height: 22px;
			margin-right: 6px;
		}
		.font {
			color: #000;
		}
	}
}
.balanceInfo {
	overflow-y: auto;
	height: calc(100% - 100px);
	background-color: #f5f5f5;
	.top {
		padding: 0 16px 17px 16px;
		background-color: #ffffff;
		.item {
			display: flex;
			align-items: center;
			height: 54px;
			border-bottom: solid 1px #f2f2f2;
			&.title {
				font-size: 16px;
				font-weight: 600;
				line-height: 19px;
				img {
					width: 26px;
					height: 26px;
					margin-right: 6px;
				}
			}
			&.column {
				color: rgba($color: #5e5e5e, $alpha: 0.7);
				font-size: 14px;
				font-weight: 400;
				.l {
					width: 70px;
				}
				.r {
					img {
						width: 21px;
						height: 21px;
						margin-right: 4px;
					}
					span {
						color: rgba($color: #5e5e5e, $alpha: 0.7);
					}
				}
			}
			&.usd {
				font-size: 14px;
				font-weight: 500;
				justify-content: space-between;
				.fontPayment {
					font-size: 18px;
					font-weight: 600;
				}
				.font {
					color: #9a9a9a;
					font-size: 16px;
					font-weight: 500;
				}
				.fontDeposit {
					color: #1d9bf0;
					font-size: 18px;
					font-weight: 600;
				}
			}
		}
		.deposit {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 54px;
			color: #ffffff;
			font-weight: 600;
			font-size: 18px;
			margin-top: 16px;
			border-radius: 54px;
			background: #1d9bf0;
		}
		.address {
			color: rgba($color: #5e5e5e, $alpha: 0.7);
			.title {
				height: 42px;
				font-size: 14px;
				font-weight: 400;
				line-height: 42px;
			}
		}
		.notice {
			display: flex;
			justify-content: space-between;
			padding: 10px;
			margin-top: 12px;
			border-radius: 8px;
			background: #f9f6ee;
			.icon {
				width: 20px;
				margin-right: 10px;
				img {
					width: 20px;
					height: 20px;
				}
			}
			.text {
				flex: 1;
				color: rgba($color: #5e5e5e, $alpha: 0.7);
				font-size: 14px;
				font-weight: 400;
				line-height: 19px;
				word-break: break-all;
				strong {
					color: #ff0000;
					font-weight: bold;
				}
			}
		}
	}
	.line {
		height: 8px;
	}
	.balance {
		display: flex;
		align-items: center;
		padding: 0 16px;
		height: 54px;
		background-color: #ffffff;
		.icon {
			width: 24px;
			margin-right: 6px;
			img {
				width: 24px;
			}
		}
		.text {
			flex: 1;
			font-size: 14px;
			font-weight: 500;
			line-height: 17px;
			span {
				color: #000;
				margin-right: auto;
			}
		}
		.refresh {
			width: 24px;
			height: 24px;
			img {
				width: 24px;
				transform-origin: center center;
			}
		}
	}
}
.balanceBot {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 17px 16px 38px;
	border-top: solid 1px #ececec;
	.l {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.neet {
		font-size: 12px;
		font-weight: 500;
		line-height: 14px;
	}
	.money {
		height: 22px;
		line-height: 22px;
		font-size: 18px;
		font-weight: 700;
		margin-top: 4px;
		.text {
			margin-right: auto;
		}
	}
	.btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 110px;
		height: 46px;
		color: #ffffff;
		font-size: 18px;
		font-weight: 700;
		line-height: 21px;
		border-radius: 46px;
		background: #1d9bf0;
		&.disable {
			background: #d2d2d2;
		}
	}
}

.waitFont {
	margin-top: 16px;
	padding: 0 20px;
	font-size: 14px;
	font-weight: 500;
	line-height: 17px;
	text-align: center;
}
.waitBtn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	margin: 50px auto 0;
	border-radius: 50%;
	background-color: #ffffff;
	img {
		width: 24px;
		height: 24px;
	}
}

.icon-refresh-rotate {
	transform: rotate(360deg);
	transition-duration: 1s;
}
</style>