소스 검색

[edit] popup US deposit

wenliming 2 년 전
부모
커밋
25f171eab5
3개의 변경된 파일120개의 추가작업 그리고 10개의 파일을 삭제
  1. 3 1
      src/logic/background/denet.js
  2. 85 9
      src/view/components/input-action-sheet.vue
  3. 32 0
      src/view/popup/currency-detail.vue

+ 3 - 1
src/logic/background/denet.js

@@ -7,7 +7,9 @@ export const closeAchPayNoticeHandler = async () => {
         id, () => {
             getChromeStorage('achPayInfo', (res) => {
                 chrome.storage.local.remove("achPayInfo");
-                chrome.tabs.highlight({ windowId: res.tab.windowId, tabs: res.tab.index })
+                if(res && res.tab) {
+                    chrome.tabs.highlight({ windowId: res.tab.windowId, tabs: res.tab.index })
+                }
             })
         }
     )

+ 85 - 9
src/view/components/input-action-sheet.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="input-action-sheet-wrapper">
+    <div class="input-action-sheet-wrapper" v-if="visible" :style="{position: position}">
         <div class="input-action-sheet-content">
             <div class="title">
-
+                {{title}}
             </div>
             <div class="input-wrapper">
                 <input class="input" 
@@ -13,11 +13,11 @@
                     @blur="onValueBlur">
             </div>
             <div class="btn-wrapper">
-                <div class="btn cancel">
-
+                <div class="btn cancel" @click="cancel">
+                    {{cancelText}}
                 </div>
-                <div class="btn confirm">
-
+                <div class="btn confirm" @click="confirm">
+                    {{confirmText}}
                 </div>
             </div>
         </div>
@@ -30,6 +30,14 @@ import { ref, defineProps, defineEmits } from "vue";
 let inputVal = ref('');
 
 const props = defineProps({
+    visible: {
+        type: Boolean,
+        default: false
+    },
+    position: {
+        type: String,
+        default: 'fixed'
+    },
     title: {
         type: String,
         default: '',
@@ -54,11 +62,10 @@ const onValueBlur = () => {
     inputValHandler();
 }
 
-//       emits("postPublishFinish", { publishRes });
 
 const inputValHandler = () => {
     let val = inputVal.value;
-    val = val.replace(/[^\d^\.]+/g, "");
+    val = val.replace(/^\D*(\d*(?:\.\d{0,18})?).*$/g, '$1');
 
     if(val == '00') {
         val = '0'
@@ -75,6 +82,16 @@ const inputValHandler = () => {
     return val;
 }
 
+const cancel = () => {
+    emits("cancel", { });
+}
+
+const confirm = () => {
+    if(inputVal.value > 0) {
+        emits("confirm", { inputVal: inputVal.value });
+    }
+}
+
 </script>
 
 <style scoped lang="scss">
@@ -82,20 +99,79 @@ const inputValHandler = () => {
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
+    position: fixed;
+    top: 0;
+    left: 0;
 
     .input-action-sheet-content {
         width: 335px;
-        height: 186px;
+        min-height: 186px;
         background: #fff;
         border-radius: 20px;
         padding: 20px 15px;
         box-sizing: border-box;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        z-index: 1000;
+        transform: translate(-50%, -50%);
 
         .title {
             font-weight: 600;
             font-size: 16px;
         }
         
+        .input-wrapper {
+            width: 100%;
+            border: 1px solid #DFDFDF;
+            border-radius: 5px;
+            box-sizing: border-box;
+            height: 42px;
+            margin: 17px 0 23px 0;
+
+            .input {
+                width: 100%;
+                height: 100%;
+                outline: none;
+                border: none;
+                padding: 0 10px;
+                box-sizing: border-box;
+                border-radius: 5px;
+                font-weight: 600;
+                font-size: 16px;
+            }
+
+            .input::placeholder {
+                color: #B3B3B3;
+            }
+        }
+
+        .btn-wrapper {
+            display: flex;
+            justify-content: space-between;
+
+            .btn {
+                width: 150px;
+                height: 47px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-weight: 500;
+                font-size: 16px;
+                box-sizing: border-box;
+                border-radius: 1000px;
+                cursor: pointer;
+            }
+
+            .cancel {
+                border: 1px solid #CFCFCF;
+            }
+
+            .confirm {
+                color: #fff;
+                background: #1D9BF0;
+            }
+        }
     }
 }
 </style>

+ 32 - 0
src/view/popup/currency-detail.vue

@@ -59,6 +59,12 @@
         </div>
         <div class="selectBg" @click="showCurrencySelect = false"></div>
     </template>
+    <input-action-sheet 
+      :visible="showDepositInput"
+      title="Enter the USD amount to be deposited"
+      position="absolute"
+      @cancel="cancelDeposit"
+      @confirm="confirmDeposit"></input-action-sheet>
   </div>
 </template>
 
@@ -73,6 +79,7 @@ import {setChromeStorage} from "@/uilts/chromeExtension"
 
 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";
 
 let currenciesData = ref([]);
@@ -88,6 +95,8 @@ let showSendBtn = ref(true);
 
 let showUSDepositBtn = ref(true);
 
+let showDepositInput = ref(false);
+
 
 
 const selectCurrency = (params) => {
@@ -157,6 +166,7 @@ const clickDeposit = () => {
       let currencyInfo = currenciesData.value[0];
       if(currencyInfo.currencyCode == 'USD') {
         // 法币充值
+        showDepositInput.value = true;
           
       } else {
         depositHandle(currencyInfo);
@@ -218,6 +228,28 @@ const setLocalSelectCurrencyInfo = (params = {}) => {
     setChromeStorage({ selectCurrencyInfo : JSON.stringify(params)})    
 }
 
+const cancelDeposit = () => {
+  showDepositInput.value = false;
+}
+
+const confirmDeposit = (params) => {
+  let {inputVal} = params;
+  showDepositInput.value = false;
+
+  // 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)});
+
+      chrome.tabs.create({
+          url: guideUrl
+      });
+  // })
+}
+
 onMounted(() => {
     let {params = '{}'} = router.currentRoute.value.query;