js

src/assets/css/wallet/wallet.css

@@ -654,7 +654,7 @@
     background: #1080d0;
     color: #ffffff;
     font-size: 16px;
-    z-index: 999999999999;
+    z-index: 999;
     transition: all 0.2s ease;
 }
 

src/views/wallet/Withdraw.vue

@@ -13,17 +13,17 @@
             </p>
             <div class="withdraw-amount">
                 <p><em>*</em> 提现金额</p>
-                <span>￥</span><input type="number" class="money" v-model="withdrawNum"/>
+                <span>￥</span><input type="text" readonly="readonly" @touchstart.stop="moneyBtn = true" class="money" v-model="withdrawNum"/>
                 <div v-if="amountNum" class="withdraw-money">可提现金额 {{walletInfoData.wallet_usable_format}}，<span @click="withdraw">全部提现</span></div>
                 <div v-else class="amount-tips">输入金额超过可提现金额</div>
             </div>
             <div class="withdraw-password">
                 <p><em>*</em> 支付密码</p>
                 <template v-if="showPassword">
-                    <input type="password" placeholder="请输入支付密码" class="va-m inp password" v-model="password"/>
+                    <input type="password" readonly="readonly"  @touchstart.stop="passwdBtn = true" placeholder="请输入支付密码" class="va-m inp password" v-model="password"/>
                 </template>
                 <template v-else>
-                    <input type="text" placeholder="请输入支付密码" class="va-m inp password" v-model="password"/>
+                    <input type="text" readonly="readonly"  @touchstart.stop="passwdBtn = true"  placeholder="请输入支付密码" class="va-m inp password" v-model="password"/>
                 </template>
                 <van-icon v-if="showPassword" name="closed-eye" class="va-m f-r" @click="changeShow"/>
                 <van-icon v-else name="eye-o" class="va-m f-r" @click="changeShow"/>
@@ -31,6 +31,9 @@
 
             <button :disabled="amountWithdrawFlag" class="submit" :class="withdrawNum == '' || amountWithdrawFlag ? 'submitNO' : ''" @click="submit">提交</button>
         </div>
+
+        <van-number-keyboard :show="moneyBtn" theme="custom" extra-key="." close-button-text="完成" @blur="moneyBtn = false;passwdBtn=false;" @input="onInput" @delete="onDelete" :zIndex="zIndex"/>
+        <van-number-keyboard :show="passwdBtn" theme="custom" extra-key="." close-button-text="完成" @blur="passwdBtn = false;passwdBtn=false;" @input="onInputPwd" @delete="onDeletePwd" :zIndex="zIndex"/>
     </section>
 </template>
 
@@ -38,9 +41,9 @@
   import Vue from 'vue';
   import {mapState} from 'vuex'
   import Header from '@/views/common/Header.vue';
-  import {Icon, Toast} from 'vant';
+  import {Icon, Toast, NumberKeyboard} from 'vant';
 
-  Vue.use(Icon);
+  Vue.use(Icon).use(NumberKeyboard);
 
   export default {
     name: 'walletWithdraw',
@@ -52,7 +55,10 @@
         amountNum: true,
         password: '',
         withdrawNum: '',
-        clickFlag: true
+        clickFlag: true,
+        moneyBtn: false,
+        passwdBtn:false,
+        zIndex: 999999
       }
     },
     computed: {
@@ -98,6 +104,18 @@
             });
           }
         }
+      },
+      onInput(key) {
+        this.withdrawNum =  (this.withdrawNum + key);
+      },
+      onDelete(key) {
+        this.withdrawNum = this.withdrawNum.slice(0, this.withdrawNum.length - 1);
+      },
+      onInputPwd(key){
+        this.password =  (this.password + key);
+      },
+      onDeletePwd(key){
+        this.password = this.password.slice(0, this.password.length - 1);
       }
     },
     components: {