werun-wxapp/nova-werun/pages/home/sport/sport-start/index.js

// nova-werun/pages/home/sport/sport-start/index.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        //屏幕高度
        statusBarHeight: 0, // 状态栏高度
        screenHeight: 0, // 屏幕高度
        customHeight: 0, // 自定义导航栏高度（如小程序右上角胶囊按钮）
        bottomNavHeight: 0, // 底部导航栏高度
        contentHeight: 0, // 可用内容高度
        contentHeight2: 0,
        contentpadding: 0, //顶部padding高度
        navheight: 0,
        //地图
        longitude: 0,
        latitude: 0,
        markers: [],
        //是否暂停
        isstop: false,
        //标题
        title: '',

        percentage: '',
        timer: null,
        startTime: 0,

        show: false,
    },

    /**
     * 生命周期函数--监听页面加载
     */
    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 navheight = (statusBarHeight + customHeight) * 750 / systemInfo.windowWidth;
        const contentHeight = (screenHeight - bottomNavHeight) * 750 / systemInfo.windowWidth;
        this.setData({
            statusBarHeight,
            screenHeight,
            customHeight,
            bottomNavHeight,
            contentHeight,
            navheight,
        });
        console.log(navheight);
        this.setData({
            title: options.id
        })
        //地图
        this.Getlocation()
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    },
    //获取当前位置信息
    Getlocation() {
        // 获取当前位置信息
        wx.getLocation({
            type: 'wgs84',
            success: (res) => {
                const {
                    latitude,
                    longitude
                } = res;
                console.log('获取到的经纬度:', latitude, longitude); // 添加日志
                //调用api解析地址
                wx.request({
                    url: 'https://api.map.baidu.com/reverse_geocoding/v3/?ak=sHZTomd7grslfP7sPKB8tRgT49FK9TEu&output=json&coordtype=gcj02&location=' + latitude + ',' + longitude,
                    data: {},
                    header: {
                        'Content-Type': 'application/json'
                    },
                    success: (ops) => { // 使用箭头函数
                        console.log(ops);
                        const address = ops.data.result.formatted_address;
                        this.setData({
                            address: address,
                            latitude: latitude, // 保证 latitude 被设置
                            longitude: longitude, // 保证 longitude 被设置
                            markers: [{ // 设置 markers
                                id: 1,
                                latitude: latitude,
                                longitude: longitude,
                                iconPath: 'https://file-cloud.fmode.cn/13WZ0W7u3l/20240724/7ebg0k104325941.png?imageView2/1/w/200/h/200', // 自定义标记图标
                                width: 40,
                                height: 40,
                                callout: {
                                    content: address, // 可以显示解析出的地址
                                    color: '#ffffff',
                                    bgColor: '#7F56B2',
                                    padding: 10,
                                    borderRadius: 5,
                                    display: 'ALWAYS'
                                }
                            }]
                        });
                        console.log(this.data.address);
                    },
                    fail: function (resq) {
                        wx.showModal({
                            title: '信息提示',
                            content: '请求失败',
                            showCancel: false,
                            confirmColor: '#f37938'
                        });
                    },
                    complete: function () {}
                })

            },
            fail: (err) => {
                console.error(err);
                wx.showToast({
                    title: '获取位置失败',
                    icon: 'none'
                });
            }
        });
    },
    stop() {

        this.setData({
            isstop: !this.data.isstop
        })
        console.log(this.data.isstop);
    },
    //结束光环展示
    startIncrease() {
        // 记录开始时间
        this.setData({
            startTime: Date.now(),
        });

        // 清除之前的定时器
        if (this.data.timer) {
            clearInterval(this.data.timer);
        }

        // 设置定时器，每隔 40 毫秒更新一次 percentage
        this.setData({
            timer: setInterval(() => {
                const currentTime = Date.now();
                const elapsedTime = currentTime - this.data.startTime;
                const percentage = Math.min((elapsedTime / 4000) * 100, 100);

                this.setData({
                    percentage: `conic-gradient(from 0deg, #015EEA ${percentage}%, white 0%)`,
                });

                if(percentage >= 100){
                    wx.showToast({
                        title: '运动已结束',
                        icon: 'success',
                        duration: 500
                    });
                    setTimeout(()=>{
                        this.onConfirm()
                    },500)

                }

                // 如果达到 100%，清除定时器
                if (percentage >= 100) {
                    clearInterval(this.data.timer);
                    this.setData({
                        timer: null,
                    });
                }
            }, 40),
        });
    },

    stopIncrease() {
        // 清除定时器
        if (this.data.timer) {
            clearInterval(this.data.timer);
            this.setData({
                timer: null,
            });

            // 如果未达到 100%，清零 percentage
            const elapsedTime = Date.now() - this.data.startTime;
            if (elapsedTime < 4000) {
                this.setData({
                    percentage: '',
                });
            }
        }
    },
    //点击返回按钮
    goback() {
        this.setData({
            show: true,
            isstop: false,
        })
    },
    //取消弹窗
    onClose() {
        this.setData({
            show: false
        });
    },
    //确认返回
    onConfirm(){
        wx.navigateBack({
            delta: 1 // 返回的页面层数，1 表示返回上一页
          });
    }


})