uniapp-im-shop/pages/my-index/wallet/bank-card/card-details.vue

<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',
    loading: true
  })

  const formData = reactive({
    // 修改id
    id: '',
    // 银行卡名称
    name: '',
    // 开户行名称
    khName: '',
    // 银行卡号
    cardNum: '',
    // 微信/支付宝号
    codeName: '',
    // 图片链接
    img: '',
    // 银行卡类型
    cardType: '',
    // 图片回显列表
    imgList: []
  })

  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 => {
    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 v-if="!stateData.loading">
    <nav-bar isTopBg isPlaceholder :title="stateData.title">
      <template #right>
        <text class="public-navbar__right-btn" @click="onAdd">
          {{ formData.id ? '修改' : '添加' }}
        </text>
      </template>
    </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>
      <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">
      <CardInput
        v-model="formData.codeName"
        :title="`${
          stateData.state === '101' ? '支付宝账号' : '微信账号'
        }`"
      ></CardInput>
      <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>
</template>

<style lang="scss" scoped>
  @import '../../styles/index.scss';
  .card-details {
    padding: 32rpx 24rpx;
  }
  .card-checkbox {
    :deep(.uni-label-pointer) {
      margin: 0 !important;
      margin-left: 60rpx !important;
    }
  }
</style>