559 lines
14 KiB
Plaintext
559 lines
14 KiB
Plaintext
<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>
|