完成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>
|
||||
|
||||
@@ -105,20 +105,23 @@ const addCard = () => {
|
||||
})
|
||||
}
|
||||
|
||||
const doDeleteCard = async (card: BankCard): Promise<void> => {
|
||||
const success = await supabaseService.deleteBankCard(card.id)
|
||||
if (success) {
|
||||
uni.showToast({ title: '已删除' })
|
||||
loadData()
|
||||
} else {
|
||||
uni.showToast({ title: '删除失败', icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
const deleteCard = (card: BankCard) => {
|
||||
uni.showModal({
|
||||
title: '删除银行卡',
|
||||
content: `确认删除尾号${card.card_no_last4}的${card.bank_name}卡片吗？`,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
supabaseService.deleteBankCard(card.id).then((success) => {
|
||||
if (success) {
|
||||
uni.showToast({ title: '已删除' })
|
||||
loadData()
|
||||
} else {
|
||||
uni.showToast({ title: '删除失败', icon: 'none' })
|
||||
}
|
||||
})
|
||||
doDeleteCard(card)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
558
pages/mall/consumer/bank-cards/verify.uvue
Normal file
558
pages/mall/consumer/bank-cards/verify.uvue
Normal file
@@ -0,0 +1,558 @@
|
||||
<template>
|
||||
<!-- 身份验证页（绑定银行卡 Step 2） -->
|
||||
<view class="page">
|
||||
<scroll-view direction="vertical" class="scroll-wrap">
|
||||
|
||||
<!-- ① 银行卡信息卡片 -->
|
||||
<view class="bank-info-card">
|
||||
<view class="bank-logo-circle">
|
||||
<text class="bank-logo-text">{{ bankShortName }}</text>
|
||||
</view>
|
||||
<view class="bank-info-body">
|
||||
<text class="bank-info-name">{{ bankDisplayName }}</text>
|
||||
<text class="bank-info-no">{{ maskedCardNo }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- ② 验证方式 Tab -->
|
||||
<view class="verify-method-tabs">
|
||||
<view class="method-tab method-tab-active">
|
||||
<text class="method-tab-text method-tab-text-active">短信验证</text>
|
||||
</view>
|
||||
<view class="method-tab method-tab-disabled">
|
||||
<text class="method-tab-text method-tab-text-disabled">转账验证（暂不支持）</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- ③ 验证表单白卡 -->
|
||||
<view class="form-card">
|
||||
|
||||
<!-- 手机号 + 获取验证码 -->
|
||||
<view class="form-row">
|
||||
<view class="row-left">
|
||||
<text class="row-label">手机号</text>
|
||||
</view>
|
||||
<view class="row-right">
|
||||
<text class="phone-display">{{ maskedPhone }}</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="smsCode"
|
||||
placeholder="请输入验证码"
|
||||
placeholder-style="color:#c0c4cc;font-size:28rpx"
|
||||
:maxlength="6"
|
||||
/>
|
||||
<view
|
||||
class="sms-btn"
|
||||
:class="countdown > 0 ? 'sms-btn-disabled' : 'sms-btn-active'"
|
||||
@click="getSmsCode"
|
||||
>
|
||||
<text class="sms-btn-text">{{ countdown > 0 ? countdown + 's后重发' : '获取验证码' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- ④ 底部说明 -->
|
||||
<view class="desc-area">
|
||||
<text class="desc-text">
|
||||
验证码将发送至银行预留手机号 {{ maskedPhone }}。若手机号有误，请返回修改。
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="bottom-placeholder" />
|
||||
</scroll-view>
|
||||
|
||||
<!-- ⑤ 底部操作栏 -->
|
||||
<view class="bottom-bar">
|
||||
<view
|
||||
class="confirm-btn"
|
||||
:class="canConfirm ? 'confirm-btn-active' : 'confirm-btn-disabled'"
|
||||
@click="doVerifyAndBind"
|
||||
>
|
||||
<text class="confirm-btn-text">{{ submitting ? '绑定中...' : '验证并绑定' }}</text>
|
||||
</view>
|
||||
|
||||
<view class="back-modify" @click="goBack">
|
||||
<text class="back-modify-text">返回修改</text>
|
||||
</view>
|
||||
|
||||
<view style="height: env(safe-area-inset-bottom); min-height: 8rpx;" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="uts">
|
||||
import {
|
||||
maskCardNo,
|
||||
isValidPhone,
|
||||
sendSmsCode,
|
||||
verifySmsCode
|
||||
} from '@/utils/bankUtils.uts'
|
||||
import { supabaseService } from '@/utils/supabaseService.uts'
|
||||
|
||||
type CardParams = {
|
||||
holder_name: string
|
||||
card_no: string
|
||||
bank_name: string
|
||||
bank_code: string
|
||||
branch_name: string
|
||||
phone: string
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cardParams: {
|
||||
holder_name: '',
|
||||
card_no: '',
|
||||
bank_name: '',
|
||||
bank_code: '',
|
||||
branch_name: '',
|
||||
phone: ''
|
||||
} as CardParams,
|
||||
smsCode: '' as string,
|
||||
countdown: 0 as number,
|
||||
countdownTimer: null as number | null,
|
||||
submitting: false as boolean
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
maskedCardNo(): string {
|
||||
const cardNo = this.cardParams.card_no != null ? this.cardParams.card_no : ''
|
||||
return maskCardNo(cardNo)
|
||||
},
|
||||
|
||||
maskedPhone(): string {
|
||||
const p = this.cardParams.phone != null ? this.cardParams.phone : ''
|
||||
if (p.length < 7) return p
|
||||
return p.substring(0, 3) + '****' + p.substring(7)
|
||||
},
|
||||
|
||||
bankShortName(): string {
|
||||
const name = this.cardParams.bank_name != null ? this.cardParams.bank_name : ''
|
||||
if (name === '') return '银行'
|
||||
// 取前两个汉字作为 logo 占位文字
|
||||
return name.length >= 2 ? name.substring(0, 2) : name
|
||||
},
|
||||
|
||||
bankDisplayName(): string {
|
||||
return this.cardParams.bank_name != null ? this.cardParams.bank_name : ''
|
||||
},
|
||||
|
||||
canConfirm(): boolean {
|
||||
return this.smsCode.length === 6 && !this.submitting
|
||||
}
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
if (options == null) {
|
||||
return
|
||||
}
|
||||
const optionsObj = options as UTSJSONObject
|
||||
const dataStr = optionsObj.getString('data') ?? ''
|
||||
if (dataStr != '') {
|
||||
try {
|
||||
const decodedValue = decodeURIComponent(dataStr)
|
||||
const decoded = decodedValue != null ? decodedValue.toString() : dataStr
|
||||
const parsedObj = JSON.parse(decoded) as UTSJSONObject
|
||||
this.cardParams = {
|
||||
holder_name: parsedObj.getString('holder_name') ?? '',
|
||||
card_no: parsedObj.getString('card_no') ?? '',
|
||||
bank_name: parsedObj.getString('bank_name') ?? '',
|
||||
bank_code: parsedObj.getString('bank_code') ?? '',
|
||||
branch_name: parsedObj.getString('branch_name') ?? '',
|
||||
phone: parsedObj.getString('phone') ?? ''
|
||||
} as CardParams
|
||||
} catch (e) {
|
||||
console.error('[verify] 解析参数失败:', e)
|
||||
uni.showToast({ title: '页面参数异常', icon: 'none' })
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onUnmounted() {
|
||||
this.clearCountdown()
|
||||
},
|
||||
|
||||
methods: {
|
||||
// ── 获取验证码 ─────────────────────────────
|
||||
async getSmsCode() {
|
||||
if (this.countdown > 0) return
|
||||
if (!isValidPhone(this.cardParams.phone)) {
|
||||
uni.showToast({ title: '手机号格式有误', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
uni.showLoading({ title: '发送中...' })
|
||||
try {
|
||||
const result = await sendSmsCode(this.cardParams.phone)
|
||||
uni.hideLoading()
|
||||
if (result.success === true) {
|
||||
uni.showToast({ title: '验证码已发送', icon: 'success' })
|
||||
this.startCountdown(60)
|
||||
} else {
|
||||
uni.showToast({ title: (result.errorMsg != null && result.errorMsg !== '' ? result.errorMsg : '发送失败'), icon: 'none' })
|
||||
}
|
||||
} catch (e) {
|
||||
uni.hideLoading()
|
||||
console.error('[verify] 发送验证码异常:', e)
|
||||
uni.showToast({ title: '发送异常，请重试', icon: 'none' })
|
||||
}
|
||||
},
|
||||
|
||||
startCountdown(seconds: number) {
|
||||
this.countdown = seconds
|
||||
this.countdownTimer = setInterval(() => {
|
||||
if (this.countdown > 0) {
|
||||
this.countdown--
|
||||
} else {
|
||||
this.clearCountdown()
|
||||
}
|
||||
}, 1000) as number
|
||||
},
|
||||
|
||||
clearCountdown() {
|
||||
if (this.countdownTimer != null) {
|
||||
clearInterval(this.countdownTimer!)
|
||||
this.countdownTimer = null
|
||||
}
|
||||
},
|
||||
|
||||
// ── 验证并绑定 ─────────────────────────────
|
||||
async doVerifyAndBind() {
|
||||
if (!this.canConfirm) {
|
||||
if (this.smsCode.length < 6) {
|
||||
uni.showToast({ title: '请输入6位验证码', icon: 'none' })
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
this.submitting = true
|
||||
uni.showLoading({ title: '验证中...' })
|
||||
|
||||
try {
|
||||
// 1. 校验验证码
|
||||
const verifyResult = await verifySmsCode(this.cardParams.phone, this.smsCode)
|
||||
if (verifyResult.success !== true) {
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: (verifyResult.errorMsg != null && verifyResult.errorMsg !== '' ? verifyResult.errorMsg : '验证码错误'), icon: 'none' })
|
||||
this.submitting = false
|
||||
return
|
||||
}
|
||||
|
||||
// 2. 提交绑卡到数据库
|
||||
// 只写入 ml_user_bank_cards 表中已确认存在的列：
|
||||
// holder_name / bank_name / card_no_last4 / phone / card_type / is_default
|
||||
// 扩展字段（bank_code / branch_name / verified_status / verified_at）
|
||||
// 待数据库执行对应 ALTER TABLE 后再取消注释
|
||||
const rawCardNo = this.cardParams.card_no
|
||||
const last4 = rawCardNo.length > 4 ? rawCardNo.substring(rawCardNo.length - 4) : rawCardNo
|
||||
|
||||
const cardData = new UTSJSONObject()
|
||||
cardData.set('holder_name', this.cardParams.holder_name)
|
||||
cardData.set('bank_name', this.cardParams.bank_name)
|
||||
cardData.set('card_no_last4', last4)
|
||||
cardData.set('phone', this.cardParams.phone)
|
||||
cardData.set('card_type', 'debit')
|
||||
cardData.set('is_default', false)
|
||||
|
||||
// ── 扩展字段（取消注释前请先执行 SQL 添加对应列） ──
|
||||
// cardData.set('bank_code', this.cardParams.bank_code || '')
|
||||
// if (this.cardParams.branch_name) {
|
||||
// cardData.set('branch_name', this.cardParams.branch_name)
|
||||
// }
|
||||
// cardData.set('verified_status', 'verified')
|
||||
// cardData.set('verified_at', new Date().toISOString())
|
||||
|
||||
const success = await supabaseService.addBankCard(cardData)
|
||||
uni.hideLoading()
|
||||
|
||||
if (success) {
|
||||
// 写入信号：让 finance-management 的 onShow 能同步读取并立即更新 UI，
|
||||
// 避免因异步 DB 查询时序问题导致页面返回时看到旧状态
|
||||
uni.setStorageSync('__bank_just_bound__', '1')
|
||||
uni.setStorageSync('__bound_bank_name__', this.cardParams.bank_name)
|
||||
uni.setStorageSync('__bound_card_last4__', last4)
|
||||
|
||||
uni.showToast({ title: '绑定成功', icon: 'success' })
|
||||
setTimeout(() => {
|
||||
// 返回银行卡列表页，并跳过 add 页（跳 2 层）
|
||||
const pages = getCurrentPages()
|
||||
if (pages.length >= 2) {
|
||||
uni.navigateBack({ delta: 2 })
|
||||
} else {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}, 1200)
|
||||
} else {
|
||||
uni.showToast({ title: '绑定失败，请重试', icon: 'none' })
|
||||
}
|
||||
} catch (e) {
|
||||
uni.hideLoading()
|
||||
console.error('[verify] 绑定异常:', e)
|
||||
uni.showToast({ title: '系统异常，请重试', icon: 'none' })
|
||||
} finally {
|
||||
this.submitting = false
|
||||
}
|
||||
},
|
||||
|
||||
// ── 返回修改 ───────────────────────────────
|
||||
goBack() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* ── 整体结构 ────────────────────────────── */
|
||||
.page {
|
||||
flex: 1;
|
||||
background-color: #f5f5f5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.scroll-wrap {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* ── 银行卡信息卡片 ──────────────────────── */
|
||||
.bank-info-card {
|
||||
background-color: #ffffff;
|
||||
margin: 24rpx 24rpx 0;
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx 28rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bank-logo-circle {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 44rpx;
|
||||
background-color: #e23636;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 24rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.bank-logo-text {
|
||||
font-size: 26rpx;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.bank-info-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bank-info-name {
|
||||
font-size: 30rpx;
|
||||
color: #222222;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.bank-info-no {
|
||||
font-size: 26rpx;
|
||||
color: #888888;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
/* ── 验证方式 Tabs ───────────────────────── */
|
||||
.verify-method-tabs {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 20rpx 24rpx 0;
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 12rpx;
|
||||
padding: 6rpx;
|
||||
}
|
||||
|
||||
.method-tab {
|
||||
flex: 1;
|
||||
height: 64rpx;
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.method-tab-active {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.method-tab-disabled {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.method-tab-text {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.method-tab-text-active {
|
||||
color: #e23636;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.method-tab-text-disabled {
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
/* ── 表单卡片 ────────────────────────────── */
|
||||
.form-card {
|
||||
background-color: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
margin: 20rpx 24rpx 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
min-height: 112rpx;
|
||||
padding: 0 28rpx;
|
||||
}
|
||||
|
||||
.row-left {
|
||||
width: 160rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.row-label {
|
||||
font-size: 28rpx;
|
||||
color: #222222;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.row-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.phone-display {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.row-input {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #222222;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1rpx;
|
||||
background-color: #f2f2f2;
|
||||
margin-left: 28rpx;
|
||||
}
|
||||
|
||||
/* ── 获取验证码按钮 ──────────────────────── */
|
||||
.sms-btn {
|
||||
height: 64rpx;
|
||||
padding: 0 24rpx;
|
||||
border-radius: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sms-btn-active {
|
||||
background-color: #e23636;
|
||||
}
|
||||
|
||||
.sms-btn-disabled {
|
||||
background-color: #f5a0a0;
|
||||
}
|
||||
|
||||
.sms-btn-text {
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ── 说明文字 ────────────────────────────── */
|
||||
.desc-area {
|
||||
padding: 24rpx 32rpx 0;
|
||||
}
|
||||
|
||||
.desc-text {
|
||||
font-size: 22rpx;
|
||||
color: #aaaaaa;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.bottom-placeholder {
|
||||
height: 200rpx;
|
||||
}
|
||||
|
||||
/* ── 底部操作栏 ──────────────────────────── */
|
||||
.bottom-bar {
|
||||
background-color: #ffffff;
|
||||
padding: 20rpx 32rpx 0;
|
||||
border-top-width: 1rpx;
|
||||
border-top-style: solid;
|
||||
border-top-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
border-radius: 56rpx;
|
||||
height: 96rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.confirm-btn-active {
|
||||
background-color: #e23636;
|
||||
}
|
||||
|
||||
.confirm-btn-disabled {
|
||||
background-color: #f5a0a0;
|
||||
}
|
||||
|
||||
.confirm-btn-text {
|
||||
font-size: 32rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.back-modify {
|
||||
height: 72rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.back-modify-text {
|
||||
font-size: 28rpx;
|
||||
color: #888888;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user