完善添加银行卡功能

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

@@ -0,0 +1,63 @@
+<script setup>
+  import { onLoad } from '@dcloudio/uni-app'
+  import { reactive } from 'vue'
+  import CardInput from '../../components/card-input.vue'
+
+  const stateData = reactive({
+    title: '',
+    state: '0'
+  })
+
+  const formData = reactive({
+    // 银行卡名称
+    name: '',
+    // 开户行名称
+    khName: '',
+    // 银行卡号
+    cardNum: '',
+    // 微信/支付宝号
+    codeName: '',
+    // 图片链接
+    img: ''
+  })
+  onLoad(e => {
+    const titltData = {
+      0: '添加银行卡',
+      101: '添加支付宝账户',
+      102: '添加微信账户'
+    }[e.key]
+    stateData.title = titltData
+    stateData.state = e.key
+  })
+</script>
+
+<template>
+  <view>
+    <nav-bar isTopBg isPlaceholder :title="stateData.title"></nav-bar>
+
+    <view
+      v-if="!['101', '102'].includes(stateData.state)"
+      class="card-details"
+    >
+      <CardInput v-model="formData.name" title="银行名称"></CardInput>
+      <CardInput v-model="formData.khName" title="开户行"></CardInput>
+      <CardInput v-model="formData.cardNum" title="银行卡号"></CardInput>
+    </view>
+
+    <view v-else class="card-details">
+      <CardInput
+        v-model="formData.codeName"
+        :title="`${
+          stateData.state === '101' ? '支付宝账号' : '微信账号'
+        }`"
+      ></CardInput>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+  @import '../../styles/index.scss';
+  .card-details {
+    padding: 32rpx 24rpx;
+  }
+</style>

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

@@ -0,0 +1,56 @@
+<script setup>
+  import { ref } from 'vue'
+  import { navigateTo } from '@/utils/router'
+
+  const itemList = ref([
+    {
+      title: '支付宝',
+      key: '101',
+      icon: '/static/images/my-index/zfb.png'
+    },
+    { title: '微信', key: '102', icon: '/static/images/my-index/wx.png' }
+  ])
+
+  const onAddCard = key => {
+    navigateTo('/pages/my-index/wallet/bank-card/card-details', { key })
+  }
+</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>
+
+    <!-- 底部按钮 -->
+    <bottom-view>
+      <cb-button @click="onAddCard('0')">+添加银行卡</cb-button>
+    </bottom-view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+  @import '../../styles/index.scss';
+  .bank-card {
+    padding: 38rpx 24rpx;
+  }
+</style>