applet/pages/distribution/withdrawTwo.vue

<template>
  <view class="container">
    <view class="u-plr30">
      <view class="u-bg-fff u-p30 u-mt20">
        <view class="u-flex-center-sb">
          <view>
            <text>可转入金额</text>
            <text class="u-ml20 u-00BF5A u-bold u-font36">{{
              walletInfo.commission_able
            }}</text>
          </view>
          <view @click="goWallet">
            <text class="iconfont">&#xe638;</text>
          </view>
        </view>
      </view>

      <view class="wdInput u-mt20">
        <view class="u-mt20 input u-flex">
          <text>￥</text>
          <input
            class="u-ml10"
            maxlength="10"
            type="digit"
            @input="getMoney"
            v-model="dataForm.money"
            placeholder="输入金额"
          />
        </view>
      </view>

      <view class="apply-btn" @click="requestWithdrawal">
        <button class="u-btn-two">确定转入</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";

const $http = uni.$http;

const dataForm = ref({
  money: "", // 提现金额
});
const walletInfo = ref({
  min_extract: 0,
  wait_account: 0,
  freezing: 0,
}); // 账户信息

// 生命周期
onLoad(() => {
  // 获取账户信息
  $http.get("/withdraw/getWalletInfo", {}).then(async (res) => {
    if (res && res.code == 200) {
      if (res.data) {
        walletInfo.value = res.data;
      }
    }
  });
});

// 方法
// 跳转到钱包明细
const goWallet = () => {
  uni.navigateTo({
    url: "./wallet",
  });
};

// 获取输入提现金额
const getMoney = (e) => {
  e.target.value = e.target.value.match(/^\d*(\.?\d{0,2})/g)[0] || null;
  // 重新赋值给 input
  setTimeout(() => {
    dataForm.value.money = e.target.value;
  }, 0);
};

// 申请转入
const requestWithdrawal = () => {
  if (!dataForm.value.money) {
    uni.$uv.toast("请输入金额");
    return false;
  }

  $http.post("/withdraw/commission-to-balance", dataForm.value).then((res) => {
    if (res && res.code == 200) {
      uni.$uv.toast("转入成功");
      setTimeout(() => {
        uni.navigateBack({
          success: () => {
            let page = getCurrentPages().pop(); // 跳转页面成功之后
            if (!page) {
              return;
            } else {
              page.onLoad(page.options); // page 自带 options 对象.
            }
          },
        });
      }, 2000);
    } else {
      uni.$uv.toast(res.msg);
    }
  });
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f5f5f5;
}

.wt112 {
  width: 140rpx;
}

.img30 {
  width: 30rpx;
  height: 30rpx;
}

.wd-bgImg {
  position: relative;
  padding: 25rpx 0rpx;

  image {
    width: 100%;
    height: 200rpx;
    vertical-align: bottom;
  }

  .moneyInfo {
    position: absolute;
    top: 25rpx;
    width: 92%;

    .mt40 {
      margin-top: 40rpx;
    }

    .detail-btn button {
      height: 56rpx;
      line-height: 30rpx;
      border-radius: 28px;
      opacity: 0.82;
      padding: 10rpx 30rpx;
      background-color: #eed9a9;
      color: #00bf5a;
    }
  }
}

.wdInput {
  background-color: #ffffff;
  border-radius: 18rpx 18rpx 0px 0rpx;
  padding: 40rpx 22rpx 32rpx;

  .input {
    height: 80rpx;
    line-height: 80rpx;
    font-size: 60rpx;
    border-bottom: 1rpx solid #d9d9d9;
    padding-bottom: 25rpx;

    input {
      height: 80rpx;
      line-height: 80rpx;
      font-size: 36rpx;
    }
  }
}

.bg-fff {
  background-color: #ffffff;
  padding: 26rpx 22rpx 36rpx;
  border-radius: 0rpx 0rpx 18px 18rpx;
}

.ml46 {
  margin-left: 46rpx;
}

.apply-btn {
  margin-top: 80rpx;

  button {
    background: #00bf5a;
    color: #ffffff;
  }
}

.zfb-wx {
  padding-bottom: 24rpx;

  .payIcon {
    color: #00aaef;
    font-size: 32rpx;
    margin-right: 18rpx;
  }

  .wxIcon {
    color: rgb(37, 171, 56);
    font-size: 32rpx;
    margin-right: 18rpx;
  }
}

.zhInput input {
  width: 62%;
  height: 70rpx;
  line-height: 70rpx;
  padding: 0rpx 20rpx;
  border: 1rpx solid #d9d9d9;
  border-radius: 6rpx;
}

.popup {
  width: 100%;
  .bg-top {
    background-color: #f5f5f5;
    padding: 20rpx 30rpx;
    border-radius: 18rpx 18rpx 0px 0px;
  }
  .bankCardList {
    background-color: #ffffff;
    padding: 0rpx 30rpx;
    padding-bottom: 185rpx;
    .item {
      height: 84rpx;
      line-height: 84rpx;
      image {
        width: 48rpx;
        height: 42rpx;
        margin-top: 20rpx;
        vertical-align: bottom;
      }
      .rh-br {
        width: 100%;
        border-bottom: 1rpx solid #e6e6e6;
      }
      .pull-right {
        float: right !important;
      }
    }
  }
}

.ml56 {
  margin-left: 56rpx;
}

.ml200 {
  margin-left: 200rpx;
}
</style>