fangliaoxiaochengxv/subPages/applyWithdrawal/applyWithdrawal.vue

<template>
  <view class="applyWithdrawal">
    <view class="header">
			<template v-if="currentCard.bank_code" >
				<view class="title">到账银行卡</view>
				<view class="card-info" @click="handleSelectCard">
				  <view class="left">
				    <u--image
				      v-if="currentCard.bank_logo"
				      width="53rpx"
				      height="53rpx"
				      :src="currentCard.bank_logo"
				      :fade="true"
				      duration="450"
				    ></u--image>
				    <text class="name"
				      >{{ currentCard.bank_name }}储蓄卡({{ bankLastCode }})</text
				    >
				  </view>
				  <u-icon name="arrow-right" color="#9C9C9C" size="24rpx" bold></u-icon>
				</view>
			</template>
			<view class="fs16 fw600 mt10 color-2c" v-else>请添加提现账户</view>
    </view>

    <view class="body">
      <view class="withdrawal-box">
        <view class="title">提现金额</view>
        <view class="input-wrap">
          <u-input
            placeholder="输入提现金额,提现金额＞100元"
            border="bottom"
            type="number"
            v-model="applyAmount"
            customStyle="text-align: right;"
          >
            <text class="input-prefix" slot="prefix">￥</text>
          </u-input>
        </view>
        <view class="bottom">
          <text>可提现金额:￥{{ allAmount }}</text>
          <text class="all-btn" @click="handleAllAmount">全部提现</text>
        </view>
      </view>
      <view class="submit-btn" @click="onSubmit">确认提现</view>
      <view class="more-action">
        <navigator
          url="/subPages/withdrawalAccountManagement/withdrawalAccountManagement"
        >
          <text>提现账户管理</text>
        </navigator>
        <navigator url="/subPages/withdrawalManagement/withdrawalManagement">
          <text>提现记录</text>
        </navigator>
      </view>
    </view>

    <view class="footer">
      <view class="title">温馨提示：</view>
      <view
        >1.提现申请通过后将在1-3个工作日内将提现金额打入您的
        银行卡或支付宝账户中。</view
      >
      <view
        >2.工作日(周六/日法定节假日除外)16:30之前申请的提现申 请当天处理。</view
      >
    </view>
    <u-popup
      class="select-banks-popup"
      :show="show"
      mode="bottom"
      @close="close"
      :customStyle="{
        maxHeight: '68vh',
        padding: '0 20rpx',
        'overflow-y': 'auto',
      }"
    >
      <view class="select-banks-title">
        <text>选择银行账户</text><u-icon name="close" @click="close"></u-icon>
      </view>
      <view
        v-for="b in bankCardList"
        :key="b.id"
        class="select-banks-item"
        @click="handleBank(b)"
      >
        <!-- :style="{ backgroundColor: b.bank_bg }" -->
        <view class="left">
          <u--image
            v-if="b.bank_logo"
            width="60rpx"
            height="60rpx"
            radius="100%"
            shape="circle"
            customStyle="border-radius:100%;"
            :src="b.bank_logo"
            :fade="true"
            duration="450"
          ></u--image>
          <view class="name">{{ b.bank_name }}({{getBankLastCode(b.bank_code)}})</view>
        </view>
        <u-icon
          v-if="currentCard.id === b.id"
          name="checkbox-mark"
          color="#f39800"
        ></u-icon>
        <u-icon v-else name="arrow-right"></u-icon>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { getMyBanks, addWithdrawal, getWithdrawalList } from "@/common/api/withdrawal.js";
