hookehuyr

feat(界面): 添加加载动画效果并修复加载状态

在Dashboard页面添加步数加载时的动画效果
在WeRunAuth组件中修复加载状态未重置的问题
...@@ -153,6 +153,7 @@ const getWeRunData = async () => { ...@@ -153,6 +153,7 @@ const getWeRunData = async () => {
153 // }) 153 // })
154 console.warn('同步微信步数成功', data); 154 console.warn('同步微信步数成功', data);
155 // todaySteps.value = decryptedData.todaySteps 155 // todaySteps.value = decryptedData.todaySteps
156 + isLoading.value = false
156 } 157 }
157 158
158 } catch (error) { 159 } catch (error) {
......
...@@ -29,7 +29,16 @@ ...@@ -29,7 +29,16 @@
29 <view class="flex justify-between items-center"> 29 <view class="flex justify-between items-center">
30 <view class="flex items-baseline"> 30 <view class="flex items-baseline">
31 <span class="text-4xl font-bold"> 31 <span class="text-4xl font-bold">
32 - {{ isLoading ? '...' : steps.toLocaleString() }} 32 + <template v-if="isLoading">
33 + <span class="loading-dots">
34 + <span class="dot">.</span>
35 + <span class="dot">.</span>
36 + <span class="dot">.</span>
37 + </span>
38 + </template>
39 + <template v-else>
40 + {{ steps.toLocaleString() }}
41 + </template>
33 </span> 42 </span>
34 <span class="ml-1 text-gray-500">步</span> 43 <span class="ml-1 text-gray-500">步</span>
35 </view> 44 </view>
...@@ -341,3 +350,37 @@ useDidShow(() => { ...@@ -341,3 +350,37 @@ useDidShow(() => {
341 initPageData(); 350 initPageData();
342 }) 351 })
343 </script> 352 </script>
353 +
354 +<style lang="less">
355 +.loading-dots {
356 + display: inline-block;
357 +
358 + .dot {
359 + display: inline-block;
360 + animation: loading-bounce 1.4s ease-in-out infinite both;
361 +
362 + &:nth-child(1) {
363 + animation-delay: -0.32s;
364 + }
365 +
366 + &:nth-child(2) {
367 + animation-delay: -0.16s;
368 + }
369 +
370 + &:nth-child(3) {
371 + animation-delay: 0s;
372 + }
373 + }
374 +}
375 +
376 +@keyframes loading-bounce {
377 + 0%, 80%, 100% {
378 + transform: scale(0.8);
379 + opacity: 0.5;
380 + }
381 + 40% {
382 + transform: scale(1);
383 + opacity: 1;
384 + }
385 +}
386 +</style>
......