feat(组件): 添加动态字体大小调整功能

为积分显示组件添加根据数字长度自动调整字体大小的功能，确保长数字的可读性

@@ -4,7 +4,7 @@
     <view class="center-circle">
     <view class="center-circle">
       <view class="total-points" @tap="handleGoToRewards">
       <view class="total-points" @tap="handleGoToRewards">
         <text v-if="!isOwner" class="family-points-label">家庭总积分</text>
         <text v-if="!isOwner" class="family-points-label">家庭总积分</text>
-        <text class="points-number">{{ animatedTotalPoints }}分</text>
+        <text class="points-number" :style="{ fontSize: dynamicFontSize }">{{ animatedTotalPoints }}分</text>
         <text v-if="isOwner" class="points-label">去兑换</text>
         <text v-if="isOwner" class="points-label">去兑换</text>
       </view>
       </view>
     </view>
     </view>
@@ -35,7 +35,7 @@
 </template>
 </template>
 
 
 <script setup>
 <script setup>
-import { ref, onMounted, defineProps, defineExpose, defineEmits, watch } from 'vue'
+import { ref, onMounted, defineProps, defineExpose, defineEmits, watch, computed } from 'vue'
 import Taro, { useDidShow } from '@tarojs/taro'
 import Taro, { useDidShow } from '@tarojs/taro'
 import { collectPointAPI } from '@/api/points'
 import { collectPointAPI } from '@/api/points'
 
 
@@ -68,6 +68,25 @@ const animatedTotalPoints = ref(props.totalPoints) // 动画中的总积分
 const floatingItems = ref([]) // 漂浮的积分项
 const floatingItems = ref([]) // 漂浮的积分项
 const isCollecting = ref(false) // 是否正在收集，防止重复触发
 const isCollecting = ref(false) // 是否正在收集，防止重复触发
 
 
+/**
+ * 根据数值长度动态计算字体大小
+ */
+const dynamicFontSize = computed(() => {
+  const pointsStr = animatedTotalPoints.value + '分'
+  const length = pointsStr.length
+
+  // 基础字体大小36rpx，超过6位数开始缩小
+  if (length <= 6) {
+    return '36rpx'
+  } else if (length <= 8) {
+    return '32rpx'
+  } else if (length <= 10) {
+    return '28rpx'
+  } else {
+    return '24rpx'
+  }
+})
+
 // source_type 中英文映射
 // source_type 中英文映射
 const sourceTypeMap = {
 const sourceTypeMap = {
   'WALKING': '步数积分',
   'WALKING': '步数积分',

@@ -4,7 +4,7 @@
     <view class="center-circle1">
     <view class="center-circle1">
       <view class="total-points" @tap="handleGoToRewards">
       <view class="total-points" @tap="handleGoToRewards">
         <text v-if="!isOwner" class="family-points-label">家庭总积分</text>
         <text v-if="!isOwner" class="family-points-label">家庭总积分</text>
-        <text class="points-number">{{ animatedTotalPoints }}分</text>
+        <text class="points-number" :style="{ fontSize: dynamicFontSize }">{{ animatedTotalPoints }}分</text>
         <text v-if="isOwner" class="points-label">去兑换</text>
         <text v-if="isOwner" class="points-label">去兑换</text>
       </view>
       </view>
     </view>
     </view>
@@ -12,7 +12,7 @@
 </template>
 </template>
 
 
 <script setup>
 <script setup>
-import { ref, watch, onMounted, defineProps } from 'vue'
+import { ref, watch, onMounted, defineProps, computed } from 'vue'
 import Taro from '@tarojs/taro'
 import Taro from '@tarojs/taro'
 
 
 // 定义props
 // 定义props
@@ -36,6 +36,25 @@ const props = defineProps({
 const animatedTotalPoints = ref(0)
 const animatedTotalPoints = ref(0)
 
 
 /**
 /**
+ * 根据数值长度动态计算字体大小
+ */
+const dynamicFontSize = computed(() => {
+  const pointsStr = animatedTotalPoints.value + '分'
+  const length = pointsStr.length
+
+  // 基础字体大小36rpx，超过6位数开始缩小
+  if (length <= 6) {
+    return '36rpx'
+  } else if (length <= 8) {
+    return '32rpx'
+  } else if (length <= 10) {
+    return '28rpx'
+  } else {
+    return '24rpx'
+  }
+})
+
+/**
  * 数字滚动动画
  * 数字滚动动画
  * @param {number} start - 动画开始值
  * @param {number} start - 动画开始值
  * @param {number} end - 动画结束值
  * @param {number} end - 动画结束值