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

// 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: ''

    },

    /**
     * 生命周期函数--监听页面加载
     */
    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);
    },
    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()
                }
            });
        })
    },
    //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.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(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(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
                    });
                    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 // 目标页面的路径
        });
    }
})