hookehuyr

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

在Dashboard页面添加步数加载时的动画效果
在WeRunAuth组件中修复加载状态未重置的问题
......@@ -146,13 +146,14 @@ const getWeRunData = async () => {
// 同步微信步数
const { code, data } = await syncWxStepAPI({ encryptedData: weRunRes.encryptedData, iv: weRunRes.iv });
if (code) {
// 提示获取步数成功
// Taro.showToast({
// title: `获取步数成功:${mockSteps}步`,
// icon: 'none'
// })
console.warn('同步微信步数成功', data);
// todaySteps.value = decryptedData.todaySteps
// 提示获取步数成功
// Taro.showToast({
// title: `获取步数成功:${mockSteps}步`,
// icon: 'none'
// })
console.warn('同步微信步数成功', data);
// todaySteps.value = decryptedData.todaySteps
isLoading.value = false
}
} catch (error) {
......
......@@ -29,7 +29,16 @@
<view class="flex justify-between items-center">
<view class="flex items-baseline">
<span class="text-4xl font-bold">
{{ isLoading ? '...' : steps.toLocaleString() }}
<template v-if="isLoading">
<span class="loading-dots">
<span class="dot">.</span>
<span class="dot">.</span>
<span class="dot">.</span>
</span>
</template>
<template v-else>
{{ steps.toLocaleString() }}
</template>
</span>
<span class="ml-1 text-gray-500">步</span>
</view>
......@@ -341,3 +350,37 @@ useDidShow(() => {
initPageData();
})
</script>
<style lang="less">
.loading-dots {
display: inline-block;
.dot {
display: inline-block;
animation: loading-bounce 1.4s ease-in-out infinite both;
&:nth-child(1) {
animation-delay: -0.32s;
}
&:nth-child(2) {
animation-delay: -0.16s;
}
&:nth-child(3) {
animation-delay: 0s;
}
}
}
@keyframes loading-bounce {
0%, 80%, 100% {
transform: scale(0.8);
opacity: 0.5;
}
40% {
transform: scale(1);
opacity: 1;
}
}
</style>
......