LocalLivingServicesUniapp/pages/finance/withdrawal.vue

<template>
  <view class="container">
    <view class="fix">
      <view class="top"></view>
      <view class="head">
        <span class="cuIcon-back" @click="back"></span>
        <view class="case"> 申请提现 </view>
      </view>
    </view>

    <view class="form-card">
      <view class="section-input">
        <view class="label">提现金额 <i class="text-bg"></i></view>
        <view class="input-row">
          <text class="currency-symbol">¥</text>
          <u-input
            type="digit"
            height="80"
            placeholder="请输入提现金额"
            :customStyle="{
              fontSize: '42rpx',
              padding: '0 10rpx',
              marginTop: '10rpx',
            }"
            v-model="withdrawalAmount"
            @input="handleInput"
          ></u-input>
        </view>
        <view v-if="isExceeded" class="error">输入金额超过可提现余额</view>

        <view class="balance-info">
          <text>可提现余额{{ availableAmount }}元，</text>
          <text>手续费每笔{{ handlingFee }}元</text>
          <text class="all-withdraw-btn" @click="allWithdraw">全部提现</text>
        </view>
      </view>
    </view>

    <view class="form-card">
      <view class="label">账户信息 <i class="text-bg"></i></view>
      <view class="bank-info">
        <view class="bank-label">银行账户</view>
        <view class="u-flex">
          <u-image :src="bankCardInfo.bankLogo" width="42rpx" height="42rpx"></u-image>
          <view class="bank-number">{{ bankCardInfo.bankName }}({{ bankCardInfo.bankCardNumber }})</view>
        </view>
      </view>
    </view>

    <view class="form-card">
      <view class="u-flex justify-between">
        <view class="title">开票信息<i class="text-bg"></i></view>
        <view class="note">注：提现申请请上传开票凭证</view>
      </view>
      <view class="invoice-info">
        <text class="title">发票抬头</text>
        <text class="value">{{ invoiceInfo.companyName }}</text>
      </view>
      <view class="invoice-info">
        <text class="title">纳税人识别号</text>
        <text>{{ invoiceInfo.taxNo }}</text>
      </view>
      <view class="invoice-info">
        <text class="title">地址详情</text>
        <text class="value">{{ invoiceInfo.address }} {{ invoiceInfo.phone }}</text>
      </view>
      <view class="invoice-info last">
        <text class="title">开户银行及账号</text>
        <text class="value">{{ invoiceInfo.openingBank }} {{ invoiceInfo.bankAccount }}</text>
      </view>
    </view>

    <view class="form-card">
      <view class="label">上传发票 <i class="text-bg"></i></view>
      <u-upload
        ref="uUpload"
        :action="action"
        :file-list="billList"
        @on-success="handleSuccess"
        @on-remove="handleRemove"
        @on-choose-complete="onChooseComplete"
        max-count="5"
        multiple
        previewFullImage
        :auto-upload="true"
        customBtn
        width="146rpx"
        height="146rpx"
      >
        <template slot="addBtn">
          <image src="/static/coupon/upload.png" mode="widthFix" style="width: 146rpx; height: 146rpx"></image>
        </template>
      </u-upload>
    </view>
    <view class="footer-bar">
      <u-button
        type="primary"
        :disabled="!withdrawalAmount || parseFloat(withdrawalAmount) <= 0 || isExceeded"
        @click="applyWithdrawal"
        >提现</u-button
      >
    </view>
  </view>
</template>

<script>
import api from '@/api/account';
import configService from '@/common/service/config.service';
import { formatAmount } from '@/common/util/util';

