share.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343
  1. // component/shar-dialog/shar-dialog.js
  2. import httpRequestApi from '../../utils/APIClient';
  3. Component({
  4. /**
  5. * 组件的属性列表
  6. */
  7. properties: {
  8. shareType: {
  9. type: 'String',
  10. value: ''
  11. },
  12. shareId: {
  13. type: 'String',
  14. value: ''
  15. }
  16. },
  17. /**
  18. * 组件的初始数据
  19. */
  20. data: {
  21. shareFlag: false,
  22. imgUrls: '',
  23. avatar: '',
  24. author: '',
  25. iconImg: '',
  26. title: '',
  27. path: '',
  28. QRCodeImagePath: '',
  29. QRCodeImageLocalPath: '',
  30. groupPurchaseInfo: {},
  31. groupType: '',
  32. animationData: {},
  33. touchMove: true,
  34. randomSologan: [
  35. '开发右脑最简单的方式就是大声朗读',
  36. '大声朗读 有利于建立自信心',
  37. '大声朗读 能帮助孩子提高写作能力',
  38. '朗读是感知世界的一种重要方式',
  39. '增强记忆力的方法之一大声朗读',
  40. '大声朗读是语感形成的最佳途径',
  41. '大声朗读 还原课文的诗性美',
  42. '在朗读中 提升孩子的思辨能力',
  43. '重温经典课文 享受亲子美好时光',
  44. '大声朗读 能帮助孩子提高写作能力'
  45. ]
  46. },
  47. /**
  48. * 组件的方法列表
  49. */
  50. methods: {
  51. touchMove: function () {
  52. return false
  53. },
  54. poster: function () {
  55. const that = this;
  56. wx.showLoading({
  57. title: '专属海报生成中',
  58. // mask: true
  59. })
  60. httpRequestApi.createQRCode(this.data.QRData).success(res => {
  61. // 下载二维码
  62. wx.downloadFile({
  63. url: res.data.data,
  64. success: res => {
  65. this.setData({
  66. QRCodeImagePath: res.tempFilePath
  67. },()=>{
  68. this.saveAvatar();
  69. })
  70. }
  71. });
  72. })
  73. },
  74. makeImage: function () {
  75. const ctx = wx.createCanvasContext('myCanvas');
  76. // 画出背景和相同内容
  77. if (this.data.shareType === 'works') {
  78. ctx.drawImage('../../../static/image/works_poster.jpg', 0, 0, 1200, 2100, 0, 0, 600, 1050); //插入图片
  79. } else {
  80. ctx.drawImage('../../../static/image/group_poster.jpg', 0, 0, 1200, 2100, 0, 0, 600, 1050); //插入图片
  81. }
  82. ctx.save()
  83. ctx.beginPath()
  84. ctx.fill()
  85. ctx.setFontSize(25)
  86. ctx.setFillStyle('#fff')
  87. ctx.fillText('课文朗读 每天5分钟', (300 - ctx.measureText('课文朗读 每天5分钟').width) / 2, 54.5)
  88. ctx.setFontSize(16)
  89. let randomSologan =this.data.randomSologan[Math.floor(Math.random()*10)];
  90. ctx.fillText(randomSologan, (300 - ctx.measureText(randomSologan).width) / 2, 75.5)
  91. ctx.setFontSize(15)
  92. ctx.setFillStyle('#838383')
  93. ctx.fillText('长按识别二维码', 130.5, 391)
  94. ctx.setFontSize(12)
  95. ctx.setFillStyle('#838383')
  96. ctx.fillText('接收邀请,获得你的课程吧', 130.5, 409.5) /* */
  97. // 头像
  98. console.log('画头像')
  99. if (this.data.shareType === 'works') {
  100. ctx.arc(150, 160, 36, 0, 2 * Math.PI, true)
  101. ctx.clip(); //剪切头像区域
  102. ctx.drawImage(this.data.avatar, 116, 126, 68, 68);
  103. ctx.arc(150, 160, 34, 0, 2 * Math.PI, false)
  104. ctx.setFillStyle('#ff6f42')
  105. ctx.fill();
  106. ctx.clip(); //剪切头像区域
  107. ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
  108. ctx.setFontSize(15)
  109. ctx.setFillStyle('#ff6f42')
  110. ctx.fillText(this.data.author, (300 - ctx.measureText(this.data.author).width) / 2, 220)
  111. ctx.setFillStyle('#434343')
  112. ctx.fillText('播音主持特长生', (300 - ctx.measureText('播音主持特长生').width) / 2, 243)
  113. ctx.setFontSize(15)
  114. ctx.setFillStyle('#434343')
  115. ctx.fillText('使出洪荒之力,声情并茂地朗诵了', (300 - ctx.measureText('使出洪荒之力,声情并茂地朗诵了').width) / 2, 262)
  116. ctx.fillText(`《${this.data.title}》`, (300 - ctx.measureText(`《${this.data.title}》`).width) / 2, 284)
  117. } else {
  118. ctx.arc(64, 146, 29, 0, 2 * Math.PI, true)
  119. ctx.clip(); //剪切头像区域
  120. ctx.drawImage(this.data.avatar, 37, 119, 54, 54);
  121. ctx.arc(64, 146, 27, 0, 2 * Math.PI, false)
  122. ctx.setFillStyle('#ff6f42')
  123. ctx.fill();
  124. ctx.clip(); //剪切头像区域
  125. //插入图片
  126. ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
  127. ctx.setFontSize(18)
  128. ctx.setFillStyle('#ff6f42')
  129. ctx.fillText(this.data.author, 100, 143.5)
  130. ctx.setFontSize(16)
  131. ctx.setFillStyle('#434343')
  132. ctx.fillText('邀您和我一起大声朗读', 100, 167.5)
  133. ctx.drawImage(this.data.iconImg, 27, 194, 247, 103.5);
  134. ctx.setFontSize(15)
  135. ctx.setFillStyle('#434343')
  136. ctx.fillText('朗朗读书声,是世界上最美妙的声音', (300 - ctx.measureText('朗朗读书声,是世界上最美妙的声音').width) / 2, 327.5)
  137. }
  138. console.log('花二维码')
  139. console.log(this.data)
  140. console.log(this.data.avatar)
  141. ctx.drawImage(this.data.QRCodeImagePath, 35, 351, 90, 90);
  142. ctx.draw();
  143. setTimeout(() => {
  144. wx.canvasToTempFilePath({
  145. x: 0,
  146. y: 0,
  147. width: 300,
  148. height: 525,
  149. destWidth: 1200,
  150. destHeight: 2100,
  151. canvasId: 'myCanvas',
  152. success: (res) => {
  153. this.setData({
  154. imgUrls: res.tempFilePath
  155. })
  156. wx.hideLoading()
  157. },
  158. fail: (res) => {
  159. console.log(res)
  160. wx.hideLoading();
  161. }
  162. })
  163. }, 400)
  164. },
  165. saveIcon: function(){
  166. wx.downloadFile({
  167. url: this.data.iconImg,
  168. success: res => {
  169. this.setData({
  170. iconImg: res.tempFilePath
  171. },()=>{
  172. console.log(this.data.iconImg)
  173. this.makeImage();
  174. })
  175. }
  176. });
  177. },
  178. saveAvatar: function(){
  179. wx.downloadFile({
  180. url: this.data.avatar,
  181. success: res => {
  182. this.setData({
  183. avatar: res.tempFilePath
  184. },()=>{
  185. if (this.data.shareType === 'group'){
  186. this.saveIcon();
  187. } else {
  188. this.makeImage();
  189. }
  190. })
  191. }
  192. });
  193. },
  194. share: function (data) {
  195. console.log(data)
  196. if (this.data.shareType === 'works') {
  197. this.setData({
  198. shareFlag: !this.data.shareFlag,
  199. avatar: data.avatar,
  200. author: data.author,
  201. iconImg: data.iconImg,
  202. title: data.title,
  203. productId: data.productId,
  204. // path: data.path,
  205. QRData: {
  206. page: data.path,
  207. scene: data.scene,
  208. qrCodeId: this.data.shareId
  209. }
  210. })
  211. }
  212. if (this.data.shareType === 'group') {
  213. console.log(data)
  214. console.log('团购分享')
  215. this.setData({
  216. shareFlag: !this.data.shareFlag,
  217. avatar: data.avatar,
  218. author: data.author,
  219. iconImg: data.iconImg,
  220. title: data.title,
  221. // path: data.path,
  222. QRData: {
  223. page: data.path,
  224. scene: data.scene,
  225. qrCodeId: this.data.shareId
  226. },
  227. groupPurchaseInfo: data.groupPurchaseInfo,
  228. groupType: data.groupType
  229. })
  230. }
  231. this.poster();
  232. if (this.data.shareType === 'class') {
  233. console.log('课程分享')
  234. this.setData({
  235. shareFlag: !this.data.shareFlag
  236. })
  237. }
  238. // 动画测试
  239. this.animation = wx.createAnimation({
  240. duration: 700,
  241. timingFunction: 'ease',
  242. })
  243. this.animation.bottom(0).step();
  244. this.setData({
  245. animationData: this.animation.export()
  246. })
  247. // 动画测试
  248. },
  249. //关闭弹框
  250. close: function (e) {
  251. this.animation = wx.createAnimation({
  252. duration: 400,
  253. timingFunction: 'ease',
  254. })
  255. this.animation.bottom(-300).step();
  256. this.setData({
  257. animationData: this.animation.export()
  258. }, () => {
  259. setTimeout(() => {
  260. this.setData({
  261. shareFlag: !this.data.shareFlag,
  262. imgUrls: ''
  263. })
  264. this.triggerEvent('ShareDialogClose', {})
  265. }, 200)
  266. })
  267. wx.hideLoading()
  268. },
  269. nothing: function (e) {
  270. return
  271. },
  272. // 保存最终图片
  273. PreservationImg: function () {
  274. // this.getImgAuthorize()
  275. wx.saveImageToPhotosAlbum({
  276. filePath: this.data.imgUrls,
  277. success: (res) => {
  278. console.log(res)
  279. const data = {};
  280. console.log('productId', this.data.productId)
  281. // 团购分享记录
  282. if (this.data.shareType === 'group') {
  283. data.shareTypeEnum = 'POSTER';
  284. data.shareContentEnum = 'GROUP';
  285. data.productId = this.data.groupPurchaseInfo.productId;
  286. }
  287. // 朗读分享记录
  288. if (this.data.shareType === 'works') {
  289. data.shareTypeEnum = 'POSTER';
  290. data.shareContentEnum = 'READ';
  291. data.productId = this.data.productId;
  292. }
  293. httpRequestApi.shareRecord(data).success((res) => {
  294. console.log(res)
  295. })
  296. this.setData({
  297. imgUrls: false
  298. })
  299. },
  300. fail: res => {
  301. wx.getSetting({
  302. success(res) {
  303. if (!res.authSetting['scope.writePhotosAlbum']) {
  304. // wx.showToast({
  305. // title: '无权限操作',
  306. // icon: 'fail',
  307. // duration: 800
  308. // })
  309. wx.showModal({
  310. title: '无法保存分享图片到相册',
  311. content: '点击右上角浮点按钮->进入关于->点击右上角按钮->设置,进行授权',
  312. confirmText: '我知道了',
  313. showCancel: false,
  314. success(res) {
  315. console.log('用户点击确定')
  316. }
  317. })
  318. }
  319. }
  320. })
  321. }
  322. })
  323. },
  324. shareFriend: function () {
  325. this.triggerEvent('customevent', {})
  326. }
  327. },
  328. onShareAppMessage: (res) => {
  329. if (res.from === 'button') {
  330. // 来自页面内转发按钮
  331. console.log(res.target)
  332. }
  333. return {
  334. title: this.data.title,
  335. path: this.data.path
  336. }
  337. },
  338. })