From 7aae027c3cf53492075bfa8f27843a3ee1aa03f9 Mon Sep 17 00:00:00 2001 From: iceling Date: Sat, 11 Jan 2020 10:20:55 +0800 Subject: [PATCH] 助力活动分享代码拷贝 --- pages/user/assistance/task_assistance.js | 395 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------------------------------- pages/user/assistance/task_assistance.wxml | 214 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------------------------------------------------------------------------------------------- pages/user/assistance/task_assistance.wxss | 28 +++++++++++++++++++++++++--- 3 files changed, 471 insertions(+), 166 deletions(-) diff --git a/pages/user/assistance/task_assistance.js b/pages/user/assistance/task_assistance.js index dc6f485..e0852a8 100644 --- a/pages/user/assistance/task_assistance.js +++ b/pages/user/assistance/task_assistance.js @@ -1,6 +1,12 @@ -var auth = require("../../../utils/auth.js"), rq = require("../../../utils/request.js"); -var e = getApp(), app = e, i = require("../../../utils/util.js"), - ut = i,s = e.globalData.setting, os = s, app_d = e.globalData; +var auth = require("../../../utils/auth.js"), + rq = require("../../../utils/request.js"); +var e = getApp(), + app = e, + i = require("../../../utils/util.js"), + ut = i, + s = e.globalData.setting, + os = s, + app_d = e.globalData; var regeneratorRuntime = require('../../../utils/runtime.js'); Page({ @@ -8,54 +14,79 @@ Page({ * 页面的初始数据 */ data: { - sw_index: 0,//轮播的下标控制 + sw_index: 0, //轮播的下标控制 + url: s.url, //接口网址 iurl: s.imghost, - is_task:0,//判断标题名是任务1还是2 - activity_data:"25:20:59",//活动剩余时间 - task_number:12,//任务数 - is_task:0,//历史记录与任务 - aitem:"",//活动的轮播图 + is_task: 0, //判断标题名是任务1还是2 + activity_data: "25:20:59", //活动剩余时间 + task_number: 12, //任务数 + is_task: 0, //历史记录与任务 + aitem: "", //活动的轮播图 switch_head: 0, //0：我的任务，1：记录 - help_id:"",//活动的id + help_id: "", //活动的id canvasHidden: 0, //分享图片是否已经生成 + is_share: 0, //是否显示画布 + shareImgPath: [], //生成的图片 + screenWidth: "", //用户的屏幕宽度 + gid: "", + images: ["miniapp/images/friendhelp/help.png", "miniapp/images/friendhelp/background.png", "miniapp/images/friendhelp/gift.png", "miniapp/images/friendhelp/no_check.png", + "miniapp/images/friendhelp/check.png", "miniapp/images/friendhelp/check.png", "miniapp/images/friendhelp/unfinished.png", "miniapp/images/friendhelp/gift.png" + ] }, /** * 生命周期函数--监听页面加载 */ - onLoad: function (options) { - var help_id=options.help_id; - console.log("是什么鬼",help_id); - var th=this; - th.setData({help_id:help_id}); + onLoad: function(options) { + var help_id = options.help_id; + console.log("是什么鬼", help_id); + var th = this; + th.setData({ + help_id: help_id + }); + if (options.gid != undefined) { + th.setData({ + gid: options.gid + }) + } th.close(); + th.syinfo(); + th.imageinfo(); }, // 轮播图点击左边 - click_pre:function(){ + click_pre: function() { var index = this.data.sw_index; index--; if (index < 0) return; - this.setData({ sw_index: index }) - + this.setData({ + sw_index: index + }) + }, - //轮播图点击右边 - click_next:function(){ + //轮播图点击右边 + click_next: function() { var index = this.data.sw_index; index++; if (index >= this.data.aitem.length) return; - this.setData({ sw_index: index }) + this.setData({ + sw_index: index + }) }, //任务领取 - onlicke:function(){ - var th=this; + onlicke: function() { + var th = this; + th.shareFrends(); + th.setData({ + is_share:1 + }) getApp().my_warnning("任务领取成功", 1, th); }, -//我的任务和帮拆记录的替换 - switch_head: function (e) { + //我的任务和帮拆记录的替换 + switch_head: function(e) { var th = this; - var index = e.currentTarget.dataset.index;//获取当前选择的是任务还是活动说明 - var switch_head = th.data.switch_head;//0任务，1活动说明 + var index = e.currentTarget.dataset.index; //获取当前选择的是任务还是活动说明 + var switch_head = th.data.switch_head; //0任务，1活动说明 if (index != switch_head) { th.setData({ switch_head: index, @@ -64,15 +95,15 @@ Page({ } }, //划动的时候监听 - onSli:function(e){ - - var ind=e.detail.current ; + onSli: function(e) { + + var ind = e.detail.current; this.setData({ - sw_index:ind + sw_index: ind }) }, //导航球 - close: function () { + close: function() { var th = this; var nav_b = th.selectComponent("#nav_b"); //组件的id nav_b.close_box(); @@ -82,58 +113,60 @@ Page({ /** * 生命周期函数--监听页面初次渲染完成 */ - onReady: function () { + onReady: function() { }, /** * 生命周期函数--监听页面显示 */ - onShow: function () { - var th=this; - var help_id=th.data.help_id; - console.log("活动的id", help_id); + onShow: function() { + var th = this; + var help_id = th.data.help_id; /*-----统计-----*/ rq.get("/api/weshop/marketing/help/help/task/page", { - data: { + data: { helpId: help_id, - storeId:os.stoid - }, - success: function (su) { - - var data=su.data; + storeId: os.stoid + }, + success: function(su) { + + var data = su.data; console.log('waitlist5555555555' + data.code); - if (data.code!=0){ - getApp().my_warnning(data.msg,0, th); + if (data.code != 0) { + getApp().my_warnning(data.msg, 0, th); return false; } - if (data.code==0){ + if (data.code == 0) { //轮播图的数据 - var data_aissa=data.data.pageData; + var data_aissa = data.data.pageData; //当前时间戳 var nt = ut.gettimestamp(); - data_aissa.forEach(function (val, ind) { - console.log(nt, "当前时间","结束时间", val.end_time,"开始时间"); + data_aissa.forEach(function(val, ind) { + console.log(nt, "当前时间", "结束时间", val.end_time, "开始时间"); //已开始 if (val.start_time < nt && val.end_time > nt) data_aissa[ind].status = 0; //未开始 else if (val.start_time > nt && val.end_time > nt) data_aissa[ind].status = 1; - //已结束 - + //已结束 + else if (val.start_time < nt && val.end_time < nt) data_aissa[ind].status = 2; - + }); - console.log("是什么东西2222222222",data_aissa); - - th.setData({ aitem:data_aissa}); + th.setData({ + aitem: data_aissa + }); } - + } }) + setTimeout(function() { + th.shareFrends(); + }, 1000) }, //----助力任务----- @@ -183,41 +216,279 @@ Page({ } setTimeout(th.countDown, 1000); - + }, /** * 生命周期函数--监听页面隐藏 */ - onHide: function () { + onHide: function() { }, /** * 生命周期函数--监听页面卸载 */ - onUnload: function () { + onUnload: function() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ - onPullDownRefresh: function () { + onPullDownRefresh: function() { }, /** * 页面上拉触底事件的处理函数 */ - onReachBottom: function () { + onReachBottom: function() { }, /** * 用户点击右上角分享 */ - onShareAppMessage: function () { + onShareAppMessage: function() { + + }, + shareFrends: function(e) { + var th = this; + var scene = th.data.gid; + ///二微码 + // var path3 = os.url + "/api/wx/open/app/user/getWeAppEwm/" + + // a.stoid + "?sceneValue=" + scene + "&pageValue=pages/goods/goodsInfo/goodsInfo"; + var iurl = th.data.iurl; //图片地址前缀 + const ctx = wx.createCanvasContext('share_id'); //绘图上下文 + var unit = th.data.screenWidth / 750 * 1.35; + var numsize = 20 * unit; //几人助力字体大小 + var size = 15 * unit; + var num = 10; + var q_num = 6; + var already = num.toString().length + 1; //已有几位好友助力 + var lack = q_num.toString().length + 1; //还差几位好友助力 + var imagesize = 40 * unit; //助力人的图片大小 + var left = 74 * unit; //助力人头像跟左边的距离 + var spacing = 12 * unit; //助力人图片间距 + var images = th.data.images; + ctx.drawImage(images[0], 0, 0, 445 * unit, 700 * unit); //分享的背景图片 + ctx.drawImage(images[1], 37 * unit, 185 * unit, 370 * unit, 377 * unit); //分享的背景图片 + ctx.drawImage(images[2], 90 * unit, 231 * unit, 266 * unit, 160 * unit); //分享的背景图片 + ctx.setFillStyle("rgb(221,153,116)"); + ctx.setFontSize(size) + ctx.fillText("已有", 77 * unit, 430 * unit); + ctx.setFillStyle("#FF4746"); + ctx.setFontSize(numsize) + ctx.fillText(num + "位", 108 * unit, 430 * unit); + ctx.setFillStyle("rgb(221,153,116)"); + ctx.setFontSize(size) + ctx.fillText("好友助力，还差", 114 * unit + already * numsize * unit, 430 * unit); + ctx.setFillStyle("#FF4746"); + ctx.setFontSize(numsize); + ctx.fillText(q_num + "位", 220 * unit + already * numsize * unit, 430 * unit); + ctx.setFillStyle("rgb(221,153,116)"); + ctx.setFontSize(size); + ctx.fillText("达成助力", 248 * unit + lack * numsize * unit + already * numsize - numsize * 2, 430 * unit); + var c = q_num / num; + ctx.drawImage(images[3], 65 * unit, 445 * unit, 320 * unit, 12 * unit); + ctx.drawImage(images[4], 65 * unit, 445 * unit, 320 * unit * c, 12 * unit); + for (var i = 0; i < 6; i++) { + if (i == 0) { + ctx.save(); + ctx.beginPath(); //开始绘制 + ctx.arc(left + imagesize / 2, 505 * unit, imagesize/2, 0, 2 * Math.PI); + ctx.setLineWidth(4 * unit); + ctx.setStrokeStyle('red'); + ctx.setFillStyle("white"); + ctx.fill(); + ctx.clip(); + ctx.drawImage(images[6], left, 505 * unit - imagesize/2, imagesize, imagesize); + ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制 + } else { + // 助力人的头像 + ctx.drawImage(images[6], left, 505 * unit - imagesize / 2, imagesize, imagesize); //分享的背景图片 + } + left += imagesize + spacing; + } + ctx.setFillStyle("rgb(255,255,255)"); + ctx.setFontSize(size); + ctx.fillText("优惠乐翻天，精彩就在你身边!", 37 * unit, 595 * unit); + ctx.setFillStyle("rgb(255,255,255)"); + ctx.setFontSize(size); + ctx.fillText("2019.06.26 - 2019.07.02!", 37 * unit, 620 * unit); + ctx.setFillStyle("rgb(255,255,255)"); + ctx.setFontSize(size); + ctx.fillText("长按识别二维码，可帮我助力!", 37 * unit, 660 * unit); + ctx.drawImage(images[7], 325 * unit, 595 * unit, 77 * unit, 77 * unit); //分享的背景图片 + ctx.save(); + //读取文件成功则OK-- + // wx.getImageInfo({ + // src: path3, + // success: function (res) { + //把画板内容绘制成图片，并回调 画板图片路径 + ctx.draw(false, function() { + setTimeout(function() { + wx.canvasToTempFilePath({ + x: 0, + y: 0, + width: 300, + height: 500, + destWidth: 400 * 2, + destHeight: 720 * 2, + canvasId: 'share_id', + success: function(res) { + wx.hideLoading(); + var shareImgPath = th.data.shareImgPath; + shareImgPath[0] = res.tempFilePath; + + th.setData({ + shareImgPath: shareImgPath, + canvasHidden: 1, + is_share: 1 + }) + if (!res.tempFilePath) { + wx.showModal({ + title: '提示', + content: '图片绘制中，请稍后重试', + showCancel: false + }) + return false; + } + + }, + fail(r) { + + } + }, 500) + }) + }) + // } + // }) + }, + preview: function() { + var th = this; + var shareImgPath = th.data.shareImgPath; + wx.previewImage({ + url: shareImgPath[0], + urls: shareImgPath + }) + }, + + //关闭分享显示 + close_share: function() { + var th = this; + th.setData({ + is_share: 0 + }) + }, + syinfo: function() { + var th = this; + //获取用户设备信息，屏幕宽度 + wx.getSystemInfo({ + success: res => { + th.setData({ + screenWidth: res.screenWidth + }) + } + }) + }, + imageinfo: function() { + var th = this; + var images = th.data.images; + var iurl = th.data.iurl; + wx.getImageInfo({ + src: iurl + images[0], + success: function(res) { + console.log(res + i); + //res.path是网络图片的本地地址 + images[0] = res.path; + }, + fail: function(res) { + console.log(res.toString() + "" + i); + } + }); + wx.getImageInfo({ + src: iurl + images[1], + success: function(res) { + console.log(res + i); + //res.path是网络图片的本地地址 + images[1] = res.path; + }, + fail: function(res) { + console.log(res.toString() + "" + i); + } + }); + wx.getImageInfo({ + src: iurl + images[2], + success: function(res) { + console.log(res + i); + //res.path是网络图片的本地地址 + images[2] = res.path; + }, + fail: function(res) { + console.log(res.toString() + "" + i); + } + }); + wx.getImageInfo({ + src: iurl + images[3], + success: function(res) { + console.log(res + i); + //res.path是网络图片的本地地址 + images[3] = res.path; + }, + fail: function(res) { + console.log(res.toString() + "" + i); + } + }); + wx.getImageInfo({ + src: iurl + images[4], + success: function(res) { + console.log(res + i); + //res.path是网络图片的本地地址 + images[4] = res.path; + }, + fail: function(res) { + console.log(res.toString() + "" + i); + } + }); + wx.getImageInfo({ + src: iurl + images[5], + success: function(res) { + console.log(res + i); + //res.path是网络图片的本地地址 + images[5] = res.path; + }, + fail: function(res) { + console.log(res.toString() + "" + i); + } + }); + wx.getImageInfo({ + src: iurl + images[6], + success: function(res) { + console.log(res + i); + //res.path是网络图片的本地地址 + images[6] = res.path; + }, + fail: function(res) { + console.log(res.toString() + "" + i); + } + }); + + wx.getImageInfo({ + src: iurl + images[7], + success: function(res) { + console.log(res + i); + //res.path是网络图片的本地地址 + images[7] = res.path; + }, + fail: function(res) { + console.log(res.toString() + "" + i); + } + }) + th.setData({ + images: images + }) } }) \ No newline at end of file diff --git a/pages/user/assistance/task_assistance.wxml b/pages/user/assistance/task_assistance.wxml index 6786641..b3a8a35 100644 --- a/pages/user/assistance/task_assistance.wxml +++ b/pages/user/assistance/task_assistance.wxml @@ -1,118 +1,130 @@ - - - - {{aitem[sw_index].tite_name}} - - - 活动剩余时间: {{activity_data}} - + + + + {{aitem[sw_index].tite_name}} - - - - - - - - - - - - - - - - - - - + + 活动剩余时间: {{activity_data}} + + + + + + + + - - 今天剩余可领{{task_number}}个任务 + + + + + + + + + + - + + + + 今天剩余可领{{task_number}}个任务 + + + 就选它了 - + - - - - - - - 我的任务 + + + + + + + 我的任务 + + + + 帮拆记录 + + + + + + + + 豪华任务一 + - - - 帮拆记录 + + + 进行中 + + + + - - - - - 豪华任务一 - - - - 进行中 - - + - - - - - - - - - - - - 豪华任务一 - - 2019-05-12 - - - - - - - - - 暂无任务记录 - - - - 已有 - 126 - 人领取了任务 - - + + + + + 豪华任务一 - - - - - - - 点击加载更多 - - - - 已有 - 126 - 人领取了任务 - - - + 2019-05-12 + + + + + + + + + 暂无任务记录 + + + + 已有 + 126 + 人领取了任务 + + + + + + + + + + 点击加载更多 + + + + 已有 + 126 + 人领取了任务 + + + + + + + + + + + + + + + + diff --git a/pages/user/assistance/task_assistance.wxss b/pages/user/assistance/task_assistance.wxss index 04c0874..61968ed 100644 --- a/pages/user/assistance/task_assistance.wxss +++ b/pages/user/assistance/task_assistance.wxss @@ -129,6 +129,28 @@ border-color: #fff; } .user_img{ width: 50rpx; - height: 50rpx; - -} \ No newline at end of file + height: 50rpx; +} +.dust { + position: fixed; + width: 100%; + height: 100%; + background-color: rgba(206, 184, 188, 0.158); + z-index: 10; +} + +.closes { + margin-top: 20rpx; +} + +.canvas { + position: fixed; + z-index: 11; + width: 100%; + top:20rpx; +} + +.close { + width: 70rpx; + height: 70rpx; +} -- libgit2 0.21.4