my bank list

src/pages-A/myBankList/index.vue

@@ -5,60 +5,73 @@ import { useUserStore } from '@/store'
 import { useTokenStore } from '@/store/token'
 
 definePage({
-    style: {
-        navigationBarTitleText: '绑定银行卡',
-    },
+  style: {
+    navigationBarTitleText: '绑定银行卡',
+  },
 })
 
 const list = ref([{
-    bankName: '建设银行',
-    bankLogo: '/static/images/income/y-1.png',
-    bankNumber: '6228 **** **** *** 000',
-    bankShortName: 'jh',
+  bankName: '建设银行',
+  bankLogo: '/static/images/income/y-1.png',
+  bankNumber: '6228 **** **** *** 000',
+  bankShortName: 'jh',
 }, {
-    bankName: '中国银行',
-    bankLogo: '/static/images/income/y-1.png',
-    bankNumber: '6228 **** **** *** 000',
-    bankShortName: 'zh',
+  bankName: '中国银行',
+  bankLogo: '/static/images/income/y-1.png',
+  bankNumber: '6228 **** **** *** 000',
+  bankShortName: 'zh',
 }, {
-    bankName: '农业银行',
-    bankLogo: '/static/images/income/y-1.png',
-    bankNumber: '6228 **** **** *** 000',
-    bankShortName: 'nh',
+  bankName: '农业银行',
+  bankLogo: '/static/images/income/y-1.png',
+  bankNumber: '6228 **** **** *** 000',
+  bankShortName: 'nh',
 }, {
-    bankName: '工商银行',
-    bankLogo: '/static/images/income/y-1.png',
-    bankNumber: '6228 **** **** *** 000',
-    bankShortName: 'gh',
+  bankName: '工商银行',
+  bankLogo: '/static/images/income/y-1.png',
+  bankNumber: '6228 **** **** *** 000',
+  bankShortName: 'gh',
 }])
 </script>
 
 <template>
     <view class="profile-container">
         <view class="bank-list">
-            <view v-for="item in list" :key="item.bankName" class="bank-list-item-container" :class="item.bankShortName">
-                <view class="bank-list-item">
-                    <view class="bank-list-item-left">
-                        <view class="bank-list-item-left-hanke">
-                            <image :src="`/static/images/income/logo-${item.bankShortName}.png`" class="bank-list-item-left-hanke-logo" />
-                            <view class="bank-list-item-left-hanke-text">
-                                {{ item.bankName }}
+            <template v-if="list.length">
+                <view
+                    v-for="item in list"
+                    :key="item.bankName"
+                    class="bank-list-item-container"
+                    :class="item.bankShortName"
+                >
+                    <view class="bank-list-item">
+                        <view class="bank-list-item-left">
+                            <view class="bank-list-item-left-hanke">
+                                <image :src="`/static/images/income/logo-${item.bankShortName}.png`" class="bank-list-item-left-hanke-logo" />
+                                <view class="bank-list-item-left-hanke-text">
+                                    {{ item.bankName }}
+                                </view>
+                            </view>
+                            <view class="bank-list-item-left-number">
+                                {{ item.bankNumber }}
                             </view>
                         </view>
-                        <view class="bank-list-item-left-number">
-                            {{ item.bankNumber }}
-                        </view>
-                    </view>
-                    <view class="bank-list-item-right">
-                        <view style="margin-top: 9rpx;">
-                            储蓄卡 4427
+                        <view class="bank-list-item-right">
+                            <view style="margin-top: 9rpx;">
+                                储蓄卡 4427
+                            </view>
+                            <text class="bank-list-item-right-full-number">
+                                完整卡号
+                            </text>
                         </view>
-                        <text class="bank-list-item-right-full-number">
-                            完整卡号
-                        </text>
                     </view>
+                    <image :src="`/static/images/income/logo${item.bankShortName}.png`" class="bank-list-item-right-logo" />
+                </view>
+            </template>
+            <view v-else class="bank-list-empty-container">
+                <image src="/static/images/income/emptyBank.png" class="bank-list-empty" />
+                <view class="bank-list-empty-text">
+                    暂无银行卡~
                 </view>
-                <image :src="`/static/images/income/logo${item.bankShortName}.png`" class="bank-list-item-right-logo" />
             </view>
         </view>
         <view class="submit-btn">
@@ -147,6 +160,23 @@ const list = ref([{
       right: 53rpx;
     }
   }
+  .bank-list-empty-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 57rpx;
+    .bank-list-empty {
+      width: 358rpx;
+      height: 246rpx;
+      margin-top: 181rpx;
+    }
+    .bank-list-empty-text {
+      font-weight: 400;
+      font-size: 30rpx;
+      color: #888888;
+    }
+  }
 }
 .submit-btn {
   width: 600rpx;