From 76307c80f1e774d3cfccbbe832ce3f68b1096b84 Mon Sep 17 00:00:00 2001 From: iceling Date: Thu, 31 Oct 2019 09:05:58 +0800 Subject: [PATCH] 我的会员 --- pages/user/plus/plus.js | 239 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------------------- pages/user/plus/plus.wxml | 109 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------------------------------------------- pages/user/plus/plus.wxss | 16 +++++----------- 3 files changed, 250 insertions(+), 114 deletions(-) diff --git a/pages/user/plus/plus.js b/pages/user/plus/plus.js index 260695b..e1f9c6e 100644 --- a/pages/user/plus/plus.js +++ b/pages/user/plus/plus.js @@ -13,6 +13,7 @@ var e = function(e) { n = new e.default(); var regeneratorRuntime = require('../../../utils/runtime.js'); var api = require('../../../api/api.js'); +//wx.downloadFile把线上地址设为本地地址 Page({ /** @@ -28,8 +29,7 @@ Page({ canvasHidden: true, shareImgPath: null, plusCard: "", - imagePath: "", - isshare: 0, + imagePath: "" }, swiperChange: function(e) { var currentId = e.detail.current; @@ -51,9 +51,8 @@ Page({ }) } }) - this.getPlusCardType(); - - + this.getPlusCardType(); + this.saveImageToPhotosAlbum(); }, //获取卡类 getPlusCardType: function(e) { @@ -70,116 +69,254 @@ Page({ * 生命周期函数--监听页面初次渲染完成 */ saveImageToPhotosAlbum: function() { + wx.showLoading({ + title: '生成中...', + }) var th = this; var unit = th.data.screenWidth / 750 * 1.35; const ctx = wx.createCanvasContext('myCanvas'); //设置画板显示，才能开始绘图 th.setData({ + canvasHidden: false }) - ctx.drawImage("../../../images/plus/share/mackground.png", 0, 0,554 * unit,899 * unit); - ctx.drawImage("../../../images/userinfo/user_head.jpg", 60 * unit, 20 * unit, 60 * unit, 60 * unit); + ctx.drawImage("../../../images/plus/share/mackground.png", 0, 0, 554 * unit, 930 * unit); ctx.setFontSize(26 * unit); ctx.setFillStyle("rgb(0,0,0)"); - ctx.setTextAlign('left') - ctx.fillText("钱巧玲", 136 * unit, 65 * unit, 110 * unit); + ctx.fillText("钱巧玲", 155 * unit, 75 * unit, 200 * unit); - ctx.setFontSize(22 * unit); + var tj_path = "../../../images/userinfo/q_tj.png"; + ctx.drawImage(tj_path, 385 * unit, 45 * unit, 90 * unit, 30 * unit); + ctx.setFontSize(18 * unit); ctx.setFillStyle("rgb(255,255,255)"); - ctx.fillText("强烈推荐", 400 * unit, 60 * unit); - + ctx.fillText("强烈推荐", 394 * unit, 65 * unit); ctx.setStrokeStyle("rgb(255,255,255)"); ctx.setLineDash([5 * unit, 5 * unit], 5 * unit); ctx.beginPath(); - ctx.moveTo(0, 120 * unit); - ctx.lineTo(554 * unit, 120 * unit); + ctx.moveTo(0, 125 * unit); + ctx.lineTo(554 * unit, 125 * unit); ctx.stroke(); - ctx.setStrokeStyle("rgb(218,194,169)"); + var x = 55 * unit, + y = 165 * unit, + w = 444 * unit, + h = 220 * unit, + r = 14 * unit; + ctx.save(); + // 开始绘制 ctx.beginPath(); - ctx.moveTo(0, 420 * unit); - ctx.lineTo(554 * unit, 420 * unit); - ctx.stroke(); + // 因为边缘描边存在锯齿，最好指定使用 transparent 填充 + // 这里是使用 fill 还是 stroke都可以，二选一即可 + ctx.setFillStyle('rgb(237,188,150)') + // ctx.setStrokeStyle('transparent') + // 左上角 + ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5) + + // border-top + ctx.moveTo(x + r, y) + ctx.lineTo(x + w - r, y) + ctx.lineTo(x + w, y + r) + // 右上角 + ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2) + + // border-right + ctx.lineTo(x + w, y + h - r) + ctx.lineTo(x + w - r, y + h) + // 右下角 + ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5) + + // border-bottom + ctx.lineTo(x + r, y + h) + ctx.lineTo(x, y + h - r) + // 左下角 + ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI) + + // border-left + ctx.lineTo(x, y + r) + ctx.lineTo(x + r, y) + + // 这里是使用 fill 还是 stroke都可以，二选一即可，但是需要与上面对应 + ctx.fill() + + ctx.clip(); //画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 + ctx.drawImage("../../../images/plus/share/one.jpg", x, y, 444 * unit, 220 * unit); // 推进去图片 + ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制 + ctx.beginPath(); // 卡图片 - ctx.drawImage("../../../images/plus/share/one.jpg", 55 * unit, 170 * unit, 444 * unit, 205 * unit); + // ctx.drawImage("../../../images/plus/share/one.jpg", 55 * unit, 165 * unit, 444 * unit, 220 * unit,); ctx.setFontSize(26 * unit); - ctx.setFillStyle("white"); + ctx.setFillStyle("rgb(237,188,150)"); ctx.fillText("PLUSI会员", 80 * unit, 215 * unit); ctx.setFontSize(18 * unit); - ctx.setFillStyle("white"); + ctx.setFillStyle("rgb(237,188,150)"); ctx.fillText("开通会员年卡仅199元", 80 * unit, 240 * unit); - ctx.setFontSize(18 * unit); - ctx.setFillStyle("white"); - ctx.fillText("立即开通", 360 * unit, 215 * unit); - - ctx.drawImage("../../../images/userinfo/user_head.jpg", 80 * unit, 315 * unit, 40 * unit, 40 * unit); + ctx.drawImage("../../../images/plus/share/privilege_o.png", 80 * unit, 343 * unit, 20 * unit, 20 * unit); ctx.setFontSize(14 * unit); - ctx.setFillStyle("white"); - ctx.fillText("根据大家购买数据，您成为超级会员预计可省￥2899元", 130 * unit, 345 * unit); + ctx.setFillStyle("rgb(237,188,150)"); + ctx.fillText("根据大家购买数据，您成为超级会员预计可省￥3031元", 105 * unit, 360 * unit); + + ctx.rect(70 * unit, 425 * unit, 182 * unit, 1 * unit); + ctx.setFillStyle('rgb(218,194,169)'); + ctx.fill(); + + ctx.drawImage("../../../images/plus/share/square.png", 267 * unit, 420 * unit, 13 * unit, 13 * unit); + + ctx.beginPath(); + ctx.rect(295 * unit, 425 * unit, 182 * unit, 1 * unit); + ctx.setFillStyle('rgb(218,194,169)'); + ctx.fill(); - ctx.setFontSize(22 * unit); + ctx.drawImage("../../../images/plus/share/square.png", 80 * unit, 470 * unit, 10 * unit, 10 * unit); + ctx.setFontSize(24 * unit); ctx.setFillStyle("rgb(198,165,126)"); - ctx.fillText("超级VIP权益", 90 * unit, 475 * unit); + ctx.fillText("超级VIP权益", 100 * unit, 475 * unit); ctx.setFontSize(20 * unit); ctx.setFillStyle("rgb(198,165,126)"); - ctx.fillText("超级会员专属权益", 90 * unit, 505 * unit); - ctx.drawImage("../../../images/plus/share/Ancrown.png", 395 * unit, 435 * unit, 80 * unit, 80 * unit); + ctx.fillText("超级会员专属权益", 100 * unit, 505 * unit); + ctx.drawImage("../../../images/plus/share/Ancrown.png", 355 * unit, 440 * unit, 65 * unit, 65 * unit); + + ctx.rect(85 * unit, 530 * unit, 375 * unit, 1 * unit) + ctx.setFillStyle('rgb(218,194,169)') + ctx.fill(); - ctx.setFontSize(22 * unit); + ctx.drawImage("../../../images/plus/share/square.png", 80 * unit, 575 * unit, 10 * unit, 10 * unit); + ctx.setFontSize(24 * unit); ctx.setFillStyle("rgb(198,165,126)"); - ctx.fillText("超级VIP标识", 90 * unit, 580 * unit); + ctx.fillText("超级VIP标识", 100 * unit, 580 * unit); ctx.setFontSize(20 * unit); ctx.setFillStyle("rgb(198,165,126)"); - ctx.fillText("彰显尊贵身份的象征", 90 * unit, 610 * unit); - ctx.drawImage("../../../images/plus/share/Identification.png", 395 * unit, 545 * unit, 80 * unit, 80 * unit); + ctx.fillText("彰显尊贵身份的象征", 100 * unit, 610 * unit); + ctx.drawImage("../../../images/plus/share/Identification.png", 355 * unit, 548 * unit, 65 * unit, 65 * unit); + + ctx.rect(85 * unit, 635 * unit, 375 * unit, 1 * unit); + ctx.setFillStyle('rgb(218,194,169)'); + ctx.fill(); - ctx.setFontSize(22 * unit); + ctx.drawImage("../../../images/plus/share/square.png", 80 * unit, 695 * unit, 10 * unit, 10 * unit); + ctx.setFontSize(24 * unit); ctx.setFillStyle("rgb(198,165,126)"); - ctx.fillText("超级VIP价格", 90 * unit, 695 * unit); + ctx.fillText("超级VIP价格", 100 * unit, 695 * unit); ctx.setFontSize(20 * unit); ctx.setFillStyle("rgb(198,165,126)"); - ctx.fillText("享受专属会员超低价", 90 * unit, 725 * unit); - ctx.drawImage("../../../images/plus/share/money.png", 395 * unit, 660 * unit, 80 * unit, 80 * unit); + ctx.fillText("享受专属会员超低价", 100 * unit, 725 * unit); + ctx.drawImage("../../../images/plus/share/money.png", 355 * unit, 660 * unit, 65 * unit, 65 * unit); - ctx.drawImage("../../../images/userinfo/user_head.jpg", 100 * unit, 760 * unit, 100 * unit, 100 * unit); + ctx.rect(85 * unit, 750 * unit, 375 * unit, 1 * unit) + ctx.setFillStyle('rgb(218,194,169)') + ctx.fill(); + + ctx.drawImage("../../../images/userinfo/user_head.jpg", 100 * unit, 780 * unit, 110 * unit, 110 * unit); ctx.setFontSize(20 * unit); - ctx.setFillStyle("rgb(198,165,126)"); - ctx.fillText("解锁新权益 精彩享不停", 220 * unit, 800 * unit); + ctx.setFillStyle("#000"); + ctx.fillText("解锁新权益 精彩享不停", 230 * unit, 825 * unit); ctx.setFontSize(20 * unit); - ctx.setFillStyle("rgb(198,165,126)"); - ctx.fillText("长按识别二维码,立即开通", 220 * unit, 840 * unit); + ctx.setFillStyle("#000"); + ctx.fillText("长按识别二维码,立即开通!", 230 * unit, 865 * unit); + //---绘制圆形要放在最后---- + ctx.save(); + ctx.beginPath(); + var h_x = 60 * unit; + var h_y = 24 * unit; + var h_r = 40 * unit; + var cx = h_x + h_r; + var cy = h_y + h_r; + ctx.arc(cx, cy, h_r, 0, Math.PI * 2, false); + ctx.closePath(); + ctx.fill(); + ctx.clip(); + ctx.drawImage("../../../images/userinfo/user_head.jpg", h_x, h_y, h_r * 2, h_r * 2); + ctx.restore(); + + var x = 345 * unit, + y = 190 * unit, + w = 105 * unit, + h = 30 * unit, + r = 14 * unit; + ctx.save(); + // 开始绘制 + ctx.beginPath(); + // 因为边缘描边存在锯齿，最好指定使用 transparent 填充 + // 这里是使用 fill 还是 stroke都可以，二选一即可 + ctx.setFillStyle('rgb(237,188,150)') + // ctx.setStrokeStyle('transparent') + // 左上角 + ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5) + + // border-top + ctx.moveTo(x + r, y) + ctx.lineTo(x + w - r, y) + ctx.lineTo(x + w, y + r) + // 右上角 + ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2) + + // border-right + ctx.lineTo(x + w, y + h - r) + ctx.lineTo(x + w - r, y + h) + // 右下角 + ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5) + + // border-bottom + ctx.lineTo(x + r, y + h) + ctx.lineTo(x, y + h - r) + // 左下角 + ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI) + + // border-left + ctx.lineTo(x, y + r) + ctx.lineTo(x + r, y) + + // 这里是使用 fill 还是 stroke都可以，二选一即可，但是需要与上面对应 + ctx.fill() + // ctx.stroke() + ctx.closePath() + // 剪切 + ctx.clip(); + + ctx.setFontSize(18 * unit); + ctx.setFillStyle("#000"); + ctx.fillText("立即开通", 362 * unit, 212 * unit); //绘制图片 - ctx.draw(false, wx.canvasToTempFilePath({ + ctx.draw(false, + wx.canvasToTempFilePath({ x: 0, y: 0, width: 750, - height: 1217, + height: 930, destWidth: 1.2 * 750 * 750 / th.data.screenWidth, destHeight: 1.2 * 1217 * 750 / th.data.screenWidth, canvasId: 'myCanvas', success: function(res) { + console.log("sssssssssssssssssssssssss" + res.tempFilePath); var tempFilePath = res.tempFilePath; th.setData({ imagePath: tempFilePath, maskHidden: false, - canvasHidden: true, - isshare: 1 + canvasHidden: true }); wx.previewImage({ - urls: [tempFilePath], + urls: [res.tempFilePath], }) - } + if (!res.tempFilePath) { + wx.showModal({ + title: '提示', + content: '图片绘制中，请稍后重试', + showCancel: false + }) + } + wx.hideLoading(); + } + })) }, diff --git a/pages/user/plus/plus.wxml b/pages/user/plus/plus.wxml index 7d8f390..468cf4b 100644 --- a/pages/user/plus/plus.wxml +++ b/pages/user/plus/plus.wxml @@ -43,35 +43,35 @@ - - - - - PLUSI会员 - 开通会员年卡仅199元 - - 立即续费 - + - + + + PLUSI会员 + 开通会员年卡仅199元 + + 立即续费 + - + - - - 正在享受PLUSI会员特权 - - - - 邀请新朋友 - - - + + + + 正在享受PLUSI会员特权 + - + + 邀请新朋友 + + + + + + @@ -188,36 +188,36 @@ - - - - - - 请完善下面信息 - - - - - - - + + + + + + 请完善下面信息 + + + + + + + - - - - - - + + + + + - - - - 确认购买 - + + + + + 确认购买 + @@ -227,10 +227,15 @@ - - - + + + + --> \ No newline at end of file diff --git a/pages/user/plus/plus.wxss b/pages/user/plus/plus.wxss index 43a3aa1..c2500a2 100644 --- a/pages/user/plus/plus.wxss +++ b/pages/user/plus/plus.wxss @@ -4,9 +4,11 @@ page { z-index: 3; overflow-x: hidden; } -.plus{ + +.plus { overflow-x: hidden; } + .Member_bk { position: absolute; z-index: 0; @@ -198,7 +200,7 @@ swiper { .Invitation .Detailed { color: rgb(237, 189, 150); - text-decoration:underline; + text-decoration: underline; } .consumption { @@ -351,12 +353,4 @@ input { overflow: visible; width: 360rpx; } -.mc{ - position: fixed; - width: 100%; - height: 100%; - z-index: 7; - top: 0rpx; - left: 0rpx; - background-color: rgba(0,0,0,0.4); -} \ No newline at end of file + -- libgit2 0.21.4