完成consumer端同步
This commit is contained in:
@@ -1,160 +1,674 @@
|
||||
<template>
|
||||
<view class="add-card-page">
|
||||
<view class="form-container">
|
||||
<view class="form-item">
|
||||
<text class="label">持卡人</text>
|
||||
<input class="input" type="text" v-model="form.holder_name" placeholder="请输入持卡人姓名" />
|
||||
<!-- 绑定银行卡 - 添加信息页（拼多多风格） -->
|
||||
<view class="page">
|
||||
<scroll-view direction="vertical" class="scroll-wrap">
|
||||
|
||||
<!-- ① 提示卡片 -->
|
||||
<view class="tip-banner">
|
||||
<text class="tip-icon">🔒</text>
|
||||
<text class="tip-text">银行卡信息经加密传输，安全有保障</text>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="label">卡号</text>
|
||||
<input class="input" type="number" v-model="form.card_no" placeholder="请输入银行卡号" @input="detectBank" maxlength="19" />
|
||||
|
||||
<!-- ② 表单白色卡片 -->
|
||||
<view class="form-card">
|
||||
|
||||
<!-- 持卡人 -->
|
||||
<view class="form-row">
|
||||
<view class="row-left">
|
||||
<text class="row-label">持卡人</text>
|
||||
</view>
|
||||
<view class="row-right">
|
||||
<input
|
||||
class="row-input"
|
||||
type="text"
|
||||
v-model="form.holder_name"
|
||||
placeholder="请输入银行卡开户人姓名"
|
||||
placeholder-style="color:#c0c4cc;font-size:28rpx"
|
||||
:maxlength="20"
|
||||
/>
|
||||
<text class="row-tip-icon" @click="showHolderTip">ⓘ</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="divider" />
|
||||
|
||||
<!-- 银行卡号 -->
|
||||
<view class="form-row">
|
||||
<view class="row-left">
|
||||
<text class="row-label">银行卡号</text>
|
||||
</view>
|
||||
<view class="row-right">
|
||||
<input
|
||||
class="row-input"
|
||||
type="number"
|
||||
v-model="cardNoDisplay"
|
||||
placeholder="请输入银行卡号"
|
||||
placeholder-style="color:#c0c4cc;font-size:28rpx"
|
||||
:maxlength="23"
|
||||
@input="onCardNoInput"
|
||||
/>
|
||||
<text class="camera-btn" @click="doOCR">📷</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="divider" />
|
||||
|
||||
<!-- 开户银行（选择器） -->
|
||||
<view class="form-row selector-row" @click="openBankPicker">
|
||||
<view class="row-left">
|
||||
<text class="row-label">开户银行</text>
|
||||
</view>
|
||||
<view class="row-right">
|
||||
<view class="selector-value-wrap">
|
||||
<text
|
||||
class="selector-value"
|
||||
:class="{ placeholder: form.bank_name === '' }"
|
||||
>
|
||||
{{ form.bank_name ?? '请选择开户银行' }}
|
||||
</text>
|
||||
</view>
|
||||
<text class="arrow-icon">›</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="divider" />
|
||||
|
||||
<!-- 开户支行（仅选了银行后显示，非必填） -->
|
||||
<view v-if="form.bank_name !== ''" class="form-row selector-row" @click="openBranchInput">
|
||||
<view class="row-left">
|
||||
<text class="row-label">开户支行</text>
|
||||
<text class="optional-badge">非必填</text>
|
||||
</view>
|
||||
<view class="row-right">
|
||||
<view class="selector-value-wrap">
|
||||
<text
|
||||
class="selector-value"
|
||||
:class="{ placeholder: form.branch_name === '' }"
|
||||
>
|
||||
{{ form.branch_name ?? '请填写开户支行（可选）' }}
|
||||
</text>
|
||||
</view>
|
||||
<text class="arrow-icon">›</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="form.bank_name !== ''" class="divider" />
|
||||
|
||||
<!-- 手机号 -->
|
||||
<view class="form-row">
|
||||
<view class="row-left">
|
||||
<text class="row-label">手机号码</text>
|
||||
</view>
|
||||
<view class="row-right">
|
||||
<input
|
||||
class="row-input"
|
||||
type="number"
|
||||
v-model="form.phone"
|
||||
placeholder="请输入该银行卡的预留手机号"
|
||||
placeholder-style="color:#c0c4cc;font-size:28rpx"
|
||||
:maxlength="11"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="label">银行</text>
|
||||
<input class="input" type="text" v-model="form.bank_name" placeholder="自动识别或手动输入" />
|
||||
|
||||
<!-- ③ 安全说明 -->
|
||||
<view class="desc-area">
|
||||
<text class="desc-text">
|
||||
手机号码将作为账户安全验证依据，请填写该银行卡在银行预留的手机号。
|
||||
</text>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="label">手机号</text>
|
||||
<input class="input" type="number" v-model="form.phone" placeholder="银行预留手机号" maxlength="11" />
|
||||
|
||||
<!-- 底部占位 -->
|
||||
<view class="bottom-placeholder" />
|
||||
</scroll-view>
|
||||
|
||||
<!-- ④ 底部大按钮（固定） -->
|
||||
<view class="bottom-bar">
|
||||
<view
|
||||
class="next-btn"
|
||||
:class="canSubmit ? 'next-btn-active' : 'next-btn-disabled'"
|
||||
@click="goVerify"
|
||||
>
|
||||
<text class="next-btn-text">下一步，身份验证</text>
|
||||
</view>
|
||||
|
||||
<view class="form-item switch-item">
|
||||
<text class="label">设为默认卡</text>
|
||||
<switch :checked="form.is_default" @change="onSwitchChange" color="#ff5000" />
|
||||
<view style="height: env(safe-area-inset-bottom); min-height: 8rpx;" />
|
||||
</view>
|
||||
|
||||
<!-- ⑤ 银行选择弹层 -->
|
||||
<view v-if="bankPickerVisible" class="picker-mask" @click="closeBankPicker">
|
||||
<view class="picker-panel" @click.stop>
|
||||
<view class="picker-header">
|
||||
<text class="picker-title">选择开户银行</text>
|
||||
<text class="picker-close" @click="closeBankPicker">✕</text>
|
||||
</view>
|
||||
<scroll-view direction="vertical" class="picker-scroll">
|
||||
<view
|
||||
v-for="bank in bankList"
|
||||
:key="bank.code"
|
||||
class="picker-item"
|
||||
:class="{ 'picker-item-active': form.bank_name === bank.name }"
|
||||
@click="selectBank(bank)"
|
||||
>
|
||||
<view class="bank-logo-placeholder">
|
||||
<text class="bank-logo-text">{{ bank.shortName.substring(0, 2) }}</text>
|
||||
</view>
|
||||
<text class="picker-item-name">{{ bank.name }}</text>
|
||||
<text v-if="form.bank_name === bank.name" class="picker-check">✓</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="action-section">
|
||||
<button class="submit-btn" :class="{ disabled: loading }" :disabled="loading" @click="submit">确认添加</button>
|
||||
|
||||
<!-- ⑥ 开户支行输入弹层 -->
|
||||
<view v-if="branchInputVisible" class="picker-mask" @click="closeBranchInput">
|
||||
<view class="branch-panel" @click.stop>
|
||||
<view class="picker-header">
|
||||
<text class="picker-title">填写开户支行</text>
|
||||
<text class="picker-close" @click="closeBranchInput">✕</text>
|
||||
</view>
|
||||
<view class="branch-input-wrap">
|
||||
<input
|
||||
class="branch-input"
|
||||
type="text"
|
||||
v-model="branchInputTemp"
|
||||
placeholder="例：招商银行上海浦东支行"
|
||||
placeholder-style="color:#c0c4cc"
|
||||
:maxlength="50"
|
||||
/>
|
||||
</view>
|
||||
<view class="branch-confirm-btn" @click="confirmBranch">
|
||||
<text class="branch-confirm-text">确认</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { supabaseService } from '@/utils/supabaseService.uts'
|
||||
<script lang="uts">
|
||||
import {
|
||||
BANK_LIST,
|
||||
BankItem,
|
||||
detectBankByBin,
|
||||
formatCardNo,
|
||||
cleanCardNo,
|
||||
luhnCheck,
|
||||
isValidPhone,
|
||||
recognizeBankCardFromImage
|
||||
} from '@/utils/bankUtils.uts'
|
||||
|
||||
type BankCardForm = {
|
||||
holder_name: string
|
||||
card_no: string
|
||||
bank_name: string
|
||||
phone: string
|
||||
is_default: boolean
|
||||
type AddCardForm = {
|
||||
holder_name: string
|
||||
card_no: string // 纯数字，提交时用
|
||||
bank_name: string
|
||||
bank_code: string
|
||||
branch_name: string
|
||||
phone: string
|
||||
}
|
||||
|
||||
const loading = ref(false)
|
||||
const form = reactive({
|
||||
holder_name: '',
|
||||
card_no: '',
|
||||
bank_name: '',
|
||||
phone: '',
|
||||
is_default: false
|
||||
} as BankCardForm)
|
||||
|
||||
const onSwitchChange = (e: UniSwitchChangeEvent) => {
|
||||
form.is_default = e.detail.value
|
||||
}
|
||||
|
||||
// 模拟卡号识别
|
||||
const detectBank = (e: any) => {
|
||||
const val = form.card_no
|
||||
if (val.length >= 6) {
|
||||
if (val.startsWith('6222')) form.bank_name = '中国工商银行'
|
||||
else if (val.startsWith('6227')) form.bank_name = '中国建设银行'
|
||||
else if (val.startsWith('6225')) form.bank_name = '招商银行'
|
||||
else if (val.startsWith('6228')) form.bank_name = '中国农业银行'
|
||||
// else form.bank_name = ''
|
||||
}
|
||||
}
|
||||
|
||||
const submit = async () => {
|
||||
if (form.holder_name == '' || form.card_no == '' || form.bank_name == '') {
|
||||
uni.showToast({ title: '请完善卡片信息', icon: 'none' })
|
||||
return
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
holder_name: '',
|
||||
card_no: '',
|
||||
bank_name: '',
|
||||
bank_code: '',
|
||||
branch_name: '',
|
||||
phone: ''
|
||||
} as AddCardForm,
|
||||
cardNoDisplay: '' as string, // 格式化显示（含空格）
|
||||
bankList: BANK_LIST as BankItem[],
|
||||
bankPickerVisible: false as boolean,
|
||||
branchInputVisible: false as boolean,
|
||||
branchInputTemp: '' as string,
|
||||
ocrLoading: false as boolean
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
|
||||
try {
|
||||
const cardData = new UTSJSONObject()
|
||||
cardData.set('holder_name', form.holder_name)
|
||||
cardData.set('bank_name', form.bank_name)
|
||||
cardData.set('card_no', form.card_no) // Also save full card no if needed, or just last4
|
||||
// 截取后4位
|
||||
const last4 = form.card_no.length > 4 ? form.card_no.slice(-4) : form.card_no
|
||||
cardData.set('card_no_last4', last4)
|
||||
cardData.set('phone', form.phone)
|
||||
cardData.set('is_default', form.is_default)
|
||||
// 简单推定为储蓄卡
|
||||
cardData.set('card_type', 'debit')
|
||||
|
||||
const success = await supabaseService.addBankCard(cardData)
|
||||
if (success) {
|
||||
uni.showToast({ title: '添加成功' })
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1000)
|
||||
} else {
|
||||
uni.showToast({ title: '添加失败', icon: 'none' })
|
||||
},
|
||||
|
||||
computed: {
|
||||
canSubmit(): boolean {
|
||||
return (
|
||||
this.form.holder_name.trim().length > 0 &&
|
||||
cleanCardNo(this.cardNoDisplay).length >= 16 &&
|
||||
this.form.bank_name.length > 0 &&
|
||||
isValidPhone(this.form.phone)
|
||||
)
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
// ── 持卡人提示 ──────────────────────────────
|
||||
showHolderTip() {
|
||||
uni.showToast({
|
||||
title: '请填写银行卡开户人姓名，需与实名认证一致',
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
})
|
||||
},
|
||||
|
||||
// ── 卡号输入：格式化 + BIN 识别 ─────────────
|
||||
onCardNoInput() {
|
||||
const raw = cleanCardNo(this.cardNoDisplay)
|
||||
// 重新格式化
|
||||
this.cardNoDisplay = formatCardNo(raw)
|
||||
this.form.card_no = raw
|
||||
|
||||
// BIN 识别（输入 6 位后触发）
|
||||
if (raw.length >= 6) {
|
||||
const bank = detectBankByBin(raw)
|
||||
if (bank != null && this.form.bank_name === '') {
|
||||
this.form.bank_name = bank.name
|
||||
this.form.bank_code = bank.code
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
uni.showToast({ title: '系统错误', icon: 'none' })
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
},
|
||||
|
||||
// ── OCR 识别 ────────────────────────────────
|
||||
async doOCR() {
|
||||
if (this.ocrLoading) return
|
||||
this.ocrLoading = true
|
||||
try {
|
||||
const result = await recognizeBankCardFromImage()
|
||||
if (result.success === true) {
|
||||
if (result.cardNo != null && result.cardNo !== '') {
|
||||
this.form.card_no = result.cardNo
|
||||
this.cardNoDisplay = formatCardNo(result.cardNo)
|
||||
}
|
||||
if (result.bankName != null && result.bankName !== '' && this.form.bank_name === '') {
|
||||
this.form.bank_name = result.bankName
|
||||
}
|
||||
uni.showToast({ title: '识别成功', icon: 'success' })
|
||||
} else if (result.errorMsg !== '取消选择') {
|
||||
uni.showToast({ title: (result.errorMsg != null && result.errorMsg !== '' ? result.errorMsg : 'OCR 识别失败'), icon: 'none' })
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('[add] OCR 异常:', e)
|
||||
uni.showToast({ title: 'OCR 出现异常', icon: 'none' })
|
||||
} finally {
|
||||
this.ocrLoading = false
|
||||
}
|
||||
},
|
||||
|
||||
// ── 银行选择弹层 ─────────────────────────────
|
||||
openBankPicker() {
|
||||
this.bankPickerVisible = true
|
||||
},
|
||||
closeBankPicker() {
|
||||
this.bankPickerVisible = false
|
||||
},
|
||||
selectBank(bank: BankItem) {
|
||||
this.form.bank_name = bank.name
|
||||
this.form.bank_code = bank.code
|
||||
this.bankPickerVisible = false
|
||||
},
|
||||
|
||||
// ── 支行输入弹层 ─────────────────────────────
|
||||
openBranchInput() {
|
||||
this.branchInputTemp = this.form.branch_name
|
||||
this.branchInputVisible = true
|
||||
},
|
||||
closeBranchInput() {
|
||||
this.branchInputVisible = false
|
||||
},
|
||||
confirmBranch() {
|
||||
this.form.branch_name = this.branchInputTemp.trim()
|
||||
this.branchInputVisible = false
|
||||
},
|
||||
|
||||
// ── 下一步：跳转到身份验证页 ─────────────────
|
||||
goVerify() {
|
||||
if (!this.canSubmit) {
|
||||
if (this.form.holder_name.trim() === '') {
|
||||
uni.showToast({ title: '请输入持卡人姓名', icon: 'none' })
|
||||
} else if (cleanCardNo(this.cardNoDisplay).length < 16) {
|
||||
uni.showToast({ title: '请输入正确的银行卡号', icon: 'none' })
|
||||
} else if (this.form.bank_name === '') {
|
||||
uni.showToast({ title: '请选择开户银行', icon: 'none' })
|
||||
} else if (!isValidPhone(this.form.phone)) {
|
||||
uni.showToast({ title: '请输入正确的手机号码', icon: 'none' })
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
// Luhn 校验（可选拦截，不强制）
|
||||
const rawCardNo = cleanCardNo(this.cardNoDisplay)
|
||||
if (!luhnCheck(rawCardNo)) {
|
||||
uni.showModal({
|
||||
title: '卡号确认',
|
||||
content: '银行卡号格式可能有误，是否继续？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.navigateToVerify()
|
||||
}
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
this.navigateToVerify()
|
||||
},
|
||||
|
||||
navigateToVerify() {
|
||||
const rawCardNo = cleanCardNo(this.cardNoDisplay)
|
||||
const params = encodeURIComponent(JSON.stringify({
|
||||
holder_name: this.form.holder_name,
|
||||
card_no: rawCardNo,
|
||||
bank_name: this.form.bank_name,
|
||||
bank_code: this.form.bank_code,
|
||||
branch_name: this.form.branch_name,
|
||||
phone: this.form.phone
|
||||
}))
|
||||
uni.navigateTo({
|
||||
url: `/pages/mall/consumer/bank-cards/verify?data=${params}`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.add-card-page {
|
||||
/* ── 整体结构 ────────────────────────────── */
|
||||
.page {
|
||||
flex: 1;
|
||||
background-color: #f5f5f5;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
background-color: #fff;
|
||||
padding: 0 15px;
|
||||
.scroll-wrap {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
/* ── 提示横幅 ─────────────────────────────── */
|
||||
.tip-banner {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
background-color: #fff7f0;
|
||||
padding: 20rpx 32rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.tip-icon {
|
||||
font-size: 32rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.tip-text {
|
||||
font-size: 24rpx;
|
||||
color: #ff6000;
|
||||
}
|
||||
|
||||
/* ── 表单卡片 ────────────────────────────── */
|
||||
.form-card {
|
||||
background-color: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
margin: 0 24rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
min-height: 112rpx;
|
||||
padding: 0 28rpx;
|
||||
}
|
||||
|
||||
.selector-row {
|
||||
/* 点击区域整行 */
|
||||
}
|
||||
|
||||
.row-left {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 180rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.row-label {
|
||||
font-size: 28rpx;
|
||||
color: #222222;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.optional-badge {
|
||||
font-size: 20rpx;
|
||||
color: #999999;
|
||||
margin-left: 8rpx;
|
||||
background-color: #f5f5f5;
|
||||
padding: 2rpx 10rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.row-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.row-input {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #222222;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
|
||||
.row-tip-icon {
|
||||
font-size: 36rpx;
|
||||
color: #aaaaaa;
|
||||
padding: 0 8rpx;
|
||||
}
|
||||
|
||||
.camera-btn {
|
||||
font-size: 42rpx;
|
||||
padding: 0 4rpx;
|
||||
color: #555555;
|
||||
}
|
||||
|
||||
.selector-value-wrap {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.selector-value {
|
||||
font-size: 28rpx;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.selector-value.placeholder {
|
||||
color: #c0c4cc;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 40rpx;
|
||||
color: #cccccc;
|
||||
padding-left: 8rpx;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1rpx;
|
||||
background-color: #f2f2f2;
|
||||
margin-left: 28rpx;
|
||||
}
|
||||
|
||||
/* ── 安全说明 ────────────────────────────── */
|
||||
.desc-area {
|
||||
padding: 24rpx 32rpx 0;
|
||||
}
|
||||
|
||||
.desc-text {
|
||||
font-size: 22rpx;
|
||||
color: #aaaaaa;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.bottom-placeholder {
|
||||
height: 160rpx;
|
||||
}
|
||||
|
||||
/* ── 底部按钮栏 ──────────────────────────── */
|
||||
.bottom-bar {
|
||||
background-color: #ffffff;
|
||||
padding: 20rpx 32rpx 0;
|
||||
border-top-width: 1rpx;
|
||||
border-top-style: solid;
|
||||
border-top-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.next-btn {
|
||||
border-radius: 56rpx;
|
||||
height: 96rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.form-item:last-child {
|
||||
border-bottom: none;
|
||||
.next-btn-active {
|
||||
background-color: #e23636;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 80px;
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
.next-btn-disabled {
|
||||
background-color: #f5a0a0;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
font-size: 15px;
|
||||
.next-btn-text {
|
||||
font-size: 32rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.switch-item {
|
||||
/* ── 弹层背景蒙层 ────────────────────────── */
|
||||
.picker-mask {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.45);
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* ── 银行选择面板 ────────────────────────── */
|
||||
.picker-panel {
|
||||
background-color: #ffffff;
|
||||
border-top-left-radius: 24rpx;
|
||||
border-top-right-radius: 24rpx;
|
||||
max-height: 75%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.picker-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx 32rpx 20rpx;
|
||||
border-bottom-width: 1rpx;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.action-section {
|
||||
padding: 30px 15px;
|
||||
.picker-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
background-color: #ff5000;
|
||||
color: #fff;
|
||||
border-radius: 25px;
|
||||
font-size: 16px;
|
||||
.picker-close {
|
||||
font-size: 36rpx;
|
||||
color: #999999;
|
||||
padding: 8rpx;
|
||||
}
|
||||
|
||||
.submit-btn.disabled {
|
||||
opacity: 0.6;
|
||||
.picker-scroll {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.picker-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 28rpx 32rpx;
|
||||
border-bottom-width: 1rpx;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: #f7f7f7;
|
||||
}
|
||||
|
||||
.picker-item-active {
|
||||
background-color: #fff5f5;
|
||||
}
|
||||
|
||||
.bank-logo-placeholder {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 36rpx;
|
||||
background-color: #e23636;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.bank-logo-text {
|
||||
font-size: 22rpx;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.picker-item-name {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.picker-check {
|
||||
font-size: 32rpx;
|
||||
color: #e23636;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* ── 支行输入面板 ────────────────────────── */
|
||||
.branch-panel {
|
||||
background-color: #ffffff;
|
||||
border-top-left-radius: 24rpx;
|
||||
border-top-right-radius: 24rpx;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.branch-input-wrap {
|
||||
margin: 24rpx 32rpx;
|
||||
background-color: #f7f7f7;
|
||||
border-radius: 12rpx;
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
|
||||
.branch-input {
|
||||
height: 96rpx;
|
||||
font-size: 28rpx;
|
||||
color: #222222;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.branch-confirm-btn {
|
||||
margin: 0 32rpx;
|
||||
height: 88rpx;
|
||||
background-color: #e23636;
|
||||
border-radius: 44rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.branch-confirm-text {
|
||||
font-size: 30rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user