bug

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

@@ -20,7 +20,11 @@ Page({
         //是否暂停
         isstop:false,
         //标题
-        title:''
+        title:'',
+
+        percentage: '',
+        timer: null,
+        startTime: 0,
     },
 
     /**
@@ -172,4 +176,55 @@ Page({
         })
         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%)`,
+                });
+
+                // 如果达到 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: '',
+                });
+            }
+        }
+    },
+
 })

nova-werun/pages/home/sport/sport-start/index.less

@@ -77,6 +77,31 @@
             font-size: 30rpx;
             margin-top: 20rpx;
         }
+        .btn-stop{
+            width: 200rpx;
+            height: 200rpx;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .btn-stop1{
+                height: 180rpx;
+                width: 180rpx;
+                border-radius: 50%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                border: #015EEA solid 2rpx;
+                z-index: 10;
+                background-color: white;
+                .btn-stop2{
+                    width: 60rpx;
+                    height: 60rpx;
+                    border-radius: 10rpx;
+                    background-color: #015EEA;
+                }   
+            }
+        }
     }
     .stop{
         width: 100%;

nova-werun/pages/home/sport/sport-start/index.wxml

@@ -24,7 +24,7 @@
             </view>
         </view>
         <view class="btn" wx:if="{{!isstop}}">
-            <image class="pause" src="https://file-cloud.fmode.cn/qpFbRRSZrO/20250103/ot1nko024129224.png?imageView2/1/w/200/h/200"  bindtap="stop"></image>
+            <image class="pause" src="https://file-cloud.fmode.cn/qpFbRRSZrO/20250103/ot1nko024129224.png?imageView2/1/w/200/h/200" bindtap="stop"></image>
             <view class="btn-text">暂停</view>
         </view>
         <view class="stop" wx:if="{{isstop}}">
@@ -33,7 +33,11 @@
                 <view class="btn-text">继续</view>
             </view>
             <view class="btn">
-                <image class="pause" src="https://file-cloud.fmode.cn/qpFbRRSZrO/20250103/n6s6ic024250746.png?imageView2/1/w/200/h/200"></image>
+                <view class="btn-stop" style="background:{{percentage}}" bindlongpress="startIncrease" bindtouchend="stopIncrease">
+                    <view class="btn-stop1">
+                        <view class="btn-stop2"></view>
+                    </view>
+                </view>
                 <view class="btn-text">长按结束</view>
             </view>
         </view>

nova-werun/pages/home/sport/sport-start/index.wxss

@@ -1 +1 @@
-.all{width:100vw;background:linear-gradient(to bottom, #4F9AF7, #FFFFFF);color:#015EEA}.all .map{width:100%;height:600rpx}.all .numberbox{width:100%;height:780rpx;display:flex;align-items:center;flex-direction:column}.all .numberbox .distance{display:flex;align-items:flex-end;margin-top:20rpx}.all .numberbox .distance .dis-num{height:132rpx;font-size:100rpx;display:flex;align-items:flex-end}.all .numberbox .distance .dis-text{height:132rpx;font-size:35rpx;display:flex;align-items:flex-end;padding-bottom:18rpx;margin-left:10rpx}.all .numberbox .number{width:100%;height:200rpx;display:flex;justify-content:space-between;margin-top:30rpx}.all .numberbox .number .num{height:100%;width:255rpx;display:flex;flex-direction:column;justify-content:center;align-items:center}.all .numberbox .number .num .num-num{font-size:50rpx;margin-bottom:18rpx}.all .numberbox .number .num .num-text{width:100%;display:flex;justify-content:center;align-items:center;font-size:28rpx}.all .btn{width:350rpx;height:320rpx;display:flex;justify-content:center;align-items:center;flex-direction:column}.all .btn .pause{width:200rpx;height:200rpx;margin-top:25rpx}.all .btn .btn-text{font-size:30rpx;margin-top:20rpx}.all .stop{width:100%;height:320rpx;display:flex;justify-content:center}.all .stop .btn{width:300rpx;height:320rpx;display:flex;justify-content:center;align-items:center;flex-direction:column}.all .stop .btn .pause{width:200rpx;height:200rpx;margin-top:25rpx}.all .stop .btn .btn-text{font-size:30rpx;margin-top:20rpx}
+.all{width:100vw;background:linear-gradient(to bottom, #4F9AF7, #FFFFFF);color:#015EEA}.all .map{width:100%;height:600rpx}.all .numberbox{width:100%;height:780rpx;display:flex;align-items:center;flex-direction:column}.all .numberbox .distance{display:flex;align-items:flex-end;margin-top:20rpx}.all .numberbox .distance .dis-num{height:132rpx;font-size:100rpx;display:flex;align-items:flex-end}.all .numberbox .distance .dis-text{height:132rpx;font-size:35rpx;display:flex;align-items:flex-end;padding-bottom:18rpx;margin-left:10rpx}.all .numberbox .number{width:100%;height:200rpx;display:flex;justify-content:space-between;margin-top:30rpx}.all .numberbox .number .num{height:100%;width:255rpx;display:flex;flex-direction:column;justify-content:center;align-items:center}.all .numberbox .number .num .num-num{font-size:50rpx;margin-bottom:18rpx}.all .numberbox .number .num .num-text{width:100%;display:flex;justify-content:center;align-items:center;font-size:28rpx}.all .btn{width:350rpx;height:320rpx;display:flex;justify-content:center;align-items:center;flex-direction:column}.all .btn .pause{width:200rpx;height:200rpx;margin-top:25rpx}.all .btn .btn-text{font-size:30rpx;margin-top:20rpx}.all .btn .btn-stop{width:200rpx;height:200rpx;border-radius:50%;display:flex;justify-content:center;align-items:center}.all .btn .btn-stop .btn-stop1{height:180rpx;width:180rpx;border-radius:50%;display:flex;justify-content:center;align-items:center;border:#015EEA solid 2rpx;z-index:10;background-color:white}.all .btn .btn-stop .btn-stop1 .btn-stop2{width:60rpx;height:60rpx;border-radius:10rpx;background-color:#015EEA}.all .stop{width:100%;height:320rpx;display:flex;justify-content:center}.all .stop .btn{width:300rpx;height:320rpx;display:flex;justify-content:center;align-items:center;flex-direction:column}.all .stop .btn .pause{width:200rpx;height:200rpx;margin-top:25rpx}.all .stop .btn .btn-text{font-size:30rpx;margin-top:20rpx}