[edit] 充值手续费

src/view/components/input-action-sheet.vue

@@ -12,6 +12,9 @@
                     @input="onValueInput"
                     @blur="onValueBlur">
             </div>
+            <div class="desc">
+                {{desc}}
+            </div>
             <div class="btn-wrapper">
                 <div class="btn cancel" @click="cancel">
                     {{cancelText}}
@@ -25,7 +28,7 @@
 </template>
 
 <script setup>
-import { ref, defineProps, defineEmits } from "vue";
+import { ref, defineProps, defineEmits, watch } from "vue";
 
 let inputVal = ref('');
 
@@ -50,16 +53,28 @@ const props = defineProps({
         type: String,
         default: 'Continue',
     },
+    desc: {
+        type: String,
+        defautl: ''
+    }
 });
 
-const emits = defineEmits(["cancel", "confirm"]);
+watch(() => props.visible, (newVal) => {
+    if(!newVal) {
+        inputVal.value = ''
+    }
+})
+
+const emits = defineEmits(["cancel", "confirm", "onInput"]);
 
 const onValueInput = () => {
-    inputValHandler();
+    let val = inputValHandler();
+    emits("onInput", { inputVal: val });
+    return val;
 }
 
 const onValueBlur = () => {
-    inputValHandler();
+    return inputValHandler();
 }
 
 
@@ -79,6 +94,7 @@ const inputValHandler = () => {
     }
 
     inputVal.value = val;
+
     return val;
 }
 
@@ -127,7 +143,7 @@ const confirm = () => {
             border-radius: 5px;
             box-sizing: border-box;
             height: 42px;
-            margin: 17px 0 23px 0;
+            margin: 17px 0 10px 0;
 
             .input {
                 width: 100%;
@@ -145,10 +161,17 @@ const confirm = () => {
                 color: #B3B3B3;
             }
         }
-
+        
+        .desc {
+            font-weight: 500;
+            font-size: 13px;
+            color: #888888;
+            height: 40px;
+        }
         .btn-wrapper {
             display: flex;
             justify-content: space-between;
+            margin-top: 20px;
 
             .btn {
                 width: 150px;

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

@@ -816,27 +816,6 @@ const selectCurrencyPopHandle = () => {
     }
 }
 
-/**
- * 获取实际支付金额
- */
-const getPayAmount = async (amountValue) => {
-    let res = await payCalcFee({
-        params: {
-            amountValue,
-            currencyCode: currentCurrencyInfo.value.currencyCode,
-            payChannel: 'ach',
-        },
-    });
-    if (res.code == 0) {
-        let { finalAmountValue, feeDesc } = res.data;
-        payConfig.value.feeDesc = feeDesc;
-        if (finalAmountValue > 0) {
-            finalAmountData.value = res.data;
-        }
-    }
-    return res.data;
-};
-
 const saveDiscordGuildInfo = () => {
     let {guildId, inviteCode, inviteUrl} = discordInviteInfo.value;
     //保存服务器信息 
@@ -1872,8 +1851,17 @@ const submitReward = (reward) => {
     onIptSetErrorTxt();
 }
 
-const depositAchCancel = () => {
+const depositAchCancel = async () => {
     showDepositMessageBox.value = false;
+    let currencyInfoRes = await getCurrencyByCode({currencyCode: currentCurrencyInfo.value.currencyCode});
+
+    if(currencyInfoRes.code == 0 && currencyInfoRes.data) {
+        currentCurrencyInfo.value = currencyInfoRes.data;
+        let {balance} = currencyInfoRes.data;
+        if(balance >= finalAmountData.value.orderAmountValue) {
+            USDepositStatus.value = 'SUCCESS';
+        }
+    }
 }
 
 const depositAchConfirm = async () => {
@@ -1886,7 +1874,6 @@ const depositAchConfirm = async () => {
         let {balance} = currencyInfoRes.data;
         if(balance >= finalAmountData.value.orderAmountValue) {
             USDepositStatus.value = 'SUCCESS';
-            // payButtonDom.value && payButtonDom.value.balancePay();
         } else {
             message.info('Deposit failed, please try again later');
         }

src/view/popup/currency-detail.vue

@@ -62,7 +62,9 @@
     <input-action-sheet 
       :visible="showDepositInput"
       title="Enter the USD amount to be deposited"
+      :desc="depositDesc"
       position="absolute"
+      @onInput="onDepositAmountInput"
       @cancel="cancelDeposit"
       @confirm="confirmDeposit"></input-action-sheet>
   </div>
@@ -81,6 +83,7 @@ import VHead from '@/view/popup/components/head.vue'
 import currencySelect from "@/view/components/currency-select.vue";
 import inputActionSheet from "@/view/components/input-action-sheet.vue";
 import { getBit } from "@/uilts/help";
+import { payCalcFee } from "@/http/pay";
 
 let currenciesData = ref([]);
 let currencyInfo = ref({
@@ -98,6 +101,10 @@ let enableWithdraw = ref(1);
 
 let showDepositInput = ref(false);
 
+let reqCalcIng = false;
+let depositDesc = ref('');
+let finalAmountData = ref({});
+
 
 
 const selectCurrency = (params) => {
@@ -260,21 +267,40 @@ const cancelDeposit = () => {
 }
 
 const confirmDeposit = (params) => {
-  let {inputVal} = params;
+  if(reqCalcIng) {
+    return;
+  }
+
   showDepositInput.value = false;
+  depositDesc.value = '';
 
-  // chrome.tabs.getCurrent(tab =>{
-  //   console.log(tab);
-      let achPayInfo = {
-          amountValue: inputVal
-      };
-      let guideUrl = chrome.runtime.getURL('/iframe/ach-cashier.html');
-      setChromeStorage({ achPayInfo : JSON.stringify(achPayInfo)});
+  let achPayInfo = {
+      amountValue: finalAmountData.value.finalAmountValue
+  };
+  let guideUrl = chrome.runtime.getURL('/iframe/ach-cashier.html');
+  setChromeStorage({ achPayInfo : JSON.stringify(achPayInfo)});
 
-      chrome.tabs.create({
-          url: guideUrl
-      });
-  // })
+  chrome.tabs.create({
+      url: guideUrl
+  });
+}
+
+const onDepositAmountInput = async (params = {}) => {
+  let {inputVal} = params;
+  reqCalcIng = true;
+  let res = await payCalcFee({
+      params: {
+          amountValue: inputVal,
+          currencyCode: currencyInfo.value.currencyCode,
+          payChannel: 'ach',
+      },
+  });
+  reqCalcIng = false;
+  if(res.code == 0) {
+    let {feeAmountValue, feeDesc} = res.data;
+    finalAmountData.value = res.data;
+    depositDesc.value = `Charge Fee：${feeAmountValue} USD（${feeDesc}）`;
+  }
 }
 
 onMounted(() => {
@@ -301,6 +327,7 @@ onMounted(() => {
       showSendBtn.value = true;
     }
 })
+
 </script>