Files
zzp-uniapp/src/packages/pages/withdraw/account_bank.vue
2026-01-19 14:02:50 +08:00

129 lines
3.9 KiB
Vue

<template>
<view>
<h-dark :title="title"></h-dark>
<view class="mt-[40rpx]">
<view class=" px-[40rpx] mb-[15rpx]">
* {{t('withdraw.bankname')}}
</view>
<view class="account px-[40rpx] py-[30rpx]">
<view class="bg-[#f6f7fb] rounded-lg px-[20rpx] py-[10rpx] ">
<view class="py-[16rpx]">
<u-picker class="max-w-[750px]" mode="selector" v-model="picker_show"
:default-selector="[banks.default_select]" :range="banks.list" range-key="name"
@confirm="handlePicker" :confirm-text="t('common.confirm')"
:cancel-text="t('common.cancel')">
</u-picker>
<view class="mr-[20rpx]" @click="picker_show=true">
<text class="mr-[10rpx]">{{formData.bank_name}}
</text>
<u-icon name="arrow-down" size="20"></u-icon>
</view>
</view>
</view>
</view>
<view class=" px-[40rpx] mb-[15rpx] mt-[30rpx]">
* {{t('withdraw.bankUsername')}}
</view>
<view class="account px-[40rpx] py-[15rpx]">
<view class="bg-[#f6f7fb] rounded-lg px-[20rpx] py-[10rpx] ">
<u-input class="flex-1" v-model="formData.name" :border="false"
:placeholder="t('withdraw.bankUsernamePlaceholder')" />
</view>
</view>
<view class=" px-[40rpx] mb-[15rpx] mt-[30rpx]">
* {{t('withdraw.bankAccount')}}
</view>
<view class="account px-[40rpx] py-[15rpx]">
<view class="bg-[#f6f7fb] rounded-lg px-[20rpx] py-[10rpx] ">
<u-input class="flex-1" v-model="formData.account" :border="false"
:placeholder="t('withdraw.bankAccountPlaceholder')" />
</view>
</view>
</view>
<view class="px-[40rpx] mt-[50rpx] leading-loose font-bold">
<view class="text-error ">
{{t('withdraw.tips1')}}
</view>
<view class="text-error">
{{t('withdraw.tips2')}}
</view>
</view>
<view class=" px-[40rpx] my-[80rpx] pb-[50rpx]">
<u-button type="primary" @click="handleConfirm"> {{t('withdraw.bindBtn')}} </u-button>
</view>
</view>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { t } from '@/utils/util'
import { withdrawWalletAdd, getWithdrawBanks } from '@/api/finance'
uni.setNavigationBarTitle({ title: t('withdraw.withdrawAccountManage') })
const title = ref('')
const picker_show = ref(false)
const banks = reactive<{
list : any[]
default_select : number
}>({
list: [],
default_select: 0
})
const formData = reactive({
bank_id: '',
name: '',
account: '',
type: 3,//类型1USDT2扫码3银行卡
method_id: '',
bank_name: ''
})
const getData = async () => {
let data = await getWithdrawBanks()
banks.list = data;
formData.bank_id = data[0]['id']
formData.bank_name = data[0]['name']
}
const handlePicker = (index : number) => {
banks.default_select = index;
formData.bank_id = banks.list[index]['id'];
formData.bank_name = banks.list[index]['name'];
}
const handleConfirm = async () => {
if (formData.bank_id == "") return uni.$u.toast(t('withdraw.banknameEmpty'))
if (!formData.name) return uni.$u.toast(t('withdraw.bankUsernameEmpty')
)
if (formData.name.length < 2 || formData.name.length > 30) return uni.$u.toast(t('withdraw.banknameError'))
if (!formData.account) return uni.$u.toast(t('withdraw.bankAccountEmpty'))
if (formData.account.length < 6 || formData.account.length > 30) return uni.$u.toast(t('withdraw.bankAccountError'))
await withdrawWalletAdd(formData)
uni.redirectTo({
url: '/pages/common/successful?type=3'
})
}
onLoad((options : any) => {
formData.method_id = options.id
title.value = options.name;
getData()
})
</script>
<style lang="scss">
page {
background-color: #FFFFFF;
}
.shadow-inner {
border-radius: 10px;
padding: 5px 10px;
box-shadow: inset 0px 1px 4px 0px rgb(0 0 0 / 0.3);
}
</style>