161 lines
4.1 KiB
Plaintext
161 lines
4.1 KiB
Plaintext
<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>
|
|
<view class="form-item">
|
|
<text class="label">卡号</text>
|
|
<input class="input" type="number" v-model="form.card_no" placeholder="请输入银行卡号" @input="detectBank" maxlength="19" />
|
|
</view>
|
|
<view class="form-item">
|
|
<text class="label">银行</text>
|
|
<input class="input" type="text" v-model="form.bank_name" placeholder="自动识别或手动输入" />
|
|
</view>
|
|
<view class="form-item">
|
|
<text class="label">手机号</text>
|
|
<input class="input" type="number" v-model="form.phone" placeholder="银行预留手机号" maxlength="11" />
|
|
</view>
|
|
|
|
<view class="form-item switch-item">
|
|
<text class="label">设为默认卡</text>
|
|
<switch :checked="form.is_default" @change="onSwitchChange" color="#ff5000" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="action-section">
|
|
<button class="submit-btn" :class="{ disabled: loading }" :disabled="loading" @click="submit">确认添加</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref, reactive } from 'vue'
|
|
import { supabaseService } from '@/utils/supabaseService.uts'
|
|
|
|
type BankCardForm = {
|
|
holder_name: string
|
|
card_no: string
|
|
bank_name: string
|
|
phone: string
|
|
is_default: boolean
|
|
}
|
|
|
|
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
|
|
}
|
|
|
|
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' })
|
|
}
|
|
} catch (e) {
|
|
console.error(e)
|
|
uni.showToast({ title: '系统错误', icon: 'none' })
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.add-card-page {
|
|
background-color: #f5f5f5;
|
|
flex: 1;
|
|
}
|
|
|
|
.form-container {
|
|
background-color: #fff;
|
|
padding: 0 15px;
|
|
}
|
|
|
|
.form-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 15px 0;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.form-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.label {
|
|
width: 80px;
|
|
font-size: 15px;
|
|
color: #333;
|
|
}
|
|
|
|
.input {
|
|
flex: 1;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.switch-item {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.action-section {
|
|
padding: 30px 15px;
|
|
}
|
|
|
|
.submit-btn {
|
|
background-color: #ff5000;
|
|
color: #fff;
|
|
border-radius: 25px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.submit-btn.disabled {
|
|
opacity: 0.6;
|
|
}
|
|
</style>
|