@xm-zx/authorization

企业开户授权表单组件，适用于 uni-app Vue3 项目。

安装

npm install @xm-zx/authorization

使用

全局注册

import { createApp } from 'vue'
import ZxAuthorization from '@xm-zx/authorization'

const app = createApp(App)
app.use(ZxAuthorization)

按需引入

import { ZxAuthorization, ZxMerchant, ZxCorporation, ZxBankCard } from '@xm-zx/authorization'

组件使用

<template>
  <ZxAuthorization 
    ref="authRef"
    :cityList="cityList"
    :financeEnterpriseId="financeEnterpriseId"
    :accountType="accountType"
    :uploadFile="uploadFile"
    :beneficiaryList="beneficiaryList"
    :industryList="industryList"
    @queryEnterprise="handleQueryEnterprise"
    @saveApplication="handleSaveApplication"
    @submitApplication="handleSubmitApplication"
    @submit="handleSubmit"
    @leftClick="handleLeftClick"
    @stepChange="handleStepChange"
  />
</template>

<script setup>
import { ref } from 'vue'

const authRef = ref(null)
const beneficiaryList = ref([])
const industryList = ref([])

// 上传文件方法
const uploadFile = async (url) => {
  // 调用你项目的上传接口
  const res = await yourApi.upload(url)
  return res.data.url
}

// 查询企业信息
const handleQueryEnterprise = async ({ type, params }) => {
  if (type === 'enterprise') {
    const res = await yourApi.queryEnterprise(params.financeEnterpriseId)
    // 设置企业信息
    authRef.value.setEnterpriseInfo(res.data)
  } else if (type === 'beneficiary') {
    const res = await yourApi.queryBeneficiary(params)
    beneficiaryList.value = res.data
  } else if (type === 'industry') {
    const res = await yourApi.getIndustryDict(params.searchValue)
    industryList.value = res.data
  }
}

// 保存申请
const handleSaveApplication = async ({ data, step, callback }) => {
  await yourApi.saveApplication(data)
  callback() // 调用回调进入下一步
}

// 提交申请
const handleSubmitApplication = async ({ data, financeEnterpriseId }) => {
  const res = await yourApi.submitApplication(data)
  if (res.code === 200) {
    uni.showToast({ title: '提交成功', icon: 'success' })
  }
}
</script>

组件说明

| 组件名 | 说明 | |--------|------| | ZxAuthorization | 完整的开户授权流程组件（包含三步） | | ZxMerchant | 企业主体信息表单组件 | | ZxCorporation | 法人/经办人信息表单组件 | | ZxBankCard | 银行卡信息表单组件 |

Props

ZxAuthorization

| 属性 | 类型 | 必填 | 默认值 | 说明 | |------|------|------|--------|------| | cityList | Array | 否 | [] | 省市区列表数据 | | financeEnterpriseId | String | 否 | '' | 企业ID | | accountType | String | 否 | '' | 账户类型 | | uploadFile | Function | 是 | - | 上传文件方法，返回 Promise | | beneficiaryList | Array | 否 | [] | 受益人列表（外部传入） | | industryList | Array | 否 | [] | 行业列表（外部传入） |

Events

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | queryEnterprise | 查询企业信息时触发 | { type, params } | | saveApplication | 保存申请时触发 | { data, step, callback } | | submitApplication | 提交申请时触发 | { data, financeEnterpriseId } | | submit | 最终提交成功时触发 | formData | | leftClick | 点击返回时触发 | - | | stepChange | 步骤变化时触发 | step |

Expose Methods

| 方法名 | 说明 | 参数 | |--------|------|------| | getInfo | 触发查询企业信息 | - | | setEnterpriseInfo | 设置企业信息 | data |

设计说明

组件不直接调用 API，而是通过事件将数据抛出，由外部项目处理 API 调用。这样设计的好处：

1. 避免不同项目 API 命名不同导致的问题
2. 组件更加通用，可适配不同后端接口
3. 外部可以灵活处理请求逻辑（如添加 loading、错误处理等）

注意事项

• 本组件依赖 uv-ui 组件库
• 需要在 uni-app Vue3 项目中使用
• 需要外部实现 API 调用逻辑