feat: 引入uView Plus组件库，新增部分静态页面
This commit is contained in:
admin
223
pages/registered/accountInfo.vue
Normal file
223
pages/registered/accountInfo.vue
Normal file
@@ -0,0 +1,223 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user