Merge branch 'lx-online' of gitee.com:cabbage_qd/web-base-h5 into bd-dev

pages/mine/index.vue

@@ -57,7 +57,21 @@
       </view>
     </view>
    
+              
     <view class="ju_grade" v-if="!ifSpecial">
+      <view v-if="awards.tarAwardsName" class="awards-progress-summary"  style="text-align: center;">
+        <span class="descriptive-text">当前距离</span>
+        <span class="highlight-name">
+          {{ awards.tarAwardsName }}
+        </span>
+        <span class="descriptive-text">奖衔,小区仅需</span>
+        <span class="highlight-pv">
+          {{
+            
+            sprintProgress.achieved
+          }}</span>
+      </view>
+      
       <view class="jugrade_flex">
         <view class="ju_left">
           <view class="yestDay">
@@ -103,6 +117,18 @@
               >
             </view>
           </view>
+          <view v-if="awards.tarAwardsName" class="yestDay">
+            <view class="yes_t">奖衔冲刺</view>
+            <view class="ju_left_bottom sprint-progress-container">
+              <view 
+                class="sprint-current-progress" 
+                :style="{ width: sprintProgress.percentageString }"
+              ></view>
+              <view class="cha sprint-progress-text">
+                已完成 {{ awards.sumRealPv }} / 目标 {{ sprintProgress.target }}
+              </view>
+            </view>
+          </view>
         </view>
       </view>
     </view>
@@ -147,6 +173,7 @@
             class="theorderflex1"
             @click="goTo(item.url)"
             v-if="item.ifshow"
+            :key="index"
           >
             <image class="order_img" :src="item.imgurl" />
             <view class="order_text">{{ item.name }}</view>
@@ -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;
+}
 </style>