1

admin

2026-04-29 1febaf2c9b7c7cb7f208624c4c2e9d972cf8b265

 src/views/cryptos/Withdraw/withdrawPage.vue

@@ -1,152 +1,99 @@
<template>
   <div id="cryptos">
      <div class="withdrawl-page font-28">
         <assets-head title="">
            <img src="../../../assets/image/assets-center/exchange.png" alt="exchange-img" class="w-44 h-38"
               @click="goRouter('/cryptos/assetsCenter/rechargeWithdrawRecord')" />
         </assets-head>
         <div class="px-32 pb-48">
            <!--<h1 class="font-52 pt-40 textColor">{{ $t('提币') }} USDT</h1>-->
            <h1 class="font-52 pt-40 textColor">{{ $t('提币 ') + value }} </h1>
            <!--<p class="text-grey font-30 mt-26">{{ $t('提币 USDT 到数字币地址') }}</p>-->
            <p class="text-grey font-30 mt-26">{{ $t('提币 ') + value + $t(' 到数字币地址') }}</p>
            <div @click="showSymbol = true"
               class="flex border-grey items-center items-center justify-between rounded-lg mt-42 inputBackground textColor">
               <input disabled v-model="value" class="flex-1 h-100 border-none px-16 inputBackground textColor" />
               <p class="flex items-center">
                  <span>{{ $t('选择币种') }}</span>
                  <img src="@/assets/image/icon-left_arrow.png" alt="logo" class="w-20 h-33 ml-30 mr-40"
                     style="transform: rotate(-90deg)" />
               </p>
   <div id="cryptos" class="withdraw-wrap">
      <assets-head :title="$t('提取')" :show-left="true" :back-func="goBack">
         <img src="../../../assets/image/assets-center/exchange.png" alt="" class="withdraw-head-icon"
            @click="goRouter('/cryptos/assetsCenter/rechargeWithdrawRecord')" />
      </assets-head>

      <!-- 第一部分：转账网络 + 选择币种 -->
      <div class="withdraw-part withdraw-part-1">
         <div class="withdraw-row" @click="showNetworkSheet = true">
            <span class="withdraw-label">{{ $t('转账网络') }}</span>
            <div class="withdraw-row-right">
               <span class="withdraw-value">{{ blockName || '–' }}</span>
               <van-icon name="arrow" class="withdraw-arrow" />
            </div>
            <p class="font-35 mt-44 textColor">{{ $t('区块链网络') }}</p>
            <ul class="flex mt-22  flex-wrap">
               <li class="w-210 h-96 mb-20 mr-40 rounded rounded-lg border border-solid flex justify-center items-center textColor"
                  :class="blockchainIndex == index ? 'active' : ''" v-for="(item, index) in blockList"
                  :key="item.id" @click="changeBlockchain(item, index)">{{ item.blockchain_name }}</li>
            </ul>
            <p class="font-35 mt-22 textColor">{{ $t('地址') }}</p>
            <div class="inputBackground flex items-center justify-between h-96 rounded mt-22">
               <input :placeholder="$t('长按粘贴')" class="h-full flex-1 border-none bg-none px-16 textColor"
                  v-model="address" />
               <div class="flex items-center">
                  <span class="colorMain" @click="pastCont">{{ $t('粘贴') }}</span>
                  <div>
                     <img @click="clickCode()" src="@/assets/image/public/scan.png" alt="logo"
                        class="w-65 h-65 ml-20 mr-30" />
                  </div>
         </div>
         <div class="withdraw-row" @click="showSymbol = true">
            <span class="withdraw-label">{{ $t('选择币种') }}</span>
            <div class="withdraw-row-right">
               <span class="withdraw-value">{{ value }}</span>
               <van-icon name="arrow" class="withdraw-arrow" />
            </div>
         </div>
      </div>
      <!-- 第二部分：地址 + 数量 -->
      <div class="withdraw-part withdraw-part-2">
         <div class="withdraw-block">
            <div class="withdraw-label">{{ $t('地址') }}</div>
            <div class="withdraw-input-row">
               <input v-model="address" type="text" class="withdraw-input" :placeholder="$t('长按粘贴')" />
               <span class="withdraw-paste" @click="pastCont">{{ $t('粘贴') }}</span>
               <img src="@/assets/image/public/scan.png" alt="scan" class="withdraw-scan" @click="clickCode" />
            </div>
         </div>
         <div class="withdraw-block">
            <div class="withdraw-label">{{ $t('数量') }}</div>
            <div class="withdraw-input-row withdraw-quantity-row">
               <input v-model="amount" type="number" class="withdraw-input" :placeholder="$t('请输入提币数量')"
                  maxlength="10" @input="changeInput" />
               <span class="withdraw-unit">{{ value }}</span>
               <span class="withdraw-all" @click="allBtn">{{ $t('全部') }}</span>
            </div>
            <div class="withdraw-fee-balance">
               <span class="withdraw-fee">{{ $t('提现费用') }}: {{ fee || '0' }} {{ value }}</span>
               <div class="withdraw-balance-col">
                  <span>{{ $t('可用') }}: {{ getwei(usdtBalance * 1, numLenth) || '0' }} {{ value }}</span>
                  <span>Locked: 0 {{ value }}</span>
                  <span>{{ $t('可提现') }}: ≈{{ getwei(usdtBalance * 1, numLenth) || '0' }} {{ value }}</span>
               </div>
            </div>
            <p class="font-35 mt-44 textColor">{{ $t('数量') }}</p>
            <div class="inputBackground flex items-center justify-between h-96 rounded mt-22">
               <input :placeholder="$t('请输入提币数量')" maxlength="10"
                  class="h-full flex-1 border-none bg-none px-16 font-22 textColor" type="number" v-model="amount"
                  @input="changeInput" />
               <p class="flex items-center">
                  <!--<span class="text-grey">USDT</span>-->
                  <span class="text-grey">{{ value }}</span>
                  <span class="colorMain ml-20 mr-30" @click="allBtn">{{ $t('全部') }}</span>
               </p>
            </div>
            <p class="flex justify-between text-grey mt-22 font-28">
               <span>{{ $t('可用') }}</span>
               <!--<span>{{ usdtBalance }} USDT</span>-->
               <span>{{ getwei(usdtBalance * 1, numLenth) }} {{ value }}</span>
            </p>
            <p class="text-grey mt-64 font-28">{{ $t('可到账数量') }}</p>
            <div class="font-40 mt-20 fon-bold ">
               <span class="font-40 font-700 textColor"> {{ volume_last || '0.00' }}</span>
               <!--<span class="font-32 ml-5 text-grey">USDT</span>-->
               <span class="font-32 ml-5 text-grey">{{ value }}</span>
            </div>
            <p class="text-grey mt-22 font-28">{{ $t('提现费用') }}：{{ fee || '0.00' }} {{ value }}</p>
            <p class="text-grey mt-10 textColor font-28">{{ $t('提币说明') }}：
            </p>
            <div class="text-grey mt-20 font-28" v-html="tip"></div>

            <p class="font-35 mt-2 textColor">{{ $t('fundsPassword') }}</p>
            <div class="inputBackground flex items-center justify-between h-96 rounded mt-22">
               <input :placeholder="$t('fundsPasswordContTips')" maxlength="6"
                  class="h-full flex-1 border-none bg-none px-16 font-22 textColor" v-model="safeword" />
            </div>

            <van-button
               class="w-768 h-100 rounded flex justify-center items-center mt-56  text-white btnMain border-none"
               @click="showDetail">
               {{ $t('提现') }}</van-button>

         </div>
         <van-popup v-model:show="show" position="bottom">
            <div class="pop-box relative font-28">
               <img src="@/assets/image/icon-close.png" class="w-38 h-38 absolute right-20 top-20"
                  @click="show = false" />
               <p class="font-38 text-center pt-60 textColor">{{ $t('确认订单') }}</p>
               <p class="font-35 mt-49 text-grey text-center">{{ $t('实际到账') }}</p>
               <p class="font-50 mt-23 text-center textColor">{{ volume_last }} <span class="text-grey font-35">
                     {{ value }}</span></p>
               <ul class="border-b-color px-32 pb-34">
                  <li class="flex justify-between font-32 mt-25 items-center">
                     <span class="textColor">{{ $t('提币地址') }}</span>
                     <span class="text-grey font-26">{{ address }}</span>
                  </li>
                  <li class="flex justify-between font-32 mt-25">
                     <span class="textColor">{{ $t('主网络') }}</span>
                     <span class="text-grey">{{ blockName }}</span>
                  </li>
                  <li class="flex justify-between font-32 mt-25">
                     <span class="textColor">{{ $t('提现来源账户') }}</span>
                     <span class="text-grey">{{ $t('钱包账户') }}</span>
                  </li>
               </ul>
               <ul class="px-32 mt-32">
                  <li class="flex justify-between font-32 mt-25">
                     <span class="textColor">{{ $t('币种') }}</span>
                     <span class="text-grey">{{ value }}</span>
                  </li>
                  <li class="flex justify-between font-32 mt-25">
                     <span class="textColor">{{ $t('金额') }}</span>
                     <span class="text-grey">{{ amount }}&nbsp;{{ value }}</span>
                  </li>
                  <li class="flex justify-between font-32 mt-25">
                     <span class="textColor">{{ $t('网络手续费') }}</span>
                     <span class="text-grey">{{ fee }}&nbsp;{{ value }}</span>
                  </li>
               </ul>
               <p class="px-32 mt-49 font-30 textColor">
                  1. {{ $t('请确保您输入了正确的提币地址并且您选择的转账网络与地址相匹配') }}
               </p>
               <p class="px-32 mt-40 font-30 textColor">2. {{ $t('提币订单创建后不可取消。') }}</p>
               <p class="w-768 h-100 rounded flex justify-center items-center mt-56 mb-48 btnMain text-white ml-32"
                  @click="onConfirm">
                  {{ $t('确定') }}
               </p>
            </div>
         </van-popup>
         <!-- 币种 -->
         <van-action-sheet v-model:show="showSymbol" :actions="actions.filter(item => item.name !== value)"
            @select="onSelect" />
         <bar-scan v-if="scancode" @ok="getResult"></bar-scan>
      </div>

      <div class="withdraw-body-footer">
         <van-button class="withdraw-submit-btn" @click="onMainSubmit">
            {{ $t('提交') }}
         </van-button>
      </div>

      <!-- Network 选择 -->
      <van-action-sheet v-model:show="showNetworkSheet" :actions="networkActions" @select="onSelectNetwork" />

      <!-- Currency 选择 -->
      <van-action-sheet v-model:show="showSymbol" :actions="actions.filter(item => item.name !== value)" @select="onSelect" />

      <!-- Payment Password 弹框 (图二) -->
      <van-popup v-model:show="showPasswordPopup" position="bottom" round class="withdraw-password-popup">
         <div class="withdraw-password-box">
            <div class="withdraw-password-head">
               <span class="withdraw-password-title">{{ $t('fundsPassword') }}</span>
               <van-icon name="cross" class="withdraw-password-close" @click="showPasswordPopup = false" />
            </div>
            <input v-model="safeword" type="password" class="withdraw-password-input"
               :placeholder="$t('fundsPasswordContTips')" maxlength="6" />
            <div class="withdraw-password-forgot-wrap">
               <span class="withdraw-password-forgot" @click="onForgotPassword">{{ $t('忘记资金密码?') }}</span>
            </div>
            <van-button class="withdraw-password-submit" @click="onConfirm">
               {{ $t('提交') }}
            </van-button>
         </div>
      </van-popup>

      <bar-scan v-if="scancode" @ok="getResult"></bar-scan>
   </div>
