From 9692ddd8f547c34337ef9902e1bec0dbe5bacde5 Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Mon, 18 Aug 2025 15:50:23 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=B3=E8=AF=B7=E6=8F=90=E7=8E=B00.8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 enum/commonEnum.js                            |   1 +
 pages.json                                    |   6 +
 pages/requestWithdrawal/requestWithdrawal.vue | 354 ++++++++++++++++++
 3 files changed, 361 insertions(+)
 create mode 100644 pages/requestWithdrawal/requestWithdrawal.vue

diff --git a/enum/commonEnum.js b/enum/commonEnum.js
index 7dad636..2c08827 100644
--- a/enum/commonEnum.js
+++ b/enum/commonEnum.js
@@ -31,5 +31,6 @@ export const commonEnum = {
   DOWN_ICON: 'https://api.ccttiot.com/image-1755484170012.png',
   WITHDRAW: 'https://api.ccttiot.com/image-1755496777724.png', //提现
   ORDER_NUMBER: 'https://api.ccttiot.com/image-1755496809579.png', //订单
+  CHINA_CONSTRUCTION_BANK: 'https://api.ccttiot.com/image-1755503384639.png', //建设银行
 }
 export default commonEnum
diff --git a/pages.json b/pages.json
index f5c4118..72a1a7c 100644
--- a/pages.json
+++ b/pages.json
@@ -33,6 +33,12 @@
         "navigationBarTitleText": "设置"
       }
     },
