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://tse2-mm.cn.bing.net/th/id/OIP-C.kACuwmhGcHKV4G4Og9AFqgHaLG?rs=1&pid=ImgDetMain',
            'https://tse1-mm.cn.bing.net/th/id/OIP-C.LYrbU3wnasLo4nvoAqs_HQHaLH?rs=1&pid=ImgDetMain',
            'https://tse3-mm.cn.bing.net/th/id/OIP-C.KKzj-pCKvzmWJ9MU5pE5KwHaKq?rs=1&pid=ImgDetMain',
            'https://ts1.cn.mm.bing.net/th/id/R-C.d8333a26a5494dfe1dc88e9fdd04fb31?rik=08fpnYZSbboHfQ&riu=http%3a%2f%2fpic.ibaotu.com%2fspiders%2f33817-59a6262d3ff70.jpg&ehk=fKs2FTTgk2k0kqet%2fVO%2bAS3D0Q6zlNyUPmT8UE%2bvpdY%3d&risl=&pid=ImgRaw&r=0',
            'https://pic.nximg.cn/file/20230420/12106414_122949747127_2.jpg'
        ],
        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: () => {
                        console.error('用户头像加载失败');
                    }
                });
            },
            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'
            });
        }
    }
})