缴费单据查询

所有元素都是可选的。 暂不支持多选，明细调查，核减等操作。

1、界面截图

2、元素与属性

currentUser

当前用户。 如果指定了该属性，需要加上下方的userList，哪怕只有一条记录。 因为当前用户这块信息，是可以被交互的。

interface User {
  title: string;
  note: string
}
// demo
const currentUser: User = {
  title: '吴风',
  note: '就诊卡号：123876875123',
};
export default currentUser;

userList

用户列表 用于抬出Picker组件，点击确定会触发回调，并有返回。 详情见 #onUserSelect

type UserList = Array<User>;
const userList: UserList = [
  {
    title: '吴风',
    note: '就诊卡号：38821678311',
  },
  {
    title: '金在云',
    note: '就诊卡号：1923898712',
  },
  {
    title: '孙一飞',
    note: '就诊卡号：821852345123',
  },
];
export default userList;

cards

卡片条例，一般承载缴费清单，选择性的可交互

interface Card {
  title: string;
  btnType: 'btn' | 'arrow' | '';
  btnLocal?: '明细';
  list: {
      label: string;
    content: string;
  }[];
}
// demo
const cards: Card[] = [
  {
    title: '左氧诺氟沙星',
    // 按钮类型，如果是空字符串、不传或者箭头类型时，文案不生效
    btnType: 'btn',
    // 按钮文案
    btnLocal: '明细',
    list: [
      {
        label: '金额（元）：',
        content: '¥20.1',
      },
      {
        label: '单位（盒）：',
        content: '6',
      },
    ],
  },
];
export default cards;

listHeaderConfig

列表标题配置，主题与副标题

interface HeaderConfig {
  title: string;
  subTitle: string
}
// demo
const listHeaderConfig: HeaderConfig = {
  title: '待缴费单列表',
  subTitle: '仅支持查询近三个月的历史记录',
};
export default listHeaderConfig;

3、函数绑定

onUserSelect: (params) => User;

用户选择完毕后，点击确定产生的回调事件。 传入选择的用户信息。 需要返回当前用户：currentUser

function onUserSelect(params) {
  // 传入的用户
  const { json: selectedUser } = params;
  // 返回新的用户
  params.sCallBack({
    currentUser: {
      title: '吴风',
      note: '就诊卡号：821852345123',
    },
  });
}

onCardClick: (params) => void;

卡片点击事件，如果可以点击的话。 入参：当前卡片的信息

function onCardClick(params) {
  const { json } = params;
  console.log(json);
}