uniapp 实现微信零钱提现页面 - 代码示例

<template>
  <view class='withdraw-container'>
    <view class='withdraw-header'>
      <image src='/static/bank-icon.png' class='bank-icon' />
      <view class='bank-info'>
        <text class='bank-name'>{{bankName}}</text>
        <text class='bank-card'>{{bankCard}}</text>
      </view>
      <image src='/static/switch-icon.png' class='switch-icon' />
    </view>
    <view class='withdraw-amount'>
      <text class='withdraw-title'>提现金额</text>
      <view class='amount-input'>
        <text class='rmb-symbol'>￥</text>
        <input type='number' class='amount-input-box' placeholder='请输入提现金额' />
        <text class='balance-info'>当前余额：{{balance}}元</text>
        <text class='all-withdraw'>全部提现</text>
      </view>
    </view>
    <view class='keyboard-container'>
      <view class='keyboard-row'>
        <view class='keyboard-key' @click='inputNumber(1)'>1</view>
        <view class='keyboard-key' @click='inputNumber(2)'>2</view>
        <view class='keyboard-key' @click='inputNumber(3)'>3</view>
      </view>
      <view class='keyboard-row'>
        <view class='keyboard-key' @click='inputNumber(4)'>4</view>
        <view class='keyboard-key' @click='inputNumber(5)'>5</view>
        <view class='keyboard-key' @click='inputNumber(6)'>6</view>
      </view>
      <view class='keyboard-row'>
        <view class='keyboard-key' @click='inputNumber(7)'>7</view>
        <view class='keyboard-key' @click='inputNumber(8)'>8</view>
        <view class='keyboard-key' @click='inputNumber(9)'>9</view>
      </view>
      <view class='keyboard-row'>
        <view class='keyboard-key' @click='clearInput'>清除</view>
        <view class='keyboard-key' @click='inputNumber(0)'>0</view>
        <view class='keyboard-key' @click='deleteNumber'>删除</view>
      </view>
    </view>
    <view class='withdraw-button' @click='doWithdraw'>提现</view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      bankName: '中国银行', // 银行名称
      bankCard: '**** **** **** 1234', // 银行卡号
      balance: 1000, // 当前余额
      withdrawAmount: '', // 提现金额
    };
  },
  methods: {
    inputNumber(num) {
      this.withdrawAmount += num;
    },
    deleteNumber() {
      this.withdrawAmount = this.withdrawAmount.slice(0, -1);
    },
    clearInput() {
      this.withdrawAmount = '';
    },
    doWithdraw() {
      // TODO: 提现操作
    },
  },
};
</script>
<style>
.withdraw-container {
  padding: 16px;
}

.withdraw-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.bank-icon {
  width: 48px;
  height: 48px;
  margin-right: 16px;
}

.bank-info {
  flex: 1;
}

.bank-name {
  font-size: 18px;
  color: #333;
  margin-bottom: 8px;
}

.bank-card {
  font-size: 16px;
  color: #666;
}

.switch-icon {
  width: 24px;
  height: 24px;
}

.withdraw-amount {
  margin-bottom: 16px;
}

.withdraw-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 8px;
}

.amount-input {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 12px;
}

.rmb-symbol {
  font-size: 24px;
  color: #333;
  margin-right: 8px;
}

.amount-input-box {
  flex: 1;
  font-size: 24px;
  color: #333;
  outline: none;
  border: none;
  background-color: transparent;
}

.balance-info {
  font-size: 12px;
  color: #666;
  margin-left: 8px;
}

.all-withdraw {
  font-size: 14px;
  color: #007aff;
  margin-left: 16px;
}

.keyboard-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 8px;
  margin-bottom: 16px;
}

.keyboard-row {
  display: flex;
  justify-content: space-between;
}

.keyboard-key {
  flex: 1;
  font-size: 24px;
  color: #333;
  background-color: #f1f1f1;
  border-radius: 4px;
  text-align: center;
  padding: 12px;
}

.withdraw-button {
  font-size: 16px;
  color: #fff;
  background-color: #007aff;
  border-radius: 4px;
  text-align: center;
  padding: 12px;
}
</styl