group_web_merchant/src/views/financialManagement/cashApply.vue

<template>
  <div class="cash-apply-page">
    <!-- 头部 -->
    <div class="header">
      <el-button class="back-btn" @click="goBack"> 返回 </el-button>
      <h2 class="title">提现申请</h2>
    </div>

    <!-- 内容区域 -->
    <div class="content">
      <!-- 可提现金额 -->
      <div class="section">
        <div class="section-title">可提现金额</div>
        <div class="available-amount">¥{{ formatCurrency(availableAmount) }}</div>
      </div>

      <!-- 提现金额输入 -->
      <div class="section">
        <div class="section-title">提现金额</div>
        <div class="amount-input-wrapper">
          <el-input
            v-model="withdrawAmount"
            placeholder="请输入提现金额"
            class="amount-input"
            type="number"
            :min="0.01"
            :max="availableAmount"
            @input="handleAmountInput"
          />
          <el-button type="primary" class="withdraw-all-btn" @click="handleWithdrawAll"> 全部提现 </el-button>
        </div>
        <div class="min-amount-tip">最低提现金额为0.1元</div>
      </div>

      <!-- 提现账户 -->
      <div class="section">
        <div class="section-title">提现账户</div>
        <div class="account-list">
          <div class="account-item">
            <div class="account-left">
              <img :src="zfbIcon" alt="" class="account-icon" />
              <div class="account-info">
                <div class="account-name">
                  {{ userInfo.name }}
                </div>
                <div class="account-number">
                  {{ userInfo.alipayAccount }}
                </div>
              </div>
            </div>
            <div class="account-right">
              <div class="selected-indicator" />
            </div>
          </div>
        </div>
      </div>
      <!-- 底部按钮 -->
      <div class="footer">
        <el-button type="primary" class="submit-btn" @click="handleSubmit"> 提交申请 </el-button>
      </div>
    </div>
    <!-- 确认对话框 -->
    <el-dialog
      v-model="cashDialogVisible"
      title="提现金额域账户确认"
      width="500px"
      :close-on-click-modal="false"
      class="confirm-dialog"
    >
      <div class="confirm-content">
        <div class="confirm-item">
          <span class="confirm-label">提现金额:</span>
          <span class="confirm-value">¥ {{ withdrawAmount || "0" }}</span>
        </div>
        <div class="confirm-item">
          <span class="confirm-label">提现账户:</span>
          <span class="confirm-value">支付宝账户 ({{ userInfo.alipayAccount }})</span>
        </div>
        <div class="password-section">
          <div class="password-label">请输入提现密码</div>
          <el-input
            v-model="withdrawPassword"
            type="password"
            placeholder="请输入6位提现密码"
            maxlength="6"
            show-password
            class="password-input"
            @input="handlePasswordInput"
          />
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button class="dialog-cancel-btn" @click="handleCancelConfirm"> 取消 </el-button>
          <el-button type="primary" class="dialog-confirm-btn" @click="handleConfirmSubmit"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { getAccountBalance, cashOut } from "@/api/modules/homeEntry";
import zfbIcon from "@/assets/financial/zfb-icon.png";
import { localGet } from "@/utils";
const userInfo = localGet("geeker-user").userInfo;

const router = useRouter();
const cashDialogVisible = ref(false);
const withdrawPassword = ref("");
// 提现金额
const withdrawAmount = ref();
// 密码输入处理（只允许数字）
const handlePasswordInput = (value: string) => {
  withdrawPassword.value = value.replace(/\D/g, "");
};
// 取消确认
const handleCancelConfirm = () => {
  cashDialogVisible.value = false;
  withdrawPassword.value = "";
};
const handleConfirmSubmit = async () => {
  const res: any = await cashOut({
    storeId: userInfo.storeId,
    payPassword: withdrawPassword.value,
    withdrawalMoney: withdrawAmount.value * 100
  });
  if (res.code == 200) {
    router.go(-1);
    ElMessage.success("提现申请已发起成功,请耐心等待");
    cashDialogVisible.value = false;
    fetchAccountBalance();
  } else {
    ElMessage.error(res.message);
  }
};
// 可提现金额
const availableAmount = ref<number>(0);

// 选中的账户ID
const selectedAccountId = ref<number>(1);

// 返回
const goBack = () => {
  router.back();
};

// 格式化金额
const formatCurrency = (value: number) => {
  return value.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
};

// 全部提现
const handleWithdrawAll = () => {
  withdrawAmount.value = availableAmount.value.toString();
};

// 金额输入处理
const handleAmountInput = (value: string) => {
  const numValue = parseFloat(value);
  if (isNaN(numValue) || numValue < 0) {
    withdrawAmount.value = "";
    return;
  }
  if (numValue > availableAmount.value) {
    withdrawAmount.value = availableAmount.value.toString();
    ElMessage.warning("提现金额不能超过可提现金额");
  }
};

