purchase-let/pageQuota/Balance/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> <up-icon color="#20B128" name="arrow-right"></up-icon>
			</view>
		</view>
		<view class="form">
			<up-form labelPosition="left" borderBottom :label-style="{fontSize:'30rpx'}" :model="model1" :rules="rules"
				ref="form1" labelWidth='70'>
				<up-form-item label="开户银行" prop="userInfo.name" borderBottom ref="item1" @click="showPop=true">
					<text style="padding-left: 20rpx;" v-if="form.bank_id">{{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="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="form.is_own=0,showPop1=false">
						<text>个人账户</text>
					</view>
					<view class="bank-li" @click="form.is_own=1,showPop1=false">
						<text>对公账户</text>
					</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>


<script setup>
	import {
		bankListApi,
		bindCradApi
	} from "@/api/balance.js"
	import {
		ref,
		reactive
	} from 'vue';


	const showPop = ref(false)
	const showPop1 = ref(false)
	const bankList = ref([])

	const getBankList = async () => {
		let res = await bankListApi()
		bankList.value = res.data.lists
	}

	const choseBank = (item) => {
		console.log(item)
		form.bank_name = item.name
		form.bank_id = item.id
		showPop.value = false
	}


	const navgo = (url) => {
		uni.navigateTo({
			url
		})
	}


	const form = reactive({
		"name": "张伟",
		"bank_id": 1,
		"bank_name": '中国邮政',
		"bank_code": "62179967580064578451",
		"bank_branch": "",
		"financial_img": "",
		"is_own": 0,
		phone: '1913055023',
		"id_card": "513701200012105613",
		"mer_id": 500,
		user_type: 1
	})



	const submit = () => {
		bindCradApi({
			...form
		}).then(res => {
			uni.navigateBack()
		}).catch(err => {
			console.log(err)
		})

	}

	// 使用 reactive 创建响应式状态  
	const state = reactive({
		showSex: false,
		model1: {
			userInfo: {
				name: 'uview-plus UI',
				sex: '',
			},
		},
		actions: [{
				name: '男'
			},
			{
				name: '女'
			},
			{
				name: '保密'
			},
		],
		rules: {
			'userInfo.name': {
				type: 'string',
				required: true,
				message: '请填写姓名',
				trigger: ['blur', 'change'],
			},
			'userInfo.sex': {
				type: 'string',
				max: 1,
				required: true,
				message: '请选择男或女',
				trigger: ['blur', 'change'],
			},
		},
		radio: '',
		switchVal: false,
	});

	// 使用 ref 创建响应式引用  
	const formRef = ref(null);

	// 定义方法  
	function sexSelect(e) {
		state.model1.userInfo.sex = e.name;
		if (formRef.value) {
			formRef.value.validateField('userInfo.sex');
		}
	}

	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>