页面修改

src/components/work/bonus.vue

@@ -47,15 +47,17 @@
             <VueApexCharts width="105" height="105" :options="chartOptions4" :series="series4"></VueApexCharts>
           </div>
         </div>
+        <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>/0</div>
+              <div class="progress"> <span class="cur">{{dataList.GuestNum}}</span>/{{dataList.EndNum}}</div>
               <div class="progress-charts">
                 <div>
                   {{dataList.NextGoal}}
                 </div>
-              <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">
@@ -76,7 +78,8 @@
                     距1档还差{{1-dataList.OrderCount}}个
                   </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.OrderCount,1)" color="warning"
+                  style="width:90px" />
               </div>
               <div class="grade">1挡</div>
               <div class="num">
@@ -97,7 +100,8 @@
                     距1档还差{{5-dataList.ClueCount}}个
                   </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.ClueCount,5)" color="warning"
+                  style="width:90px" />
               </div>
               <div class="grade">1挡</div>
               <div class="num">
@@ -105,6 +109,32 @@
               </div>
             </div>
           </div>
+        </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="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>
+        </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) {