tf-business/pages_module/withdrawal/index.vue

<template>
  <view class="withdrawal">
    <view class="withdrawal-box">
      <view class="box-text">
        <text>可提现金额</text>
        <text>{{ balance }}</text>
      </view>
      <view class="goWithd" @click="goWithdClick">去提现</view>
    </view>
    <view class="prompt"
      >注：可提现金额已扣除赠送会员代金券金额中的50%费用</view
    >
    <view class="withdrawal-container">
      <view class="withdrawal-title">
        <text>提现记录</text>
      </view>
      <view class="withdrawal-list">
        <view
          class="list-item"
          v-for="(item, index) in withdrawalList"
          :key="index"
        >
          <view class="item-text">
            <text v-if="item.state == 1">已处理</text>
            <text v-else-if="item.state == 2">通过</text>
            <text v-else-if="item.state == 3">拒绝</text>
            <text v-else-if="item.state == 4">待确认</text>
            <!-- 0-待处理 1-已处理 2-通过 3-拒绝 4-待确认 -->
            <text>{{ item.applyTime }}</text>
          </view>
          <view class="item-price">{{ item.withdrawalMoney }}</view>
        </view>
      </view>
    </view>
    <tui-bottom-popup
      :zIndex="1000"
      backgroundColor="#FFFFFF"
      :show="showPopup"
      @close="clonePopup"
    >
      <view class="popup-container">
        <view class="popup-title">提现</view>
        <view class="popup-type">
          <view class="type-title">提现类型</view>
          <view class="type-btn">
            <view
              class="btn-box"
              :class="popupIdx == 1 ? 'active' : ''"
              @click="changeIdx(1)"
              >正常支付订单</view
            >
            <view
              class="btn-box"
              :class="popupIdx == 2 ? 'active' : ''"
              @click="changeIdx(2)"
              >交易金</view
            >
          </view>
        </view>
        <view class="popup-amount">
          <text>提现金额</text>
          <text>{{ popupText }}</text>
        </view>
        <view class="popup-ipt">
          <tui-input
            type="number"
            :focus="true"
            :size="64"
            padding="16rpx 0rpx"
            :disabled="true"
            v-model="applyInfo.withdrawalMoney"
          >
            <template #left>
              <view class="ipt-left">￥</view>
            </template>
            <template #right>
              <view class="ipt-right" @click="allRawal">全部提现</view>
            </template>
          </tui-input>
        </view>
        <view class="popup-to">
          <text>提现至</text>
          <text>{{
            `${bankInfo.bankName}(${
              bankInfo.bankCard ? bankInfo.bankCard.slice(-4) : ""
            })`
          }}</text>
        </view>
        <view class="popup-btn" @click="confirmBtn">确认申请提现</view>
      </view>
    </tui-bottom-popup>
  </view>
</template>

<script>
import { getWithdrawal, financeBank, applyWithdrawal } from "@/config/index";
export default {
  onLoad(props) {
    //  余额
    this.balance = props.balance;
    //  交易金
    this.trading = props.trading;
  },
  onShow() {
    this.getAll();
  },
  computed: {
    popupText() {
      //  可提现{{ popupIdx == 1 ? "金额" : "交易金余额" }}：8483元
      if (this.popupIdx == 1) {
        return `可提现金额余额${this.balance}元`;
      } else {
        return `可提交易金余额${this.trading}元`;
      }
    },
  },
  data() {
    return {
      balance: "",
      trading: "",
      queryData: {
        page: 1,
        pageSize: 10,
      },
      //  提现记录列表
      withdrawalList: [],
      //  底部弹框控制
      showPopup: false,
      popupIdx: 1,
      // 弹窗的信息
      bankInfo: {},
      // 提现请求信息
      applyInfo: {
        bankCard: "",
        bankName: "",
        shopCode: "",
        shopName: "",
        withdrawalMoney: "",
        withdrawalType: "",
      },
    };
  },
  methods: {
    async getAll() {
      let { data } = await getWithdrawal(this.queryData);
      this.withdrawalList = [...this.withdrawalList, ...data];
      console.log(data);
    },
    //  去提现点击事件
    async goWithdClick() {
      this.showPopup = true;
      //  获取 bankInfo
      let { data } = await financeBank({});
      this.applyInfo.withdrawalMoney = this.balance;
      this.bankInfo = data;
    },
    //  确认申请提现
    async confirmBtn() {
      //  对数据进行判断
      if (
        this.applyInfo.withdrawalMoney >
        (this.popupIdx === 1 ? this.balance : this.trading)
      ) {
        this.$showToast("提现金额不能大于余额");
        return;
      }
      let { bankCard, bankName, shopCode, shopName } = this.bankInfo;
      //  对提交的信息进行处理
      this.applyInfo = {
        bankCard,
        bankName,
        shopCode,
        shopName,
        withdrawalMoney: this.applyInfo.withdrawalMoney,
        withdrawalType: this.popupIdx == 1 ? "1" : "2",
      };

      this.$loading.show("申请提现中");
      try {
        let res = await applyWithdrawal(this.applyInfo);
        if (res.code == "") {
          uni.redirectTo({
            url: "/pages_module/walSuccess/index",
          });
        }
      } finally {
        this.$loading.hide();
      }
    },
    //  提现类型点击
    changeIdx(val) {
      this.popupIdx = val;
      if (val == 1) {
        this.applyInfo.withdrawalMoney = this.balance;
      } else if (val == 2) {
        this.applyInfo.withdrawalMoney = this.trading;
      }
    },

    //  全部提现点击
    allRawal() {
      this.applyInfo.withdrawalMoney =
        this.popupIdx == 1 ? this.balance : this.trading;
    },
    // 关闭弹框事件
    clonePopup() {
      this.showPopup = false;
    },
  },
  //  触底加载
  onReachBottom() {
    if (this.withdrawalList.length < 10) return;
    this.queryData.page++;
    this.getAll();
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>