native_popup.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. export class NativePopup {
  2. constructor(options = {}) {
  3. this.sysInfo = uni.getSystemInfoSync()
  4. const { bgColor = '#fff', titleColor = '#000', contentColor = "#272727" } = options
  5. this.bgColor = bgColor
  6. this.titleColor = titleColor
  7. this.contentColor = contentColor
  8. }
  9. createPopup = () => {
  10. const { statusBarHeight, screenWidth } = this.sysInfo
  11. const popupView = new plus.nativeObj.View('popupView', {
  12. top: 0,
  13. left: 0,
  14. width: screenWidth,
  15. height: 110 + statusBarHeight + 'px',
  16. // backgroundColor: 'blue' // debug
  17. })
  18. popupView.addEventListener("click", this.close)
  19. const bgPadding = 15
  20. popupView.drawRect({
  21. color: 'rgba(0, 0, 0, 0.1)',
  22. radius: '10px'
  23. }, {
  24. top: statusBarHeight + 7 + 'px',
  25. left: bgPadding - 2 + 'px',
  26. width: screenWidth - bgPadding * 2 + 4 + 'px',
  27. height: "100px",
  28. })
  29. popupView.drawRect({
  30. color: this.bgColor,
  31. radius: '10px'
  32. }, {
  33. top: statusBarHeight + 5 + 'px',
  34. left: bgPadding + 'px',
  35. width: screenWidth - bgPadding * 2 + 'px',
  36. height: "100px",
  37. })
  38. const padding = 10
  39. popupView.drawText(this.title, {
  40. top: statusBarHeight + 10 + 'px',
  41. left: padding + bgPadding + 'px',
  42. height: "30px",
  43. width: screenWidth - bgPadding * 2 - padding * 2 + 'px',
  44. }, {
  45. size: "16px",
  46. weight: "bold",
  47. align: "left",
  48. color: this.titleColor,
  49. }, {
  50. onClick: function(e) {
  51. console.log(e);
  52. }
  53. })
  54. popupView.drawText(this.content, {
  55. top: statusBarHeight + 40 + 'px',
  56. height: "60px",
  57. left: padding + bgPadding + 'px',
  58. width: screenWidth - bgPadding * 2 - padding * 2 + 'px',
  59. }, {
  60. size: "14px",
  61. align: "left",
  62. color: this.contentColor,
  63. whiteSpace: 'normal',
  64. })
  65. this.popupView = popupView
  66. return popupView
  67. }
  68. show = (options = {}) => {
  69. this.close()
  70. const { title = '权限申请说明', content = '' } = options
  71. this.title = title
  72. this.content = content
  73. this.createPopup()
  74. this.popupView.show()
  75. }
  76. close = () => {
  77. this.popupView && this.popupView.close()
  78. }
  79. }
  80. export const popup = new NativePopup()