C端小程序
25'ten fazla konu seçemezsiniz Konular bir harf veya rakamla başlamalı, kısa çizgiler ('-') içerebilir ve en fazla 35 karakter uzunluğunda olabilir.

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