delivery-uniapp/pages/registered/accountInfo.vue

<template>
	<s-layout title="工资结算账户信息" class="set-userinfo-wrap">
		<view class="page">
			<up-form ref="acctForm" :model="form" :rules="rules" labelPosition="left" labelWidth="120">
				<up-form-item label="开户行城市" prop="bankCity" :required="true">
					<up-input readonly v-model="bankCityLabel" placeholder="省-市" @tap="regionShow = true" />
				</up-form-item>

				<up-form-item label="开户行别" prop="bankName" :required="true">
					<up-picker hasInput :columns="bankOptions" v-model="bankNameLabel" @confirm="onBankConfirm">
						<template #trigger>
							<up-input readonly v-model="bankNameLabel" placeholder="请选择开户行" />
						</template>
					</up-picker>
				</up-form-item>

				<up-form-item label="开户行网点名称" prop="bankBranch" :required="true">
					<up-picker hasInput :columns="branchOptions" v-model="bankBranchLabel" @confirm="onBranchConfirm">
						<template #trigger>
							<up-input readonly v-model="bankBranchLabel" placeholder="请选择网点名称" />
						</template>
					</up-picker>
				</up-form-item>

				<up-form-item label="银行卡号" prop="cardNo" :required="true">
					<up-input v-model="form.cardNo" placeholder="请输入银行卡号" type="number" maxlength="23" />
				</up-form-item>

				<up-form-item label="持卡人姓名" prop="cardHolder" :required="true">
					<up-input v-model="form.cardHolder" placeholder="请输入持卡人姓名" />
				</up-form-item>

				<up-form-item label="银行代码" prop="bankCode">
					<up-input v-model="form.bankCode" placeholder="请输入银行代码（如有）" />
				</up-form-item>

				<up-form-item label="手机号" prop="phone" :required="true">
					<view class="code-row">
						<view style="width:280rpx;">
							<up-input v-model="form.phone" placeholder="预留手机号码" type="number" maxlength="11" />
						</view>
						<view style="width:160rpx;margin-left:10rpx;">
							<up-button :disabled="countdown > 0" plain @click="sendCode">
								{{ countdown > 0 ? countdown + 's' : '获取验证码' }}
							</up-button>
						</view>
					</view>
				</up-form-item>

				<up-form-item label="验证码" prop="captcha" :required="true">
					<up-input v-model="form.captcha" placeholder="输入验证码" maxlength="6" />
				</up-form-item>

				<view class="agree-row" @click="agree = !agree">
					<view class="checkbox" :class="{checked: agree}"></view>
					<text class="agree-text">勾选同意 <text class="link">《骑手协议》</text> 提交成功后将会有专人与您联系</text>
				</view>

				<view class="submit-row">
					<up-button type="primary" block @click="onSubmitAccount">提交申请审核</up-button>
				</view>
			</up-form>
		</view>
		<su-region-picker level="2" :show="regionShow" @confirm="onRegionConfirm" @cancel="regionShow = false" />
	</s-layout>
</template>

<script setup>
import { reactive, ref, onBeforeMount } from 'vue'

const form = reactive({
	bankCity: '',
	bankName: '',
	bankBranch: '',
	cardNo: '',
	cardHolder: '',
	bankCode: '',
	phone: '',
	captcha: '',
})

const rules = {
	bankCity: [{ required: true, message: '请选择开户城市' }],
	bankName: [{ required: true, message: '请选择开户行别' }],
	bankBranch: [{ required: true, message: '请选择网点名称' }],
	cardNo: [{ required: true, message: '请输入银行卡号' }],
	cardHolder: [{ required: true, message: '请输入持卡人姓名' }],
	phone: [
		{ required: true, message: '请输入手机号' },
		{ pattern: /^1\d{10}$/, message: '请输入正确的手机号码' },
	],
	captcha: [{ required: true, message: '请输入验证码' }],
}

const acctForm = ref(null)
const regionShow = ref(false)
const bankOptions = [
	['中国工商银行', '中国建设银行', '中国农业银行', '中国银行', '交通银行', '招商银行']
]
const branchOptions = [
	['请选择网点']
]
const bankNameLabel = ref([])
const bankBranchLabel = ref([])
const bankCityLabel = ref('')
const countdown = ref(0)
let timer = null
const agree = ref(false)

function onBankConfirm(selected) {
	const first = Array.isArray(selected) ? selected[0] : selected
	bankNameLabel.value = first?.value || first || ''
	form.bankName = bankNameLabel.value
	// 模拟获取分支列表，根据银行设置简单示例
	branchOptions[0] = bankNameLabel.value ? [`${bankNameLabel.value} 总行`, `${bankNameLabel.value} 广州分行`, `${bankNameLabel.value} 天河支行`] : ['请选择网点']
}

function onBranchConfirm(selected) {
	const first = Array.isArray(selected) ? selected[0] : selected
	bankBranchLabel.value = first?.value || first || ''
	form.bankBranch = bankBranchLabel.value
}

function onRegionConfirm(result) {
	console.log("result", result);
	form.bankCity = result
	bankCityLabel.value = `${result.province_name || ''} ${result.city_name || ''}`.trim()
	regionShow.value = false
}

function sendCode() {
	// 简单校验手机号
	if (!/^1\d{10}$/.test(form.phone)) {
		uni.showToast({ title: '请输入正确手机号', icon: 'none' })
		return
	}
	if (countdown.value > 0) return
	// 触发发送（此处模拟）
	uni.showToast({ title: '验证码已发送', icon: 'none' })
	countdown.value = 60
	timer = setInterval(() => {
		if (countdown.value <= 1) {
			clearInterval(timer)
			countdown.value = 0
			timer = null
		} else {
			countdown.value -= 1
		}
	}, 1000)
}

async function onSubmitAccount() {
	try {
		await acctForm.value.validate()
		if (!agree.value) {
			uni.showToast({ title: '请先同意骑手协议', icon: 'none' })
			return
		}
		// 提交逻辑（示例）：打印并提示
		console.log('结算表单', JSON.parse(JSON.stringify(form)))
	uni.showToast({ title: '提交申请成功', icon: 'none' })
	// 跳转到审核中页面
	setTimeout(() => {
		uni.navigateTo({ url: '/pages/registered/audit' })
	}, 600)
	} catch (e) {
		console.warn('结算表单校验未通过', e)
	}
}

onBeforeMount(() => {
	// 尝试从注册页恢复部分信息（如持卡人姓名）
	try {
		const saved = uni.getStorageSync('riderFormData') || null
		if (saved) {
			form.cardHolder = saved.realName || ''
		}
	} catch (err) {
		// ignore
	}
})

</script>

<style lang="scss" scoped>
.page {
	padding: 38rpx;
	background: #fff;
}
.code-row {
	display: flex;
	// gap: 12px;
	align-items: center;
}
.agree-row {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	gap: 12rpx;
	color: #999;
}
.checkbox {
	width: 28rpx;
	height: 28rpx;
	border: 1px solid #ccc;
	border-radius: 50%;
}
.checkbox.checked {
	background: #09aaff;
	border-color: #09aaff;
}
.agree-text {
	font-size: 24rpx;
	color: #999;
}
.link {
	color: #09aaff;
}
.submit-row {
	margin-top: 20px;
}

</style>