提现

src/api/index.ts

@@ -149,7 +149,7 @@ export function fetchUserBalanceRecords<T>() {
 
 export function fetchWithdraw<T>(data: any) {
     return post<Array<T>>({
-        url: '/userBalance/withdraw',
+        url: '/withdraw/apply',
         data: data
     })
 }

src/components/common/BalancePannel.vue

@@ -96,34 +96,57 @@
                 content-style="padding:5px 20px 10px;overflow:auto"
                 header-style="padding:10px 20px"
             >
-                <div>
-                    <div class="text-sm font-bold">提现金额</div>
-                    <div class="text-xs text-[#C8C9CC] mt-[2px]">全部可提现 ¥{{ balance }}</div>
-                </div>
-                <div class="withdraw flex items-center mt-5">
-                    <n-input-number size="large" class="flex-1" v-model:value="withdrawValue" :show-button="false">
-                        <template #prefix> ￥ </template>
-                    </n-input-number>
-                    <n-button
-                        class="!ml-[10px]"
-                        secondary
-                        type="primary"
-                        @click="withdrawValue = balance"
-                        round
-                        size="small"
-                        >全部</n-button
-                    >
-                </div>
+                <n-form ref="withdrawForm" :model="form" :rules="rules" :show-require-mark="false">
+                    <n-form-item path="name" label="姓名">
+                        <template #label>
+                            <div class="text-sm font-bold">姓名</div>
+                        </template>
+                        <n-input v-model:value="form.name" placeholder="请输入真实姓名" :allow-input="onlyAllowNumber">
+                        </n-input>
+                    </n-form-item>
+                    <n-form-item path="account" label="银行卡号">
+                        <template #label>
+                            <div class="text-sm font-bold">银行卡号</div>
+                        </template>
+                        <n-input
+                            v-model:value="form.account"
+                            placeholder="请输入提现的银行卡号"
+                            :allow-input="onlyAllowNumber"
+                        >
+                        </n-input>
+                    </n-form-item>
+                    <n-form-item path="amount" label="提现金额">
+                        <template #label>
+                            <div>
+                                <div class="text-sm font-bold">提现金额</div>
+                                <div class="text-xs text-[#C8C9CC] mt-[2px]">全部可提现 ¥{{ balance }}</div>
+                            </div>
+                        </template>
+                        <div class="flex items-center w-[100%]">
+                            <n-input-number
+                                size="large"
+                                class="flex-1"
+                                placeholder="请输入提现金额"
+                                v-model:value="form.amount"
+                                :show-button="false"
+                            >
+                                <template #prefix> ￥ </template>
+                            </n-input-number>
+                            <n-button
+                                class="!ml-[10px]"
+                                secondary
+                                type="primary"
+                                @click="form.amount = balance"
+                                round
+                                size="small"
+                                >全部</n-button
+                            >
+                        </div>
+                    </n-form-item>
+                </n-form>
 
-                <div class="px-6 mt-20">
-                    <n-button
-                        type="primary"
-                        :loading="loading"
-                        block
-                        round
-                        size="large"
-                        :disabled="!canWithdraw"
-                        @click="withdraw"
+                <div class="px-6 mt-10">
+                    <n-button type="primary" :loading="loading" block round size="large" @click="submit"
                         >确认提现</n-button
                     >
                 </div>
@@ -133,8 +156,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import { NButton, NIcon, NModal, NCard, NInputNumber, useMessage } from 'naive-ui'
+import { ref, Ref, computed } from 'vue'
+import { NButton, NIcon, NModal, NCard, FormInst, NForm, NFormItem, NInput, NInputNumber, useMessage } from 'naive-ui'
 import { ChevronRight, ChevronDown } from '@vicons/tabler'
 import { fetchUserBalance, fetchUserBalanceRecords, fetchWithdraw } from '@/api'
 import withdrawImg from '@/assets/icon-tixian.png'
@@ -177,13 +200,60 @@ const withdrawValue = ref(0)
 const canWithdraw = computed(() => {
     return Number(withdrawValue.value) > 0
 })
-
+const form = ref({
+    name: '',
+    account: '',
+    amount: 0
+})
 const message = useMessage()
 const loading = ref(false)
-function withdraw() {
+const onlyAllowNumber = (value: string) => !value || /^\d+$/.test(value)
+const rules = {
+    name: [
+        {
+            required: true,
+            message: '请输入真实姓名',
+            trigger: ['blur']
+        }
+    ],
+    account: [
+        {
+            validator(rule: any, value: any) {
+                if (!value) {
+                    return new Error('请输入提现的银行卡号')
+                } else if (!/^([1-9]{1})(\d{15}|\d{16}|\d{18})$/.test(value)) {
+                    return new Error('银行卡号格式错误')
+                }
+
+                return true
+            },
+            trigger: ['blur']
+        }
+    ],
+    amount: [
+        {
+            validator(rule: any, value: any) {
+                if (!value || Number(value) <= 0) {
+                    return new Error('提现金额不能为空')
+                }
+
+                return true
+            },
+            trigger: ['blur']
+        }
+    ]
+}
+
+const withdrawForm: Ref<FormInst | null> = ref(null)
+async function submit() {
+    try {
+        await withdrawForm.value?.validate()
+    } catch (e: any) {
+        return
+    }
     loading.value = true
     fetchWithdraw({
-        amount: withdrawValue.value
+        ...form.value
     })
         .then(res => {
             message.success('提现成功')

src/hooks/useTheme.ts

@@ -39,8 +39,11 @@ export function useTheme() {
             Card: {
                 colorModal: isDark.value ? '#20223c' : '#fff'
             },
-            Dialog:{
+            Dialog: {
                 color: isDark.value ? '#20223c' : '#fff'
+            },
+            Form: {
+                feedbackFontSizeMedium: '12px'
             }
         }
     })