页面修改

src/components/work/bonus.vue

@@ -47,64 +47,94 @@
             <VueApexCharts width="105" height="105" :options="chartOptions4" :series="series4"></VueApexCharts>
           </div>
         </div>
-        <div class="list-box">
-          <div class="list flex no-wrap items-center">
-            <div class="name">名单人数</div>
-            <div class="progress"> <span class="cur">{{dataList.GuestNum}}</span>/0</div>
-            <div class="progress-charts">
-              <div>
-                {{dataList.NextGoal}}
-              </div>
-              <q-linear-progress rounded size="6px" :value="0.8" color="warning" style="width:90px" />
-            </div>
-            <div class="grade">{{dataList.CurrentStep}}挡</div>
-            <div class="num">
-              +¥{{dataList.CurRewardMoney}}
-            </div>
-          </div>
-          <div class="list flex no-wrap items-center">
-            <div class="name">开单奖励</div>
-            <div class="progress"> <span class="cur">{{dataList.OrderCount}}</span>/1</div>
-            <div class="progress-charts">
-              <template v-if="dataList.OrderCount-1>=0">
-                <div>
-                  已完成开单奖励
-                </div>
-              </template>
-              <template v-else>
+        <template v-if="tab==1">
+          <div class="list-box">
+            <div class="list flex no-wrap items-center">
+              <div class="name">名单人数</div>
+              <div class="progress"> <span class="cur">{{dataList.GuestNum}}</span>/{{dataList.EndNum}}</div>
+              <div class="progress-charts">
                 <div>
-                  距1档还差{{1-dataList.OrderCount}}个
+                  {{dataList.NextGoal}}
                 </div>
-              </template>
-              <q-linear-progress rounded size="6px" :value="0.8" color="warning" style="width:90px" />
+                <q-linear-progress rounded size="6px" :value="calcpercentage(dataList.GuestNum,dataList.EndNum)"
+                  color="warning" style="width:90px" />
+              </div>
+              <div class="grade">{{dataList.CurrentStep}}挡</div>
+              <div class="num">
+                +¥{{dataList.CurRewardMoney}}
+              </div>
+            </div>
+            <div class="list flex no-wrap items-center">
+              <div class="name">开单奖励</div>
+              <div class="progress"> <span class="cur">{{dataList.OrderCount}}</span>/1</div>
+              <div class="progress-charts">
+                <template v-if="dataList.OrderCount-1>=0">
+                  <div>
+                    已完成开单奖励
+                  </div>
+                </template>
+                <template v-else>
+                  <div>
+                    距1档还差{{1-dataList.OrderCount}}个
+                  </div>
+                </template>
+                <q-linear-progress rounded size="6px" :value="calcpercentage(dataList.OrderCount,1)" color="warning"
+                  style="width:90px" />
+              </div>
+              <div class="grade">1挡</div>
+              <div class="num">
+                +¥{{dataList.OpenBonus}}
+              </div>
             </div>
-            <div class="grade">1挡</div>
-            <div class="num">
-              +¥{{dataList.OpenBonus}}
+            <div class="list flex no-wrap items-center">
+              <div class="name">线索奖励</div>
+              <div class="progress"> <span class="cur">{{dataList.ClueCount}}</span>/5</div>
+              <div class="progress-charts">
+                <template v-if="dataList.ClueCount-5>=0">
+                  <div>
+                    已完成线索奖励
+                  </div>
+                </template>
+                <template v-else>
+                  <div>
+                    距1档还差{{5-dataList.ClueCount}}个
+                  </div>
+                </template>
+                <q-linear-progress rounded size="6px" :value="calcpercentage(dataList.ClueCount,5)" color="warning"
+                  style="width:90px" />
+              </div>
+              <div class="grade">1挡</div>
+              <div class="num">
+                +¥{{dataList.ClueNumSalary}}
+              </div>
             </div>
           </div>
-          <div class="list flex no-wrap items-center">
-            <div class="name">线索奖励</div>
-            <div class="progress"> <span class="cur">{{dataList.ClueCount}}</span>/5</div>
-            <div class="progress-charts">
-              <template v-if="dataList.ClueCount-5>=0">
-                <div>
-                  已完成线索奖励
-                </div>
-              </template>
-              <template v-else>
-                <div>
-                  距1档还差{{5-dataList.ClueCount}}个
-                </div>
-              </template>
-              <q-linear-progress rounded size="6px" :value="0.8" color="warning" style="width:90px" />
+        </template>
+        <template v-if="tab==2">
+          <div class="list-box">
+            <div class="list flex no-wrap items-center">
+              <div class="name">总名单人数</div>
+              <div class="progress"> <span class="cur">{{dataList.GuestNum}}</span></div>
+              <div class="num">
+                +¥{{dataList.CurRewardMoney}}
+              </div>
             </div>
-            <div class="grade">1挡</div>
-            <div class="num">
-              +¥{{dataList.ClueNumSalary}}
+            <div class="list flex no-wrap items-center">
+              <div class="name">总开单奖励</div>
+              <div class="progress"><span class="cur">{{dataList.OrderCount}}</span></div>
+              <div class="num">
+                +¥{{dataList.OpenBonus}}
+              </div>
+            </div>
+            <div class="list flex no-wrap items-center">
+              <div class="name">总线索奖励</div>
+              <div class="progress"> <span class="cur">{{dataList.ClueCount}}</span></div>
+              <div class="num">
+                +¥{{dataList.ClueNumSalary}}
+              </div>
             </div>
           </div>
-        </div>
+        </template>
       </div>
     </q-card>
   </div>
@@ -158,8 +188,14 @@
     },
     mounted() {
       this.getList();
+
     },
     methods: {
+      //计算百分比
+      calcpercentage(startNum, totalNum) {
+        var percent = Number(startNum) / Number(totalNum);
+        return percent.toFixed(2);
+      },
       //点击切换
       checkTab(type) {
         if (type == 1) {