提现功能需要添加

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

@@ -1,14 +1,30 @@
 <script setup>
   import { onLoad } from '@dcloudio/uni-app'
   import { reactive } from 'vue'
+  import { useUI } from '@/utils/use-ui'
+  import { navigateBack } from '@/utils/router'
+  import {
+    addUserThirdPay,
+    addUserPayPwd,
+    getUserThirdPay,
+    getUserBankDetail
+  } from '@/api/my-index'
   import CardInput from '../../components/card-input.vue'
 
+  /** 是否第三方进入 */
+  const IS_THIRD_PAY = ['101', '102']
+
+  const { showToast } = useUI()
+
   const stateData = reactive({
     title: '',
-    state: '0'
+    state: '0',
+    loading: true
   })
 
   const formData = reactive({
+    // 修改id
+    id: '',
     // 银行卡名称
     name: '',
     // 开户行名称
@@ -18,34 +34,131 @@
     // 微信/支付宝号
     codeName: '',
     // 图片链接
-    img: ''
+    img: '',
+    // 银行卡类型
+    cardType: '',
+    // 图片回显列表
+    imgList: []
   })
 
-  const onAdd = () => {
-    console.log(formData)
-    const data = {
-      bankName: formData.name,
-      cardNumber: formData.cardNum,
-      bankName: formData.khName
+  const onAdd = async () => {
+    let data = {}
+    const name = formData.id ? '修改' : '添加'
+    const method = formData.id ? 'put' : 'post'
+    if (IS_THIRD_PAY.includes(stateData.state)) {
+      if (!formData.codeName) {
+        showToast('请输入账号')
+        return
+      }
+      if (!formData.img) {
+        showToast('请上传收款码')
+        return
+      }
+      data = {
+        paymentType: stateData.state === '101' ? 2 : 1,
+        qrCodeUrl: formData.img,
+        accountNumber: formData.codeName,
+        paymentId: formData.id
+      }
+      await addUserThirdPay(data, method)
+    } else {
+      if (!formData.name) {
+        showToast('请输入银行名称')
+        return
+      }
+      if (!formData.khName) {
+        showToast('请输入持卡人姓名')
+        return
+      }
+      if (!formData.cardNum) {
+        showToast('请输入银行卡号')
+        return
+      }
+      if (!formData.cardType) {
+        showToast('请选择银行卡类型')
+        return
+      }
+      data = {
+        bankName: formData.name,
+        cardHolder: formData.khName,
+        cardNumber: formData.cardNum,
+        cardType: formData.cardType,
+        cardId: formData.id
+      }
+      await addUserPayPwd(data, method)
     }
+    await showToast(`${name}成功`, 'success')
+    navigateBack()
+  }
+
+  /** 获取详情 */
+  const getDetail = async () => {
+    stateData.loading = true
+    const res = await getUserThirdPay(
+      stateData.state === '101' ? '2' : '1'
+    )
+    let titltData = ''
+    if (res?.data) {
+      const { paymentId, accountNumber, qrCodeUrl } = res.data
+      formData.codeName = accountNumber
+      formData.img = qrCodeUrl
+      formData.id = paymentId
+      formData.imgList = [
+        {
+          url: qrCodeUrl
+        }
+      ]
+      titltData = {
+        101: '修改支付宝账户',
+        102: '修改微信账户'
+      }[stateData.state]
+    } else {
+      titltData = {
+        101: '添加支付宝账户',
+        102: '添加微信账户'
+      }[stateData.state]
+    }
+    stateData.title = titltData
+    stateData.loading = false
+  }
+
+  /** 获取对应银行卡详情 */
+  const getBankDetail = async () => {
+    stateData.loading = true
+    const res = await getUserBankDetail(stateData.state)
+    const { cardId, bankName, cardHolder, cardNumber, cardType } =
+      res.data
+    formData.id = cardId
+    formData.name = bankName
+    formData.khName = cardHolder
+    formData.cardNum = cardNumber
+    formData.cardType = cardType
+    stateData.title = '修改银行卡'
+    stateData.loading = false
   }
 
   onLoad(e => {
-    const titltData = {
-      0: '添加银行卡',
-      101: '添加支付宝账户',
-      102: '添加微信账户'
-    }[e.key]
-    stateData.title = titltData
     stateData.state = e.key
+    if (IS_THIRD_PAY.includes(e.key)) {
+      getDetail()
+    } else {
+      if (e.key === '0') {
+        stateData.title = '添加银行卡'
+        stateData.loading = false
+      } else {
+        getBankDetail()
+      }
+    }
   })
 </script>
 
 <template>
-  <view>
+  <view v-if="!stateData.loading">
     <nav-bar isTopBg isPlaceholder :title="stateData.title">
       <template #right>
-        <text class="public-navbar__right-btn" @click="onAdd">添加</text>
+        <text class="public-navbar__right-btn" @click="onAdd">
+          {{ formData.id ? '修改' : '添加' }}
+        </text>
       </template>
     </nav-bar>
 
@@ -54,8 +167,26 @@
       class="card-details"
     >
       <CardInput v-model="formData.name" title="银行名称"></CardInput>
-      <CardInput v-model="formData.khName" title="开户行"></CardInput>
+      <CardInput v-model="formData.khName" title="持卡人姓名"></CardInput>
       <CardInput v-model="formData.cardNum" title="银行卡号"></CardInput>
+      <CardInput :isInput="false" title="银行卡类型">
+        <template #right>
+          <uni-data-checkbox
+            v-model="formData.cardType"
+            :localdata="[
+              {
+                text: '借记卡',
+                value: 1
+              },
+              {
+                text: '信用卡',
+                value: 2
+              }
+            ]"
+            class="card-checkbox"
+          ></uni-data-checkbox>
+        </template>
+      </CardInput>
     </view>
 
     <view v-else class="card-details">
@@ -65,8 +196,16 @@
           stateData.state === '101' ? '支付宝账号' : '微信账号'
         }`"
       ></CardInput>
-      <CardInput :is-input="false" title="收款码">
-        <cb-file-picker v-model="formData.img"></cb-file-picker>
+      <CardInput
+        :is-input="false"
+        :title="`${
+          stateData.state === '101' ? '支付宝' : '微信'
+        }收款码（必传)`"
+      >
+        <cb-file-picker
+          v-model="formData.img"
+          v-model:list="formData.imgList"
+        ></cb-file-picker>
       </CardInput>
     </view>
   </view>
@@ -77,4 +216,10 @@
   .card-details {
     padding: 32rpx 24rpx;
   }
+  .card-checkbox {
+    :deep(.uni-label-pointer) {
+      margin: 0 !important;
+      margin-left: 60rpx !important;
+    }
+  }
 </style>