|
|
@@ -3,7 +3,7 @@
|
|
|
<div class="content"
|
|
|
:style="{
|
|
|
height: dialogHeight + 'px',
|
|
|
- width: showComType != 'preview' ? '600px' : 'auto'}">
|
|
|
+ width: showComType != 'preview' ? '600px' : '1100px'}">
|
|
|
<div class="pop-mask"
|
|
|
v-show="showCurrencyPop"
|
|
|
@click.stop="showCurrencyPop = false"></div>
|
|
|
@@ -273,12 +273,97 @@
|
|
|
|
|
|
<!-- 预览 -->
|
|
|
<template v-else-if="showComType == 'preview'">
|
|
|
- <preview-card
|
|
|
- :currentCurrencyInfo="currentCurrencyInfo"
|
|
|
- :postData="publishRes"
|
|
|
- :baseFormData="baseFormData"
|
|
|
- :amountFontSize="previewFontSize"
|
|
|
- ></preview-card>
|
|
|
+ <div class="preview">
|
|
|
+ <div
|
|
|
+ class="card"
|
|
|
+ :class="{ center: Number(baseFormData.amountValue) <= Number(currentCurrencyInfo.balance) }">
|
|
|
+ <div class="card-title">
|
|
|
+ <img
|
|
|
+ class="img"
|
|
|
+ v-if="Number(baseFormData.amountValue) > Number(currentCurrencyInfo.balance)"
|
|
|
+ :src=" require('@/assets/subject/top-01.svg') " />
|
|
|
+ <div class="font">
|
|
|
+ Preview: <span>{{installStatus ? 'After' : 'Before' }}</span> DeNet Installed
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flash">
|
|
|
+ <preview-card
|
|
|
+ :currentCurrencyInfo="currentCurrencyInfo"
|
|
|
+ :postData="publishRes"
|
|
|
+ :baseFormData="baseFormData"
|
|
|
+ :amountFontSize="previewFontSize"
|
|
|
+ ></preview-card>
|
|
|
+ </div>
|
|
|
+ <div class="balance" v-if="Number(baseFormData.amountValue) <= Number(currentCurrencyInfo.balance)">
|
|
|
+ <img class="icon" src="@/assets/subject/icon-balance.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="desc">Balance</div>
|
|
|
+ <div class="price">{{currentCurrencyInfo.balance}} {{currentCurrencyInfo.tokenSymbol}}</div>
|
|
|
+ </div>
|
|
|
+ <img
|
|
|
+ class="refresh"
|
|
|
+ :class="{ 'icon-refresh-rotate': refreshRotate }"
|
|
|
+ @click="updateCurrencyBanlce"
|
|
|
+ :src=" require('@/assets/svg/icon-form-refresh.svg') "
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 需充值 -->
|
|
|
+ <div class="card-content" v-if="Number(baseFormData.amountValue) > Number(currentCurrencyInfo.balance)">
|
|
|
+ <template v-if="currentCurrencyInfo.currencyCode === 'USD'">
|
|
|
+ <div class="card-title">
|
|
|
+ <img class="img" :src=" require('@/assets/subject/top-02.svg') " />
|
|
|
+ <div class="font">Deposit to Send Giveaway</div>
|
|
|
+ </div>
|
|
|
+ <div class="card-list">
|
|
|
+ <div class="item">
|
|
|
+ <div class="l">Giveaway Amount</div>
|
|
|
+ <div class="r"></div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="l">Balance</div>
|
|
|
+ <div class="r"></div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="l">Paypal charges fee ()</div>
|
|
|
+ <div class="r"></div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="l">Deposit Amount</div>
|
|
|
+ <div class="r"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div class="card-title">
|
|
|
+ <img class="img" :src=" require('@/assets/subject/top-02.svg') " />
|
|
|
+ <div class="font">Deposit to Send Giveaway</div>
|
|
|
+ </div>
|
|
|
+ <top-up2
|
|
|
+ :asyncIng="asyncIng"
|
|
|
+ :currentCurrencyInfo="tempCurrentCurrencyInfo"
|
|
|
+ @topUpDone="topUpDone">
|
|
|
+ </top-up2>
|
|
|
+ <div class="card-title">
|
|
|
+ <img class="img" :src=" require('@/assets/subject/top-03.svg') " />
|
|
|
+ <div class="font">Wait for the amount to arrive</div>
|
|
|
+ </div>
|
|
|
+ <div class="card-amount">
|
|
|
+ <img class="icon" src="@/assets/subject/icon-balance.png" />
|
|
|
+ <div class="con">
|
|
|
+ <div class="desc">Balance</div>
|
|
|
+ <div class="price">{{currentCurrencyInfo.balance}} {{currentCurrencyInfo.tokenSymbol}}</div>
|
|
|
+ </div>
|
|
|
+ <img
|
|
|
+ class="refresh"
|
|
|
+ :class="{ 'icon-refresh-rotate': refreshRotate }"
|
|
|
+ @click="updateCurrencyBanlce"
|
|
|
+ :src=" require('@/assets/svg/icon-form-refresh.svg') "
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<!-- paypal支付按钮 -->
|
|
|
@@ -313,7 +398,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref, watch, reactive, defineProps, defineEmits, onMounted, nextTick } from "vue";
|
|
|
+import { ref, watch, reactive, defineProps, defineEmits, onMounted, nextTick, provide } from "vue";
|
|
|
import { postPublish, verifyPaypalResult, syncChainTokenRechargeRecord, getCurrencyInfoByCode } from "@/http/publishApi";
|
|
|
import { getInviteGuildInfo, saveInviteGuildInfo } from "@/http/discordApi";
|
|
|
import { payCalcFee, getPayConfig } from "@/http/pay";
|
|
|
@@ -333,7 +418,7 @@ import previewCard from "@/view/iframe/publish/components/preview-card";
|
|
|
import followInput from "@/view/iframe/publish/components/follow-input";
|
|
|
import paypalButton from "@/view/iframe/publish/components/paypal-button";
|
|
|
import topUp from "@/view/iframe/publish/components/top-up.vue";
|
|
|
-
|
|
|
+import topUp2 from "@/view/iframe/publish/components/top-up2.vue";
|
|
|
const config = {
|
|
|
number: 'BigNumber',
|
|
|
}
|
|
|
@@ -345,12 +430,15 @@ let tempCurrentCurrencyInfo = ref({});
|
|
|
let paypalClientId = ref("");
|
|
|
let payConfig = ref({});
|
|
|
let paypalHtml = ref("");
|
|
|
+let installStatus = ref(false);
|
|
|
+let timer = ref(null);
|
|
|
+provide('installStatus', installStatus)
|
|
|
|
|
|
// 发布后返回的结果
|
|
|
let publishRes = reactive({});
|
|
|
|
|
|
//弹窗是否展示
|
|
|
-let visible = ref(false);
|
|
|
+let visible = ref(true);
|
|
|
|
|
|
//弹窗高度
|
|
|
let dialogHeight = ref(680);
|
|
|
@@ -362,7 +450,7 @@ let currentComData = {
|
|
|
title: "Giveaway",
|
|
|
},
|
|
|
preview: {
|
|
|
- title: "Preview",
|
|
|
+ title: "Giveaway",
|
|
|
},
|
|
|
topUp: {
|
|
|
title: "Deposit",
|
|
|
@@ -1033,9 +1121,8 @@ const onIptSetErrorTxt = (params = {}) => {
|
|
|
setDiscordErrTxt({getDuildId: true});
|
|
|
}
|
|
|
}
|
|
|
- } else if(currentCurrencyInfo.value.currencyCode != 'USD') {
|
|
|
- depositGuide.value = true;
|
|
|
- iptErrMsgTxt.value = `Insufficient ${currentCurrencyInfo.value.tokenSymbol} balance, please deposit`;
|
|
|
+ } else {
|
|
|
+ iptErrMsgTxt.value = ``;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -1249,24 +1336,28 @@ const goTransactionsList = () => {
|
|
|
*/
|
|
|
const getLocalCurrencyInfoByCode = () => {
|
|
|
if(!currentCurrencyInfo.value.currencyCode) {
|
|
|
- getChromeStorage('selectCurrencyInfo', (res) => {
|
|
|
- if(res && res.currencyCode) {
|
|
|
- getCurrencyInfoByCode({
|
|
|
- params: {
|
|
|
- currencyCode: res.currencyCode
|
|
|
- }
|
|
|
- }).then(res => {
|
|
|
- if(res.code == 0 && res.data) {
|
|
|
- currentCurrencyInfo.value = res.data;
|
|
|
- tempCurrentCurrencyInfo.value = res.data;
|
|
|
- onIptSetErrorTxt();
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- })
|
|
|
+ getCurrencyInfo();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+const getCurrencyInfo = () => {
|
|
|
+ getChromeStorage('selectCurrencyInfo', (res) => {
|
|
|
+ if(res && res.currencyCode) {
|
|
|
+ getCurrencyInfoByCode({
|
|
|
+ params: {
|
|
|
+ currencyCode: res.currencyCode
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ if(res.code == 0 && res.data) {
|
|
|
+ currentCurrencyInfo.value = res.data;
|
|
|
+ tempCurrentCurrencyInfo.value = res.data;
|
|
|
+ onIptSetErrorTxt();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
setFrontConfig();
|
|
|
setPayConfig();
|
|
|
@@ -1283,6 +1374,11 @@ onMounted(() => {
|
|
|
window.addEventListener('resize', function () {
|
|
|
setDialogHeight(true);
|
|
|
})
|
|
|
+ // 更新余额
|
|
|
+ clearInterval(timer.value);
|
|
|
+ timer.value = setInterval(() => {
|
|
|
+ getCurrencyInfo();
|
|
|
+ }, 10000)
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
@@ -1557,11 +1653,6 @@ onMounted(() => {
|
|
|
cursor: pointer;
|
|
|
margin-left: 8px;
|
|
|
}
|
|
|
-
|
|
|
- .icon-refresh-rotate {
|
|
|
- transform: rotate(360deg);
|
|
|
- transition-duration: 1s;
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
.msg {
|
|
|
@@ -1845,4 +1936,119 @@ onMounted(() => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.preview {
|
|
|
+ padding: 30px 50px;
|
|
|
+ .card {
|
|
|
+ float: left;
|
|
|
+ position: relative;
|
|
|
+ .flash {
|
|
|
+ overflow: hidden;
|
|
|
+ height: 450px;
|
|
|
+ border-radius: 26px;
|
|
|
+ border: solid 1px #ECECEC;
|
|
|
+ }
|
|
|
+ &.center {
|
|
|
+ margin-left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+ .balance {
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ bottom: 0;
|
|
|
+ right: -350px;
|
|
|
+ .icon {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+ .con {
|
|
|
+ padding: 0 10px;
|
|
|
+ .desc {
|
|
|
+ color: rgba($color: #000000, $alpha: 0.5);
|
|
|
+ font-size: 12px;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+ .price {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .refresh {
|
|
|
+ width: 40px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .card-title {
|
|
|
+ height: 32px;
|
|
|
+ .img {
|
|
|
+ float: left;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ .font {
|
|
|
+ float: left;
|
|
|
+ font-size: 17px;
|
|
|
+ font-weight: 500;
|
|
|
+ span {
|
|
|
+ color: #0091e9;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .card-content {
|
|
|
+ float: right;
|
|
|
+ width: 630px;
|
|
|
+ }
|
|
|
+ .card-amount {
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ height: 40px;
|
|
|
+ padding: 20px;
|
|
|
+ border-radius: 20px;
|
|
|
+ border: 1px solid #E6E6E6;
|
|
|
+ .icon {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+ .con {
|
|
|
+ flex: 1;
|
|
|
+ padding: 0 10px;
|
|
|
+ .desc {
|
|
|
+ color: rgba($color: #000000, $alpha: 0.5);
|
|
|
+ font-size: 12px;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+ .price {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .refresh {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ margin-top: -5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .card-list {
|
|
|
+ padding: 20px;
|
|
|
+ border-radius: 20px;
|
|
|
+ border: 1px solid #E6E6E6;
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ height: 47px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ box-shadow: inset 0px -1px 0px #EAEAEA;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.icon-refresh-rotate {
|
|
|
+ transform: rotate(360deg);
|
|
|
+ transition-duration: 1s;
|
|
|
+}
|
|
|
</style>
|
