purchase-let/pageQuota/Balance/bindAccout.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>