export default {
  data() {
    return {
      formatAmount,
      action: configService.apiUrl + '/sys/common/upload',
      imageHttp: configService.apiUrl + '/',
      billList: [], //发票回显
      uploadedFiles: [], //已上传文件列表
      bankCard: {},
      availableAmount: '', // 当前可提现余额
      handlingFee: 0, // 手续费
      withdrawalAmount: '', // 提现金额输入框的值
      isExceeded: false, // 是否超过可提现余额
      bankCardInfo: {}, // 银行卡信息
      invoiceInfo: {}, // 开票信息
    };
  },
  watch: {
    withdrawalAmount(newVal, oldVal) {
      // 检查金额是否超过可提现余额
      if (parseFloat(newVal) > parseFloat(this.availableAmount)) {
        this.isExceeded = true;
      } else {
        this.isExceeded = false;
      }
    },
  },
  onShow() {
    this.init();
  },
  formatAmount,
  methods: {
    // 初始化提现数据
    async init() {
      const res = await api.initWithdrawalData();
      if (res.data.code === 200 && res.data.result) {
        const data = res.data.result;
        this.availableAmount = data.availableAmount;
        this.handlingFee = data.handlingFee;
        this.bankCardInfo = data.bankCardInfo;
        this.invoiceInfo = data.invoiceInfo;
      }
    },
    handleInput(val) {
      if (!val) {
        this.withdrawalAmount = '';
        return;
      }
      /// 保留2位小数
      val = val.replace(/(\.\d{2})\d+/g, '$1');
      // 处理前导0
      val = val.replace(/^0+(?=\d)/, '');

      this.$nextTick(() => {
        this.withdrawalAmount = val;
      });
    },
    // 上传发票
    handleSuccess(res) {
      if (res.code === 0) {
        this.uploadedFiles.push(this.imageHttp + res.message);
        console.log(this.uploadedFiles);
      } else {
        uni.showToast({
          title: '上传失败: ' + res.message,
          icon: 'none',
        });
      }
    },
    // 移除图片
    handleRemove(index) {
      this.uploadedFiles.splice(index, 1);
    },
    // 选择图片
    onChooseComplete(lists) {
      this.billList = lists;
    },
    // 全部提现
    allWithdraw() {
      this.withdrawalAmount = this.availableAmount;
    },
    // 申请提现
    applyWithdrawal() {
      // if (!this.uploadedFiles.length) {
      //   uni.showToast({
      //     title: '请上传发票',
      //     icon: 'none',
      //   });
      //   return;
      // }
      uni.showLoading({ title: '提交中' });
      api
        .applyWithdrawal({
          applyAmount: this.withdrawalAmount,
          bankCardId: this.bankCardInfo.bankCardId,
          handlingFee: this.handlingFee,
          invoiceImgs: this.uploadedFiles,
        })
        .then((res) => {
          if (res.data.code === 200) {
            uni.hideLoading();
            uni.showToast({ title: '提现申请成功', icon: 'success' });
            setTimeout(() => {
              uni.navigateTo({
                url: '/pages/finance/submitted',
              });
            }, 1500);
          } else {
            uni.hideLoading();
            uni.showToast({ title: res.data.message, icon: 'none' });
          }
        });
    },
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f7f8fc;
  font-family: Source Han Sans SC;
  font-weight: 400;
  padding-bottom: 120rpx;

  .fix {
    position: sticky;
    top: 0;
    z-index: 999;

    /*#ifdef APP-PLUS*/
    .top {
      width: 100%;
      height: var(--status-bar-height);
      background: #fff;
    }

    /*#endif*/

    .head {
      width: 100%;
      height: 112rpx;
      padding: 20rpx;
      display: flex;
      align-items: center;
      background: #fff;
      position: relative;
      border-bottom: 1rpx solid #eeeeee;

      .cuIcon-back {
        font-size: 40rpx;
        margin-right: 40rpx;
      }

      .case {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-weight: 500;
        font-size: 38rpx;
        color: #333333;
      }
    }
  }

  .form-card {
    background-color: #fff;
    padding: 30rpx;
    margin-bottom: 30rpx;
    padding: 17rpx 31rpx 21rpx;
    box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(214, 225, 237, 0.1);

    .label {
      font-size: 30rpx;
      color: #333333;
      margin-bottom: 21rpx;

      .text-bg {
        width: 120rpx;
      }
    }
  }
}

// 提现至：银行卡选择区域
.section-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #eee;

  .label {
    font-weight: 500;
    font-size: 31rpx;
    color: #333333;
  }

  .content {
    display: flex;
    align-items: center;
  }
}

// 提现金额输入区域
.section-input {
  .input-row {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #eee;

    .currency-symbol {
      font-weight: bold;
      font-size: 54rpx;
      color: #333333;
      padding-right: 23rpx;
    }
  }

  .error {
    text-align: right;
    font-size: 25rpx;
    color: #e55e4f;
  }

  .balance-info {
    font-size: 26rpx;
    color: rgba(51, 51, 51, 0.6);
    margin-top: 16rpx;
    font-family: Source Han Sans CN;

    .all-withdraw-btn {
      font-size: 27rpx;
      color: #2d4d89;
      margin-left: 10rpx;

      &:active {
        opacity: 0.8;
      }
    }
  }
}

// 银行信息
.bank-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 44rpx;

  .bank-label {
    font-size: 29rpx;
    color: #666666;
  }

  .bank-number {
    padding: 0 0 5rpx 2rpx;
    font-size: 31rpx;
    color: #333333;
  }
}

// 开票信息区域
.note {
  font-size: 27rpx;
  color: #999999;
  margin-bottom: 26rpx;
}

.invoice-info {
  padding: 21rpx 0;
  display: flex;
  justify-content: space-between;
  border-bottom: 1rpx solid #eeeeee;

  .title {
    font-size: 29rpx;
    color: #666666;
  }

  .value {
    font-size: 31rpx;
    color: #333333;
    max-width: 450rpx;
    text-align: right;
  }
}

.last {
  border-bottom: none;
}

// 底部按钮
.footer-bar {
  z-index: 999;

  ::v-deep .u-btn {
    width: 100%;
    height: 76rpx;
    border-radius: 54rpx;
    background: linear-gradient(90deg, #77b6ff 0%, #449aff 100%);
    &.u-btn--primary--disabled {
      background: #a0cfff;
    }
  }
}

::v-deep {
  .u-delete-icon {
    background-color: rgba(0, 0, 0, 0.6) !important;
  }
}
</style>