完善添加银行卡功能

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>