poster.js 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264
  1. const util = require("../../utils/util.js")
  2. Page({
  3. data: {
  4. options:{},
  5. painting:{},
  6. info:{},
  7. childComment:'',
  8. contentTop:390,
  9. },
  10. onLoad: function (options) {
  11. console.log(options)
  12. if (options) {
  13. this.setData({options})
  14. this.getPosterInfo();
  15. }
  16. },
  17. onReady: function () {
  18. },
  19. onShow: function () {
  20. },
  21. // 保存图片
  22. save(){
  23. let that =this,view=[],comment=that.data.info.comment,topSize=470;
  24. if (comment.length>=0 && comment.length<=150) {
  25. topSize = 630;
  26. } else if(comment.length>150 && comment.length<=250) {
  27. topSize = 530;
  28. }
  29. let pic_w_h=that.data.info.picWidthHeight || that.data.options.picWidthHeight;
  30. let width=pic_w_h.split('*')[0],
  31. height=pic_w_h.split('*')[1],
  32. proportion=0,picWidth=0,picHeight=0,poLeft=0,namepoLeft=0;
  33. if (width>height) {
  34. picWidth=550
  35. proportion=width/picWidth;
  36. picHeight=height/proportion
  37. if (picHeight>312) {
  38. picHeight=312;
  39. proportion=height/picHeight;
  40. picWidth=width/proportion
  41. }
  42. } else {
  43. picHeight=312;
  44. proportion=height/picHeight;
  45. picWidth=width/proportion;
  46. if (picWidth>550) {
  47. picWidth=550
  48. proportion=width/picWidth;
  49. picHeight=height/proportion
  50. }
  51. }
  52. poLeft=(750-picWidth)/2;
  53. namepoLeft=poLeft+picWidth-200;
  54. wx.reportAnalytics('save_pic', {
  55. aid: that.data.options.aid,
  56. title: that.data.options.atitle,
  57. });
  58. wx.showLoading({ title: '海报生成中'});
  59. view.push({
  60. type: 'image',
  61. url: 'https://img.bbztx.com/image_test/upload/thumbs/20210510/logo/1620636487933054816.png',
  62. top: 0,
  63. left: 0,
  64. width: 750,
  65. height: 1987
  66. },{
  67. type: 'rect',
  68. content: '',
  69. top: 98,
  70. left: 100,
  71. width: 550,
  72. height: picHeight,
  73. background:'#fcebe8',
  74. transform: 'rotate(-5deg)'
  75. },{
  76. type: 'image',
  77. url: that.data.info.pic || that.data.options.pic,
  78. top: 98,
  79. left: poLeft,//100
  80. width: picWidth,//550
  81. height: picHeight//312
  82. },{
  83. type: 'image',
  84. url: that.data.info.logo,
  85. top: 1264,
  86. left: 100,
  87. width: 550,
  88. height: 283,
  89. arcType: "arc",
  90. borderRadius:10
  91. },{
  92. type: 'image',
  93. url: that.data.info.bbztxCommentQrcode,
  94. top: 1730,
  95. left: 129,
  96. width: 188,
  97. height: 188,
  98. backgroundColor:'#fff',
  99. },{
  100. type: 'image',
  101. url: '/images/nameBox.png',
  102. top: picHeight+98-20,//380
  103. left: namepoLeft,
  104. width: 200,
  105. height: 40,
  106. },{
  107. type: 'text',
  108. display:'block',
  109. content: that.data.options.ChildName.length>4?that.data.options.ChildName.substr(0,4)+'...':that.data.options.ChildName,
  110. top: picHeight+98-20+7,
  111. left: that.data.options.ChildName.length>2?(that.data.options.ChildName.length>3?namepoLeft+40:namepoLeft+60):namepoLeft+70,
  112. fontSize: 28,
  113. fontWeight:700,
  114. width: 162,
  115. height: 40,
  116. lineHeight:40,
  117. color:'#fff'
  118. },{
  119. type: 'text',
  120. content: ' '+comment,
  121. top: topSize,
  122. left: 100,
  123. width: 550,
  124. fontSize: 24,
  125. color:'#3c3b3b',
  126. textAlign: 'justify',
  127. breakWord:true,
  128. lineHeight: 43,
  129. MaxLineNumber:14,
  130. },
  131. {
  132. type: 'text',
  133. content: that.data.info.tag.length>27?(that.data.info.tag.substring(0,27)+'...'):that.data.info.tag,
  134. top: 1575,
  135. left: 100,
  136. width: 550,
  137. textAlign:'left',
  138. fontSize: 22,
  139. color:'#eb3c47'
  140. },{
  141. type: 'text',
  142. content: '活动费',
  143. top: 1625,
  144. left: 100,
  145. fontSize: 22,
  146. color:'#3c3b3b'
  147. },{
  148. type: 'text',
  149. content: that.data.info.price,
  150. top: 1625,
  151. left: 162,
  152. fontSize: 24,
  153. color:'#3c3b3b'
  154. })
  155. if (that.data.info.psAttendCount>10) {
  156. view.push({
  157. type: 'text',
  158. content: that.data.info.count,
  159. top: 1625,
  160. left: 527,
  161. fontSize: 22,
  162. color:'#8e8d8d'
  163. })
  164. }
  165. this.setData({
  166. painting: {
  167. width: 750,
  168. height: 1987,
  169. clear: true,
  170. views: view
  171. }
  172. });
  173. },
  174. // cavans画图
  175. eventGetImage(e){
  176. const { tempFilePath, errMsg } = e.detail;
  177. if (errMsg === 'canvasdrawer:ok') {
  178. wx.saveImageToPhotosAlbum({
  179. filePath: tempFilePath,
  180. success(res) {
  181. wx.showToast({
  182. title: '保存图片成功',
  183. icon: 'success',
  184. duration: 2000
  185. })
  186. },
  187. fail(res){
  188. console.log('fail',res)
  189. }
  190. });
  191. wx.hideLoading();
  192. }
  193. },
  194. // 判定内容高度
  195. contentTop(data){
  196. let topSize=380;
  197. if (data.length>=0 && data.length<=150) {
  198. topSize = 520;
  199. } else if(data.length>150 && data.length<=230) {
  200. topSize = 470;
  201. }
  202. return topSize;
  203. },
  204. // 海报查询
  205. getPosterInfo(){
  206. let that = this,data=this.data.options;
  207. util.ajax({
  208. func: "user/childcomment/poster/article",
  209. data:{
  210. id:data.id,
  211. commentType:0
  212. }
  213. }, function (res) {
  214. if (res.code == 0) {
  215. res.data.price='¥'+res.data.price;
  216. res.data.count='已售'+res.data.psAttendCount+'人';
  217. res.data.nickname='—— '+res.data.nickname;
  218. let data=[]
  219. res.data.tags.forEach(el => {
  220. data.push(el.tagValue)
  221. });
  222. res.data.tag=data.join('|');
  223. that.setData({
  224. info:res.data,
  225. childComment:res.data.comment,
  226. contentTop:that.contentTop(res.data.comment)
  227. })
  228. if (res.data.bbztxCommentQrcode=='') {
  229. that.getQrcode(res.data.aid)
  230. }
  231. if ((util.isEmpty(that.data.options.picWidthHeight) || util.isEmpty(that.data.options.pic))) {
  232.         wx.showModal({
  233.           content: '活动图片获取失败,请联系宝大大处理。',
  234.           showCancel:false,
  235.           success (res) {}
  236.         })
  237.       }
  238. } else
  239. util.showTips(res.reason);
  240. });
  241. },
  242. // 第一次生成二维码、
  243. getQrcode(aid){
  244. let that = this,data=this.data.options;
  245. util.ajax({
  246. func: "user/qrcode/childComment/article",
  247. data:{
  248. aid:aid,
  249. commentType:0
  250. }
  251. }, function (res) {
  252. if (res.code == 0) {
  253. let data=that.data.info;
  254. if (res.data.url) {
  255. data.bbztxCommentQrcode=res.data.url;
  256. that.setData({info:data})
  257. }
  258. } else
  259. util.showTips(res.reason);
  260. });
  261. }
  262. })