对接银行卡接口

src/bundle/parten/pages/bank-card/list.vue

@@ -9,12 +9,12 @@
 </route>
 
 <template>
-    <view>
+    <view class="pb-48rpx">
         <!-- 删除确认框 -->
         <wd-message-box selector="wd-message-box-slot"></wd-message-box>
 
         <view class="flex items-center mx-58rpx mb-28rpx">
-            <view class="font-bold text-28rpx leading-40rpx text-#303133">我的银行卡（9张）</view>
+            <view class="font-bold text-28rpx leading-40rpx text-#303133">我的银行卡（{{ bankList.length }}张）</view>
             <view class="flex items-center">
                 <view class="flex items-center mr-12rpx">
                     <wd-img :src="`${OSS}icon/icon_safe.png`" width="32rpx" height="32rpx"></wd-img>
@@ -29,9 +29,9 @@
                     <view class="flex items-center mr-22rpx">
                         <wd-img :src="`${OSS}icon/icon_bank_card4.png`" width="48rpx" height="48rpx"></wd-img>
                     </view>
-                    <view class="font-400 text-30rpx leading-42rpx text-#303133">招商银行 储蓄卡（3265）</view>
+                    <view class="font-400 text-30rpx leading-42rpx text-#303133">{{ item.bank_name }} 储蓄卡（{{ List.handleFormatBankCardNumber(item.bank_card) }}）</view>
                </view>
-               <view @click="List.handleDeleteBankCard(index)">
+               <view @click="List.handleDeleteBankCard(index, item.id)">
                     <wd-icon name="delete-thin" size="42rpx" color="#BFC2CC"></wd-icon>
                </view>
             </view>
@@ -46,25 +46,36 @@
 <script lang="ts" setup>
     import { useMessage } from 'wot-design-uni'
     import {toast} from '@/utils/toast'    
+    import { getBankCardList, deleteBankCard } from '@/api/bank'
 
     const OSS = inject('OSS')
     const message = useMessage('wd-message-box-slot')
 
     // 选择银行卡
-    const showBankCardPopup = ref<boolean>(false)
-    const selectedBankCardIndex = ref<number>(0)
-    const bankList = ref<Array<{ id: number, bankName: string, bankCard: string }>>([
-        { id: 1, bankName: '招商银行', bankCard: '3265' },
-        { id: 2, bankName: '建设银行', bankCard: '1234' },
-        { id: 3, bankName: '农业银行', bankCard: '5678' },
-    ])
+    const bankList = ref<Array<{ id: number, bank_name: string, bank_card: string }>>([])
+
+    onShow(() => {
+        List.getBankCardList()
+    })
 
     const List = {
-        handleDeleteBankCard: (index: number) => {
+        /**
+         * 获取银行卡列表
+         */
+        getBankCardList: async () => {
+            const res = await getBankCardList()
+            bankList.value = res.list
+        },
+
+        /**
+         * 删除银行卡
+         * @param index 
+         */
+        handleDeleteBankCard: async (index: number, id: number) => {
             message.confirm({
                 title: '是否删除银行卡',
                 msg: '删除银行卡后无法恢复，确定删除银行卡吗？',
-                confirmButtonText: '去预定',
+                confirmButtonText: '确定',
                 cancelButtonText: '取消',
                 cancelButtonProps: {
                     customClass: '!bg-[#F6F7F8] !text-[#303133] !text-32rpx !leading-44rpx !rounded-8rpx',
@@ -72,16 +83,43 @@
                 confirmButtonProps: {
                     customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
                 }
-            }).then((res) => {
-                bankList.value.splice(index, 1)
-             toast.info('删除成功')
-                // 点击确认按钮回调事件
+            }).then(async (res) => {
+                if (res.action === 'confirm') {
+                    uni.showLoading({
+                        title: '操作中...',
+                        mask: false
+                    })
+
+                    try {
+                        await deleteBankCard(id)
+                        uni.hideLoading()
+                        toast.success('删除成功')
+                        bankList.value.splice(index, 1)
+                    } catch (error) {
+                        uni.hideLoading()
+                        toast.info('删除失败')
+                        return
+                    }
+                }
             }).catch(() => {
                 // 点击取消按钮回调事件
             })
         },
 
-        // 跳转到添加银行卡页面
+        /**
+         * 格式化银行卡号
+         * @ param bankCardNumber 银行卡号
+         */
+        handleFormatBankCardNumber: (bankCardNumber: string) => {
+            if (!bankCardNumber) return ''
+            const noSpace = bankCardNumber.replace(/\s/g, '')
+            if (noSpace.length <= 4) return noSpace
+            return noSpace.slice(-4)
+        },
+
+        /**
+         * 跳转到添加银行卡页面
+         */
         handleAddBankCard: () => {
             uni.navigateTo({
                 url: '/bundle/parten/pages/bank-card/add'

src/bundle/store/setting.vue

@@ -92,12 +92,12 @@
 		/**
 		 * 退出
 		 */
-		handleLogout: () => {
+		handleLogout: async () => {
 			const userStore = useUserStore()
-			userStore.logout()
+			await userStore.logout()
 			if (!userStore.isLoggedIn) {
 				toast.info('退出成功')
-				router.reLaunch('/pages/my/my')
+				router.redirectTo('/pages/login/login')
 			}
 		}
     }