进度计算

pages/user/award.vue

@@ -19,9 +19,9 @@
           </view>
           <view class="award-progress">
             <view class="award-progress-bar"></view>
-            <view class="award-progress-value" :style="{width: (checked/route_count)*100+'%'}"></view>
+            <view class="award-progress-value" :style="{width: getProcess()}"></view>
             <view class="award-progress-point-list">
-              <view v-for="(item,index) in giftList" :key="item.id"
+              <view v-for="(item,index) in giftList" :style="{left:((index+1)/giftList.length)*90+'%'}" :key="item.id"
                     :class="['award-progress-point-item',checked>=item.route_count?'active':'']">
                 <view class="point"></view>
                 <text>已满{{ item.route_count }}条</text>
@@ -172,9 +172,29 @@ export default {
     clearTimeout(this.timer)
   },
   methods: {
+	  getProcess(){
+		  let subList = []
+		  for (var i = this.giftList.length-1; i > 0; i--) {
+		  	subList.unshift(this.giftList[i].route_count - this.giftList[i-1].route_count)
+		  }
+		  subList.unshift(this.giftList[0].route_count)
+		  
+		  let process = 0
+		  let count = this.checked
+		  let per_process = 100/this.giftList.length
+		  subList.forEach(item => {
+		  	if(count>=item){
+				count -= item
+				process += per_process
+			}else{
+				process += per_process*(count/item)
+				count = 0
+			}
+		  })
+		  return process+'%'
+	  },
     getRouteListInfo() {
       getRouteList().then(res => {
-        console.log(res)
         this.is_receipts = res.data.is_receipts
       })
     },
@@ -186,11 +206,13 @@ export default {
     },
     getGiftList() {
       giftList().then(res => {
+		  console.log(res)
         this.giftList = res.data;
       })
     },
     getCheckinCount() {
       checkInCount().then(res => {
+		  console.log(res)
         this.routes = res.data.routes
         this.route_count = res.data.route_count
         this.checked = res.data.route_checkin_count
@@ -641,7 +663,7 @@ export default {
         position: absolute;
         height: 9rpx;
         border-radius: 100rpx;
-        width: 60%;
+        width: 0%;
         transition: width 1s ease-in-out;
         background-color: #E57519;
       }
@@ -658,9 +680,11 @@ export default {
           flex-direction: column;
           align-items: center;
           top: -12rpx;
+		  transform: translateX(-50%);
 
           & > text {
             margin-top: 12rpx;
+			white-space: nowrap;
             font-size: $fontSize1;
           }
 
@@ -696,22 +720,6 @@ export default {
               }
             }
           }
-
-          &:nth-child(1) {
-            left: 6.67%;
-          }
-
-          &:nth-child(2) {
-            left: 31.7%;
-          }
-
-          &:nth-child(3) {
-            left: 60%;
-          }
-
-          &:nth-child(4) {
-            left: 82%;
-          }
         }
       }
     }