tf-business/pages_module/withdrawal/index.vue

<template>
  <view class="withdrawal">
    <view class="withdrawal-box">
      <view class="box-text">
        <text>可提现余额</text>
        <text>{{ financialData.withdrawableMoney }}</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" v-for="item in popupList" :key="item.value"  :class="popupIdx == item.value ? 'active' : ''"  @click="changeIdx(item.value)">
              {{ item.name }}
            </view>
            <!-- <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 { getFinancial,getWithdrawal, financeBank, applyWithdrawal } from "@/config/index";
export default {
  onShow() {
    this.getAll();
    this.getFinancialData()
  },
  computed: {
    popupText() {
      let item = this.popupList.find((item) => item.value == this.popupIdx);
      //  赋值
      this.applyInfo.withdrawalMoney = this.financialData[item.title];
      return `可提现${item.name}：${this.financialData[item.title]}元`;
    },
  },
  data() {
    return {
      queryData: {
        page: 1,
        pageSize: 10,
        withdrawalType:""
      },
      //  提现记录列表
      withdrawalList: [],
      //  底部弹框控制
      showPopup: false,
      popupIdx: 1,
      // 提现列表
      popupList:[
        {
          name:"余额",
          value:1,
          title:"withdrawableMoney"
        },
        {
          name:"交易金",
          value:2,
          title:"beeWithdrawal"
        },
        {
          name:"代金券",
          value:3,
          title:"voucherWithdrawal"
        },
        {
          name:"平台余额",
          value:4,
          title:"rechargeWithdrawalIn"
        },
      ],
      // 弹窗的信息
      bankInfo: {},
      // 提现请求信息
      applyInfo: {
        bankCard: "",
        bankName: "",
        shopCode: "",
        shopName: "",
        withdrawalMoney: "",
        withdrawalType: "",
      },
      // 提现数据
      financialData:{}
    };
  },
  methods: {
    // 获取提现总体数据
    async getFinancialData() {
      try {
        this.$loading.show("计算中...");
        const res = await getFinancial({condition: "1",time: "",paymentMode: 1,});
        this.financialData = res.data;
      } finally {
        this.$loading.hide();
      }
    },
    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.bankInfo = data;
      //  过滤出当前是什么提现模块
      let obj = this.popupList.find((item) => item.value == this.popupIdx);
      this.applyInfo.withdrawalMoney = this.financialData[obj.title];
    },
    //  确认申请提现
    async confirmBtn() {
      if(this.applyInfo.withdrawalMoney == 0){
        this.$showToast("您当前的提现额度为0");
        return;
      }
      //  对数据进行判断
      let { bankCard, bankName, shopCode, shopName } = this.bankInfo;
      //  对提交的信息进行处理
      this.applyInfo = {
        bankCard,
        bankName,
        shopCode,
        shopName,
        withdrawalMoney: this.applyInfo.withdrawalMoney,
        withdrawalType: this.popupIdx,
      };

      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;
      //  过滤出来当前点击的是哪一项
      let obj = this.popupList.find((item) => item.value == val);
      this.applyInfo.withdrawalType = this.financialData[obj.title];
    },

    //  全部提现点击
    allRawal() {
      return;
    },
    // 关闭弹框事件
    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>