C端小程序
Non puoi selezionare più di 25 argomenti Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.

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