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.

451 lines
13 KiB

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