C端小程序
No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.

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