<template>
  <view>
    <!-- 顶部显示到账银行卡 -->
    <view class='top'>
      <text class='bank'>到账银行卡</text>
      <text class='card'>**** **** **** 1234</text>
      <text class='switch'>切换银行卡</text>
    </view>
    <!-- 中间是提现金额 -->
    <view class='middle'>
      <text class='title'>提现金额</text>
      <view class='input-wrapper'>
        <text class='symbol'>¥</text>
        <input type='number' class='input' placeholder='0.00' />
      </view>
      <text class='balance'>当前余额:¥888.88</text>
      <text class='all'>全部提现</text>
    </view>
    <!-- 下方是键盘输入提现金额 -->
    <view class='keyboard-wrapper'>
      <view class='keyboard-row'>
        <text class='keyboard-btn'>1</text>
        <text class='keyboard-btn'>2</text>
        <text class='keyboard-btn'>3</text>
      </view>
      <view class='keyboard-row'>
        <text class='keyboard-btn'>4</text>
        <text class='keyboard-btn'>5</text>
        <text class='keyboard-btn'>6</text>
      </view>
      <view class='keyboard-row'>
        <text class='keyboard-btn'>7</text>
        <text class='keyboard-btn'>8</text>
        <text class='keyboard-btn'>9</text>
      </view>
      <view class='keyboard-row'>
        <text class='keyboard-btn'></text>
        <text class='keyboard-btn'>0</text>
        <text class='keyboard-btn'>.</text>
      </view>
    </view>
  </view>
</template>
<style>
  /* 样式可以根据需要自行修改 */
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
  }
  .bank {
    font-size: 16px;
    font-weight: bold;
  }
  .card {
    font-size: 20px;
    font-weight: bold;
  }
  .switch {
    color: #007aff;
  }
  .middle {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
  }
  .title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  .input-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .symbol {
    font-size: 24px;
    margin-right: 10px;
  }
  .input {
    font-size: 32px;
    font-weight: bold;
    border: none;
    text-align: center;
    width: 100%;
  }
  .balance {
    font-size: 14px;
    color: #999;
    margin-bottom: 20px;
  }
  .all {
    color: #007aff;
    font-size: 16px;
    font-weight: bold;
  }
  .keyboard-wrapper {
    background-color: #f2f2f2;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
  }
  .keyboard-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .keyboard-btn {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 20px;
    font-weight: bold;
    padding: 12px 20px;
    text-align: center;
    width: calc(33.33% - 8px);
  }
</style>
UniApp 微信零钱提现页面代码:实现银行卡切换、金额输入、余额显示

原文地址: http://www.cveoy.top/t/topic/oneH 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录