couponPop.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. let popupViewData = null
  2. export function couponPop(options = {}, callBack) {
  3. // 以下为计算菜单的nview绘制布局,为固定算法,使用者无关关心
  4. const screenWidth = plus.screen.resolutionWidth;
  5. const screenHeight = plus.screen.resolutionHeight;
  6. //弹窗容器宽度
  7. const popupViewWidth = uni.upx2px(590);
  8. // 弹窗容器的Padding
  9. const viewContentPadding = 12;
  10. // 弹窗容器的宽度
  11. const viewContentWidth = popupViewWidth - (viewContentPadding * 2);
  12. let iconWid = popupViewWidth / 4.0;
  13. let icWidth = 35;
  14. let imgWidth = viewContentWidth
  15. let imgHeight = viewContentWidth / 1.78
  16. // 弹窗容器高度
  17. let popupViewHeight = uni.upx2px(748);
  18. let elementList = [{
  19. tag: 'rect', //背景色
  20. color: 'rgba(0,0,0,0)',
  21. rectStyles: {
  22. radius: "8px"
  23. }
  24. },
  25. {
  26. src: './static/images/ad/gift_img_head.png',
  27. id: "gift_img_head",
  28. tag: "img",
  29. position: {
  30. top: "0px",
  31. left: (popupViewWidth - uni.upx2px(312)) / 2 + "px",
  32. width: uni.upx2px(312) + "px",
  33. height: uni.upx2px(120) + "px",
  34. }
  35. },
  36. {
  37. tag: 'rect', //背景色
  38. id: "body",
  39. color: '#fff',
  40. rectStyles: {
  41. radius: uni.upx2px(28) + "px",
  42. },
  43. position: {
  44. top: uni.upx2px(120) + "px",
  45. left: "0px",
  46. width: "100%",
  47. height: popupViewHeight - uni.upx2px(120) + "px",
  48. }
  49. },
  50. // 背景
  51. {
  52. src: './static/images/ad/wzj_bg.png',
  53. id: "wzj_bg",
  54. tag: "img",
  55. position: {
  56. top: uni.upx2px(120) + "px",
  57. left: "0px",
  58. width: "100%",
  59. height: popupViewHeight - uni.upx2px(120) + "px",
  60. }
  61. },
  62. // 新客专享
  63. {
  64. src: './static/images/ad/new_customer_bg.png',
  65. id: "new_customer_bg",
  66. tag: "img",
  67. position: {
  68. top: uni.upx2px(120) + "px",
  69. left: (popupViewWidth - uni.upx2px(288)) / 2 + "px",
  70. width: uni.upx2px(288) + "px",
  71. height: uni.upx2px(72) + "px",
  72. }
  73. },
  74. {
  75. src: './static/images/ad/wz_txt.png',
  76. id: "wz_txt",
  77. tag: "img",
  78. position: {
  79. top: uni.upx2px(476) + "px",
  80. left: (popupViewWidth - uni.upx2px(354)) / 2 + "px",
  81. width: uni.upx2px(354) + "px",
  82. height: uni.upx2px(57) + "px",
  83. }
  84. },
  85. {
  86. src: './static/images/ad/consultation_voucher_img.png',
  87. id: "consultation_voucher_img",
  88. tag: "img",
  89. position: {
  90. top: uni.upx2px(216) + "px",
  91. left: (popupViewWidth - uni.upx2px(280)) / 2 + "px",
  92. width: uni.upx2px(313) + "px",
  93. height: uni.upx2px(261) + "px",
  94. }
  95. }
  96. ];
  97. let detailbtnEle = [{
  98. tag: 'rect', //背景色
  99. color: 'rgba(0,0,0,0)'
  100. },{
  101. src: './static/images/ad/consultation_button.png',
  102. id: "consultation_button",
  103. tag: "img",
  104. position: {
  105. top: "0px",
  106. left: "0px",
  107. width: '100%',
  108. height: '100%',
  109. }
  110. }]
  111. // 弹窗遮罩层
  112. let maskLayer = new plus.nativeObj.View("maskLayer", { //先创建遮罩层
  113. top: '0px',
  114. left: '0px',
  115. height: '100%',
  116. width: '100%',
  117. backgroundColor: 'rgba(0,0,0,0.5)',
  118. visible: false
  119. });
  120. // 弹窗内容
  121. let popupView = new plus.nativeObj.View("popupView", { //创建底部图标菜单
  122. tag: "rect",
  123. top: (screenHeight - popupViewHeight - 70) / 2.0 + "px",
  124. left: '10%',
  125. height: popupViewHeight,
  126. width: "80%",
  127. });
  128. // 去问诊按钮
  129. let detailBtn = new plus.nativeObj.View("detailBtn", {
  130. tag: "rect",
  131. top: (screenHeight - popupViewHeight - 70) / 2.0 + uni.upx2px(595) + "px",
  132. left: (screenWidth - uni.upx2px(415)) / 2 + "px",
  133. width: uni.upx2px(415) + "px",
  134. height: uni.upx2px(119) + "px",
  135. });
  136. // 弹窗关闭按钮
  137. let closeBtnData = closeBtnDrawing();
  138. let closeWid = 40;
  139. let closeBtn = new plus.nativeObj.View("closeBtn", {
  140. tag: "rect",
  141. top: (screenHeight - (popupViewHeight + closeWid + 30)) * 0.5 + (popupViewHeight + 30) + "px",
  142. left: ((closeBtnData.screenWidth - closeWid) / 2) + "px",
  143. height: closeWid + "px",
  144. width: closeWid + "px",
  145. });
  146. popupView.draw(elementList);
  147. detailBtn.draw(detailbtnEle)
  148. closeBtn.draw(closeBtnData.elementList);
  149. maskLayer.show();
  150. popupView.show();
  151. detailBtn.show();
  152. detailBtn.addEventListener('click', (e) => {
  153. maskLayer.hide();
  154. popupView.hide();
  155. detailBtn.hide();
  156. closeBtn.hide();
  157. callBack(1);
  158. });
  159. closeBtn.show();
  160. closeBtn.addEventListener("click", function(e) {
  161. maskLayer.hide();
  162. popupView.hide();
  163. detailBtn.hide();
  164. closeBtn.hide();
  165. });
  166. }
  167. //关闭按钮绘图
  168. function closeBtnDrawing() {
  169. // 以下为计算菜单的nview绘制布局,为固定算法,使用者无关关心
  170. const screenWidth = plus.screen.resolutionWidth;
  171. const screenHeight = plus.screen.resolutionHeight;
  172. //弹窗容器宽度
  173. const popupViewWidth = screenWidth * 0.8;
  174. // 弹窗容器的Padding
  175. const viewContentPadding = 12;
  176. // 弹窗容器的宽度
  177. const viewContentWidth = popupViewWidth - (viewContentPadding * 2);
  178. // 弹窗容器高度
  179. let closeY = viewContentPadding * 7 + 60 + 32;
  180. let elementList = [{
  181. tag: 'rect', //背景色
  182. color: 'rgba(255,255,255,0)',
  183. rectStyles: {
  184. radius: "0px"
  185. }
  186. },
  187. {
  188. src: './static/images/ad/close_icon.png',
  189. id: "close",
  190. tag: "img",
  191. position: {
  192. top: '0px',
  193. left: "0px",
  194. width: "32px",
  195. height: "32px",
  196. }
  197. }
  198. ];
  199. return {
  200. popupViewHeight: 32,
  201. popupViewWidth: popupViewWidth,
  202. screenWidth: screenWidth,
  203. screenHeight: screenHeight,
  204. elementList: elementList
  205. };
  206. }