实现银行卡的添加和删除
This commit is contained in:
WindowBird
parent
5c2c7c483f
commit
63c22f9811
|
|
@ -47,37 +47,12 @@ export function deleteBankAccount(ids) {
|
|||
}
|
||||
|
||||
/**
|
||||
* 获取银行卡列表
|
||||
* 获取用户银行卡列表（用于提现选择）
|
||||
* @returns {Promise} API响应结果
|
||||
*/
|
||||
export function getBankAccountList() {
|
||||
export function getUserBankList() {
|
||||
return request({
|
||||
url: '/app/account',
|
||||
url: '/app/account/list',
|
||||
method: 'GET',
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新银行卡信息
|
||||
* @param {Object} params - 银行卡信息参数
|
||||
* @param {string} params.id - 银行卡ID
|
||||
* @param {string} params.type - 类型：BANK=线下银行卡, QR=线下收款二维码
|
||||
* @param {string} params.no - 银行卡号或收款码图片URL
|
||||
* @param {string} params.name - 收款人姓名
|
||||
* @param {string} params.idCard - 身份证号
|
||||
* @param {string} params.mobile - 手机号
|
||||
* @returns {Promise} API响应结果
|
||||
*/
|
||||
export function updateBankAccount(params) {
|
||||
return request({
|
||||
url: `/app/account/${params.id}`,
|
||||
method: 'PUT',
|
||||
data: {
|
||||
type: params.type || 'BANK',
|
||||
no: params.no,
|
||||
name: params.name,
|
||||
idCard: params.idCard,
|
||||
mobile: params.mobile,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,13 +8,13 @@
|
|||
|
||||
<view class="modal-body">
|
||||
<view class="delete-tip">请选择要删除的银行卡：</view>
|
||||
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<view v-if="loading" class="loading-container">
|
||||
<view class="loading-spinner"></view>
|
||||
<text class="loading-text">加载中...</text>
|
||||
<text class="loading-text">删除中...</text>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 银行卡列表 -->
|
||||
<view v-else-if="bankList.length > 0" class="bank-list">
|
||||
<view
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view v-else class="empty-state">
|
||||
<text class="empty-icon">💳</text>
|
||||
|
|
@ -59,52 +59,34 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { deleteBankAccount, getBankAccountList } from '@/api/account.js'
|
||||
import { deleteBankAccount } from '@/api/account.js'
|
||||
|
||||
export default {
|
||||
name: 'DeleteCard',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
default: false,
|
||||
},
|
||||
bankList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
bankList: [],
|
||||
selectedIds: [],
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible(newVal) {
|
||||
if (newVal) {
|
||||
this.fetchBankList()
|
||||
this.selectedIds = []
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 获取银行卡列表
|
||||
async fetchBankList() {
|
||||
this.loading = true
|
||||
try {
|
||||
const response = await getBankAccountList()
|
||||
if (response.code === 200 && response.data) {
|
||||
this.bankList = response.data
|
||||
console.log('银行卡列表获取成功:', this.bankList)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取银行卡列表失败:', error)
|
||||
uni.showToast({
|
||||
title: '获取银行卡列表失败',
|
||||
icon: 'none',
|
||||
})
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.$emit('close')
|
||||
|
|
@ -130,8 +112,9 @@ export default {
|
|||
// 获取银行类型文本
|
||||
getBankTypeText(type) {
|
||||
const typeMap = {
|
||||
'BANK': '银行卡',
|
||||
'QR': '收款二维码'
|
||||
B: '银行卡',
|
||||
BAN: '银行卡',
|
||||
QR: '收款二维码',
|
||||
}
|
||||
return typeMap[type] || '未知类型'
|
||||
},
|
||||
|
|
@ -45,8 +45,11 @@
|
|||
<view class="bank-info">
|
||||
<image :src="selectedBank.icon" class="bank-icon" mode="aspectFit"></image>
|
||||
<view class="bank-details">
|
||||
<text class="bank-name">{{ selectedBank.name }}</text>
|
||||
<text class="bank-card">{{ selectedBank.cardNumber }}</text>
|
||||
<text class="bank-name">{{ selectedBank.displayName || '请选择银行卡' }}</text>
|
||||
<text class="bank-card">{{ selectedBank.cardNumber || '暂无银行卡' }}</text>
|
||||
<text v-if="selectedBank.name" class="bank-owner"
|
||||
>收款人: {{ selectedBank.name }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="arrow-icon">›</text>
|
||||
|
|
@ -60,6 +63,11 @@
|
|||
<view class="bank-btn delete-btn" @click="showDeleteModal = true">删除银行卡</view>
|
||||
</view>
|
||||
|
||||
<!-- 银行卡状态提示 -->
|
||||
<view v-if="userBankList.length === 0" class="bank-status-tip">
|
||||
<text class="tip-text">您还没有添加银行卡，请先添加银行卡</text>
|
||||
</view>
|
||||
|
||||
<!-- 提现按钮 -->
|
||||
<view class="withdraw-btn" @click="submitWithdrawal">立即提现</view>
|
||||
</view>
|
||||
|
|
@ -93,6 +101,7 @@
|
|||
<!-- 删除银行卡组件 -->
|
||||
<delete-card
|
||||
:visible="showDeleteModal"
|
||||
:bank-list="userBankList"
|
||||
@close="showDeleteModal = false"
|
||||
@success="onBankSuccess"
|
||||
/>
|
||||
|
|
@ -102,14 +111,14 @@
|
|||
<script>
|
||||
import { commonEnum } from '@/enum/commonEnum.js'
|
||||
import { getWithdrawInfo, submitWithdraw } from '@/api/user/user.js'
|
||||
import { getBankAccountList } from '@/api/account.js'
|
||||
import { getUserBankList } from '@/api/account.js'
|
||||
import AddCard from './addCard.vue'
|
||||
import DeleteCard from './deleteCar.vue'
|
||||
import DeleteCardd from './deleteCard.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AddCard,
|
||||
DeleteCard,
|
||||
DeleteCard: DeleteCardd,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -124,45 +133,20 @@ export default {
|
|||
},
|
||||
withdrawalData: {
|
||||
amount: '',
|
||||
bankId: '1',
|
||||
bankId: '',
|
||||
},
|
||||
selectedBank: {
|
||||
id: '1',
|
||||
name: '建设银行',
|
||||
id: '',
|
||||
name: '',
|
||||
icon: commonEnum.CHINA_CONSTRUCTION_BANK,
|
||||
cardNumber: '**** **** **** 1234',
|
||||
cardNumber: '',
|
||||
type: 'BANK',
|
||||
},
|
||||
banks: [
|
||||
{
|
||||
id: '1',
|
||||
name: '建设银行',
|
||||
icon: commonEnum.CHINA_CONSTRUCTION_BANK,
|
||||
cardNumber: '**** **** **** 1234',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '工商银行',
|
||||
icon: commonEnum.CHINA_CONSTRUCTION_BANK,
|
||||
cardNumber: '**** **** **** 5678',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '农业银行',
|
||||
icon: commonEnum.CHINA_CONSTRUCTION_BANK,
|
||||
cardNumber: '**** **** **** 9012',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: '中国银行',
|
||||
icon: commonEnum.CHINA_CONSTRUCTION_BANK,
|
||||
cardNumber: '**** **** **** 3456',
|
||||
},
|
||||
],
|
||||
|
||||
// 用户银行卡列表
|
||||
userBankList: [],
|
||||
// 银行卡管理相关
|
||||
showAddModal: false,
|
||||
showDeleteModal: false,
|
||||
bankList: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -179,7 +163,7 @@ export default {
|
|||
},
|
||||
onLoad() {
|
||||
this.fetchWithdrawInfo()
|
||||
this.fetchBankList()
|
||||
this.fetchUserBankList()
|
||||
},
|
||||
methods: {
|
||||
// 获取提现信息
|
||||
|
|
@ -205,19 +189,43 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
// 获取银行卡列表
|
||||
async fetchBankList() {
|
||||
// 获取用户银行卡列表
|
||||
async fetchUserBankList() {
|
||||
try {
|
||||
const response = await getBankAccountList()
|
||||
if (response.code === 200 && response.data) {
|
||||
this.bankList = response.data.map(item => ({
|
||||
console.log('开始获取用户银行卡列表...123')
|
||||
const response = await getUserBankList()
|
||||
console.log('API响应123:', response)
|
||||
console.log('row:')
|
||||
if (response.code === 200 && response.rows) {
|
||||
this.userBankList = response.rows || []
|
||||
console.log('用户银行卡列表获取成功:')
|
||||
// 处理银行卡数据
|
||||
this.userBankList = this.userBankList.map(item => ({
|
||||
...item,
|
||||
cardNumber: this.maskCardNumber(item.no),
|
||||
icon: this.getBankIcon(item.type),
|
||||
displayName: this.getDisplayName(item),
|
||||
}))
|
||||
console.log('银行卡列表获取成功:', this.bankList)
|
||||
|
||||
console.log('用户银行卡列表获取成功:', this.userBankList)
|
||||
|
||||
// 如果有银行卡，设置默认选中的银行卡
|
||||
if (this.userBankList.length > 0) {
|
||||
this.selectedBank = this.userBankList[0]
|
||||
this.withdrawalData.bankId = this.selectedBank.id
|
||||
console.log('设置默认银行卡:', this.selectedBank)
|
||||
} else {
|
||||
console.log('没有找到银行卡，显示空状态')
|
||||
}
|
||||
} else {
|
||||
console.log('API返回错误:', response)
|
||||
uni.showToast({
|
||||
title: response.msg || '获取银行卡列表失败',
|
||||
icon: 'none',
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取银行卡列表失败:', error)
|
||||
console.error('获取用户银行卡列表失败:', error)
|
||||
uni.showToast({
|
||||
title: '获取银行卡列表失败',
|
||||
icon: 'none',
|
||||
|
|
@ -232,9 +240,31 @@ export default {
|
|||
return '**** **** **** ' + cardNumber.slice(-4)
|
||||
},
|
||||
|
||||
// 获取银行图标
|
||||
getBankIcon(type) {
|
||||
// 根据type字段判断类型，B和BAN都表示银行卡
|
||||
if (type === 'B' || type === 'BAN') {
|
||||
return commonEnum.CHINA_CONSTRUCTION_BANK
|
||||
} else if (type === 'QR') {
|
||||
return '/static/icons/qr-code.png' // 收款二维码图标
|
||||
}
|
||||
return commonEnum.CHINA_CONSTRUCTION_BANK
|
||||
},
|
||||
|
||||
// 获取显示名称
|
||||
getDisplayName(item) {
|
||||
// 根据type字段判断类型
|
||||
if (item.type === 'B' || item.type === 'BAN') {
|
||||
return '银行卡'
|
||||
} else if (item.type === 'QR') {
|
||||
return '收款二维码'
|
||||
}
|
||||
return '银行卡'
|
||||
},
|
||||
|
||||
// 银行卡操作成功回调
|
||||
onBankSuccess() {
|
||||
this.fetchBankList()
|
||||
this.fetchUserBankList()
|
||||
},
|
||||
|
||||
goBack() {
|
||||
|
|
@ -266,12 +296,23 @@ export default {
|
|||
console.log('全部提现，设置金额:', this.withdrawalData.amount)
|
||||
},
|
||||
selectBank() {
|
||||
if (this.userBankList.length === 0) {
|
||||
uni.showToast({
|
||||
title: '请先添加银行卡',
|
||||
icon: 'none',
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
uni.showActionSheet({
|
||||
itemList: this.banks.map(bank => `${bank.name} ${bank.cardNumber}`),
|
||||
itemList: this.userBankList.map(
|
||||
bank => `${bank.displayName} ${bank.cardNumber} (${bank.name})`
|
||||
),
|
||||
success: res => {
|
||||
const selectedBank = this.banks[res.tapIndex]
|
||||
const selectedBank = this.userBankList[res.tapIndex]
|
||||
this.selectedBank = selectedBank
|
||||
this.withdrawalData.bankId = selectedBank.id
|
||||
console.log('选择银行卡:', selectedBank)
|
||||
},
|
||||
})
|
||||
},
|
||||
|
|
@ -284,6 +325,14 @@ export default {
|
|||
return
|
||||
}
|
||||
|
||||
if (!this.withdrawalData.bankId) {
|
||||
uni.showToast({
|
||||
title: '请选择提现银行卡',
|
||||
icon: 'none',
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
const amount = parseFloat(this.withdrawalData.amount)
|
||||
const available = parseFloat(this.withdrawInfo.available)
|
||||
const minAmount = parseFloat(this.withdrawInfo.minAmount)
|
||||
|
|
@ -315,7 +364,7 @@ export default {
|
|||
|
||||
uni.showModal({
|
||||
title: '确认提现',
|
||||
content: `确认提现${this.withdrawalData.amount}元到${this.selectedBank.name}吗？`,
|
||||
content: `确认提现${this.withdrawalData.amount}元到${this.selectedBank.displayName}吗？`,
|
||||
success: async res => {
|
||||
if (res.confirm) {
|
||||
this.loading = true
|
||||
|
|
@ -524,6 +573,13 @@ export default {
|
|||
.bank-card {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.bank-owner {
|
||||
font-size: 22rpx;
|
||||
color: #666;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -579,20 +635,6 @@ view {
|
|||
//border: red solid 1px;
|
||||
}
|
||||
|
||||
.debug-info {
|
||||
background: #fff;
|
||||
margin: 20rpx;
|
||||
padding: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
|
||||
text {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
|
|
@ -628,6 +670,21 @@ view {
|
|||
}
|
||||
}
|
||||
|
||||
/* 银行卡状态提示 */
|
||||
.bank-status-tip {
|
||||
margin: 20rpx 30rpx;
|
||||
padding: 20rpx;
|
||||
background: #fff5f0;
|
||||
border-radius: 10rpx;
|
||||
border-left: 4rpx solid #ff803a;
|
||||
|
||||
.tip-text {
|
||||
font-size: 26rpx;
|
||||
color: #ff803a;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* 模态框样式 */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user