hookehuyr

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

为积分显示组件添加根据数字长度自动调整字体大小的功能,确保长数字的可读性
......@@ -4,7 +4,7 @@
<view class="center-circle">
<view class="total-points" @tap="handleGoToRewards">
<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>
</view>
</view>
......@@ -35,7 +35,7 @@
</template>
<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 { collectPointAPI } from '@/api/points'
......@@ -68,6 +68,25 @@ const animatedTotalPoints = ref(props.totalPoints) // 动画中的总积分
const floatingItems = ref([]) // 漂浮的积分项
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 中英文映射
const sourceTypeMap = {
'WALKING': '步数积分',
......
......@@ -4,7 +4,7 @@
<view class="center-circle1">
<view class="total-points" @tap="handleGoToRewards">
<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>
</view>
</view>
......@@ -12,7 +12,7 @@
</template>
<script setup>
import { ref, watch, onMounted, defineProps } from 'vue'
import { ref, watch, onMounted, defineProps, computed } from 'vue'
import Taro from '@tarojs/taro'
// 定义props
......@@ -36,6 +36,25 @@ const props = defineProps({
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} end - 动画结束值
......