@tanzhenxing/zx-receive-invoice-edit v1.0.1

zx-receive-invoice-edit 收票编辑

收票编辑组件，用于编辑和管理发票抬头信息，支持个人和企业发票类型。

特性

• 🎯 支持个人和企业发票类型
• 📝 完整的表单验证
• 🔧 灵活的配置选项
• 📱 响应式设计，支持 H5、小程序、APP
• 🎨 美观的 UI 设计
• ⚡ 高性能，基于 Vue 3 Composition API

基础用法

<template>
  <zx-receive-invoice-edit
    :invoice-info="invoiceInfo"
    @save="onSave"
    @change="onChange"
  />
</template>

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

const invoiceInfo = ref({
  type: 'personal',
  title: '张三',
  isDefault: false
})

const onSave = (data) => {
  console.log('保存发票信息:', data)
}

const onChange = (data) => {
  console.log('发票信息变化:', data)
}
</script>

企业发票

<template>
  <zx-receive-invoice-edit
    :invoice-info="companyInvoice"
    @save="onSave"
  />
</template>

<script setup>
const companyInvoice = ref({
  type: 'company',
  title: '北京科技有限公司',
  taxNumber: '91110000123456789X',
  address: '北京市朝阳区xxx街道xxx号',
  phone: '010-12345678',
  bank: '中国银行北京分行',
  account: '1234567890123456789',
  isDefault: true
})

const onSave = (data) => {
  // 保存企业发票信息
  console.log('保存企业发票:', data)
}
</script>

自定义发票类型

<template>
  <zx-receive-invoice-edit
    :invoice-types="customTypes"
    :invoice-info="invoiceInfo"
    @save="onSave"
  />
</template>

<script setup>
const customTypes = [
  { label: '个人', value: 'personal' },
  { label: '企业', value: 'company' },
  { label: '专用发票', value: 'special', disabled: false }
]

const invoiceInfo = ref({
  type: 'special',
  title: '特殊发票抬头'
})
</script>

编辑模式

<template>
  <zx-receive-invoice-edit
    :invoice-info="editInvoice"
    :show-delete="true"
    save-button-text="更新"
    delete-button-text="删除发票"
    @save="onUpdate"
    @delete="onDelete"
  />
</template>

<script setup>
const editInvoice = ref({
  id: 1,
  type: 'company',
  title: '现有企业名称',
  taxNumber: '91110000123456789X'
})

const onUpdate = (data) => {
  console.log('更新发票:', data)
}

const onDelete = (data) => {
  console.log('删除发票:', data)
}
</script>

表单验证

<template>
  <zx-receive-invoice-edit
    ref="invoiceEditRef"
    :invoice-info="invoiceInfo"
    hide-buttons
  />
  
  <view class="custom-buttons">
    <zx-button @click="handleSave">自定义保存</zx-button>
    <zx-button @click="handleReset">重置表单</zx-button>
  </view>
</template>

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

const invoiceEditRef = ref(null)

const handleSave = async () => {
  try {
    const valid = await invoiceEditRef.value.validate()
    if (valid) {
      const data = invoiceEditRef.value.getFormData()
      console.log('表单数据:', data)
    }
  } catch (error) {
    console.log('验证失败:', error)
  }
}

const handleReset = () => {
  invoiceEditRef.value.resetForm()
}
</script>

API

Props

Events

Methods

Slots

数据结构

InvoiceInfo

interface InvoiceInfo {
  type: 'personal' | 'company'  // 发票类型
  title: string                 // 发票抬头
  taxNumber?: string           // 纳税人识别号（企业必填）
  address?: string             // 注册地址
  phone?: string               // 注册电话
  bank?: string                // 开户银行
  account?: string             // 银行账号
  isDefault?: boolean          // 是否默认
}

InvoiceType

interface InvoiceType {
  label: string     // 显示文本
  value: string     // 值
  disabled?: boolean // 是否禁用
}

样式变量

组件提供了丰富的 CSS 变量用于自定义样式：

.zx-receive-invoice-edit {
  --zx-invoice-edit-bg-color: #f8f9fa;
  --zx-invoice-edit-section-bg: #fff;
  --zx-invoice-edit-section-margin: 20rpx;
  --zx-invoice-edit-padding: 32rpx;
  --zx-invoice-edit-label-color: #323233;
  --zx-invoice-edit-label-size: 28rpx;
  --zx-invoice-edit-input-size: 28rpx;
  --zx-invoice-edit-placeholder-color: #c8c9cc;
  --zx-invoice-edit-button-height: 88rpx;
  --zx-invoice-edit-button-size: 32rpx;
}

注意事项

1. 税号验证：企业发票的纳税人识别号会进行格式验证，要求15-20位字母数字组合
2. 表单验证：组件内置了完整的表单验证，包括必填项和格式验证
3. 响应式设计：组件适配了不同屏幕尺寸，在各端都有良好的显示效果
4. 性能优化：使用了 Vue 3 的响应式系统，确保高性能渲染

常见问题

Q: 如何自定义验证规则？

A: 可以通过监听 change 事件，在外部进行额外的验证逻辑。

Q: 如何实现异步保存？

A: 在 save 事件处理函数中使用 async/await 进行异步操作，并通过 is-saving 属性控制加载状态。

Q: 如何集成到现有表单系统？

A: 可以设置 hide-buttons 为 true，然后使用组件的 validate 和 getFormData 方法集成到外部表单系统。