feat(useinvoice): add useInvoice hooks

innocces · Sep 21, 2021 · c293b1e · c293b1e
1 parent 3492d43
commit c293b1e
Show file tree

Hide file tree

Showing 8 changed files with 167 additions and 13 deletions.
diff --git a/packages/app/src/app.config.ts b/packages/app/src/app.config.ts
@@ -38,6 +38,7 @@ export default {
     'pages/useLogin/index',
     'pages/useRequestSubscribeMessage/index',
     'pages/useChooseAddress/index',
+    'pages/useInvoice/index',
     // network
     'pages/useRequest/index',
     'pages/useRequest/defaultRequest/index',

diff --git a/packages/app/src/constant/index.ts b/packages/app/src/constant/index.ts
@@ -171,6 +171,10 @@ export const ChildrenList: { [_: string]: APIChildrenItem[] } = {
       id: 'useChooseAddress',
       name: 'useChooseAddress 收货地址',
     },
+    {
+      id: 'useInvoice',
+      name: 'useInvoice 发票(抬头)',
+    },
   ],
   [APIChildrenName.media]: [
     {
@@ -252,3 +256,9 @@ export const SceneEnum: { [_: number]: string } = {
   1038: '从另一个小程序返回',
   1043: '公众号模板消息',
 };
+
+export const PRODUCTIONDISABLEPANEL: string[] = [
+  'useVideo',
+  'useWeRun',
+  'useInvoice',
+];
diff --git a/packages/app/src/pages/index/index.tsx b/packages/app/src/pages/index/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback } from 'react';
 import { AtIcon } from 'taro-ui';
 import { Image, View } from '@tarojs/components';
 
@@ -32,15 +32,6 @@ const Index = () => {
     onUpdateReady,
   });
 
