useInvoice

获取发票、选择发票抬头。

何时使用

当需要使用发票或抬头信息时

提示

选择用户的发票抬头。当前小程序必须关联一个公众号，且这个公众号是完成了微信认证的，才能调用

API

const { choose, chooseTitle } = useInvoice();

参数说明

无

返回值说明

参数	类型	说明
choose	PromiseWithoutOptionAction<Taro.chooseInvoice.SuccessCallbackResult>	获取发票信息
chooseTitle	PromiseWithoutOptionAction<Taro.chooseInvoiceTitle.SuccessCallbackResult>	获取发票抬头

代码演示

React

wechat/useInvoice/index

import React from 'react';
import { useState } from '@taro-hooks/core';
import { useInvoice, useModal } from 'taro-hooks';
import DemoContent from '@src/components/DemoContent';
import { Button, Cell } from '@taroify/core';

export default () => {
  const { choose, chooseTitle } = useInvoice({});
  const show = useModal({ mask: true, title: '获取结果', showCancel: false });
  const [invoice, setInvoice] =
    useState<Taro.chooseInvoice.SuccessCallbackResult>();

  const handleChoose = async () => {
    let content = '获取成功';
    try {
      const result = await choose();
      setInvoice(result);
    } catch (e) {
      content = e.errMsg || e.message;
    }
    show({ content });
  };

  const handleChooseTitle = async () => {
    let content = '获取成功';
    try {
      const result = await chooseTitle();
      setInvoice(result);
    } catch (e) {
      content = e.errMsg || e.message;
    }
    show({ content });
  };

  return (
    <DemoContent>
      <Button
        block
        color="primary"
        className="gap"
        onClick={handleChoose}
        shape="square"
      >
        获取发票信息
      </Button>
      <Button
        block
        color="primary"
        className="gap"
        onClick={handleChooseTitle}
        shape="square"
      >
        获取发票抬头信息
      </Button>
      {Object.keys(invoice).length ? (
        <Cell.Group clickable title="发票信息">
          {Object.entries(invoice).map(([key, value]) => (
            <Cell key={key} title={key}>
              {JSON.stringify(value)}
            </Cell>
          ))}
        </Cell.Group>
      ) : (
        <Cell>暂无信息</Cell>
      )}
    </DemoContent>
  );
};

Vue

wechat/useInvoice/index

<template>
  <demo-content>
    <nut-button
      class="gap"
      shape="square"
      type="primary"
      block
      @click="handleChoose()"
      >获取发票信息</nut-button
    >
    <nut-button
      class="gap"
      shape="square"
      type="primary"
      block
      @click="handleChooseTitle()"
      >获取发票抬头信息</nut-button
    >
    <nut-cell-group title="发票信息">
      <nut-cell
        v-for="(value, key) in invoice"
        :key="key"
        :title="key"
        :desc="value"
      ></nut-cell>
    </nut-cell-group>
  </demo-content>
</template>

<script setup lang="ts">
import { useState } from '@taro-hooks/core';

import { useInvoice, useModal } from 'taro-hooks';

const { choose, chooseTitle } = useInvoice();
const show = useModal({ mask: true, title: '获取结果', showCancel: false });
const [invoice, setInvoice] =
  useState<Taro.chooseInvoice.SuccessCallbackResult>();

const handleChoose = async () => {
  let content = '获取成功';
  try {
    const result = await choose();
    setInvoice(result);
  } catch (e) {
    content = e.errMsg || e.message;
  }
  show({ content });
};

const handleChooseTitle = async () => {
  let content = '获取成功';
  try {
    const result = await chooseTitle();
    setInvoice(result);
  } catch (e) {
    content = e.errMsg || e.message;
  }
  show({ content });
};
</script>

Hook 支持度

微信小程序	H5	ReactNative
✔️