</template>

<script>
import {
   Popup,
   ActionSheet,
   showToast
} from "vant"
import Axios from "@/service/recharge.js"
import {
   _withdrawFee,
   _withdrawApply
} from "@/service/withdraw.api.js"
import { Popup, ActionSheet, showToast } from "vant";
import Axios from "@/service/recharge.js";
import { _widtGetSessionToken, _withdrawFee, _withdrawApply } from "@/service/withdraw.api.js";
import assetsHead from "@/components/Transform/assets-head/index.vue";
import BarScan from '@/components/Transform/scan/scan.vue';
import {
   _getAllWallet
} from "@/service/fund.api";
import { _getAllWallet } from "@/service/fund.api";
import { throttle } from "@/utils/index.js";

export default {
   name: "withdrawPage",
   components: {
@@ -158,325 +105,418 @@
   data() {
      return {
         tip: '',
         value: 'USDT', //选中的币种
         show: false,
         value: 'USDT',
         showSymbol: false,
         actions: [{
            name: 'USDT'
         }, {
            name: 'BTC'
         }, {
            name: 'ETH'
         }, {
            name: 'USDC'
         }],
         showNetworkSheet: false,
         showPasswordPopup: false,
         actions: [{ name: 'USDT' }, { name: 'BTC' }, { name: 'ETH' }, { name: 'USDC' }],
         blockList: [],
         blockchainIndex: "",
         usdtBalance: "", //余额
         amount: "", //提现金额
         fee: "", //手续费
         volume_last: "", //到账金额
         blockName: "", //当前链名称
         address: "", // 二维码扫描结果
         scancode: false, //控制是否使用扫一扫功能
         blockchainIndex: 0,
         usdtBalance: "",
         amount: "",
         fee: "",
         volume_last: "",
         blockName: "",
         address: "",
         scancode: false,
         withdraw_fee_type: '',
         percent: 0,
         numLenth: 3,
         safeword: '' //资金密码
         safeword: '',
         sessionToken: ''
      };
   },
   computed: {
      networkActions() {
         return (this.blockList || []).map((item, index) => ({
            name: item.blockchain_name,
            index
         }));
      }
   },
   created() {
      _widtGetSessionToken().then((res) => {
         this.sessionToken = (res && res.session_token) ? res.session_token : '';
      }).catch(() => {});
      this.getBlock(this.value);
      this.getAvailable(this.actions[0].name);


      Axios.getRechargeTips({
         language: this.$i18n.locale,
         token: this.$store.state.user.userInfo.token,
         content_code: '003',
      }).then(res => {
         this.tip = res.content
      }).catch(err => {
         if (err.code === 'ECONNABORTED') {
            showToast(this.$t('网络超时！'));
         } else if (err.msg !== undefined) {
            showToast(this.$t(err.msg));
         }
      })
      _withdrawFee({
         amount: 1,
         channel: this.value + '_' + this.blockName
      }).then((res) => {
         this.withdraw_fee_type = res.withdraw_fee_type
         if (this.withdraw_fee_type == 'rate') {
            this.percent = res.fee
         } else {
            this.fee = res.fee;
         }
      });
         this.tip = res.content;
      }).catch(() => {});
      this.fetchFee();
   },
   methods: {
      getwei(value, numLenth) {
         console.log(numLenth)
         let str = value.toString();
         let strIndex = str.indexOf('.');
         if (strIndex === -1) return str;
         str = str.substring(0, strIndex + numLenth);
         console.log(str, numLenth)
         return str;
      goBack() {
         this.$router.push('/quotes/index?tabActive=1');
      },
      // 打开相机
      fetchFee() {
         _withdrawFee({
            amount: 1,
            channel: this.value + '_' + (this.blockName || (this.blockList[0] && this.blockList[0].blockchain_name))
         }).then((res) => {
            this.withdraw_fee_type = res.withdraw_fee_type;
            if (this.withdraw_fee_type === 'rate') {
               this.percent = res.fee;
            } else {
               this.fee = res.fee;
            }
         }).catch(() => {});
      },
      getwei(value, numLenth) {
         let str = (value || 0).toString();
         const strIndex = str.indexOf('.');
         if (strIndex === -1) return str;
         return str.substring(0, strIndex + numLenth);
      },
      clickCode() {
         this.scancode = true;
      },
      //返回扫描结果并关闭摄像头
      getResult(result) {
         this.address = result;
         if (result !== "") {
            this.scancode = false;
         }
         this.address = result || '';
         if (result !== "") this.scancode = false;
      },
      showDetail() {
         if (this.address.length > 63 || this.address.length == 0) {
            showToast(this.$t('提现地址格式错误'))
            return
      onMainSubmit() {
         if (!this.address || this.address.length > 63) {
            showToast(this.$t('提现地址格式错误'));
            return;
         }
         if (!this.amount) {
            showToast(this.$t('请输入正确数量'))
            return
            showToast(this.$t('请输入正确数量'));
            return;
         }
         if (this.amount / 1 > this.usdtBalance / 1) {
            showToast(this.$t('金额不足'))
            return
            showToast(this.$t('金额不足'));
            return;
         }
         this.show = true;
         this.showPasswordPopup = true;
      },
      onSelectNetwork(item) {
         this.blockchainIndex = item.index;
         this.blockName = item.name;
         this.showNetworkSheet = false;
         this.fetchFee();
      },
      goRouter(params) {
         this.$router.push({
            path: params,
            query: {
               type: '2',
               back: "1"
            }
         });
         this.$router.push({ path: params, query: { type: '2', back: "1" } });
      },
      // onConfirm() {
      //     this.$router.push('/withdraw/withdrawSumbit')
      // },
      //选中币种
      onSelect(item) {
         this.amount = ''
         this.volume_last = ''
         this.fee = ''
         this.amount = '';
         this.volume_last = '';
         this.fee = '';
         this.showSymbol = false;
         this.value = item.name;
         this.withdraw_fee_type = ''
         this.withdraw_fee_type = '';
         this.getBlock(item.name);
         this.getAvailable(item.name)
         if (item.name == 'BTC' || item.name == 'ETH') {
            this.numLenth = 7
         this.getAvailable(item.name);
         if (item.name === 'BTC' || item.name === 'ETH') {
            this.numLenth = 7;
            _withdrawFee({
               amount: 1,
               channel: this.value + '_' + this.blockName
            }).then((res) => {
               this.withdraw_fee_type = res.withdraw_fee_type
               if (this.withdraw_fee_type == 'fixed') {
                  this.fee = res.fee;
               } else {
                  this.percent = res.fee
               }
               this.withdraw_fee_type = res.withdraw_fee_type;
               if (this.withdraw_fee_type === 'fixed') this.fee = res.fee;
               else this.percent = res.fee;
            });
         } else {
            this.numLenth = 3
            this.numLenth = 3;
         }
      },
      //根据币种获取链地址
      getBlock(symbol) {
         Axios.getBlock({
            coin: symbol
         }).then((res) => {
            this.blockList = res;
            this.blockName = res[0].blockchain_name;
         Axios.getBlock({ coin: symbol }).then((res) => {
            this.blockList = res || [];
            this.blockName = this.blockList[0] ? this.blockList[0].blockchain_name : '';
            this.blockchainIndex = 0;
            this.fetchFee();
         });
      },
      //选中链名称
      changeBlockchain(item, index) {
         this.blockchainIndex = index;
         this.blockName = item.blockchain_name;
      },
      //获取钱包余额
      getAvailable(symbol) {
         _getAllWallet().then((res) => {
            let walletList = res.extends;
            let initObj = walletList.find(item => {
               return item.symbol_data.toLowerCase() == symbol.toLowerCase()
            })
            this.usdtBalance = initObj.volume
            const walletList = (res.extends || []);
            const initObj = walletList.find(item => (item.symbol_data || '').toLowerCase() === (symbol || '').toLowerCase());
            this.usdtBalance = initObj ? initObj.volume : '';
         });
      },
      //点全部
      allBtn() {
         this.amount = this.getwei(this.usdtBalance, this.numLenth);
         this.changeInput()
         this.changeInput();
      },
      //输入改变
      changeInput() {
         if (this.amount === '') {
            this.volume_last = '0.00'
            return
            this.volume_last = '0.00';
            return;
         }
         if (this.amount.length > 11) {
            this.amount = this.amount.slice(0, 11)
         }

         if (this.withdraw_fee_type == 'part') {
         if (this.amount.length > 11) this.amount = this.amount.slice(0, 11);
         if (this.withdraw_fee_type === 'part') {
            _withdrawFee({
               amount: this.amount,
               channel: this.value + '_' + this.blockName
            }).then((res) => {
               console.log(res)
               this.fee = res.fee;
               this.volume_last = res.volume_last;
            });
         } else if (this.withdraw_fee_type == 'rate') {
            if (this.amount == '') {
               this.volume_last = 0
            } else {
               this.fee = this.getwei(this.percent * this.amount, this.numLenth)
               this.volume_last = this.getwei(this.amount * 1 - this.percent * this.amount, this.numLenth)
            }
         } else if (this.withdraw_fee_type === 'rate') {
            this.fee = this.amount ? this.getwei(this.percent * this.amount, this.numLenth) : '0';
            this.volume_last = this.amount ? this.getwei(this.amount * 1 - this.percent * this.amount, this.numLenth) : '0';
         } else {
            if (this.amount * 1 < this.fee * 1) {
               console.log('a')
               this.volume_last = 0
            } else {
               this.volume_last = this.getwei(this.amount * 1 - this.fee * 1, this.numLenth)
            }
            this.volume_last = (this.amount * 1 < this.fee * 1) ? '0' : this.getwei(this.amount * 1 - this.fee * 1, this.numLenth);
         }

      },
      //提币提交
      onForgotPassword() {
         this.showPasswordPopup = false;
         // 可跳转忘记资金密码页
      },
      onConfirm: throttle(function () {
         if (!this.amount) {
            showToast(this.$t('请输入数量'));
            return;
         }

         let numReg = /^[0-9]+([.]{1}[0-9]+){0,1}$/;
         const numReg = /^[0-9]+([.]{1}[0-9]+){0,1}$/;
         if (!numReg.test(this.amount)) {
            showToast(this.$t('请输入数字'));
            return;
         }

         if (!this.address) {
            showToast(this.$t('请输入提现地址'));
            return;
         }

         if (!this.safeword) {
            showToast(this.$t('fundsPasswordContTips'));
            return;
         }

         if (this.amount && this.address) {
            // this.$router.push({
            //   path: '/cryptos/withdraw/securityVerification',
            //   query: {
            //     amount: this.amount,
            //     from: this.address,
            //     channel: this.value + '_' + this.blockName
            //   }
            // })
            //       _withdrawApply({
            //         session_token:this.sessionToken,
            //         amount:this.amount,
            //         from:this.address,
            //         channel:this.value+'_'+ this.blockName
            //     }).then((res)=> {
            //         if(res.code==0) {
            //             this.$router.push({
            //                 path:"/withdraw/withdrawSumbit"
            //             });
            //         }else{
            // showToast(this.$t(res.msg));
            //         }
            //     });
            _withdrawApply({
               session_token: this.sessionToken,
               amount: this.amount,
               safeword: this.safeword,
               from: this.address,
               channel: this.value + '_' + this.blockName
            }).then((res) => {

               this.$router.push({
                  path: "/cryptos/withdraw/withdrawSumbit"
               });

            }).catch(err => {
               //console.log(err)
               if (err.code == 105) {
                  showToast(this.$t('当前还需交易%s,才可提币', {
                     'MONEY': err.msg
                  }));
               } else if (err.code === 'ECONNABORTED') {
                  showToast(this.$t('网络超时！'))
               } else if (err.msg !== undefined) {
                  showToast(this.$t(err.msg))
               }
               // this.getToken()
            })
         } else {
            showToast(this.$t('请输入提币数量'));
         }
         _withdrawApply({
            session_token: this.sessionToken,
            amount: this.amount,
            safeword: this.safeword,
            from: this.address,
            channel: this.value + '_' + this.blockName
         }).then(() => {
            this.showPasswordPopup = false;
            this.$router.push({ path: "/cryptos/withdraw/withdrawSumbit" });
         }).catch(err => {
            if (err.code == 105) {
               showToast(this.$t('当前还需交易%s,才可提币', { 'MONEY': err.msg }));
            } else if (err.code === 'ECONNABORTED') {
               showToast(this.$t('网络超时！'));
            } else if (err.msg !== undefined) {
               showToast(this.$t(err.msg));
            }
         });
      }, 1000),
      async pastCont() {
         this.address = await navigator.clipboard.readText();
         try {
            if (navigator.clipboard && navigator.clipboard.readText) {
               this.address = await navigator.clipboard.readText();
            }
         } catch (e) {}
      }
   }
}
};
</script>

<style lang="scss" scoped>
@import "@/assets/init.scss";

#cryptos {
   .withdrawl-page {
      width: 100%;
      box-sizing: border-box;
      font-size: 26px;
   }

   .van-popup.van-popup--bottom {
      border-top-left-radius: 30px;
      border-top-right-radius: 30px;
   }

   .pop-box {
      border-top-left-radius: 30px;
      border-top-right-radius: 30px;
   }

   .color-blue {
      color: $btn_main;
   }

   .bg-grey-light {
      background: $light-grey;
   }

   li {
      &.active {
         border-color: $color_main;
         color: $color_main;
      }
   }

   .van-button--default {
      color: $text_color;
   }

   .btnMain {
      background: $btn_main;
   }
.withdraw-wrap {
   min-height: 100vh;
   background: #f5f5f5;
   padding-bottom: 2rem;
}
</style>
.withdraw-head-icon {
   width: 1.375rem;
   height: 1.1875rem;
}
/* 两个独立 div：上下边距各 20px */
.withdraw-part {
   margin: 20px 1rem;
   padding: 0 1.5rem;
   background: #fff;
   border-radius: 0.5rem;
   overflow: hidden;
}
.withdraw-body-footer {
   margin: 20px 1rem 2rem;
   padding: 20px 0;
}
/* 字体加大 */
.withdraw-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   min-height: 4rem;
   padding: 40px 0;
   font-size: 34px;
}
.withdraw-label {
   color: #333;
   font-weight: 600;
}
.withdraw-row-right {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 0.25rem;
}
.withdraw-value {
   color: #333;
   text-align: right;
}
.withdraw-arrow {
   color: #999;
   font-size: 34px;
   flex-shrink: 0;
}
.withdraw-block {
   padding: 1rem 0;
}
.withdraw-block .withdraw-label {
   display: block;
   margin-bottom: 0.75rem;
   font-size: 34px;
   color: #333;
}
.withdraw-input-row {
   display: flex;
   align-items: center;
   background: transparent;
   border-radius: 0.5rem;
   padding: 0 1rem;
   height: 4rem;
}
.withdraw-input {
   flex: 1;
   border: none;
   background: transparent;
   font-size: 34px;
   color: #333;
   outline: none;
}
.withdraw-input::placeholder {
   color: #9b9b9b;
}
.withdraw-paste {
   font-size: 32px;
   color: #5e2bc8;
   margin-left: 0.5rem;
   cursor: pointer;
}
.withdraw-scan {
   width: 2.25rem;
   height: 2.25rem;
   margin-left: 0.75rem;
   cursor: pointer;
}
.withdraw-quantity-row .withdraw-unit {
   font-size: 28px;
   color: #9b9b9b;
   margin-left: 0.5rem;
}
.withdraw-all {
   font-size: 32px;
   color: #5e2bc8;
   margin-left: 0.75rem;
   cursor: pointer;
}
.withdraw-fee-balance {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   margin-top: 0.75rem;
   font-size: 28px;
   color: #9b9b9b;
   font-weight: normal;
}
.withdraw-balance-col {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   font-weight: normal;
}
.withdraw-balance-col span {
   line-height: 1.5;
}
.withdraw-submit-btn {
   width: 100%;
   margin: 20px 0;
   padding: 20px 0;
   border: none;
   border-radius: 0.5rem;
   background: linear-gradient(90deg, #a443cf, #5e2bc8);
   color: #fff !important;
   font-size: 38px;
   font-weight: 600;
}
:deep(.withdraw-submit-btn .van-button__text) {
   color: #fff !important;
}

/* Payment Password 弹框 - 字体加大 */
.withdraw-password-popup {
   border-radius: 1rem 1rem 0 0;
}
.withdraw-password-box {
   padding: 2rem 1.5rem 3rem;
   background: #fff;
}
.withdraw-password-head {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 2.5rem;
}
.withdraw-password-title {
   font-size: 42px;
   font-weight: 600;
   color: #333;
   text-align: center;
}
.withdraw-password-close {
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   font-size: 38px;
   color: #999;
   cursor: pointer;
}
.withdraw-password-input {
   width: 100%;
   padding: 2rem 1rem;
   background: #f6f6f6;
   border: none;
   border-radius: 0.5rem;
   font-size: 34px;
   color: #333;
   box-sizing: border-box;
   outline: none;
}
.withdraw-password-input::placeholder {
   color: #9b9b9b;
}
.withdraw-password-forgot-wrap {
   text-align: right;
   margin-top: 0.75rem;
   margin-bottom: 1.5rem;
}
.withdraw-password-forgot {
   font-size: 32px;
   color: #666;
   cursor: pointer;
}
.withdraw-password-submit {
   width: 100%;
   border: none;
   border-radius: 0.5rem;
   background: linear-gradient(90deg, #a443cf, #5e2bc8);
   color: #fff !important;
   font-size: 38px;
   font-weight: 600;
   margin-bottom: 40px;
}
:deep(.withdraw-password-submit .van-button__text) {
   color: #fff !important;
}
</style>