export default {
  data() {
    return {
      applyAmount: "",
      currentCard: {},
      bankCardList: [],
      show: false,
      allAmount: 0, //TODO: mock
    };
  },
  computed: {
    bankLastCode() {
      if (!this.currentCard.bank_code) return "";
      return this.currentCard.bank_code.slice(-4);
    },
  },
  onShow() {
    this._getMyBanks();
		this._getWithdrawalList();
  },
  methods: {
		getBankLastCode(code) {
			return code.slice(-4)
		},
    _getMyBanks() {
      getMyBanks().then(({ data = [] }) => {
        console.log("data=======>", data);
        this.bankCardList = data;
        this.currentCard = data[0] || {};
      });
    },
		_getWithdrawalList() {
		  getWithdrawalList({
		    page: 1,
		    pageSize: 1,
		  }).then(({ data = {} }) => {
		    const { total = {} } = data;
		    this.allAmount = +total['待提现']||0;
		  });
		},
    onSubmit() {
			if (!this.currentCard.bank_code) {
				uni.$u.toast("提现银行卡不能为空");
				return
			}
      if (+this.applyAmount < 100) {
        uni.$u.toast("提现金额不能小于100");
        return;
      }
			if(+this.applyAmount > this.allAmount){
				uni.$u.toast("可提现金额不足");
				return;
			}
      addWithdrawal({
        amount: +this.applyAmount,
        bank_wseq: this.currentCard.bank_wseq,
        bank_name: this.currentCard.bank_name,
        bank_user: this.currentCard.bank_user,
        bank_bran: this.currentCard.bank_bran,
        bank_code: this.currentCard.bank_code,
      }).then((res) => {
				uni.$u.toast("提现成功");
				uni.reLaunch({
					url:'/subPages/withdrawalManagement/withdrawalManagement'
				})
			});
    },
    handleSelectCard() {
      this.show = true;
    },
    handleAllAmount() {
      this.applyAmount = this.allAmount;
    },
    close() {
      this.show = false;
    },
    handleBank(card) {
      this.currentCard = card;
    },
  },
};
</script>

<style lang="scss" scoped>
.applyWithdrawal {
  padding: 20rpx 20rpx 40rpx;
  display: flex;
  flex-direction: column;
  .header {
    padding: 23rpx 39rpx 0 17rpx;
    .title {
      padding-left: 10rpx;
      font-size: 30rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #1d161f;
      line-height: 42rpx;
    }
    .card-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 14rpx;
      .left {
        display: flex;
        align-items: center;
        .name {
          font-size: 30rpx;
          font-weight: 500;
          color: #1d161f;
          line-height: 35rpx;
          margin-left: 4rpx;
        }
      }
    }
  }

  .body {
    margin-top: 54rpx;
    .withdrawal-box {
      padding: 19rpx 26px 0 27px;
      height: 308rpx;
      background: #ffffff;
      border-radius: 10rpx;
      .title {
        font-size: 30rpx;
        font-weight: 500;
        color: #252525;
        line-height: 42rpx;
      }
      .input-wrap {
        margin-top: 52rpx;
        ::v-deep {
          .u-border-bottom {
            border-color: #efefef !important;
            padding: 5rpx 0 !important;
          }
        }
        .input-prefix {
          font-size: 64rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #252525;
          line-height: 90rpx;
        }
      }
      .bottom {
        padding-top: 28rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 30rpx;
        font-weight: 500;
        color: #929292;
        line-height: 1;

        .all-btn {
          font-size: 30rpx;
          font-weight: 500;
          color: #f39800;
          line-height: 1;
        }
      }
    }
    .submit-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 84rpx;
      margin-top: 55rpx;
      background: #f39800;
      border-radius: 39rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 1;
    }
    .more-action {
      margin-top: 50rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 42rpx;
      font-size: 30rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #252525;
      line-height: 1;
      text {
        margin: 0 55rpx;
      }
    }
  }
  .footer {
    margin-top: 200rpx;
    font-size: 26rpx;
    font-weight: 500;
    color: #929292;
    line-height: 30rpx;
    .title {
      font-size: 28rpx;
      font-weight: 500;
      color: #929292;
      line-height: 39rpx;
      margin-bottom: 17rpx;
    }
  }
}
.select-banks-popup {
  padding: 0 30rpx;
}
.select-banks-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 32rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #1d161f;
  height: 100rpx;
  flex-shrink: 0;
}
.select-banks-item {
  display: flex;
  justify-content: space-between;
  height: 80rpx;
  padding: 25rpx 20rpx;
  margin-bottom: 15rpx;
  background-color: #f5f6f8;
  border-radius: 10rpx;
  &:last-child {
    margin-bottom: 30rpx;
  }
  .left {
    display: flex;
    align-items: center;
    align-items: center;
  }
  .name {
    margin-left: 23rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #1d161f;
    line-height: 1;
  }
}
</style>