werun-wxapp/nova-werun/pages/home/share/index.js

// nova-werun/pages/home/share/index.js
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/20250102/gtontq125800552.jpg?imageView2/1/w/200/h/200',
            'https://file-cloud.fmode.cn/qpFbRRSZrO/20250102/8e1ps0125800358.jpg?imageView2/1/w/200/h/200',
            'https://file-cloud.fmode.cn/qpFbRRSZrO/20250102/l5321n125800284.jpg?imageView2/1/w/200/h/200',
            'https://file-cloud.fmode.cn/qpFbRRSZrO/20250102/j1p6l7125757884.jpg?imageView2/1/w/200/h/200'
        ],
        randomImage: '',
        saveimage: ''
    },

    /**
     * 生命周期函数--监听页面加载
     */
    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.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('user', currentUser.id);
        ActivityDataquery.equalTo('company', company);
        ActivityDataquery.equalTo('type', 'today');
        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); // 今天的结束时间

        // 在查询条件中添加对 createdAt 的限制
        ActivityDataquery.greaterThanOrEqualTo('createdAt', todayStart);
        ActivityDataquery.lessThanOrEqualTo('createdAt', todayEnd);
        ActivityDataquery.include('user');

        // 根据 steps 字段进行降序排序
        ActivityDataquery.descending('steps');

        let r = await ActivityDataquery.find();
        let todayList = r.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;
        });
        let sharList = []
        todayList.forEach((item, index) => {
            if (item.user.objectId == currentUser.id) {
                sharList.push({
                    ...item, // 包含用户数据
                    rank: index + 1 // 计算排名（index 从 0 开始，所以加 1）
                });
            }
        })

        this.setData({
            sharList
        });
        this.saveImage()
        console.log(this.data.sharList);
    },
    //随机展示图片
    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);
    },
    //rpx
    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);

        // 绘制背景
        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, this.rpxToPx(500)); // 调整图片高度
                // console.log('主图片加载成功');

                // 加载用户头像
                wx.getImageInfo({
                    src: this.data.sharList[0].user.avatar,
                    success: (avatarRes) => {
                        // 绘制带圆角的头像
                        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(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(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(28));
                        // canvas.fillText('今日排名: ' + rank, 20, 400);
                        canvas.fillText('今日排名', this.rpxToPx(40), this.rpxToPx(840));
                        // console.log('排名加载成功');
                        // canvas.fillText('今日步数: ' + steps, 20, 420);
                        canvas.fillText('今日步数', this.rpxToPx(240), this.rpxToPx(840));
                        // console.log('步数加载成功');
                        // canvas.fillText('公里数: ' + distance + 'km', 20, 430);
                        canvas.fillText('公里数', this.rpxToPx(440), this.rpxToPx(840));
                        // console.log('公里数加载成功');
                        canvas.setFontSize(this.rpxToPx(40));
                        canvas.fillText(rank, this.rpxToPx(80), this.rpxToPx(900));
                        canvas.fillText(steps, this.rpxToPx(240), this.rpxToPx(900));
                        canvas.fillText(distance + 'km', this.rpxToPx(444), this.rpxToPx(900));

                        // 绘制二维码（如果有）
                        canvas.setFillStyle('red'); // 示例二维码
                        canvas.fillRect(width - this.rpxToPx(140), height - this.rpxToPx(160), this.rpxToPx(120), this.rpxToPx(120)); // QR 位置
                        // console.log('二维码绘制');

                        canvas.setFillStyle('#0178EE');
                        canvas.setFontSize(this.rpxToPx(28));
                        canvas.fillText('长按二维码加入跑团', width - this.rpxToPx(420), height - this.rpxToPx(120));
                        canvas.fillText('和我一起运动', width - this.rpxToPx(380), height - this.rpxToPx(80));
                        // 完成绘制
                        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: (err) => {
                        console.error('用户头像加载失败', this.data.sharList[0].user.avatar, err);
                    }
                });
            },
            fail: () => {
                console.error('主图片加载失败');
            }
        });

    },
    //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() {
        const that = this
        let fileName = new Date().valueOf();
        let filePath = wx.env.USER_DATA_PATH + '/' + fileName + '.jpg' //这边就是为了安卓做的兼容，因为安卓机有可能会将图片地址的后缀名读取为：unknow
        wx.downloadFile({
            url: that.data.saveimage, //需要保存的图片地址
            filePath: filePath,
            success: function (res) {
                // 保存图片到系统相册
                wx.saveImageToPhotosAlbum({
                    filePath: filePath,
                    success(data) {
                        let fileMgr = wx.getFileSystemManager()
                        fileMgr.unlink({
                            filePath: filePath,
                            success() {
                                wx.showToast({
                                    title: '已保存至您的相册',
                                    icon: 'none',
                                    duration: 1500
                                });
                            }
                        })
                    },
                    fail(err) {
                        if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
                            wx.showModal({
                                title: '提示',
                                content: '需要您授权保存相册',
                                showCancel: false,
                                success: modalSuccess => {
                                    wx.openSetting({
                                        success(settingdata) {
                                            if (settingdata.authSetting['scope.writePhotosAlbum']) {
                                                console.log('获取权限成功，给出再次点击图片保存到相册的提示。')
                                            } else {
                                                console.log('获取权限失败，给出不给权限就无法正常使用的提示')
                                            }
                                        }
                                    })
                                }
                            })
                        }
                    }
                })
            },
            fail: function (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(){
        wx.navigateTo({
            url: '../../circle/send-circle/index?image='+this.data.saveimage // 目标页面的路径
        });
    }
})