提现功能需要添加

pages/my-index/wallet/bank-card/index.vue

@@ -1,56 +1,107 @@
 <script setup>
   import { ref } from 'vue'
   import { navigateTo } from '@/utils/router'
+  import { onShow } from '@dcloudio/uni-app'
+  import { getUserBankList, deleteUserPayPwd } from '@/api/my-index'
+  import { useUI } from '@/utils/use-ui'
 
-  const itemList = ref([
-    {
-      title: '支付宝',
-      key: '101',
-      icon: '/static/images/my-index/zfb.png'
-    },
-    { title: '微信', key: '102', icon: '/static/images/my-index/wx.png' }
-  ])
+  /** 是否第三方进入 */
+  const IS_THIRD_PAY = ['0', '101', '102']
+  const itemList = ref([])
+  const { showToast, showDialog } = useUI()
 
   const onAddCard = key => {
     navigateTo('/pages/my-index/wallet/bank-card/card-details', { key })
   }
+
+  const getList = async type => {
+    itemList.value = []
+    const res = await getUserBankList()
+
+    itemList.value = [
+      {
+        bankName: '支付宝',
+        key: '101',
+        icon: '/static/images/my-index/zfb.png'
+      },
+      {
+        bankName: '微信',
+        key: '102',
+        icon: '/static/images/my-index/wx.png'
+      },
+      ...res.data
+    ]
+    if (type === 1) {
+      showToast('删除成功', 'success')
+    }
+  }
+
+  const onDelete = async id => {
+    const res = await showDialog('提示', '确定要删除吗？')
+    if (!res) return
+    await deleteUserPayPwd(id)
+    await getList(1)
+  }
+
+  onShow(() => {
+    getList()
+  })
 </script>
 
 <template>
   <view class="bank-card">
-    <view
-      v-for="(item, index) in itemList"
-      :key="index"
-      class="public-card"
-      @click="onAddCard(item.key)"
-    >
-      <view class="left-img">
-        <image
-          :src="
-            item.icon
-              ? item.icon
-              : 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F1227%2F842e0e65j00sp543n001fd000i700iim.jpg&thumbnail=660x2147483647&quality=80&type=jpg'
-          "
-          mode="aspectFill"
-          class="card"
-        ></image>
-        <text>{{ item.title }}</text>
-      </view>
-      <view class="right-box">
-        <uni-icons type="right" size="16" color="#999999"></uni-icons>
-      </view>
-    </view>
+    <uni-swipe-action>
+      <uni-swipe-action-item
+        v-for="(item, index) in itemList"
+        :key="index"
+        :disabled="!!item.key"
+        class="card-box"
+      >
+        <view
+          class="public-card"
+          @click="onAddCard(item.key || item.cardId)"
+        >
+          <view class="left-img">
+            <image
+              v-if="item.icon"
+              :src="item.icon"
+              mode="aspectFill"
+              class="card"
+            ></image>
+            <text>{{ item.bankName }}</text>
+          </view>
+          <view class="right-box">
+            <text v-if="item.cardNumber">{{ item.cardNumber }}</text>
+            <uni-icons type="right" size="16" color="#999999"></uni-icons>
+          </view>
+        </view>
+        <template v-slot:right>
+          <view
+            class="public-uni-swipe-action-right"
+            @click="onDelete(item.cardId)"
+          >
+            <uni-icons type="trash" size="18" color="#ffffff"></uni-icons>
+            <text class="iocn-name">删除</text>
+          </view>
+        </template>
+      </uni-swipe-action-item>
+    </uni-swipe-action>
 
     <!-- 底部按钮 -->
-    <bottom-view>
+    <bottom-view v-if="itemList.length > 0">
       <cb-button @click="onAddCard('0')">+添加银行卡</cb-button>
     </bottom-view>
   </view>
 </template>
 
 <style lang="scss" scoped>
+  @import '@/styles/global.scss';
   @import '../../styles/index.scss';
   .bank-card {
     padding: 38rpx 24rpx;
   }
+
+  .card-box + .card-box {
+    margin-top: 16rpx;
+  }
 </style>