Merge branch '03/18VipActive'

src/views/teacher/order.vue

@@ -6,7 +6,7 @@
             </van-dropdown-menu>
         </header>
         <h2>{{musicGroupName}}</h2>
-        <van-tabs>
+        <van-tabs color="#14928a">
             <van-tab title="缴费信息">
                 <div class="table">
                     <div class="title">
@@ -64,6 +64,16 @@
                     @select="adjustSelect" />
             </van-tab>
             <van-tab title="数据统计">
+                <van-cell class="countInfo" title="报名总人数" :value="config.regNum + '人'"></van-cell>
+                <van-cell class="countInfo" title="缴费总人数" :value="config.payNum + '人'"></van-cell>
+                <van-cell class="countInfo" title="家长会当日缴费人数" :value="config.firstDayPayNum + '人'"></van-cell>
+                <van-cell class="countInfo" :value="config.payScale + '%'">
+                    <template #title>
+                        <div style="display: flex;align-items: center;">家长会当日缴费人数占比
+                            <van-icon name="question-o" @click="onTip" style="padding-left: .05rem;" />
+                        </div>
+                    </template>
+                </van-cell>
                 <div style="width: 100%;overflow-x: auto;">
                     <div class="table" style="width: 145%;">
                         <van-row style="border: 1px solid #eaeaea">
@@ -112,7 +122,6 @@
 <script>
 import { queryStudentApply, querySubByMusicGroupId, getRegisterOrPreList, updateSubject } from '@/api/teacher'
 import setLoading from '@/utils/loading'
-import moment from 'moment'
 import cleanDeep from 'clean-deep'
 export default {
     name: 'order',
@@ -134,6 +143,12 @@ export default {
             changeStudent: null, // 修改的学生对象
             orderByPerRegister: null, // 预报名时间排序状态
             orderByPayTime: null, // 缴费时间排序状态
+            config: {
+                regNum: 0,
+                firstDayPayNum: 0,
+                payScale: 0,
+                payNum: 0
+            }
         }
     },
     async mounted() {
@@ -232,7 +247,15 @@ export default {
             })).then(res => {
                 let result = res.data
                 if(result.code == 200) {
-                    this.countList = result.data.rows
+                    let tempDate = result.data
+                    let scale = ((tempDate.firstDayPayNum / tempDate.payNum) * 100).toFixed(2)
+                    this.config = {
+                        regNum: tempDate.regNum,
+                        firstDayPayNum: tempDate.firstDayPayNum,
+                        payScale: scale,
+                        payNum: tempDate.payNum
+                    }
+                    this.countList = tempDate.rows
                 }
             })
             setLoading(false)
@@ -244,6 +267,14 @@ export default {
             this.getOrderStudentList(this.voicyPart)
             this.getRegisterOrPreList(this.voicyPart)
         },
+        onTip() {
+            this.$dialog.alert({
+                message: '家长会当日缴费人数 / 缴费总人数',
+            }).then(() => {
+            // on close
+            });
+
+        },
         async onChangeSort(sort) {
             if(sort == 1) {
                 this.orderByPayTime = null
@@ -266,21 +297,6 @@ export default {
             }
             await this.getRegisterOrPreList()
         }
-    },
-    filters: {
-        formatterTimes(second){
-            if (second < 60) {
-                return second + "秒";
-            } else if (60 < second && second < 3600) {
-                return moment(second * 1000).format("m分钟");
-            } else if (3600 < second && second < 86400) {
-                return moment(second * 1000).format("HH小时mm分钟");
-            } else if (second > 86400) {
-                return moment(second * 1000).format("DD天HH小时mm分钟");
-            } else {
-                return "--";
-            }
-        }
     }
 }
 </script>
@@ -385,4 +401,13 @@ h2 {
         border-top-color: #14928a;
     }
 }
+
+.countInfo {
+    /deep/.van-cell__title {
+        flex: 1 auto;
+    }
+    /deep/.van-cell__value {
+        color: #14928a;
+    }
+}
 </style>