index.tsx 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. import { use } from '../utils';
  2. import { emit, inherit } from '../utils/functional';
  3. import Button, { ButtonType } from '../button';
  4. // Types
  5. import { CreateElement, RenderContext } from 'vue/types';
  6. import { ScopedSlot, DefaultSlots } from '../utils/use/sfc';
  7. export type SubmitBarProps = {
  8. tip?: string;
  9. label?: string;
  10. price?: number;
  11. loading?: boolean;
  12. currency: string;
  13. disabled?: boolean;
  14. buttonType: ButtonType;
  15. buttonText?: string;
  16. decimalLength: number;
  17. safeAreaInsetBottom?: boolean;
  18. };
  19. export type SubmitBarSlots = DefaultSlots & {
  20. top?: ScopedSlot;
  21. tip?: ScopedSlot;
  22. };
  23. const [sfc, bem, t] = use('submit-bar');
  24. function SubmitBar(
  25. h: CreateElement,
  26. props: SubmitBarProps,
  27. slots: SubmitBarSlots,
  28. ctx: RenderContext<SubmitBarProps>
  29. ) {
  30. const { tip, price } = props;
  31. const hasPrice = typeof price === 'number';
  32. return (
  33. <div
  34. class={bem({ 'safe-area-inset-bottom': props.safeAreaInsetBottom })}
  35. {...inherit(ctx)}
  36. >
  37. {slots.top && slots.top()}
  38. {(slots.tip || tip) && (
  39. <div class={bem('tip')}>
  40. {tip}
  41. {slots.tip && slots.tip()}
  42. </div>
  43. )}
  44. <div class={bem('bar')}>
  45. {slots.default && slots.default()}
  46. <div class={bem('text')}>
  47. {hasPrice && [
  48. <span>{props.label || t('label')}</span>,
  49. <span class={bem('price')}>{`${props.currency} ${(
  50. (price as number) / 100
  51. ).toFixed(props.decimalLength)}`}</span>
  52. ]}
  53. </div>
  54. <Button
  55. square
  56. size="large"
  57. type={props.buttonType}
  58. loading={props.loading}
  59. disabled={props.disabled}
  60. text={props.loading ? '' : props.buttonText}
  61. onClick={() => {
  62. emit(ctx, 'submit');
  63. }}
  64. />
  65. </div>
  66. </div>
  67. );
  68. }
  69. SubmitBar.props = {
  70. tip: String,
  71. label: String,
  72. loading: Boolean,
  73. disabled: Boolean,
  74. buttonText: String,
  75. safeAreaInsetBottom: Boolean,
  76. price: {
  77. type: Number,
  78. default: null
  79. },
  80. decimalLength: {
  81. type: Number,
  82. default: 2
  83. },
  84. currency: {
  85. type: String,
  86. default: '¥'
  87. },
  88. buttonType: {
  89. type: String,
  90. default: 'danger'
  91. }
  92. };
  93. export default sfc<SubmitBarProps, {}, SubmitBarSlots>(SubmitBar);