// 选择账户
const selectAccount = (id: number) => {
  selectedAccountId.value = id;
};

// 提交申请
const handleSubmit = () => {
  const amount = parseFloat(withdrawAmount.value);

  // 验证提现金额
  if (!withdrawAmount.value || isNaN(amount) || amount <= 0) {
    ElMessage.warning("请输入提现金额");
    return;
  }

  if (amount < 0.01) {
    ElMessage.warning("最低提现金额为0.01元");
    return;
  }

  if (amount > availableAmount.value) {
    ElMessage.warning("提现金额不能超过可提现金额");
    return;
  }

  // 验证账户
  if (!selectedAccountId.value) {
    ElMessage.warning("请选择提现账户");
    return;
  }
  cashDialogVisible.value = true;
};

// 获取可提现金额
const fetchAccountBalance = async () => {
  let param = {
    storeId: userInfo.storeId
  };
  const res: any = await getAccountBalance(param as any);
  if (res.code == 200 && res.data) {
    availableAmount.value = res.data.cashOutMoney;
    // 根据实际API返回的数据结构更新
    // availableAmount.value = res.data.availableAmount || res.data.amount || 586;
  }
};

onMounted(() => {
  fetchAccountBalance();
});
</script>

<style scoped lang="scss">
.cash-apply-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  background-color: #ffffff;
}
.header {
  position: relative;
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e4e7ed;
  .back-btn {
    padding: 8px 16px;
    font-size: 14px;
    color: #606266;
    background-color: #f5f7fa;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    &:hover {
      color: #409eff;
      background-color: #ecf5ff;
      border-color: #b3d8ff;
    }
  }
  .title {
    position: absolute;
    left: 50%;
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    transform: translateX(-50%);
  }
}
.content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 32px;
  padding: 24px 20px;
}
.section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  .section-title {
    font-size: 16px;
    font-weight: 500;
    color: #333333;
  }
}
.available-amount {
  margin-top: 8px;
  font-size: 36px;
  font-weight: 600;
  color: #333333;
}
.amount-input-wrapper {
  display: flex;
  gap: 12px;
  align-items: center;
  .amount-input {
    flex: 1;
    :deep(.el-input__wrapper) {
      padding: 12px 16px;
      border-radius: 4px;
    }
  }
  .withdraw-all-btn {
    padding: 12px 20px;
    white-space: nowrap;
    background-color: #7f9dff;
    border: none;
    border-radius: 4px;
  }
}
.min-amount-tip {
  margin-top: 4px;
  font-size: 12px;
  color: #909399;
}
.account-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.account-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  cursor: pointer;
  background-color: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  transition: all 0.3s;
  &.active {
    background-color: #ecf5ff;
    border-color: #7f9dff;
  }
  .account-left {
    display: flex;
    flex: 1;
    gap: 12px;
    align-items: center;
    .account-icon {
      width: 40px;
      height: 40px;
      object-fit: contain;
    }
    .account-info {
      display: flex;
      flex-direction: column;
      gap: 4px;
      .account-name {
        font-size: 16px;
        font-weight: 500;
        color: #333333;
      }
      .account-number {
        font-size: 14px;
        color: #909399;
      }
    }
  }
  .account-right {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    .selected-indicator {
      width: 16px;
      height: 16px;
      background-color: #7f9dff;
      border: 3px solid #ffffff;
      border-radius: 50%;
      box-shadow: 0 0 0 2px #7f9dff;
    }
  }
}
.footer {
  display: flex;
  justify-content: center;
  margin-top: 100px;
  .cancel-btn {
    padding: 20px;
    font-size: 16px;
    color: #606266;
    background-color: #f5f7fa;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
  }
  .submit-btn {
    padding: 20px;
    font-size: 16px;
    color: #ffffff;
    background-color: #7f9dff;
    border: none;
    border-radius: 4px;
  }
}
:deep(.confirm-dialog) {
  .el-dialog__header {
    padding: 20px 24px;
    border-bottom: 1px solid #e4e7ed;
  }
  .el-dialog__title {
    font-size: 18px;
    font-weight: 600;
    color: #333333;
  }
  .el-dialog__body {
    padding: 24px;
  }
}
.confirm-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  .confirm-item {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 14px;
    .confirm-label {
      min-width: 80px;
      font-weight: 500;
      color: #606266;
    }
    .confirm-value {
      font-weight: 500;
      color: #333333;
    }
  }
  .password-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
    .password-label {
      font-size: 14px;
      font-weight: 500;
      color: #606266;
    }
    .password-input {
      :deep(.el-input__wrapper) {
        padding: 12px 16px;
        border-radius: 4px;
      }
    }
  }
}
</style>