C端小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

388 lines
12 KiB

  1. var config = require("../../config/config.js");
  2. var app = getApp();
  3. const Http = require("../../utils/HttpBasics");
  4. const util = require("../../utils/util");
  5. const imgurl = require("../../utils/imgurl");
  6. Page({
  7. /**
  8. * 页面的初始数据
  9. */
  10. data: {
  11. poterbg: imgurl.poterbg.url,
  12. windowWidth: wx.getSystemInfoSync().windowWidth,
  13. windowHeight: wx.getSystemInfoSync().screenHeight,
  14. totalHeight: 0,
  15. qrCodeL: '', //小程序码
  16. couponList: [], //活动劵列表
  17. canvasScale: 1.0, // 画布放大的倍数,因为如果保存的是一倍的分享图片的话,分享图会有点虚。所以保存的时候,canvasScale设置为2.0,wxss 里面的left: 500%;打开注释。就可保存两倍的分享图
  18. },
  19. /**
  20. * 生命周期函数--监听页面加载
  21. */
  22. onLoad: function (options) {
  23. let that = this;
  24. //劵详情
  25. if (options && options.couponChannelId) {
  26. that.getDetail(options.couponChannelId);
  27. } else if (options && options.merchantId) {
  28. that.getList(options.merchantId);
  29. that.getCouponList(options.merchantId);
  30. }
  31. this.getUserInfo();
  32. this.begainDrawShareImage(options);
  33. },
  34. /**
  35. * 获取劵详情
  36. */
  37. getDetail: function (couponChannelId) {
  38. let that = this;
  39. // 获取用户信息
  40. Http.get({
  41. url: config.api.couponDetail,
  42. data: {
  43. couponChannelId: couponChannelId
  44. }
  45. })
  46. .then(res => {
  47. console.log(res)
  48. that.setData({
  49. data: res.data,
  50. })
  51. })
  52. },
  53. /**
  54. * 获取商户详情
  55. */
  56. getList: function (id) {
  57. let that = this;
  58. let data;
  59. data = {
  60. pageNum: 1,
  61. pageSize: 15,
  62. id: id
  63. }
  64. Http.get({
  65. url: config.api.merchantList,
  66. data: data
  67. }).then(res => {
  68. that.setData({
  69. data: res.data.list[0],
  70. })
  71. })
  72. .catch(err => {
  73. wx.showToast({
  74. title: err.errMsg,
  75. icon: 'none',
  76. duration: 2000,
  77. mask: false
  78. });
  79. })
  80. },
  81. /**
  82. * 绘制分享海报
  83. */
  84. begainDrawShareImage(options) {
  85. wx.showLoading({
  86. title: '生成中...',
  87. })
  88. var that = this
  89. // 适配屏幕
  90. let scale = this.data.windowWidth / 375.0
  91. this.setData({
  92. totalHeight: 767 * scale
  93. })
  94. // 获取Canvas
  95. let ctx = wx.createCanvasContext('myCanvas')
  96. // 获取宽高
  97. let wW = that.data.windowWidth;
  98. let wH = that.data.windowHeight;
  99. // 放大 因为不放大的话,生成的分享图会模糊。暂时先注释
  100. ctx.scale(this.data.canvasScale, this.data.canvasScale)
  101. // 首先要绘制顶部的背景图片,因为它在最底层,然后才能绘制其他内容
  102. let bgimg1 = that.data.poterbg + `?imageView/2/w/${wW}/h/${wH}`
  103. let bgimg2 = util.getProxyImgUrl(bgimg1)
  104. wx.getImageInfo({
  105. src: bgimg2,
  106. success: function (res) {
  107. ctx.drawImage(res.path, 0, 0, wW - 20, wH);
  108. that.drawshopimg(ctx, scale, options);
  109. ctx.draw(true)
  110. }
  111. })
  112. },
  113. //绘制商品图片
  114. drawshopimg(ctx, scale, options) {
  115. var that = this
  116. let topImageWidth = parseInt(315 * scale) // 因为小数有时候会请求不到图片,所以转成int
  117. let topImageHeight = parseInt(200 * scale)
  118. let src1 = ""
  119. let src2 = ''
  120. //劵详情海报
  121. if (options && options.couponChannelId) {
  122. src1 = that.data.data.coverImg + `?imageView/2/w/${topImageWidth}/h/${topImageHeight}`
  123. src2 = util.getProxyImgUrl(src1)
  124. this.drawNormalText(ctx, "长按二维码识别小程序享优惠", 85 * scale, 570 * scale, 16 * scale, '#000', 'left', 'middle', scale);
  125. } else if (options && options.merchantId) {//商户详情海报
  126. src1 = that.data.data.merchantImgUrl + `?imageView/2/w/${topImageWidth}/h/${topImageHeight}`
  127. src2 = util.getProxyImgUrl(src1)
  128. this.drawNormalText(ctx, "长按二维码识别小程序进店逛逛", 85 * scale, 570 * scale, 16 * scale, '#000', 'left', 'middle', scale);
  129. }
  130. wx.getImageInfo({
  131. src: src2,
  132. success: function (res) {
  133. if (options && options.merchantId) {
  134. // 绘制白色背景
  135. ctx.setFillStyle('#fff')
  136. ctx.fillRect(15, 45, topImageWidth + 10, topImageHeight + 10)
  137. ctx.drawImage(res.path, 20, 50, topImageWidth, topImageHeight)
  138. that.drawOtherImage(ctx, scale)
  139. that.drawOtherContent(ctx, scale)
  140. } else if ((options && options.couponChannelId)) {
  141. ctx.setFillStyle('#fff')
  142. ctx.fillRect(15, 95, topImageWidth + 10, topImageHeight + 10)
  143. ctx.drawImage(res.path, 20, 100, topImageWidth, topImageHeight)
  144. that.drawCouponContent(ctx, scale)
  145. that.drawqrCode(ctx, scale);
  146. }
  147. wx.hideLoading()
  148. }
  149. })
  150. },
  151. // 商户海报绘制
  152. drawOtherContent(ctx, scale) {
  153. //昵称
  154. this.drawNormalText(ctx, this.data.nickName + " 向您推荐", 20 * scale, 25 * scale, 16 * scale, '#fff', 'left', 'middle', scale);
  155. //店铺名
  156. this.drawNormalText(ctx, this.data.data.merchantName, 180 * scale, 280 * scale, 30 * scale, '#fff', 'center', 'middle', scale);
  157. if (this.data.couponList.length > 0) {
  158. for (let i = 0; i < this.data.couponList.length; i++) {
  159. // 第一个商品信息
  160. this.drawNormalText(ctx, this.substrTile(this.data.couponList[1].title), 30 * scale, 396 * scale, 14 * scale, '#000', 'left', 'middle', scale);
  161. this.drawNormalText(ctx, "价格:" + this.data.couponList[1].salePrice, 30 * scale, 416 * scale, 14 * scale, '#FF3232', 'left', 'middle', scale);
  162. //第二个商品信息
  163. this.drawNormalText(ctx, this.substrTile(this.data.couponList[2].title), 145 * scale, 396 * scale, 14 * scale, '#000', 'left', 'middle', scale);
  164. this.drawNormalText(ctx, "价格:" + this.data.couponList[2].salePrice, 145 * scale, 416 * scale, 14 * scale, '#FF3232', 'left', 'middle', scale);
  165. //第三个商品信息
  166. this.drawNormalText(ctx, this.substrTile(this.data.couponList[3].title), 260 * scale, 396 * scale, 14 * scale, '#000', 'left', 'middle', scale);
  167. this.drawNormalText(ctx, "价格:" + this.data.couponList[3].salePrice, 260 * scale, 416 * scale, 14 * scale, '#FF3232', 'left', 'middle', scale);
  168. }
  169. }
  170. ctx.draw(true)
  171. },
  172. // 劵海报绘制
  173. drawCouponContent(ctx, scale) {
  174. //昵称
  175. this.drawNormalText(ctx, this.data.data.title, 20 * scale, 25 * scale, 30 * scale, '#fff', 'left', 'middle', scale);
  176. this.drawNormalText(ctx, "售价:" + this.data.data.salePriceStr, 50 * scale, 65 * scale, 30 * scale, '#fff', 'left', 'middle', scale);
  177. ctx.draw(true)
  178. },
  179. //绘制小程序码
  180. drawqrCode(ctx, scale) {
  181. let coImageWidth = parseInt(120 * scale)
  182. let coImageHeight = parseInt(120 * scale)
  183. let src1 = ""
  184. let src2 = ''
  185. if (this.data.qrCode) {
  186. src1 = this.data.qrCode + `?imageView/2/w/${coImageWidth}/h/${coImageHeight}`
  187. src2 = util.getProxyImgUrl(src1)
  188. } else {
  189. src1 = this.data.data.qrCode + `?imageView/2/w/${coImageWidth}/h/${coImageHeight}`
  190. src2 = util.getProxyImgUrl(src1)
  191. }
  192. wx.getImageInfo({
  193. src: src2,
  194. success: function (res) {
  195. ctx.drawImage(res.path, 125 * scale, 425 * scale, coImageWidth, coImageHeight)
  196. ctx.draw(true)
  197. }
  198. })
  199. },
  200. // 绘制活动图片
  201. drawOtherImage(ctx, scale) {
  202. var that = this
  203. // 如果该商户有活动商品
  204. if (that.data.couponList.length > 0) {
  205. let cotentImageWidth = parseInt(80 * scale)
  206. let cotentImageHeight = parseInt(80 * scale)
  207. for (let i = 0; i < that.data.couponList.length; i++) {
  208. let imageItem = that.data.couponList[i].coverImg
  209. let src1 = imageItem + `?imageView/2/w/${cotentImageWidth}/h/${cotentImageHeight}`
  210. let src2 = util.getProxyImgUrl(src1)
  211. wx.getImageInfo({
  212. src: src2,
  213. success: function (res) {
  214. ctx.drawImage(res.path, 35 * scale + i * 110 * scale, 300 * scale, cotentImageWidth, cotentImageHeight)
  215. }
  216. })
  217. }
  218. }
  219. that.drawqrCode(ctx, scale);
  220. },
  221. //截取商品名
  222. substrTile(str) {
  223. return str.substr(0, 5) + '...'
  224. },
  225. // 绘制只有一行的文字
  226. drawNormalText(ctx, str, x, y, font, style, align, baseLine) {
  227. ctx.setFontSize(font);
  228. ctx.setFillStyle(style);
  229. ctx.setTextAlign(align);
  230. ctx.setTextBaseline(baseLine);
  231. ctx.fillText(str, x, y);
  232. },
  233. /*
  234. * 绘制多行文本,自动换行,超出添加...
  235. *
  236. */
  237. canvasTextAutoLine: function (str, ctx, initX, initY, lineHeight, maxWidth, row = 1) {
  238. var lineWidth = 0;
  239. var lastSubStrIndex = 0;
  240. var currentRow = 1;
  241. for (let i = 0; i < str.length; i++) {
  242. lineWidth += ctx.measureText(str[i]).width;
  243. if (lineWidth > maxWidth) {
  244. currentRow++;
  245. let newStr = str.substring(lastSubStrIndex, i)
  246. if (currentRow > row && str.length > i) {
  247. newStr = str.substring(lastSubStrIndex, i - 2) + '...'
  248. }
  249. ctx.fillText(newStr, initX, initY);
  250. initY += lineHeight;
  251. lineWidth = 0;
  252. lastSubStrIndex = i;
  253. if (currentRow > row) {
  254. break;
  255. }
  256. }
  257. if (i == str.length - 1) {
  258. ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY);
  259. }
  260. }
  261. },
  262. //获取商户优惠劵信息
  263. getCouponList: function (id) {
  264. let that = this;
  265. let data;
  266. data = {
  267. status: 0,
  268. merchantId: id,
  269. pageNum: 1,
  270. pageSize: 15,
  271. }
  272. Http.get({
  273. url: config.api.listByMerchant,
  274. data: data
  275. }).then(res => {
  276. that.setData({
  277. couponList: res.data.page.list,
  278. qrCode: res.data.qrCode,
  279. })
  280. })
  281. .catch(err => {
  282. wx.showToast({
  283. title: err.errMsg,
  284. icon: 'none',
  285. duration: 2000,
  286. mask: false
  287. });
  288. })
  289. },
  290. //获取头像和昵称
  291. getUserInfo: function () {
  292. let that = this;
  293. // 获取用户信息
  294. Http.get({
  295. url: config.api.getScore,
  296. data: {}
  297. })
  298. .then(res => {
  299. console.log(res)
  300. that.setData({
  301. nickName: res.data.nickName,
  302. avatarUrl: res.data.avatarUrl
  303. })
  304. })
  305. },
  306. /**
  307. * 保存图片
  308. */
  309. saveImage() {
  310. let that = this
  311. wx.canvasToTempFilePath({
  312. x: 0,
  313. y: 0,
  314. width: this.data.windowWidth * this.data.canvasScale,
  315. height: this.data.totalHeight * this.data.canvasScale,
  316. canvasId: 'myCanvas',
  317. success: function (res) {
  318. that.saveImageToPhotos(res.tempFilePath);
  319. },
  320. fail: function (res) {
  321. wx.showToast({
  322. title: '图片生成失败',
  323. icon: 'none',
  324. duration: 2000
  325. })
  326. }
  327. })
  328. },
  329. saveImageToPhotos: function (tempFilePath) {
  330. wx.saveImageToPhotosAlbum({
  331. filePath: tempFilePath,
  332. success(result) {
  333. wx.showToast({
  334. title: '保存成功,从相册中分享到朋友圈吧',
  335. icon: 'none',
  336. duration: 4000
  337. })
  338. },
  339. fail: function (err) {
  340. if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
  341. // 这边微信做过调整,必须要在按钮中触发,因此需要在弹框回调中进行调用
  342. wx.showModal({
  343. title: '提示',
  344. content: '需要您授权保存相册',
  345. showCancel: false,
  346. success: modalSuccess => {
  347. wx.openSetting({
  348. success(settingdata) {
  349. console.log("settingdata", settingdata)
  350. if (settingdata.authSetting['scope.writePhotosAlbum']) {
  351. wx.showModal({
  352. title: '提示',
  353. content: '获取权限成功,再次点击图片即可保存',
  354. showCancel: false,
  355. })
  356. } else {
  357. wx.showModal({
  358. title: '提示',
  359. content: '获取权限失败,将无法保存到相册哦~',
  360. showCancel: false,
  361. })
  362. }
  363. },
  364. fail(failData) {
  365. console.log("failData", failData)
  366. },
  367. complete(finishData) {
  368. console.log("finishData", finishData)
  369. }
  370. })
  371. }
  372. })
  373. }
  374. },
  375. })
  376. }
  377. })