kailin_mp/pages/user/withdraw.vue

<template>
  <view class="withdraw" catchtouchmove="true">
    <view class="withdraw_content">
      <view class="title">提现金额</view>
      <view class="content">
        <view>￥</view>
        <input type="number" class="input" v-model="withdrawAmount" @blur="_valiteMoney" />
      </view>
      <view class="bottom">
        <text>当前可提现余额{{ maxWithdrawAmount }}元</text>
        <view style="color: #5baff4" @click="_getAll">全部提现</view>
      </view>
    </view>
    <button class="withdraw_btn" :class="isDisabled ? 'disabled' : ''" @click="_getMoney">确定提现</button>
  </view>
</template>

<script setup>
import { ref, watch } from "vue";

const withdrawAmount = ref(0);
const maxWithdrawAmount = ref(134.14);
const isDisabled = ref(true);

const _valiteMoney = (e) => {
  if (!isNaN(e.target.value)) {
    if (maxWithdrawAmount.value < e.target.value) {
      withdrawAmount.value = maxWithdrawAmount.value;
    } else withdrawAmount.value = e.target.value;
  } else {
    // 如果不是数字，可以设置为0或者其他默认值
    withdrawAmount.value = 0;
  }
};

const _getAll = () => {
  withdrawAmount.value = maxWithdrawAmount.value;
};

const _getMoney = () => {
  if (isDisabled.value) return;
  uni.showModal({
    title: "温馨提示",
    content: "您已成功提现，请注意查看信息",
    showCancel: false,
    confirmText: "确认",
    success: (res) => {
      if (res.confirm) {
        console.log("用户点击确认");
      }
    },
  });
};

watch(withdrawAmount, (newValue) => {
  isDisabled.value = isNaN(newValue) || newValue == 0;
});
</script>

<style lang="less" scoped>
.withdraw {
  width: 100vw;
  height: 100vh;
  padding: 46rpx 26rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  background-color: #ffffff;
  .withdraw_content {
    border: 1px solid #f3f3f3;
    border-radius: 6px;
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;
    .title {
      font-weight: bold;
      margin-bottom: 36rpx;
    }
    .content {
      position: relative;
      border-bottom: 2rpx solid #f3f3f3;
      padding: 10rpx 0;
      box-sizing: border-box;
      input {
        width: 100%;
        height: 60rpx;
        font-size: 36rpx;
        border-radius: 6px;
        padding-left: 45rpx;
      }
      view {
        position: absolute;
        left: 5rpx;
        top: 50%;
        transform: translateY(-50%);
        font-size: 36rpx;
      }
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 28rpx;
      margin-top: 20rpx;
    }
  }
  .withdraw_btn {
    width: 100%;
    height: 70rpx;
    background-color: #169bd5;
    color: #ffffff;
    font-size: 36rpx;
    border-radius: 10rpx;
    line-height: 70rpx;
    box-shadow: 0rpx 5rpx 10rpx #169bd5;
    &.disabled {
      background-color: #97d2ec;
      color: #fff;
      box-shadow: none;
    }
  }
}
</style>