@xm-zx/material

企业开户材料提交流程组件，适用于 uni-app Vue3 项目。

安装

npm install @xm-zx/material

使用

全局注册

import { createApp } from 'vue'
import ZxMaterial from '@xm-zx/material'

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

按需引入

import { ZxMaterial, Instructions, PayVerify, SmsVerify, Settlement } from '@xm-zx/material'

组件使用

<template>
  <ZxMaterial 
    ref="materialRef"
    :financeEnterpriseId="financeEnterpriseId"
    :accountType="accountType"
    :accountOpeningData="accountOpeningData"
    @queryEnterprise="handleQueryEnterprise"
    @queryStatus="handleQueryStatus"
    @updateSettleStatus="handleUpdateSettleStatus"
    @smallAmountPayment="handleSmallAmountPayment"
    @sendVerifySms="handleSendVerifySms"
    @confirmVerifyCode="handleConfirmVerifyCode"
    @settleAuthenticApply="handleSettleAuthenticApply"
    @settleAuthenticConfirm="handleSettleAuthenticConfirm"
    @authentication="handleAuthentication"
    @reSubmit="handleReSubmit"
    @toIndex="handleToIndex"
  />
</template>

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

const materialRef = ref(null)
const accountOpeningData = ref({})

// 查询企业信息
const handleQueryEnterprise = async ({ financeEnterpriseId }) => {
  const res = await yourApi.queryEnterprise(financeEnterpriseId)
  materialRef.value.setAccountOpeningInfo(res.data)
}

// 查询开户状态
const handleQueryStatus = async ({ accountOpeningApplicationId }) => {
  const res = await yourApi.queryStatus(accountOpeningApplicationId)
  materialRef.value.setStatus(res.data.accountOpeningStatus)
}

// 更新结算授权状态
const handleUpdateSettleStatus = async ({ accountOpeningApplicationId, callback }) => {
  await yourApi.updateSettleStatus({ accountOpeningApplicationId })
  callback()
}

// 小额打款验证
const handleSmallAmountPayment = async ({ accountOpeningApplicationId, verifyAmount, callback }) => {
  const res = await yourApi.smallAmountPayment({ accountOpeningApplicationId, verifyAmount })
  uni.showToast({ title: res.msg, icon: 'none' })
  callback()
}

// 发送短信验证码
const handleSendVerifySms = async ({ accountOpeningApplicationId, verifyType }) => {
  const res = await yourApi.sendVerifySms({ accountOpeningApplicationId, verifyType })
  uni.showToast({ title: res.msg, icon: 'none' })
}

// 确认验证码
const handleConfirmVerifyCode = async ({ accountOpeningApplicationId, verifyType, verifyCode, callback }) => {
  const res = await yourApi.confirmVerifyCode({ accountOpeningApplicationId, verifyType, verifyCode })
  uni.showToast({ title: res.msg, icon: 'none' })
  callback()
}

// 结算授权申请
const handleSettleAuthenticApply = async ({ accountOpeningApplicationId }) => {
  const res = await yourApi.settleAuthenticApply({ accountOpeningApplicationId })
  uni.showToast({ title: res.msg, icon: 'none' })
}

// 结算授权确认
const handleSettleAuthenticConfirm = async ({ accountOpeningApplicationId, verifyCode, callback }) => {
  const res = await yourApi.settleAuthenticConfirm({ accountOpeningApplicationId, verifyCode })
  uni.showToast({ title: res.msg, icon: 'none' })
  callback()
}

// 去开户
const handleAuthentication = ({ financeEnterpriseId, accountType }) => {
  uni.navigateTo({
    url: `/subPages/authorization/index?financeEnterpriseId=${financeEnterpriseId}&accountType=${accountType}`
  })
}

// 重新提交
const handleReSubmit = ({ financeEnterpriseId }) => {
  uni.navigateTo({
    url: `/subPages/authorization/index?financeEnterpriseId=${financeEnterpriseId}`
  })
}

// 返回首页
const handleToIndex = () => {
  uni.switchTab({ url: '/pages/tab/tabOne' })
}
</script>

组件说明

| 组件名 | 说明 | |--------|------| | ZxMaterial | 完整的开户材料提交流程组件 | | Instructions | 材料准备说明组件 | | PayVerify | 小额打款验证组件 | | SmsVerify | 短信验证组件 | | Settlement | 结算授权组件 |

Props

ZxMaterial

| 属性 | 类型 | 必填 | 默认值 | 说明 | |------|------|------|--------|------| | financeEnterpriseId | String | 否 | '' | 企业ID | | accountType | String | 否 | '' | 账户类型 | | accountOpeningData | Object | 否 | {} | 开户信息（外部传入） |

Events

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | queryEnterprise | 查询企业信息 | { financeEnterpriseId } | | queryStatus | 查询开户状态 | { accountOpeningApplicationId } | | updateSettleStatus | 更新结算状态 | { accountOpeningApplicationId, callback } | | smallAmountPayment | 小额打款验证 | { accountOpeningApplicationId, verifyAmount, callback } | | sendVerifySms | 发送短信验证码 | { accountOpeningApplicationId, verifyType } | | confirmVerifyCode | 确认验证码 | { accountOpeningApplicationId, verifyType, verifyCode, callback } | | settleAuthenticApply | 结算授权申请 | { accountOpeningApplicationId } | | settleAuthenticConfirm | 结算授权确认 | { accountOpeningApplicationId, verifyCode, callback } | | authentication | 去开户 | { financeEnterpriseId, accountType } | | reSubmit | 重新提交 | { financeEnterpriseId } | | toIndex | 返回首页 | - |

Expose Methods

| 方法名 | 说明 | 参数 | |--------|------|------| | getInfo | 触发查询企业信息 | - | | setAccountOpeningInfo | 设置开户信息 | data | | setStatus | 设置开户状态 | status |

设计说明

组件不直接调用 API，而是通过事件将数据抛出，由外部项目处理 API 调用。

注意事项

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