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.

467 lines
14 KiB

  1. const Http = require("../../../../utils/HttpBasics");
  2. const imgurl = require("../../../../utils/imgurl");
  3. const config = require("../../../../config/config");
  4. const extConfig = wx.getExtConfigSync ? wx.getExtConfigSync() : {}
  5. let imgOrgUrl = extConfig.attr.imgOrgUrl;
  6. let imgNewUrl = extConfig.attr.imgNewUrl;
  7. let app = getApp();
  8. Page({
  9. /**
  10. * 页面的初始数据
  11. */
  12. data: {
  13. teljpgUrl: imgurl.teljpg.url,
  14. share01: imgurl.share01.url,
  15. actUrl: imgurl.act.url,
  16. poster: './../../../../assets/images/picture.png',
  17. page: 1,
  18. imglist: null,
  19. shopVoList: [],
  20. couponList: [], //活动劵列表
  21. qrCodeL:'',//小程序码
  22. currentTab: 0,
  23. isshare: false,
  24. showpost: false,
  25. imgHeight: 0,
  26. id: null,
  27. windowWidth: 0,
  28. windowHeight: 0,
  29. totalHeight: 0,
  30. canvasScale: 1.0, // 画布放大的倍数,因为如果保存的是一倍的分享图片的话,分享图会有点虚。所以保存的时候,canvasScale设置为2.0,wxss 里面的left: 500%;打开注释。就可保存两倍的分享图
  31. },
  32. /**
  33. * 分享海报的生成
  34. */
  35. //关闭海报
  36. closePoste: function() {
  37. this.setData({
  38. showpost: false
  39. })
  40. },
  41. /**
  42. * 生命周期函数--监听页面加载
  43. */
  44. onLoad: function(options) {
  45. let that = this;
  46. if (options && options.id) {
  47. this.setData({
  48. id: options.id
  49. });
  50. that.getList(options.id);
  51. that.getCouponList(options.id);
  52. this.setData({
  53. currentTab: 0
  54. })
  55. }
  56. // 获取到屏幕的宽高等信息
  57. wx.getSystemInfo({
  58. success: function(res) {
  59. that.setData({
  60. windowWidth: res.windowWidth,
  61. windowHeight: res.windowHeight
  62. })
  63. }
  64. })
  65. },
  66. /**
  67. * 绘制分享海报
  68. */
  69. begainDrawShareImage() {
  70. wx.showLoading({
  71. title: '生成中...',
  72. })
  73. var that = this
  74. // 适配屏幕
  75. let scale = this.data.windowWidth / 375.0
  76. this.setData({
  77. totalHeight: 767 * scale
  78. })
  79. // 获取Canvas
  80. let ctx = wx.createCanvasContext('myCanvas')
  81. // 放大 因为不放大的话,生成的分享图会模糊。暂时先注释
  82. ctx.scale(this.data.canvasScale, this.data.canvasScale)
  83. // 绘制主背景白色
  84. ctx.setFillStyle('#ffffff')
  85. ctx.fillRect(0, 0, this.data.windowWidth, this.data.totalHeight)
  86. ctx.draw()
  87. // 首先要绘制顶部的背景图片,因为它在最底层,然后才能绘制其他内容
  88. let topImageWidth = parseInt(375 * scale) // 因为小数有时候会请求不到图片,所以转成int
  89. let topImageHeight = parseInt(250 * scale)
  90. let src1 = this.data.data.merchantImgUrl + `?imageView/2/w/${topImageWidth}/h/${topImageHeight}`
  91. let src2 = src1.replace(imgOrgUrl, imgNewUrl)
  92. wx.getImageInfo({
  93. src: src2,
  94. success: function(res) {
  95. ctx.drawImage(res.path, 0, 0, topImageWidth, topImageHeight)
  96. // 覆盖黑色蒙层
  97. ctx.setFillStyle('rgba(0,0,0,0.3)')
  98. ctx.fillRect(0, 0, topImageWidth, topImageHeight)
  99. ctx.draw(true)
  100. that.drawOtherContent(ctx, scale)
  101. that.drawOtherImage(ctx, scale)
  102. }
  103. })
  104. },
  105. // 绘制除了图片之外的剩余内容
  106. drawOtherContent(ctx, scale) {
  107. // 绘制中间的灰色背景
  108. ctx.setFillStyle('rgba(246,246,246,1)')
  109. //(x轴,y轴,宽,高)
  110. ctx.fillRect(14 * scale, 230 * scale, 347 * scale, 58 * scale)
  111. //name
  112. ctx.setFillStyle('white');
  113. ctx.setFontSize(30 * scale);
  114. this.canvasTextAutoLine(this.data.data.merchantName, ctx, 20 * scale, 210 * scale, 30 * scale, 258 * scale, 1)
  115. // address
  116. ctx.setFillStyle('#000');
  117. ctx.setFontSize(18 * scale);
  118. this.canvasTextAutoLine("地址:" + this.data.data.shopVoList[0].floorName + this.data.data.shopVoList[0].buildingName + this.data.data.shopVoList[0].shopNumber, ctx, 20 * scale, 265 * scale, 20 * scale, 305 * scale, 1)
  119. if (this.data.couponList.length>0) {
  120. for (let i = 0; i < this.data.couponList.length; i++) {
  121. // 第一个商品信息
  122. this.drawNormalText(ctx, this.substrTile(this.data.couponList[1].title), 15 * scale, 416 * scale, 16 * scale, '#000', 'left', 'middle', scale);
  123. this.drawNormalText(ctx, "价格:"+this.data.couponList[1].salePrice, 15 * scale, 436 * scale, 14 * scale, '#FF3232', 'left', 'middle', scale);
  124. //第二个商品信息
  125. this.drawNormalText(ctx, this.substrTile(this.data.couponList[2].title), 130 * scale, 416 * scale, 16 * scale, '#000', 'left', 'middle', scale);
  126. this.drawNormalText(ctx, "价格:"+this.data.couponList[2].salePrice, 130 * scale, 436 * scale, 14 * scale, '#FF3232', 'left', 'middle', scale);
  127. //第三个商品信息
  128. this.drawNormalText(ctx, this.substrTile(this.data.couponList[3].title), 255 * scale, 416 * scale, 16 * scale, '#000', 'left', 'middle', scale);
  129. this.drawNormalText(ctx, "价格:"+this.data.couponList[3].salePrice, 255 * scale, 436 * scale, 14 * scale, '#FF3232', 'left', 'middle', scale);
  130. }
  131. this.drawNormalText(ctx, "点击下载保存海报到相册", 185 * scale, 506 * scale, 16 * scale, '#000', 'left', 'middle', scale);
  132. }
  133. ctx.draw(true)
  134. },
  135. //截取商品名
  136. substrTile(str){
  137. return str.substr(0,5)+'...'
  138. },
  139. // 绘制活动图片
  140. drawOtherImage(ctx, scale) {
  141. var that = this
  142. // 如果该商户有活动商品
  143. if (that.data.couponList.length>0) {
  144. let cotentImageWidth = parseInt(100 * scale)
  145. let cotentImageHeight = parseInt(100 * scale)
  146. let src3 = this.data.qrCode + `?imageView/2/w/${cotentImageWidth}/h/${cotentImageHeight}`//小程序码
  147. let src4 = src3.replace(imgOrgUrl, imgNewUrl)
  148. for (let i = 0; i < that.data.couponList.length; i++) {
  149. let imageItem = that.data.couponList[i].coverImg
  150. let src1 = imageItem + `?imageView/2/w/${cotentImageWidth}/h/${cotentImageHeight}`
  151. let src2 = src1.replace(imgOrgUrl, imgNewUrl)
  152. wx.getImageInfo({
  153. src: src2,
  154. success: function(res) {
  155. ctx.drawImage(res.path, 15 * scale + i * 120 * scale, 300 * scale, cotentImageWidth, cotentImageHeight)
  156. ctx.draw(true)
  157. }
  158. })
  159. }
  160. //有活动商品小程序码
  161. wx.getImageInfo({
  162. src: src4,
  163. success: function(res) {
  164. ctx.drawImage(res.path, 15 * scale * scale, 450 * scale, 150, 150)
  165. ctx.draw(true)
  166. }
  167. })
  168. //没有活动商品生成小程序码
  169. } else {
  170. if (this.data.qrCode) {
  171. let coImageWidth = parseInt(260 * scale)
  172. let coImageHeight = parseInt(260 * scale)
  173. let src1 = this.data.qrCode + `?imageView/2/w/${coImageWidth}/h/${coImageHeight}`
  174. let src2 = src1.replace(imgOrgUrl, imgNewUrl)
  175. wx.getImageInfo({
  176. src: src2,
  177. success: function(res) {
  178. ctx.drawImage(res.path, 50 * scale, 320 * scale, coImageWidth, coImageHeight)
  179. ctx.draw(true)
  180. }
  181. })
  182. }
  183. }
  184. wx.hideLoading()
  185. },
  186. // 绘制只有一行的文字
  187. drawNormalText(ctx, str, x, y, font, style, align, baseLine) {
  188. ctx.setFontSize(font);
  189. ctx.setFillStyle(style);
  190. ctx.setTextAlign(align);
  191. ctx.setTextBaseline(baseLine);
  192. ctx.fillText(str, x, y);
  193. },
  194. /*
  195. * 绘制多行文本,自动换行,超出添加...
  196. *
  197. str:要绘制的字符串
  198. canvas:canvas对象
  199. initX:绘制字符串起始x坐标
  200. initY:绘制字符串起始y坐标
  201. lineHeight:字行高,自己定义个值即可
  202. maxWidth: 文本最大宽度
  203. row: 最大行数
  204. */
  205. canvasTextAutoLine: function(str, ctx, initX, initY, lineHeight, maxWidth, row = 1) {
  206. var lineWidth = 0;
  207. var lastSubStrIndex = 0;
  208. var currentRow = 1;
  209. for (let i = 0; i < str.length; i++) {
  210. lineWidth += ctx.measureText(str[i]).width;
  211. if (lineWidth > maxWidth) {
  212. currentRow++;
  213. let newStr = str.substring(lastSubStrIndex, i)
  214. if (currentRow > row && str.length > i) {
  215. newStr = str.substring(lastSubStrIndex, i - 2) + '...'
  216. }
  217. ctx.fillText(newStr, initX, initY);
  218. initY += lineHeight;
  219. lineWidth = 0;
  220. lastSubStrIndex = i;
  221. if (currentRow > row) {
  222. break;
  223. }
  224. }
  225. if (i == str.length - 1) {
  226. ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY);
  227. }
  228. }
  229. },
  230. // 保存图片
  231. saveImage(){
  232. let that = this
  233. wx.canvasToTempFilePath({
  234. x: 0,
  235. y: 0,
  236. width: this.data.windowWidth * this.data.canvasScale,
  237. height: this.data.totalHeight * this.data.canvasScale,
  238. canvasId: 'myCanvas',
  239. success: function (res) {
  240. that.saveImageToPhotos(res.tempFilePath);
  241. },
  242. fail: function (res) {
  243. wx.showToast({
  244. title: '图片生成失败',
  245. icon: 'none',
  246. duration: 2000
  247. })
  248. }
  249. })
  250. },
  251. saveImageToPhotos: function (tempFilePath) {
  252. wx.saveImageToPhotosAlbum({
  253. filePath: tempFilePath,
  254. success(result) {
  255. wx.showToast({
  256. title: '保存成功,从相册中分享到朋友圈吧',
  257. icon: 'none',
  258. duration: 4000
  259. })
  260. },
  261. fail: function (err) {
  262. if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
  263. // 这边微信做过调整,必须要在按钮中触发,因此需要在弹框回调中进行调用
  264. wx.showModal({
  265. title: '提示',
  266. content: '需要您授权保存相册',
  267. showCancel: false,
  268. success:modalSuccess=>{
  269. wx.openSetting({
  270. success(settingdata) {
  271. console.log("settingdata", settingdata)
  272. if (settingdata.authSetting['scope.writePhotosAlbum']) {
  273. wx.showModal({
  274. title: '提示',
  275. content: '获取权限成功,再次点击图片即可保存',
  276. showCancel: false,
  277. })
  278. } else {
  279. wx.showModal({
  280. title: '提示',
  281. content: '获取权限失败,将无法保存到相册哦~',
  282. showCancel: false,
  283. })
  284. }
  285. },
  286. fail(failData) {
  287. console.log("failData",failData)
  288. },
  289. complete(finishData) {
  290. console.log("finishData", finishData)
  291. }
  292. })
  293. }
  294. })
  295. }
  296. },
  297. })
  298. },
  299. /**
  300. * 拨打电话
  301. */
  302. phone: function(e) {
  303. let that = this;
  304. wx.makePhoneCall({
  305. phoneNumber: e.target.dataset.merchantlinkphone
  306. });
  307. },
  308. /**
  309. * 显示分享弹框
  310. */
  311. showshare: function() {
  312. this.setData({
  313. isshare: true,
  314. })
  315. },
  316. /**
  317. * 隐藏分享弹框
  318. */
  319. hidemodal: function() {
  320. this.setData({
  321. isshare: false,
  322. })
  323. },
  324. //滑动切换
  325. swiperTabView: function(e) {
  326. this.setData({
  327. currentTab: e.detail.current
  328. });
  329. },
  330. /**
  331. * 隐藏分享海报
  332. */
  333. hideposter: function() {
  334. this.setData({
  335. showpost: false,
  336. })
  337. },
  338. /**
  339. * 显示分享海报
  340. */
  341. showPoster: function() {
  342. this.setData({
  343. showpost: true,
  344. })
  345. this.begainDrawShareImage();
  346. },
  347. //点击切换
  348. clickTab: function(e) {
  349. if (this.data.currentTab === e.target.dataset.current) {
  350. return false;
  351. } else {
  352. this.setData({
  353. currentTab: e.target.dataset.current
  354. })
  355. }
  356. },
  357. /**
  358. * 获取商户详情
  359. */
  360. getList: function(id) {
  361. let that = this;
  362. let data;
  363. data = {
  364. pageNum: that.data.page,
  365. pageSize: 15,
  366. id: id
  367. }
  368. Http.get({
  369. url: config.api.merchantList,
  370. data: data
  371. }).then(res => {
  372. that.setData({
  373. data: res.data.list[0],
  374. shopVoList: res.data.list[0].shopVoList,
  375. imglist: JSON.parse(res.data.list[0].coverPicture) ? JSON.parse(res.data.list[0].coverPicture) : res.data.list[0].merchantImgUrl,
  376. })
  377. })
  378. .catch(err => {
  379. wx.showToast({
  380. title: err.errMsg,
  381. icon: 'none',
  382. duration: 2000,
  383. mask: false
  384. });
  385. })
  386. },
  387. /**
  388. * 获取商户活动信息 券类型(1.满减券,2.代金券,3.团购券,4.礼品券,5.停车券,6.多商户券,8.砍价券,9.团购券,50.积分券,51.积分停车券 100.消费卡)
  389. * 投放频道:(1.列表, 2.限时抢购, 3. banner图 4. 游戏 5.卡频道 6.砍价频道 7.拼团频道 8专题)
  390. */
  391. getCouponList: function(id) {
  392. let that = this;
  393. let data;
  394. data = {
  395. status: 0,
  396. merchantId: id,
  397. pageNum: that.data.page,
  398. pageSize: 15,
  399. }
  400. Http.get({
  401. url: config.api.listByMerchant,
  402. data: data
  403. }).then(res => {
  404. that.setData({
  405. couponList: res.data.page.list,
  406. qrCode:res.data.qrCode,
  407. })
  408. })
  409. .catch(err => {
  410. wx.showToast({
  411. title: err.errMsg,
  412. icon: 'none',
  413. duration: 2000,
  414. mask: false
  415. });
  416. })
  417. },
  418. /**
  419. * 获取多商铺列表
  420. */
  421. shopList: function(e) {
  422. wx.navigateTo({
  423. url: `/pages/index/merchantList/index?id=${e.currentTarget.dataset.id}`
  424. })
  425. },
  426. // onShareAppMessage: function(res) {
  427. // var that = this;
  428. // var shareObj = {
  429. // title: that.data.data.title,
  430. // path: `/pages/index/index?couponChannelId=${that.data.couponChannelId}`,
  431. // success: function(res) {
  432. // if (res.errMsg == 'shareAppMessage:ok') {}
  433. // },
  434. // fail: function(error) {
  435. // if (res.errMsg == 'shareAppMessage:fail cancel') {} else if (res.errMsg == 'shareAppMessage:fail') {}
  436. // }
  437. // };
  438. // // 来自页面内的按钮的转发
  439. // if (res.from === 'button') {
  440. // var eData = res.target.dataset.id;
  441. // shareObj.path = `/pages/index/index?couponChannelId=${eData}`;
  442. // }
  443. // // 返回shareObj
  444. // return shareObj;
  445. // },
  446. })