C端小程序
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

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