C端小程序
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

522 rader
16 KiB

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