-  useEffect(() => {
-    console.log(BUILD_MODE);
-    if (BUILD_MODE) {
-      show({
-        content: '由于个人账号限制, 无法在线预览useVideo. 可至github查看',
-      });
-    }
-  }, [show]);
-
   const handleLocation = useCallback(
     (route: string) => {
       if (!routerInfo && env === ENV_TYPE.WEB) {

diff --git a/packages/app/src/pages/panel/index.tsx b/packages/app/src/pages/panel/index.tsx
@@ -10,6 +10,7 @@ import {
   APIListItem,
   ChildrenList,
   APIChildrenItem,
+  PRODUCTIONDISABLEPANEL,
 } from '../../constant';
 
 import './index.less';
@@ -40,9 +41,9 @@ const Panel = ({}: IPanelProps) => {
 
   const handleItemAction = useCallback(
     (id: string) => {
-      if (BUILD_MODE && id === 'useVideo') {
+      if (BUILD_MODE && PRODUCTIONDISABLEPANEL.includes(id)) {
         show({
-          content: '由于个人账号限制, 无法在线预览useVideo. 可至github查看',
+          content: '由于个人账号限制, 无法在线预览' + id + '. 可至github查看',
         });
       } else {
         navigateTo({

diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts
@@ -30,6 +30,7 @@ import useAccountInfo from './useAccountInfo';
 import useLogin from './useLogin';
 import useRequestSubscribeMessage from './useRequestSubscribeMessage';
 import useChooseAddress from './useChooseAddress';
+import useInvoice from './useInvoice';
 
 // network
 import useNetworkType from './useNetworkType';
@@ -95,4 +96,5 @@ export {
   useLogin,
   useRequestSubscribeMessage,
   useChooseAddress,
+  useInvoice,
 };
diff --git a/packages/hooks/src/useInvoice/index.md b/packages/hooks/src/useInvoice/index.md
@@ -0,0 +1,74 @@
+---
+title: useInvoice
+nav:
+  title: Hooks
+  path: /hooks
+  order: 2
+group:
+  title: 小程序
+  path: /wechat
+---
+
+# useInvoice
+
+获取发票、选择发票抬头。
+
+## 何时使用
+
+当需要使用发票或抬头信息时
+
+<Alert>选择用户的发票抬头。当前小程序必须关联一个公众号，且这个公众号是完成了微信认证的，才能调用</Alert>
+
+## API
+
+```jsx | pure
+const [chooseInvoice, chooseInvoiceTitle] = useInvoice();
+```
+
+## 参数说明
+
+无
+
+## 返回值说明
+
+| 参数               | 类型                                                                            | 说明         |
+| ------------------ | ------------------------------------------------------------------------------- | ------------ |
+| chooseInvoice      | `() => Promise<IChooseInvoiceSuccessResult[] &#124; General.CallbackResult>`    | 获取发票信息 |
+| chooseInvoiceTitle | `() => Promise<IChooseInvoiceTitleSuccessResult &#124; General.CallbackResult>` | 获取发票抬头 |
+
+### IChooseInvoiceSuccessResult
+
+| 参数         | 类型     | 说明                                                                              |
+| ------------ | -------- | --------------------------------------------------------------------------------- |
+| card_id      | `string` | 所选发票卡券的 `cardId`                                                           |
+| encrypt_code | `string` | 所选发票卡券的加密`code`，报销方可以通过`cardId`和`encryptCode`获得报销发票的信息 |
+| app_id       | `string` | 发票方的`appId`                                                                   |
+
+### IChooseInvoiceTitleSuccessResult
+
+| 参数           | 类型         | 说明                            |
+| -------------- | ------------ | ------------------------------- |
+| bankAccount    | `string`     | 银行账号                        |
+| bankName       | `string`     | 银行名称                        |
+| companyAddress | `string`     | 单位地址                        |
+| taxNumber      | `string`     | 抬头税号                        |
+| telephone      | `string`     | 手机号码                        |
+| title          | `string`     | 抬头名称                        |
+| type           | `0 &#124; 1` | 0"单位" &#124; 1“个人” 抬头类型 |
+
+## 代码演示
+
+<code src="@pages/useInvoice" />
+
+## Hook 支持度
+
+| 微信小程序 | H5  | ReactNative |
+| :--------: | :-: | :---------: |
+|     ✔️     |     |             |
+
+## FAQ
+
+### 1. 更多说明
+
+- [chooseInvoice](https://developers.weixin.qq.com/miniprogram/dev/api/open-api/invoice/wx.chooseInvoice.html)
+- [chooseInvoiceTitle](https://developers.weixin.qq.com/miniprogram/dev/api/open-api/invoice/wx.chooseInvoiceTitle.html)
diff --git a/packages/hooks/src/useInvoice/index.ts b/packages/hooks/src/useInvoice/index.ts
@@ -0,0 +1,75 @@
+import {
+  ENV_TYPE,
+  chooseInvoice,
+  chooseInvoiceTitle,
+  General,
+} from '@tarojs/taro';
+import { useCallback } from 'react';
+import useEnv from '../useEnv';
+
+export interface IChooseInvoiceSuccessResult {
+  card_id: string;
+  encrypt_code: string;
+  app_id: string;
+}
+export interface IChooseInvoiceTitleSuccessResult {
+  bankAccount: string;
+  bankName: string;
+  companyAddress: string;
+  taxNumber: string;
+  telephone: string;
+  title: string;
+  type: 0 | 1;
+}
+export type TChooseInvoice = () => Promise<
+  IChooseInvoiceSuccessResult[] | General.CallbackResult
+>;
+
+export type TChooseInvoiceTitle = () => Promise<
+  IChooseInvoiceTitleSuccessResult | General.CallbackResult
+>;
+
+function useInvoice(): [TChooseInvoice, TChooseInvoiceTitle] {
+  const env = useEnv();
+
+  const chooseInvoiceAsync = useCallback<TChooseInvoice>(() => {
+    return new Promise((resolve, reject) => {
+      if (env !== ENV_TYPE.WEAPP) {
+        reject({ errMsg: 'chooseInvoice: fail' });
+      } else {
+        try {
+          chooseInvoice({
+            success: ({ invoiceInfo = '' }) => {
+              const parseInvoiceInfo = JSON.parse(invoiceInfo);
+              resolve(parseInvoiceInfo);
+            },
+            fail: reject,
+          });
+        } catch (e) {
+          reject({ errMsg: 'chooseInvoice: fail', data: e });
+        }
+      }
+    });
+  }, [env]);
+
+  const chooseInvoiceTitleAsync = useCallback<TChooseInvoiceTitle>(() => {
+    return new Promise((resolve, reject) => {
+      if (env !== ENV_TYPE.WEAPP) {
+        reject({ errMsg: 'chooseInvoiceTitle: fail' });
+      } else {
+        try {
+          chooseInvoiceTitle({
+            success: ({ errMsg, ...result }) => resolve(result),
+            fail: reject,
+          });
+        } catch (e) {
+          reject({ errMsg: 'chooseInvoiceTitle: fail', data: e });
+        }
+      }
+    });
+  }, [env]);
+
+  return [chooseInvoiceAsync, chooseInvoiceTitleAsync];
+}
+
+export default useInvoice;
diff --git a/packages/hooks/tsconfig.json b/packages/hooks/tsconfig.json
@@ -2,6 +2,6 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "rootDir": "src",
-    "typeRoots": ["./typings/*", "../../node_modules/@types"]
+    "typeRoots": ["./typings/*.d.ts", "../../node_modules/@types"]
   }
 }