index.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. const _f = function () {};
  2. module.exports = {
  3. showZanDialog(options = {}) {
  4. const {
  5. // 自定义 btn 列表
  6. // { type: 按钮类型,回调时以此作为区分依据,text: 按钮文案, color: 按钮文字颜色 }
  7. buttons = [],
  8. // 标题
  9. title = '',
  10. // 内容
  11. content = ' ',
  12. // 按钮是否展示为纵向
  13. buttonsShowVertical = false,
  14. // 是否展示确定
  15. showConfirm = true,
  16. // 确认按钮文案
  17. confirmText = '确定',
  18. // 确认按钮颜色
  19. confirmColor = '#3CC51F',
  20. // 是否展示取消
  21. showCancel = false,
  22. // 取消按钮文案
  23. cancelText = '取消',
  24. // 取消按钮颜色
  25. cancelColor = '#333'
  26. } = options;
  27. // 处理默认按钮的展示
  28. // 纵向排布确认按钮在上方
  29. let showCustomBtns = false;
  30. if (buttons.length === 0) {
  31. if (showConfirm) {
  32. buttons.push({
  33. type: 'confirm',
  34. text: confirmText,
  35. color: confirmColor
  36. });
  37. }
  38. if (showCancel) {
  39. const cancelButton = {
  40. type: 'cancel',
  41. text: cancelText,
  42. color: cancelColor
  43. };
  44. if (buttonsShowVertical) {
  45. buttons.push(cancelButton);
  46. } else {
  47. buttons.unshift(cancelButton);
  48. }
  49. }
  50. } else {
  51. showCustomBtns = true;
  52. }
  53. return new Promise((resolve, reject) => {
  54. this.setData({
  55. zanDialog: {
  56. show: true,
  57. showCustomBtns,
  58. buttons,
  59. title,
  60. content,
  61. buttonsShowVertical,
  62. showConfirm,
  63. confirmText,
  64. confirmColor,
  65. showCancel,
  66. cancelText,
  67. cancelColor,
  68. // 回调钩子
  69. resolve,
  70. reject
  71. }
  72. });
  73. });
  74. },
  75. _handleZanDialogButtonClick(e) {
  76. const { currentTarget = {} } = e;
  77. const { dataset = {} } = currentTarget;
  78. // 获取当次弹出框的信息
  79. const zanDialogData = this.data.zanDialog || {};
  80. const { resolve = _f, reject = _f } = zanDialogData;
  81. // 重置 zanDialog 里的内容
  82. this.setData({
  83. zanDialog: { show: false }
  84. });
  85. // 自定义按钮,全部 resolve 形式返回,根据 type 区分点击按钮
  86. if (zanDialogData.showCustomBtns) {
  87. resolve({
  88. type: dataset.type
  89. });
  90. return;
  91. }
  92. // 默认按钮,确认为 resolve,取消为 reject
  93. if (dataset.type === 'confirm') {
  94. resolve({
  95. type: 'confirm'
  96. });
  97. } else {
  98. reject({
  99. type: 'cancel'
  100. });
  101. }
  102. }
  103. };