Merge branch 'dev_1.0.4' into test

src/view/iframe/publish/components/paypal-button.vue

@@ -1,6 +1,7 @@
 <template>
 <!-- paypal 支付按钮 -->
     <div class="pay-wrapper">
+        <slot name="balance"></slot>
         <div class="pay-btn">
             <div class="iframe-pay"
                 v-show="currentCurrencyInfo.currencyCode == 'USD'"

src/view/iframe/publish/give-dialog.vue

@@ -296,19 +296,6 @@
                                             :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)">
@@ -369,7 +356,7 @@
                         </template>
 
                         <!-- paypal支付按钮 -->
-                        <div v-show="showComType == 'preview'">
+                        <div class="payment" v-show="showComType == 'preview'">
                             <paypal-button
                                 :finalAmountData="finalAmountData"
                                 :payConfig="{
@@ -381,7 +368,23 @@
                                 }"
                                 :currentCurrencyInfo="currentCurrencyInfo"
                                 @payPalFinsh="payPalFinsh"
-                            ></paypal-button>
+                            >
+                                <template v-slot:balance>
+                                    <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>
+                                </template>
+                            </paypal-button>
                         </div>
                     </div>
                 </div>
@@ -400,7 +403,7 @@
 </template>
 
 <script setup>
-import { ref, watch, reactive, defineProps, defineEmits, onMounted, nextTick, provide, onUnmounted } 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";
@@ -595,6 +598,14 @@ watch(
             setTimeout(() => {
                 setDialogHeight();
             }, 300);
+
+            // 更新余额
+            clearInterval(timer.value);
+            timer.value = setInterval(() => {
+                getCurrencyInfo();
+            }, 10000)
+        } else {
+            clearInterval(timer.value);
         }
     }
 );
@@ -1377,16 +1388,7 @@ onMounted(() => {
     window.addEventListener('resize', function () {
         setDialogHeight(true);
     })
-    // 更新余额
-    clearInterval(timer.value);
-    timer.value = setInterval(() => {
-        getCurrencyInfo();
-    }, 10000)
 });
-
-onUnmounted(() => {
-    clearInterval(timer.value);
-})
 </script>
 
 <style lang="scss" scoped>
@@ -1959,33 +1961,6 @@ onUnmounted(() => {
             margin-left: 50%;
             transform: translateX(-50%);
         }
-        .balance {
-            position: absolute;
-            display: flex;
-            bottom: 0;
-            right: -240px;
-            .icon {
-                width: 40px;
-                height: 40px;
-            }
-            .con {
-                padding: 0 5px;
-                .desc {
-                    color: rgba($color: #000000, $alpha: 0.5);
-                    font-size: 12px;
-                    margin-bottom: 4px;
-                }
-                .price {
-                    font-size: 14px;
-                    font-weight: bold;
-                }
-            }
-            .refresh {
-                width: 40px;
-                cursor: pointer;
-                margin-left: -5px;
-            }
-        }
     }
     .card-title {
         height: 32px;
@@ -2059,4 +2034,32 @@ onUnmounted(() => {
     transform: rotate(360deg);
     transition-duration: 1s;
 }
+
+.payment {
+    .balance {
+        display: flex;
+        margin-right: 20px;
+        .icon {
+            width: 40px;
+            height: 40px;
+        }
+        .con {
+            padding: 0 5px;
+            .desc {
+                color: rgba($color: #000000, $alpha: 0.5);
+                font-size: 12px;
+                margin-bottom: 4px;
+            }
+            .price {
+                font-size: 14px;
+                font-weight: bold;
+            }
+        }
+        .refresh {
+            width: 40px;
+            cursor: pointer;
+            margin-left: -5px;
+        }
+    }
+}
 </style>