+    {
+      "path": "pages/requestWithdrawal/requestWithdrawal",
+      "style": {
+        "navigationBarTitleText": "申请提现"
+      }
+    },
     {
       "path": "pages/securityVerification/securityVerification",
       "style": {
diff --git a/pages/requestWithdrawal/requestWithdrawal.vue b/pages/requestWithdrawal/requestWithdrawal.vue
new file mode 100644
index 0000000..d665f05
--- /dev/null
+++ b/pages/requestWithdrawal/requestWithdrawal.vue
@@ -0,0 +1,354 @@
+<template>
+  <view class="page">
+    <!-- 提现容器 -->
+    <!-- 账户余额卡片 -->
+    <view class="balance-card">
+      <view class="balance-item">
+        <view class="balance-label">账户余额 (元)</view>
+        <view class="balance-value">{{ accountData.balance }}</view>
+      </view>
+      <view class="balance-item">
+        <view class="balance-label">未结算金额 (元)</view>
+        <view class="balance-value">{{ accountData.unsettled }}</view>
+      </view>
+    </view>
+
+    <view class="withdrawal-container">
+      <!-- 提现金额输入 -->
+      <view class="withdrawal-section">
+        <view class="section-title">提现金额</view>
+        <view class="amount-input">
+          <text class="currency-symbol">¥</text>
+          <input
+            v-model="withdrawalData.amount"
+            class="amount-field"
+            placeholder="请输入金额"
+            type="number"
+            @input="onAmountInput"
+          />
+          <view class="withdraw-all-btn" @click="withdrawAll">全部提现</view>
+        </view>
+      </view>
+
+      <!-- 提现至银行 -->
+      <view class="bank-section">
+        <view class="section-title">提现至</view>
+        <view class="bank-selector" @click="selectBank">
+          <view class="bank-info">
+            <text class="bank-icon">{{ selectedBank.icon }}</text>
+            <text class="bank-name">{{ selectedBank.name }}</text>
+          </view>
+          <text class="arrow-icon">›</text>
+        </view>
+      </view>
+
+      <!-- 提现按钮 -->
+      <view class="withdraw-btn" @click="submitWithdrawal">立即提现</view>
+    </view>
+
+    <!-- 可提现金额提示 -->
+    <view class="available-amount"> 可提现金额: {{ accountData.available }}元</view>
+
+    <!-- 提现说明 -->
+    <view class="withdrawal-explanation">
+      <view class="explanation-title">提现说明:</view>
+      <view class="explanation-item">
+        <text>提现金额: {{ withdrawalData.amount || '0.00' }}元</text>
+      </view>
+      <view class="explanation-item">
+        <text>实际到账: {{ actualAmount }}元</text>
+      </view>
+      <view class="explanation-item">
+        <text>提现手续费: {{ fee }}元</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      accountData: {
+        balance: '6566.23',
+        unsettled: '66.23',
+        available: '6500',
+      },
+      withdrawalData: {
+        amount: '',
+        bankId: '1',
+      },
+      selectedBank: {
+        id: '1',
+        name: '建设银行',
+        icon: '🏦',
+      },
+      banks: [
+        {
+          id: '1',
+          name: '建设银行',
+          icon: '🏦',
+        },
+        {
+          id: '2',
+          name: '工商银行',
+          icon: '🏦',
+        },
+        {
+          id: '3',
+          name: '农业银行',
+          icon: '🏦',
+        },
+      ],
+    }
+  },
+  computed: {
+    fee() {
+      const amount = parseFloat(this.withdrawalData.amount) || 0
+      return 1 // 1块手续费
+    },
+    actualAmount() {
+      const amount = parseFloat(this.withdrawalData.amount) || 0
+      const fee = parseFloat(this.fee)
+      return (amount - fee).toFixed(2)
+    },
+  },
+  methods: {
+    goBack() {
+      uni.navigateBack()
+    },
+    onAmountInput(e) {
+      const value = e.detail.value
+      // 限制最大提现金额
+      if (parseFloat(value) > parseFloat(this.accountData.available)) {
+        this.withdrawalData.amount = this.accountData.available
+      }
+    },
+    withdrawAll() {
+      this.withdrawalData.amount = this.accountData.available
+    },
+    selectBank() {
+      uni.showActionSheet({
+        itemList: this.banks.map(bank => bank.name),
+        success: res => {
+          const selectedBank = this.banks[res.tapIndex]
+          this.selectedBank = selectedBank
+          this.withdrawalData.bankId = selectedBank.id
+        },
+      })
+    },
+    submitWithdrawal() {
+      if (!this.withdrawalData.amount || parseFloat(this.withdrawalData.amount) <= 0) {
+        uni.showToast({
+          title: '请输入提现金额',
+          icon: 'none',
+        })
+        return
+      }
+
+      if (parseFloat(this.withdrawalData.amount) > parseFloat(this.accountData.available)) {
+        uni.showToast({
+          title: '提现金额超过可提现余额',
+          icon: 'none',
+        })
+        return
+      }
+
+      uni.showModal({
+        title: '确认提现',
+        content: `确认提现${this.withdrawalData.amount}元到${this.selectedBank.name}吗？`,
+        success: res => {
+          if (res.confirm) {
+            uni.showLoading({
+              title: '提现申请中...',
+            })
+
+            // 模拟提现请求
+            setTimeout(() => {
+              uni.hideLoading()
+              uni.showToast({
+                title: '提现申请已提交',
+                icon: 'success',
+              })
+
+              // 返回上一页
+              setTimeout(() => {
+                uni.navigateBack()
+              }, 1500)
+            }, 2000)
+          }
+        },
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.page {
+  min-height: 100vh;
+  background: #f3f5f6;
+  padding-bottom: 40rpx;
+}
+
+.withdrawal-container {
+  background: #fff;
+  border-radius: 20rpx;
+  margin: 20rpx;
+  padding-bottom: 54rpx;
+  overflow: hidden;
+}
+
+.balance-card {
+  display: flex;
+  justify-content: space-between;
+  margin: 20rpx;
+  padding: 40rpx;
+  background: linear-gradient(135deg, #ff803a, #ff6b35);
+  border-radius: 20rpx;
+  color: white;
+
+  .balance-item {
+    text-align: center;
+
+    .balance-label {
+      font-size: 24rpx;
+      margin-bottom: 10rpx;
+      opacity: 0.9;
+    }
+
+    .balance-value {
+      font-size: 36rpx;
+      font-weight: bold;
+    }
+  }
+}
+
+.withdrawal-section {
+  padding: 30rpx;
+  //border-bottom: 1rpx solid #f0f0f0;
+
+  .section-title {
+    font-size: 28rpx;
+    color: #3d3d3d;
+    margin-bottom: 20rpx;
+    font-weight: 500;
+  }
+
+  .amount-input {
+    display: flex;
+    align-items: center;
+    border-bottom: 1rpx solid #f0f0f0;
+    padding-bottom: 20rpx;
+
+    .currency-symbol {
+      font-size: 80rpx;
+      color: #333;
+      margin-right: 20rpx;
+      font-weight: bold;
+    }
+
+    .amount-field {
+      height: 90rpx;
+      //border: #4cd964 1px solid;
+      flex: 1;
+      font-size: 80rpx;
+      color: #333;
+    }
+
+    .withdraw-all-btn {
+      padding: 10rpx 20rpx;
+
+      color: #ff803a;
+
+      font-size: 30rpx;
+    }
+  }
+}
+
+.bank-section {
+  display: flex;
+  padding: 30rpx;
+  align-items: center;
+  justify-content: space-between;
+  //border-bottom: 1rpx solid #f0f0f0;
+
+  .section-title {
+    font-size: 28rpx;
+    color: #7c7c7c;
+
+    font-weight: 500;
+  }
+
+  .bank-selector {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .bank-info {
+      display: flex;
+      align-items: center;
+      gap: 20rpx;
+
+      .bank-icon {
+        font-size: 40rpx;
+        margin-right: 10rpx;
+      }
+
+      .bank-name {
+        font-size: 28rpx;
+        color: #333;
+      }
+    }
+
+    .arrow-icon {
+      font-size: 32rpx;
+      color: #999;
+    }
+  }
+}
+
+.withdraw-btn {
+  margin: 17rpx;
+  padding: 30rpx;
+  background: #ffeee4;
+  color: #ff803a;
+  text-align: center;
+  font-size: 36rpx;
+  font-weight: 500;
+  border-radius: 46rpx;
+  box-shadow: rgba(0, 0, 0, 0.1) 0 5px 10px 0;
+}
+
+.available-amount {
+  padding-left: 66rpx;
+  text-align: left;
+  font-size: 24rpx;
+  color: #666;
+  margin-bottom: 30rpx;
+}
+
+.withdrawal-explanation {
+  margin: 30rpx;
+  padding: 30rpx;
+  background: #fff;
+  border-radius: 20rpx;
+
+  .explanation-title {
+    font-size: 34rpx;
+    color: #3d3d3d;
+    margin-bottom: 20rpx;
+    font-weight: 500;
+  }
+
+  .explanation-item {
+    padding: 10rpx 0;
+    font-size: 26rpx;
+    color: #3d3d3d;
+  }
+}
+
+view {
+  //border: red solid 1px;
+}
+</style>