purchase-let/pageQuota/Balance/bindAccout.vue

235 lines
6.1 KiB
Vue

<template>
<view class="content">
<view class="action">
<view class="">
提现至
</view>
<view style="font-weight: bold;">
{{form.is_own}}
<!-- 请选择提现账户 -->
{{form.is_own?'对公账户':'个人账户'}}
</view>
<view style="display: flex;align-items: center;color: #20B128;" @click="showPop1=true">
<text>账户绑定</text> <up-icon color="#20B128" name="arrow-right"></up-icon>
</view>
</view>
<view class="form">
<up-form labelPosition="left" borderBottom :label-style="{fontSize:'30rpx'}" labelWidth='70'>
<up-form-item label="开户银行" prop="userInfo.name" borderBottom ref="item1" @click="showPop=true">
<text style="padding-left: 20rpx;" v-if="form.bank_name">{{form.bank_name}}</text>
<text v-else style="color: #20B128;padding-left: 20rpx;">点击选择开户银行</text>
</up-form-item>
<up-form-item label="账户名称" prop="userInfo.name" borderBottom ref="item1">
<up-input style="border: none;" v-model="form.name" placeholder="请输入账户名称" />
</up-form-item>
<up-form-item label="银行账号" prop="userInfo.name" borderBottom ref="item1">
<up-input maxlength="19" style="border: none;" v-model="form.bank_code" type='number'
placeholder="请输入银行账号" />
</up-form-item>
<up-form-item label="开户网点" prop="userInfo.name" borderBottom ref="item1">
<up-input style="border: none;" v-model="form.bank_branch" placeholder="请输入开户网点" />
</up-form-item>
<up-form-item v-if="!form.is_own" label="身份证" prop="userInfo.name" borderBottom ref="item1">
<up-input style="border: none;" v-model="form.id_card" placeholder="请输入身份证" />
</up-form-item>
<up-form-item v-if="!form.is_own" label="电话" prop="userInfo.name" borderBottom ref="item1">
<up-input style="border: none;" v-model="form.phone" placeholder="请输入电话" />
</up-form-item>
</up-form>
</view>
<view class="" style="margin-top: 20rpx;color: red;" v-if="false">
审核失败,请重新提交审核
</view>
<view class="submit-btn">
<up-button text="提交绑定" @click="submit" shape="circle" color="#50C758"></up-button>
</view>
<up-popup :show="showPop" :round="10" mode="bottom" @close="showPop=false" @open="showPop=true">
<view class="popContent">
<view style="text-align: center;font-weight: bold;">请选择银行</view>
<up-icon name="close" color="#303133" size="24" @click="showPop=false"
style="position: absolute;top: 20rpx;right: 20rpx;"></up-icon>
<view class="bank-list">
<view class="bank-li" v-for="item in bankList" :key='item.id' @click="choseBank(item)">
<up-image :show-loading="true" :src="item.image" width="60rpx" height="60rpx"></up-image>
<text style="margin-left: 20rpx;">{{item.name}}</text>
</view>
</view>
</view>
</up-popup>
<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,
bindCradApi,
amountAccountApi
} from "@/api/balance.js"
import {
onPullDownRefresh
} from "@dcloudio/uni-app"
import {
ref,
reactive
} from 'vue';
import useUserStore from '@/store/user';
const userStore = useUserStore();
const showPop = ref(false)
const showPop1 = ref(false)
const bankList = ref([])
const getBankList = async () => {
let res = await bankListApi()
bankList.value = res.data.lists
}
const bank_list = ref([])
const getBanlance = (refresh) => {
amountAccountApi().then(res => {
bank_list.value = res.data.bank_list
getFormData(form, res.data.bank_list[0])
if (refresh) {
uni.stopPullDownRefresh();
}
})
}
getBanlance()
const form = reactive({
"name": "",
"bank_id": 1,
"bank_name": '',
"bank_code": "",
"bank_branch": "",
"financial_img": "",
"is_own": 0,
phone: '',
"id_card": "",
"mer_id": userStore?.userInfo?.merchant?.mer_id,
supplier_id: userStore?.userInfo?.supplier?.id,
user_type: userStore?.userInfo?.merchant?.mer_id ? '1' : '2'
})
const getFormData = (form, target) => {
if (!target) {
form.value = {}
return
}
form.name = target.name || ''
form.bank_id = target.bank_id || ''
form.bank_name = target.bank_name || ''
form.bank_code = target.bank_code || ''
form.bank_branch = target.bank_branch || ''
form.phone = target.phone || ''
form.id_card = target.id_card || ''
form.is_own = target.is_own
}
const choseAccount = (type) => {
getFormData(form, bank_list.value[type])
form.is_own = type
showPop1.value = false
}
const choseBank = (item) => {
form.bank_name = item.name
form.bank_id = item.id
showPop.value = false
}
const navgo = (url) => {
uni.navigateTo({
url
})
}
const submit = () => {
bindCradApi({
...form
}).then(res => {
uni.navigateBack()
}).catch(err => {
console.log(err)
})
}
getBankList()
onPullDownRefresh(() => {
getBanlance(true)
// getBanlance(true)
})
</script>
<style lang="scss">
.content {
padding: 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;
}
}
}
.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;
}
.submit-btn {
position: fixed;
bottom: 146rpx;
width: 710rpx;
}
</style>