diff --git a/pages/mine/index.vue b/pages/mine/index.vue index 13204da..016524c 100644 --- a/pages/mine/index.vue +++ b/pages/mine/index.vue @@ -57,7 +57,21 @@ + + + 当前距离 + + {{ awards.tarAwardsName }} + + 奖衔,小区仅需 + + {{ + + sprintProgress.achieved + }} + + @@ -103,6 +117,18 @@ > + + 奖衔冲刺 + + + + 已完成 {{ awards.sumRealPv }} / 目标 {{ sprintProgress.target }} + + + @@ -147,6 +173,7 @@ class="theorderflex1" @click="goTo(item.url)" v-if="item.ifshow" + :key="index" > {{ item.name }} @@ -445,6 +472,43 @@ export default { this.getUserAwardss(); }, + computed: { + sprintProgress() { + const targetPvStr = this.awards.targetPv; + const sumRealPvStr = this.awards.sumRealPv; // 这是"小区仅需"的量,即差距 + + const targetPv = parseFloat(targetPvStr); + const sumRealPv = parseFloat(sumRealPvStr); + + let achievedPv = 0; + let percentage = 0; + const numericTargetPv = Math.floor((isNaN(targetPv) ? 0 : targetPv) * 100) / 100; + + if (!isNaN(targetPv) && targetPv > 0) { + // sumRealPv 是差距,所以已完成的是 targetPv - sumRealPv + achievedPv = targetPv - (isNaN(sumRealPv) ? 0 : sumRealPv); + + achievedPv = Math.max(0, Math.min(achievedPv, targetPv)); + + percentage = (sumRealPvStr / targetPv) * 100; + } else if (!isNaN(targetPv) && targetPv === 0 && !isNaN(sumRealPv) && sumRealPv <=0) { + // 如果目标是0,且差距也是0或负数(表示已满足或超越0目标),则认为是100% + achievedPv = 0; + percentage = 100; + } + + + const clampedPercentage = Math.min(100, Math.max(0, percentage)); + + return { + percentageString: `${Math.floor(clampedPercentage)}%`, + achieved: (Math.floor(achievedPv * 100) / 100).toFixed(2), + target: numericTargetPv.toFixed(2), + rawPercentage: clampedPercentage + }; + } + }, + methods: { goYear(){ uni.navigateTo({ @@ -746,6 +810,27 @@ export default { background: #ffffff; font-size: 24rpx; + .descriptive-text { + font-size: 22rpx; + color: #666666; + margin-right: 8rpx; + } + + .highlight-name { + font-size: 30rpx; /* 示例字号,您可以根据需要调整 */ + font-weight: bold; + color: #005BAC; /* 示例颜色,您可以根据需要调整 */ + padding: 0 8rpx; /* 增加一些内边距,使其更突出 */ + margin-right: 10rpx; /* 在名称和下一个标签之间添加间距 */ + } + + .highlight-pv { + font-size: 30rpx; /* 示例字号,您可以根据需要调整 */ + font-weight: bold; + color: #FF5722; /* 示例颜色,您可以根据需要调整 */ + padding: 0 8rpx; /* 增加一些内边距,使其更突出 */ + } + .ju_title { font-family: Source Han Sans CN; font-weight: bold; @@ -1188,4 +1273,64 @@ export default { margin-top: 30rpx; padding: 20rpx 22rpx 150rpx 22rpx; } + +.sprint-progress-container { + flex: 1; + height: 34rpx; + background: #eeeeee; + border-radius: 20rpx; + margin: 10rpx; + position: relative; + overflow: hidden; +} + +.sprint-current-progress { + position: absolute; + left: 0; + top: 0; + height: 100%; + border-radius: 20rpx; + background: linear-gradient(135deg, #ED9A38 0%, #FDD05F 50%, #E68A2E 100%); + transition: width 0.6s ease-in-out; + box-shadow: none; + overflow: hidden; +} + +.sprint-current-progress::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient( + 100deg, + rgba(255, 255, 255, 0) 20%, + rgba(255, 255, 255, 0.4) 50%, + rgba(255, 255, 255, 0) 80% + ); + transform: translateX(-100%); + animation: premium_shimmer_animation 2.5s infinite linear; +} + +@keyframes premium_shimmer_animation { + 0% { + transform: translateX(-100%); + } + 100% { + transform: translateX(100%); + } +} + +.sprint-progress-text { + width: 100%; + position: absolute; + top: 60%; + left: 0; + transform: translate(0%, -55%); + white-space: nowrap; + text-align: center; + font-size: 24rpx; + color: #333333; +}