new_shop_app/pages/quote/bindAccout.vue

<template>
	<view class="content">
		<view class="action">
			<view class="">
				提现至
			</view>
			<view style="font-weight: bold;">
				{{form.is_own?'对公账户':'个人账户'}}
			</view>
			<view style="display: flex;align-items: center;color: #20B128;" @click="showPop1=true">
				<text>账户绑定</text> <u-icon color="#20B128" name="arrow-right"></u-icon>
			</view>
		</view>
		{{form}}
		<view class="form">
			<u-form labelPosition="left" borderBottom :label-style="{fontSize:'30rpx'}" labelWidth='70'>
				<u-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>
				</u-form-item>
				<u-form-item label="账户名称" prop="userInfo.name" borderBottom ref="item1">
					<u-input style="border: none;" v-model="form.name" placeholder="请输入账户名称" />
				</u-form-item>
				<u-form-item label="银行账号" prop="userInfo.name" borderBottom ref="item1">
					<u-input maxlength="19" style="border: none;" v-model="form.bank_code" type='number'
						placeholder="请输入银行账号" />
				</u-form-item>
				<u-form-item label="开户网点" prop="userInfo.name" borderBottom ref="item1">
					<u-input style="border: none;" v-model="form.bank_branch" placeholder="请输入开户网点" />
				</u-form-item>
				<u-form-item v-if="!form.is_own" label="身份证" prop="userInfo.name" borderBottom ref="item1">
					<u-input style="border: none;" v-model="form.id_card" placeholder="请输入身份证" />
				</u-form-item>
				<u-form-item v-if="!form.is_own" label="电话" prop="userInfo.name" borderBottom ref="item1">
					<u-input style="border: none;" v-model="form.phone" placeholder="请输入电话" />
				</u-form-item>
			</u-form>
		</view>
		<view class="" style="margin-top: 20rpx;color: red;" v-if="false">
			审核失败,请重新提交审核
		</view>

		<view class="submit-btn">
			<u-button text="提交绑定" @click="submit" shape="circle" color="#50C758"></u-button>
		</view>
		<u-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>
				<u-icon name="close" color="#303133" size="24" @click="showPop=false"
					style="position: absolute;top: 20rpx;right: 20rpx;"></u-icon>
				<view class="bank-list">
					<view class="bank-li" v-for="item in bankList" :key='item.id' @click="choseBank(item)">
						<u-image :show-loading="true" :src="item.image" width="60rpx" height="60rpx"></u-image>
						<text style="margin-left: 20rpx;">{{item.name}}</text>
					</view>
				</view>
			</view>
		</u-popup>
		<u-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>
				<u-icon name="close" color="#303133" size="24" @click="showPop1=false"
					style="position: absolute;top: 20rpx;right: 20rpx;"></u-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>
		</u-popup>
	</view>
</template>
<script>
	import {
		bindCradApi,
		bankListApi,
		amountAccountApi
	} from "@/api/supplier.js"
	export default {
		data() {
			return {
				form: {
					"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'

				},
				showPop: false,
				bankList: [],
				hasBindAccount: [],
				showPop1: false
			}
		},
		methods: {
			navgo(url) {
				uni.navigateTo({
					url
				})
			},
			async getHasBindBankList() {
				let res = await amountAccountApi({})
				this.hasBindAccount = res.data.bank_list
				this.form = res.data.bank_list[0] || {}
			},
			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
			},
			choseAccount(type) {
				this.getFormData(this.form, this.hasBindAccount[type])
				this.form.is_own = type
				this.showPop1 = false
			},

			choseBank(item) {
				this.form.bank_name = item.name
				this.form.bank_id = item.id
				this.showPop = false
			},
			async getBankList() {
				let res = await bankListApi()
				this.bankList = res.data.lists

			},
			submit() {
				bindCradApi({
					...this.form
				}).then(res => {
					// return
					uni.navigateBack()
				})
			}


		},
		onLoad() {
			uni.showTabBar()
			this.getHasBindBankList()
			this.getBankList()
		}
	}
</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>