|
|
@@ -28,6 +28,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="item" @click="maskPay">
|
|
|
+ <a class="maskLink" :href="maskUrlLink"></a>
|
|
|
<img src="../../static/payment/icon_meta_mask.png" />
|
|
|
<span>MetaMask</span>
|
|
|
</div>
|
|
|
@@ -72,13 +73,12 @@
|
|
|
<img class="icon" :src="currencyInfoData.iconPath" /> <span class="font">{{currencyInfoData.balance}} {{currencyInfoData.tokenSymbol}}</span>
|
|
|
</FontZoom>
|
|
|
</div>
|
|
|
- <!-- waitRefresh -->
|
|
|
- <template v-if="true">
|
|
|
+ <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.png" />
|
|
|
+ <img :class="{ 'icon-refresh-rotate': refreshRotate }" src="../../static/img/icon_refresh.svg" />
|
|
|
</div>
|
|
|
</template>
|
|
|
</div>
|
|
|
@@ -114,20 +114,24 @@
|
|
|
<div class="item column">
|
|
|
<div class="l">Deposit</div>
|
|
|
<div class="r">
|
|
|
- <img :src="currencyInfoData.iconPath" />
|
|
|
- <span>{{ salePlans.price - currencyInfoData.balance}} {{currencyInfoData.tokenSymbol}}</span>
|
|
|
+ <FontZoom width="260">
|
|
|
+ <img :src="currencyInfoData.iconPath" />
|
|
|
+ <span>{{ salePlans.price - currencyInfoData.balance}} {{currencyInfoData.tokenSymbol}}</span>
|
|
|
+ </FontZoom>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="item column">
|
|
|
<div class="l">Network</div>
|
|
|
<div class="r">
|
|
|
- <img :src="currencyInfoData.chainInfo.iconPath" />
|
|
|
- <span>{{ currencyInfoData.chainInfo.chainName }}</span>
|
|
|
+ <FontZoom width="260">
|
|
|
+ <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"></QrCode>
|
|
|
+ <QrCode :tokenChain="currencyInfoData.tokenChain" :rechargeAddress="rechargeAddress"></QrCode>
|
|
|
</div>
|
|
|
<div class="notice">
|
|
|
<div class="icon"><img src="../../static/img/icon_warning.svg" /></div>
|
|
|
@@ -139,7 +143,11 @@
|
|
|
<div class="icon">
|
|
|
<img src="../../static/img/icon_balance_blue.svg" />
|
|
|
</div>
|
|
|
- <div class="text">Balance: {{ currencyInfoData.balance }} {{ currencyInfoData.tokenSymbol }}</div>
|
|
|
+ <div class="text">
|
|
|
+ <FontZoom width="260">
|
|
|
+ <span>Balance: {{ currencyInfoData.balance }} {{ currencyInfoData.tokenSymbol }}</span>
|
|
|
+ </FontZoom>
|
|
|
+ </div>
|
|
|
<div
|
|
|
class="refresh"
|
|
|
@click="checkCurrencyInfo">
|
|
|
@@ -275,7 +283,8 @@
|
|
|
import FontZoom from '../../components/FontZoom.vue';
|
|
|
import QrCode from '../../components/qrcode.vue';
|
|
|
import { postRequest } from '../../http/index';
|
|
|
-import { Dialog } from 'vant';
|
|
|
+import { maskUrl } from '../../utils/help';
|
|
|
+import { Dialog, Toast } from 'vant';
|
|
|
import Api from '../../http/api';
|
|
|
|
|
|
export default {
|
|
|
@@ -285,6 +294,7 @@ export default {
|
|
|
step: 1, // 1: 支付方式列表 2: 余额支付 3: 充值支付 4: 支付完成
|
|
|
loading: true,
|
|
|
salePlans: null,
|
|
|
+ rechargeAddress: '',
|
|
|
redeemStr: '',
|
|
|
redeemNext: false,
|
|
|
redeemLayer: false,
|
|
|
@@ -295,6 +305,7 @@ export default {
|
|
|
currencyInfoData: {},
|
|
|
currencyTimer: 0,
|
|
|
achTimer: 0,
|
|
|
+ maskUrlLink: ``,
|
|
|
usdAmountData: {},
|
|
|
}
|
|
|
},
|
|
|
@@ -324,6 +335,10 @@ export default {
|
|
|
if (code === 0) {
|
|
|
this.salePlans = data.salePlans[0];
|
|
|
this.getCurrencyInfoByCode();
|
|
|
+ // 获取充值地址
|
|
|
+ if (this.rechargeAddress === '') {
|
|
|
+ this.getAddress()
|
|
|
+ }
|
|
|
}
|
|
|
}).finally(() => {
|
|
|
this.loading = false;
|
|
|
@@ -476,6 +491,42 @@ export default {
|
|
|
this.redeemNext = true;
|
|
|
})
|
|
|
},
|
|
|
+ getAddress() {
|
|
|
+ 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;
|
|
|
+ if (this.salePlans.currencyInfo?.contractAddress) {
|
|
|
+ // 代币
|
|
|
+ url = maskUrl({
|
|
|
+ target_address: this.salePlans.currencyInfo.contractAddress,
|
|
|
+ parameters: {
|
|
|
+ address: this.rechargeAddress,
|
|
|
+ uint256: `${Number(this.salePlans.price) - Number(this.currencyInfoData.balance)}e${this.salePlans.currencyInfo?.decimalLength || 18}`
|
|
|
+ }
|
|
|
+ }, false)
|
|
|
+ } else {
|
|
|
+ // 主币
|
|
|
+ url = maskUrl({
|
|
|
+ target_address: this.rechargeAddress,
|
|
|
+ parameters: {
|
|
|
+ value: `${Number(this.salePlans.price) - Number(this.currencyInfoData.balance)}e${this.salePlans.currencyInfo?.decimalLength || 18}`
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.maskUrlLink = url;
|
|
|
+ },
|
|
|
goNext() {
|
|
|
this.$router.push({
|
|
|
path: `/nft/${this.$route.query.nftProjectId}/${this.$route.query.account}/show`,
|
|
|
@@ -552,7 +603,7 @@ export default {
|
|
|
deNetPay() {
|
|
|
if (!this.salePlans) return;
|
|
|
|
|
|
- if (this.salePlans.price > this.currencyInfoData.balance) {
|
|
|
+ if (Number(this.salePlans.price) > Number(this.currencyInfoData.balance)) {
|
|
|
// 余额不够
|
|
|
this.step = 3;
|
|
|
this.currencyInfoTimer();
|
|
|
@@ -562,12 +613,27 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
maskPay() {
|
|
|
- console.log(111)
|
|
|
+ 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()
|
|
|
+ }).catch(() => {
|
|
|
+ this.checkWaitInfo()
|
|
|
+ });
|
|
|
},
|
|
|
achPay(modifyStep = true) {
|
|
|
if (modifyStep) {
|
|
|
this.step = 2;
|
|
|
}
|
|
|
+ this.waitRefresh = true;
|
|
|
this.currencyInfoTimer();
|
|
|
Dialog({
|
|
|
message: `Was the pament successful?`,
|
|
|
@@ -578,6 +644,8 @@ export default {
|
|
|
cancelButtonColor: '#1D9BF0',
|
|
|
}).then(() => {
|
|
|
this.checkWaitInfo()
|
|
|
+ }).catch(() => {
|
|
|
+ this.checkWaitInfo()
|
|
|
});
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
@@ -660,6 +728,7 @@ body,
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
.item {
|
|
|
+ position: relative;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
@@ -691,6 +760,12 @@ body,
|
|
|
text-align: center;
|
|
|
margin-top: -2px;
|
|
|
}
|
|
|
+ .maskLink {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 10;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -862,6 +937,9 @@ body,
|
|
|
height: 21px;
|
|
|
margin-right: 4px;
|
|
|
}
|
|
|
+ span {
|
|
|
+ color: rgba($color: #5E5E5E, $alpha: .7);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
&.usd {
|
|
|
@@ -955,6 +1033,10 @@ body,
|
|
|
font-size: 14px;
|
|
|
font-weight: 500;
|
|
|
line-height: 17px;
|
|
|
+ span {
|
|
|
+ color: #000;
|
|
|
+ margin-right: auto;
|
|
|
+ }
|
|
|
}
|
|
|
.refresh {
|
|
|
width: 24px;
|
