tixian.vue

<script setup>
import { ref, onMounted } from "vue";
import request from "@/utils/request";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
// 响应式数据
const bankNum = ref("");
const amount = ref("");
const bankList = ref([]);
const showEmptyTips = ref(true);
const balance = ref(0);
const type = ref("");
const title = ref("");
const userInfo = ref(JSON.parse(sessionStorage.getItem("userInfo")));
balance.value = userInfo.value[title.value];
// 获取路由参数
const route = useRoute();
onMounted(() => {
  title.value = route.query.title;
  balance.value = route.query.balance;
  type.value = route.query.type;
  getBankList();
});

// 获取银行卡列表
const getBankList = async () => {
  try {
    const res = await request.get("/business/businessBankCard/list?userId=" + userInfo.value.sysUser.id);
    bankList.value = res.result.records;
    if (bankList.value.length > 0) {
      bankNum.value = bankList.value[0].bankNum;
    }
    showEmptyTips.value = bankList.value.length === 0;
  } catch (error) {
    console.error("获取银行卡列表失败:", error);
    showFailToast("获取银行卡列表失败");
  }
};


// 全部提现
const withdrawAll = () => {
  amount.value = balance.value;
};

// 提现操作
const handleWithdraw = async () => {
  // 验证检查
  if (bankList.value.length === 0) {
    showFailToast("请先绑定银行卡");
    setTimeout(() => router.push("/user/mybankCard"), 1000);
    return;
  }

  if (parseFloat(balance.value) <= 0) {
    showFailToast("余额不足");
    return;
  }

  // 提交提现
  await submitWithdraw();
};

// 提交提现请求
const submitWithdraw = async () => {
  const data = {
    bankNum: bankNum.value,
    walletCode: type.value,
    withdrawAmount: amount.value,
  };
  try {
    const res = await request.post("/business/businessWithdraw/add", data);
    if (res.code === 200) {
      amount.value = "";
      showSuccessToast("提现申请已提交");
      setTimeout(() => router.push("/user"), 1000);
    } else {
      showFailToast(res.msg);
    }
  } catch (error) {
    console.error("提现请求失败:", error);
    showFailToast("提现失败，请稍后重试");
  }
};

// 跳转到添加银行卡
const goToAddBank = () => {
  router.push("/user/mybankCard");
};
</script>

<template>
  <div class="withdraw-container">
    <!-- 余额展示 -->
    <div class="balance-section">
      <p class="balance-title">可提现金额（元）</p>
      <p class="balance-amount">￥{{ balance }}</p>
    </div>

    <!-- 提现表单 -->
    <div class="withdraw-form">
      <label>提现金额</label>
      <div class="form-group">
        <div class="amount-input">
          <span class="currency">￥</span>
          <input v-model="amount" type="number" placeholder="请输入提现金额" />
        </div>
        <div class="actions" @click="withdrawAll">
          <span class="withdraw-all"> 全部提现 </span>
        </div>
      </div>

      <!-- 银行卡选择 -->
      <div class="bank-selection">
        <label>提现至</label>
        <div v-if="showEmptyTips" class="empty-tip" @click="goToAddBank">
          点此添加银行卡
        </div>
        <var-radio-group
          v-else
          v-model="bankNum"
          class="bank-list"
          direction="vertical"
        >
          <div
            v-for="bank in bankList"
            :key="bank.bankNum"
            style="display: flex; justify-content: space-between"
            v-ripple
            @click="bankNum = bank.id"
          >
            <div class="bank-item">
              <img
                src="@/static/payup/yinlian.svg"
                class="bank-icon"
                alt="银行卡图标"
              />
              {{ bank.bankName }} ({{ bank.bankNum.slice(-4) }})
            </div>
            <var-radio size="30px" :checked-value="bank.bankNum"></var-radio>
          </div>
        </var-radio-group>
      </div>
    </div>

    <!-- 提现按钮 -->
    <var-button
      style="width: 90%; margin: 50px auto 0"
      block
      type="primary"
      class="withdraw-button"
      @click="handleWithdraw"
    >
      立即提现
    </var-button>
  </div>
</template>

<style lang="scss" scoped>
.withdraw-container {
  min-height: 100vh;
  background: #fff;
  font-family: pingfang;
  .balance-section {
    background: linear-gradient(to top, #ffb60d 0%, #ff7d38 100%);
    padding: 20px;
    color: #fff;

    .balance-title {
      font-size: 16px;
      opacity: 0.9;
    }

    .balance-amount {
      font-size: 28px;
      font-weight: bold;
      margin-top: 15px;
    }
  }

  .withdraw-form {
    margin: -20px 15px 0;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    .form-group {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      label {
        display: block;
        font-size: 16px;
        margin-bottom: 10px;
        color: #333;
      }

      .amount-input {
        position: relative;
        margin-bottom: 10px;
        width: 100%;
        .currency {
          position: absolute;
          left: 10px;
          top: 50%;
          transform: translateY(-50%);
          color: #333;
        }

        input {
          height: 44px;
          padding: 0 15px 0 25px;
          border: none;
          border-bottom: 1px solid #eee;
          font-size: 16px;

          &:focus {
            outline: none;
            border-color: #ff7d38;
          }
        }
      }

      .actions {
        text-align: right;
        width: 100px;
        color: red;
        display: inline-block;
        .withdraw-all {
          font-size: 16px;
          cursor: pointer;

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

    .bank-selection {
      .empty-tip {
        color: #2248a0;
        padding: 15px 0;
        text-align: center;
        cursor: pointer;
      }

      .bank-list {
        .bank-item {
          display: flex;
          align-items: center;
          width: 100%;

          .bank-icon {
            width: 24px;
            height: 24px;
            margin-right: 10px;
          }
        }
      }
    }
  }

  .withdraw-button {
    margin: 30px 15px;
    height: 44px;
    font-size: 16px;
    background: linear-gradient(to right, #ff7d38, #ffb60d);
    border: none;
    border-radius: 22px;

    &:active {
      opacity: 0.9;
    }
  }
}
</style>