purchase-let/pageQuota/Balance/index1.vue

227 lines
5.5 KiB
Vue
Raw Normal View History

2024-06-08 22:50:09 +08:00
<template>
<view class="content">
<view class="total">
<view class="">
账户总余额()
</view>
<view style="font-size: 36rpx;">
{{balance||0.00}}
</view>
</view>
<view class="action">
<view class="">
提现至
</view>
<view style="font-weight: bold;" @click="showPop1=true">
{{target_bank.is_own?'对公账户':"个人账户"}}
</view>
<view style="display: flex;align-items: center;color: #20B128;"
@click="navgo('/pageQuota/Balance/bindAccout')">
<text>更换账户</text> <up-icon color="#20B128" name="arrow-right"></up-icon>
</view>
</view>
<view class="form" v-if='target_bank.bank_name'>
<up-form labelPosition="left" borderBottom :label-style="{fontSize:'30rpx'}" ref="form1" labelWidth='70'>
<up-form-item label="银行卡" prop="userInfo.name" borderBottom ref="item1">
<up-input style="border: none;" v-model="target_bank.bank_name" />
</up-form-item>
<up-form-item label="持卡人" prop="userInfo.name" borderBottom ref="item1">
<up-input style="border: none;" v-model="target_bank.name" />
</up-form-item>
<up-form-item label="银行账户" prop="userInfo.name" borderBottom ref="item1">
<up-input style="border: none;" v-model="target_bank.bank_code" />
</up-form-item>
<up-form-item label="开户网点" prop="userInfo.name" borderBottom ref="item1">
<up-input style="border: none;" v-model="target_bank.bank_branch" />
</up-form-item>
<up-form-item label="提现金额" prop="userInfo.name" borderBottom ref="item1">
<up-input style="border: none;" v-model="form.money" placeholder="请输入提现金额" />
</up-form-item>
<text style="color: #999999;font-size: 24rpx;">
说明:用户下单后该订单金额存放在暂存金额中用户确认收货后次日18:00才可提现该笔订单金额
提货付款订单在完成后次日18:00才可提现
</text>
</up-form>
</view>
<up-empty mode="data" v-else :text='emptyText'
icon="https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/89e93202405131146497294.png" />
<view class="detail" @click="navgo('/pageQuota/Balance/detail')">
明细
</view>
<view class="submit-btn">
<up-button text="提现" @click="submit" shape="circle" color="#50C758"></up-button>
</view>
<up-popup :show="showPop1" :round="10" mode="bottom" @close="showPop1=false" @open="showPop1=true">
<view class="popContent">
<view style="text-align: center;font-weight: bold;">请选择提现账户</view>
<up-icon name="close" color="#303133" size="24" @click="showPop1=false"
style="position: absolute;top: 20rpx;right: 20rpx;"></up-icon>
<view class="bank-list">
<view class="bank-li" @click="choseAccount(0)">
<text>个人账户</text>
</view>
<view class="bank-li" @click="choseAccount(1)">
<text>对公账户</text>
</view>
</view>
</view>
</up-popup>
</view>
</template>
<script setup>
import {
bankListApi,
amountAccountApi,
UserWithdrawApi
} from "@/api/balance.js"
import {
ref,
reactive
} from 'vue';
import {
onPullDownRefresh
} from "@dcloudio/uni-app"
const emptyText = '您尚未绑定提现账户,\n点击右上角"添加账户"'
const showPop1 = ref(false)
const choseAccount = (type) => {
target_bank.value = bank_list.value[type] || {}
console.log(target_bank.value)
showPop1.value = false
}
const showPop = ref(false)
const navgo = (url) => {
uni.navigateTo({
url
})
}
const bankList = ref([])
const getBankList = async () => {
let res = await bankListApi()
bankList.value = res.data.lists
}
const choseBank = (item) => {
form.bank_name = item.name
form.bank_id = item.id
showPop.value = false
}
const form = reactive({
money: ""
})
const bank_list = ref([])
const balance = ref(0.00)
const target_bank = ref([])
const getBanlance = (isAsync) => {
amountAccountApi().then(res => {
balance.value = res.data.balance
bank_list.value = res.data.bank_list
target_bank.value = res.data.bank_list[0] || {}
if (isAsync) {
uni.stopPullDownRefresh();
}
})
}
getBanlance()
const submit = async () => {
await UserWithdrawApi({
"merchant_bank_id": target_bank.value.id,
"amount": form.money
})
uni.showToast({
title: '提交成功',
duration: 1500
})
uni.$u.sleep(1500).then(res => {
uni.navigateTo({
url: '/pageQuota/Balance/detail'
})
})
}
getBankList()
onPullDownRefresh(() => {
getBanlance(true)
})
</script>
<style lang="scss">
.content {
padding: 20rpx;
.total {
background-color: #50C758;
border-radius: 16rpx 16rpx 16rpx 16rpx;
color: white;
display: flex;
justify-content: space-between;
padding: 42rpx 30rpx;
font-size: 30rpx;
margin-bottom: 30rpx;
}
.action {
background-color: white;
border-radius: 16rpx 16rpx 16rpx 16rpx;
padding: 30rpx;
display: flex;
justify-content: space-between;
margin-bottom: 30rpx;
}
.form {
padding: 28rpx 30rpx;
background-color: white;
border-radius: 20rpx;
}
}
.popContent {
padding: 20rpx;
.bank-list {
overflow-y: auto;
position: relative;
max-height: 40vh;
.bank-li {
display: flex;
align-items: center;
justify-content: center;
padding: 20rpx;
border-bottom: 1px solid #F8F9FA;
}
}
}
.detail {
width: 88rpx;
height: 88rpx;
border-radius: 88rpx;
text-align: center;
line-height: 88rpx;
background-color: #50C758;
color: white;
position: absolute;
bottom: 300rpx;
right: 20rpx;
}
.submit-btn {
position: fixed;
bottom: 146rpx;
width: 710rpx;
}
</style>