// nova-werun/pages/home/share/index.js const qiniuUploader = require("../../../../utils/qiniuUploader"); const Parse = getApp().Parse; const company = getApp().globalData.company; Page({ /** * 页面的初始数据 */ data: { //屏幕高度 statusBarHeight: 0, // 状态栏高度 screenHeight: 0, // 屏幕高度 customHeight: 0, // 自定义导航栏高度(如小程序右上角胶囊按钮) bottomNavHeight: 0, // 底部导航栏高度 contentHeight: 0, // 可用内容高度 contentHeight2: 0, contentpadding: 0, //顶部padding高度 sharList: [], images: [ // 'https://file-cloud.fmode.cn/qpFbRRSZrO/20250113/1p97lf053250915.png', 'https://file-cloud.fmode.cn/qpFbRRSZrO/20250113/bt19fm050427168.png' ], randomImage: '', saveimage: '', uptokenURL: '', domain: '', uploadURL: '', userList:[], }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { // 计算 const systemInfo = wx.getSystemInfoSync(); const statusBarHeight = systemInfo.statusBarHeight || 0; const screenHeight = systemInfo.screenHeight || 0; const custom = wx.getMenuButtonBoundingClientRect(); const customHeight = custom.height + 10 + 2 || 0; const bottomNavHeight = systemInfo.screenHeight - systemInfo.safeArea.bottom || 0; const contentpadding = (statusBarHeight + customHeight) * 750 / systemInfo.windowWidth; const contentHeight = (screenHeight - bottomNavHeight - statusBarHeight - customHeight) * 750 / systemInfo.windowWidth; this.setData({ statusBarHeight, screenHeight, customHeight, bottomNavHeight, contentpadding, contentHeight }); this.getuser() this.order() this.showRandomImage() }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }, //获取当天运动数据 async order() { const currentUser = Parse.User.current(); let ActivityDataquery = new Parse.Query('ActivityData'); ActivityDataquery.equalTo('company', company); ActivityDataquery.notEqualTo('isDeleted', true); // 获取今天的日期 const today = new Date(); const todayStart = new Date(today.getFullYear(), today.getMonth(), today.getDate()); // 今天的开始时间 const todayEnd = new Date(todayStart); todayEnd.setHours(23, 59, 59, 999); // 今天的结束时间 console.log(todayStart, todayEnd); // 在查询条件中添加对 createdAt 的限制 ActivityDataquery.greaterThanOrEqualTo('createdAt', todayStart); ActivityDataquery.lessThanOrEqualTo('createdAt', todayEnd); // 根据 steps 字段进行降序排序 ActivityDataquery.include('user'); try { let P = await ActivityDataquery.find(); let todayList = P.map(item => { let itemData = item.toJSON(); // 获取当前时间并格式化 const now = new Date(); const formattedTime = `${now.getFullYear()}/${String(now.getMonth() + 1).padStart(2, '0')}/${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`; itemData.currentTime = formattedTime; // 将当前时间添加到 item 中 return itemData; }); // 创建一个对象来存储用户的总步数 const userStepsMap = {}; // 遍历数据,累加相同用户的步数 todayList.forEach(item => { const userId = item.user.objectId; const steps = item.steps; const distance = item.distance||0; if (steps) { if (!userStepsMap[userId]) { userStepsMap[userId] = { ...item.user, // 包含用户信息 currentTime: item.currentTime, totalSteps: 0, // 初始化总步数 totaldistance:0, }; } userStepsMap[userId].totalSteps += steps; userStepsMap[userId].totaldistance += distance; // 累加步数 } }); // 将对象转换为数组 const aggregatedList = Object.values(userStepsMap); // 按总步数降序排序 aggregatedList.sort((a, b) => b.totalSteps - a.totalSteps); // 添加排名 let currentRank = 1; // 当前排名 for (let i = 0; i < aggregatedList.length; i++) { if (i > 0 && aggregatedList[i].totalSteps === aggregatedList[i - 1].totalSteps) { // 如果步数相同,排名相同 aggregatedList[i].rank = aggregatedList[i - 1].rank; } else { // 否则,更新当前排名 aggregatedList[i].rank = currentRank; } currentRank++; } console.log('aggregatedList',aggregatedList); aggregatedList.forEach(item=>{ if(item.objectId == currentUser.id){ this.setData({ sharList:item, }); console.log('sharList',this.data.sharList); this.saveImage() } }) } catch (error) { console.error('Error fetching today\'s data:', error); } }, //随机展示图片 showRandomImage: function () { const randomIndex = Math.floor(Math.random() * this.data.images.length); this.setData({ randomImage: this.data.images[randomIndex] }); }, //绘制canvas rpxToPx(rpx) { const systemInfo = wx.getSystemInfoSync(); return rpx * (systemInfo.windowWidth / 750); }, getImageInfo(url) { console.log(url); return new Promise((result) => { wx.getImageInfo({ src: url, //服务器返回的图片地址 success: function (res) { // res.path是网络图片的本地地址 let Path = res.path; result(Path) }, fail(err) { console.log(err); result() } }); }) }, //获取用户信息 async getuser(){ const currentUser = Parse.User.current(); let user = new Parse.Query('_User'); user.equalTo('company', company); user.notEqualTo('isDeleted', true); user.equalTo('objectId', currentUser.id); let P = await user.find(); let userList = P.map(item => item.toJSON()); this.setData({ userList, }) console.log('userList',this.data.userList); }, //rpx async saveImage() { // console.log('运行了'); const canvas = wx.createCanvasContext('myCanvas'); const width = this.rpxToPx(670); const height = this.rpxToPx(1100); // console.log(width, height); canvas.width = this.rpxToPx(670); canvas.height = this.rpxToPx(1100); const backgroundImage2 = await this.getImageInfo(this.data.randomImage); // 绘制背景图片 canvas.drawImage(backgroundImage2, 0, 0, width, height); // 加载背景图片 const backgroundImage1 = await this.getImageInfo('https://file-cloud.fmode.cn/qpFbRRSZrO/20250113/1r3o3q045323287.png'); // 绘制背景图片 canvas.drawImage(backgroundImage1, 0, 0, width, height); // 绘制背景 // canvas.setFillStyle('#CAE1FD'); // 背景色 // canvas.fillRect(0, 0, width, height); canvas.setFillStyle('#0178EE'); // let mainimage = await this.getImageInfo(this.data.randomImage) let avatar = Parse.User.current()?.get('avatar') console.log('avatar', avatar); let userAvatar = await this.getImageInfo(avatar) console.log('userAvatar', userAvatar); //主图片 // canvas.drawImage(mainimage, 0, 0, width, this.rpxToPx(500)); // 调整图片高度 //头像 if (userAvatar) { // 绘制带圆角的头像 const avatarX = this.rpxToPx(40); const avatarY = this.rpxToPx(540); const avatarSize = this.rpxToPx(83); const radius = avatarSize / 2; // 半径为头像大小的一半 // 绘制圆角矩形 canvas.save(); // 保存当前状态 canvas.beginPath(); // 开始路径 canvas.moveTo(avatarX + radius, avatarY); // 左上角 canvas.lineTo(avatarX + avatarSize - radius, avatarY); // 上边 canvas.arc(avatarX + avatarSize - radius, avatarY + radius, radius, 1.5 * Math.PI, 0, false); // 右上角 canvas.lineTo(avatarX + avatarSize, avatarY + avatarSize - radius); // 右边 canvas.arc(avatarX + avatarSize - radius, avatarY + avatarSize - radius, radius, 0, 0.5 * Math.PI, false); // 右下角 canvas.lineTo(avatarX + radius, avatarY + avatarSize); // 下边 canvas.arc(avatarX + radius, avatarY + avatarSize - radius, radius, 0.5 * Math.PI, Math.PI, false); // 左下角 canvas.lineTo(avatarX, avatarY + radius); // 左边 canvas.arc(avatarX + radius, avatarY + radius, radius, Math.PI, 1.5 * Math.PI, false); // 左上角 canvas.closePath(); // 关闭路径 canvas.clip(); // 剪切 // 绘制头像 canvas.drawImage(userAvatar, avatarX, avatarY, avatarSize, avatarSize); // 头像位置和大小 canvas.restore(); // 恢复状态 } // 绘制昵称和时间 const nickname = this.data.userList[0].nickname; const currentTime = this.data.sharList.currentTime; const rank = this.data.sharList.rank; const steps = this.data.sharList.totalSteps || 0; const distance = this.data.sharList.totaldistance || 0; canvas.setFontSize(this.rpxToPx(30)); canvas.fillText(nickname, this.rpxToPx(140), this.rpxToPx(580)); // 昵称位置 // console.log('昵称加载成功'); canvas.setFontSize(this.rpxToPx(28)); canvas.fillText(currentTime, this.rpxToPx(140), this.rpxToPx(610)); // 时间位置 // console.log('时间加载成功'); // 绘制其他文本 canvas.setFontSize(this.rpxToPx(55)); canvas.fillText('梦想家', this.rpxToPx(40), this.rpxToPx(720)); // console.log('梦想家加载成功'); canvas.setFontSize(this.rpxToPx(30)); canvas.fillText('用汗水实现想象,用脚步丈量梦想', this.rpxToPx(40), this.rpxToPx(780)); // console.log('汗水加载成功'); // 绘制排名、步数和公里数 canvas.setFontSize(this.rpxToPx(22)); // canvas.fillText('今日排名: ' + rank, 20, 400); canvas.fillText('今日排名', this.rpxToPx(40), this.rpxToPx(840)); // console.log('排名加载成功'); // canvas.fillText('今日步数: ' + steps, 20, 420); canvas.fillText('今日步数', this.rpxToPx(180), this.rpxToPx(840)); // console.log('步数加载成功'); // canvas.fillText('公里数: ' + distance + 'km', 20, 430); canvas.fillText('公里数', this.rpxToPx(320), this.rpxToPx(840)); // console.log('公里数加载成功'); canvas.setFontSize(this.rpxToPx(34)); canvas.fillText(rank, this.rpxToPx(70), this.rpxToPx(900)); canvas.fillText(steps, this.rpxToPx(180), this.rpxToPx(900)); canvas.fillText(distance + 'km', this.rpxToPx(320), this.rpxToPx(900)); // 加载二维码图片 const qrCodeImage = await this.getImageInfo('https://file-cloud.fmode.cn/qpFbRRSZrO/20250113/t2vst6051431547.png'); // 绘制二维码 canvas.drawImage(qrCodeImage, width - this.rpxToPx(140), height - this.rpxToPx(160), this.rpxToPx(120), this.rpxToPx(120)); canvas.setFillStyle('#0178EE'); canvas.setFontSize(this.rpxToPx(28)); canvas.fillText('长按二维码加入儒乐湖健身跑', width - this.rpxToPx(510), height - this.rpxToPx(120)); canvas.fillText('和我一起运动', width - this.rpxToPx(405), height - this.rpxToPx(80)); // 完成绘制 canvas.draw(false, () => { console.log('123'); wx.canvasToTempFilePath({ canvasId: 'myCanvas', success: (res) => { console.log('绘制完成', res); this.setData({ saveimage: res.tempFilePath }); this.getUptoken() console.log(this.data.saveimage); }, fail: (err) => { console.error('canvasToTempFilePath 失败', err); } }); }); }, uploadImageToServer() { const that = this; const tempFilePath = this.data.saveimage; // 获取本地临时文件路径 qiniuUploader.upload( tempFilePath, // 本地文件路径 (res) => { const imageURL = res.imageURL; // 上传成功后的网络地址 console.log('上传成功,网络地址:', imageURL); that.setData({ saveimage: imageURL // 更新 saveimage 为网络地址 }); }, (error) => { console.error('上传失败:', error); }, { region: "SCN", // 七牛云区域 uploadURL: that.data.uploadURL, // 上传地址 domain: that.data.domain, // 域名 uptoken: that.data.uptokenURL, // 上传凭证 } ); console.log('saveimage', this.data.saveimage); }, async getUptoken() { let res = await Parse.Cloud.run('qiniu_uptoken', { company: company }) this.setData({ uptokenURL: res.uptoken, domain: res.domain, uploadURL: res.zoneUrl }) this.uploadImageToServer() console.log(this.data.uptokenURL, this.data.domain, this.data.uploadURL); }, //px // saveImage() { // // console.log('运行了'); // const canvas = wx.createCanvasContext('myCanvas'); // const width = 335; // const height = 550; // // console.log(width, height); // canvas.width = 335; // canvas.height = 550; // // 绘制背景 // canvas.setFillStyle('#CAE1FD'); // 背景色 // canvas.fillRect(0, 0, width, height); // canvas.setFillStyle('#0178EE'); // // 加载主图片 // wx.getImageInfo({ // src: this.data.randomImage, // success: (res) => { // canvas.drawImage(res.path, 0, 0, width, 250); // 调整图片高度 // // console.log('主图片加载成功'); // // 加载用户头像 // wx.getImageInfo({ // src: this.data.sharList[0].user.avatar, // success: (avatarRes) => { // // 绘制带圆角的头像 // const avatarX = 20; // const avatarY = 270; // const avatarSize = 42.5; // const radius = avatarSize / 2; // 半径为头像大小的一半 // // 绘制圆角矩形 // canvas.save(); // 保存当前状态 // canvas.beginPath(); // 开始路径 // canvas.moveTo(avatarX + radius, avatarY); // 左上角 // canvas.lineTo(avatarX + avatarSize - radius, avatarY); // 上边 // canvas.arc(avatarX + avatarSize - radius, avatarY + radius, radius, 1.5 * Math.PI, 0, false); // 右上角 // canvas.lineTo(avatarX + avatarSize, avatarY + avatarSize - radius); // 右边 // canvas.arc(avatarX + avatarSize - radius, avatarY + avatarSize - radius, radius, 0, 0.5 * Math.PI, false); // 右下角 // canvas.lineTo(avatarX + radius, avatarY + avatarSize); // 下边 // canvas.arc(avatarX + radius, avatarY + avatarSize - radius, radius, 0.5 * Math.PI, Math.PI, false); // 左下角 // canvas.lineTo(avatarX, avatarY + radius); // 左边 // canvas.arc(avatarX + radius, avatarY + radius, radius, Math.PI, 1.5 * Math.PI, false); // 左上角 // canvas.closePath(); // 关闭路径 // canvas.clip(); // 剪切 // // 绘制头像 // canvas.drawImage(avatarRes.path, avatarX, avatarY, avatarSize, avatarSize); // 头像位置和大小 // canvas.restore(); // 恢复状态 // // console.log('头像加载成功'); // // 绘制昵称和时间 // const nickname = this.data.sharList[0].user.nickname; // const currentTime = this.data.sharList[0].currentTime; // const rank = this.data.sharList[0].rank; // const steps = this.data.sharList[0].steps || 0; // const distance = this.data.sharList[0].distance || 0; // canvas.setFontSize(15); // canvas.fillText(nickname, 70, 290); // 昵称位置 // // console.log('昵称加载成功'); // canvas.setFontSize(14); // canvas.fillText(currentTime, 70, 305); // 时间位置 // // console.log('时间加载成功'); // // 绘制其他文本 // canvas.setFontSize(27.5); // canvas.fillText('梦想家', 20, 360); // // console.log('梦想家加载成功'); // canvas.setFontSize(15); // canvas.fillText('用汗水实现想象,用脚步丈量梦想', 20, 390); // // console.log('汗水加载成功'); // // 绘制排名、步数和公里数 // canvas.setFontSize(14); // // canvas.fillText('今日排名: ' + rank, 20, 400); // canvas.fillText('今日排名', 20, 420); // // console.log('排名加载成功'); // // canvas.fillText('今日步数: ' + steps, 20, 420); // canvas.fillText('今日步数', 120, 420); // // console.log('步数加载成功'); // // canvas.fillText('公里数: ' + distance + 'km', 20, 430); // canvas.fillText('公里数', 220, 420); // // console.log('公里数加载成功'); // canvas.setFontSize(20); // canvas.fillText(rank, 40, 450); // canvas.fillText(steps, 122, 450); // canvas.fillText(distance + 'km', 222, 450); // // 绘制二维码(如果有) // canvas.setFillStyle('red'); // 示例二维码 // canvas.fillRect(width - 70, height - 80, 60, 60); // QR 位置 // // console.log('二维码绘制'); // canvas.setFillStyle('#0178EE'); // canvas.setFontSize(14); // canvas.fillText('长按二维码加入跑团', width - 210, height - 60); // canvas.fillText('和我一起运动', width - 190, height - 40); // // 完成绘制 // canvas.draw(false, () => { // console.log('123'); // wx.canvasToTempFilePath({ // canvasId: 'myCanvas', // success: (res) => { // console.log('绘制完成', res); // this.setData({ // saveimage: res.tempFilePath // }); // console.log(this.data.saveimage); // }, // fail: (err) => { // console.error('canvasToTempFilePath 失败', err); // } // }); // }); // }, // fail: () => { // console.error('用户头像加载失败'); // } // }); // }, // fail: () => { // console.error('主图片加载失败'); // } // }); // }, //点击保存图片 async savepic() { await this.saveImage() const imagePath = this.data.saveimage; // 获取保存的图片路径 if (imagePath) { // 调用保存图片到相册的方法 wx.saveImageToPhotosAlbum({ filePath: imagePath, success: () => { wx.showToast({ title: '图片已保存到相册', icon: 'success' }); }, fail: (err) => { console.error('保存失败', err); wx.showToast({ title: '保存失败', icon: 'none' }); } }); } else { wx.showToast({ title: '没有可保存的图片', icon: 'none' }); } }, //保存图片到相册 savepic2: function () { let that = this; wx.canvasToTempFilePath({ x: 0, y: 0, width: 670, height: 1100, destWidth: 670, destHeight: 1100, canvasId: 'myCanvas', success: function (result) { wx.getSetting({ success(res) { if (!res.authSetting['scope.writePhotosAlbum']) { wx.authorize({ scope: 'scope.writePhotosAlbum', success() { //这里是用户同意授权后的回调 // that.saveImgToLocal(); wx.saveImageToPhotosAlbum({ filePath: result.tempFilePath, success(res) { wx.showToast({ title: '图片已保存到相册', icon: 'success' }); } }) }, fail() { //这里是用户拒绝授权后的回调 wx.showToast({ title: '打开相册授权,才能保存图片哦~', icon: 'none', duration: 2000 }) that.setData({ openSettingBtnHidden: false }) } }) } else { //调取小程序当中获取图片 console.log(result.tempFilePath); wx.saveImageToPhotosAlbum({ filePath: result.tempFilePath, success(res) { wx.showToast({ title: '图片已保存到相册', icon: 'success' }); } }) } } }) }, fail: function (res) { console.log(res) } }) }, shar() { wx.downloadFile({ url: this.data.saveimage, //图片服务器地址 success: (res) => { wx.showShareImageMenu({ path: res.tempFilePath, //转为本地地址showShareImageMenu进行分享 success: (res) => { uni.hideLoading(); this.modalShare = null; }, fail: (err) => { uni.hideLoading(); this.modalShare = null; }, }); }, }); }, sharecircle() { console.log('this.data.saveimage', this.data.saveimage); wx.navigateTo({ url: '../../circle/send-circle/index?image=' + this.data.saveimage // 目标页面的路径 }); } })