数据统计 组件

src/components/install.js

@@ -9,6 +9,7 @@ import overflowtext from '@/components/overflow-text'
 import locationHash from '@/components/LocationHash'
 import selectall from '@/components/select-all'
 import copytext from '@/components/copy-text'
+import statistic from '@/components/statistic'
 import descriptions from '@/components/Descriptions/Descriptions.vue'
 
 export default {
@@ -19,6 +20,7 @@ export default {
     Vue.component(locationHash.name, locationHash)
     Vue.component(selectall.name, selectall)
     Vue.component(copytext.name, copytext)
+    Vue.component(statistic.name, statistic)
     Vue.component(descriptions.name, descriptions)
   }
 }

src/components/statistic/index.vue

@@ -0,0 +1,96 @@
+<template>
+  <el-row class="statistic">
+    <div v-for="(item, index) in tags" :key="index">
+      <el-col :span="(index + 1) % col === 0 ? colSpan : colSpan - 1">
+        <statistic-content :item="item"></statistic-content>
+      </el-col>
+      <el-col :key="index" :span="1" v-if="(index + 1) % col !== 0 && (index + 1) < tags.length">
+        <el-divider direction="vertical"></el-divider>
+      </el-col>
+    </div>
+  </el-row>
+</template>
+<script>
+export default {
+  name: 'statistic',
+  props: {
+    col: {
+      type: Number,
+      default: 4
+    }
+  },
+  components: {
+    // 描述内容子组件渲染
+    'statistic-content': {
+      props: {
+        item: Object
+      },
+      render(h) {
+        console.log(this.item.children)
+        return (
+          <div class="statistic-content">
+            {this.item.children}
+          </div>
+        )
+      }
+    }
+  },
+  computed: {
+    colSpan() {
+      return 24 / this.col
+    },
+  },
+  data() {
+    return {
+      tags: []
+    }
+  },
+  mounted() {
+    this.setTags()
+  },
+  beforeUpdate() {
+    this.setTags()
+  },
+  methods: {
+    setTags() {
+      this.tags = this.$slots.default.filter(item => item.tag === 'statistic-item')
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+  .statistic{
+    padding: 20px 0;
+    text-align: center;
+    /deep/ .el-icon-edit{
+      cursor: pointer;
+      color: #14928A;
+      font-size: 20px;
+    }
+    /deep/ .el-col {
+      display: flex;
+      align-items: center;
+      min-height: 60px;
+      align-items: center;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+    }
+    /deep/ .el-col-1{
+      font-size: 60px;
+    }
+    /deep/ .statistic-content{
+      >span{
+        display: block;
+        line-height: 1.8;
+        color: rgba(0, 0, 0, .85);
+        font-size: 24px;
+        &:first-child{
+          font-size: 14px;
+          font-weight: normal;
+          color: rgba(0, 0, 0, .45);
+        }
+      }
+    }
+  }
+</style>

src/views/studentManager/components/studentOrder.vue

@@ -1,6 +1,65 @@
 <template>
   <div class="studentOrder">
-    <div class="headWrap">
+    <statistic>
+      <statistic-item>
+        <span>账户余额</span>
+        <span>
+          {{ dataInfo.balance | moneyFormat}}
+          <i class="el-icon-edit" v-permission="'userCashAccount/updateBalance'" @click="onMoneyOperation('recharge')"></i>
+        </span>
+      </statistic-item>
+      <statistic-item>
+        <span>课程余额</span>
+        <span>
+          {{ dataInfo.courseBalance | moneyFormat}}
+          <i class="el-icon-edit" v-permission="'userCashAccount/updateCourseBalance'" @click="onMoneyOperation('account')"></i>
+        </span>
+      </statistic-item>
+      <statistic-item>
+        <span>银行卡</span>
+        <span>{{ dataInfo.cardNo || '--' }}</span>
+      </statistic-item>
+      <statistic-item>
+        <el-button @click="onCashAccount"
+                    v-permission="'userCashAccountDetail/queryPage'"
+                    type="primary">交易明细</el-button>
+      </statistic-item>
+    </statistic>
+    <!-- <el-row class="header-items">
+      <el-col :span="5">
+        <span>账户余额</span>
+        <span>
+          {{ dataInfo.balance | moneyFormat}}
+          <i class="el-icon-edit" v-permission="'userCashAccount/updateBalance'" @click="onMoneyOperation('recharge')"></i>
+        </span>
+      </el-col>
+      <el-col :span="1">
+        <el-divider direction="vertical"></el-divider>
+      </el-col>
+      <el-col :span="5">
+        <span>课程余额</span>
+        <span>
+          {{ dataInfo.courseBalance | moneyFormat}}
+          <i class="el-icon-edit" v-permission="'userCashAccount/updateCourseBalance'" @click="onMoneyOperation('account')"></i>
+        </span>
+      </el-col>
+      <el-col :span="1">
+        <el-divider direction="vertical"></el-divider>
+      </el-col>
+      <el-col :span="5">
+        <span>银行卡</span>
+        <span>{{ dataInfo.cardNo || '--' }}</span>
+      </el-col>
+      <el-col :span="1">
+        <el-divider direction="vertical"></el-divider>
+      </el-col>
+      <el-col :span="6" style="text-align: right;">
+        <el-button @click="onCashAccount"
+                    v-permission="'userCashAccountDetail/queryPage'"
+                    type="primary">交易明细</el-button>
+      </el-col>
+    </el-row> -->
+    <!-- <div class="headWrap">
       <div class="left">
         <div class="headItem">
           <p>
@@ -12,24 +71,14 @@
                      @click="onMoneyOperation('recharge')">修改</el-button>
         </div>
         <div class="headItem">
-          <!-- v-if="amountStatus" -->
           <p>
             课程余额:
             <span>{{ dataInfo.courseBalance| moneyFormat }}</span>
           </p>
-          <!-- <p v-else>课程余额:<span>
-              <el-input style="width: 130px;"
-                        v-model.trim="dataInfo.courseBalance"
-                        placeholder="课程余额"></el-input>
-          </span></p>-->
 
           <el-button v-permission="'userCashAccount/updateCourseBalance'"
                      @click="onMoneyOperation('account')"
                      type="text">修改</el-button>
-          <!-- <el-button style="top:0;"
-                     @click="onUpdateCourse"
-                     v-else
-          type="text">保存</el-button>-->
         </div>
         <div class="headItem">
           <p>
@@ -37,17 +86,11 @@
             <span>{{ dataInfo.cardNo }}</span>
           </p>
         </div>
-        <!-- <div class="headItem">
-          <p>支付宝:<span>{{ dataInfo.zfb }}</span></p>
-        </div>
-        <div class="headItem">
-          <p>微信:<span>{{ dataInfo.wxBalance }}</span></p>
-        </div>-->
       </div>
       <el-button @click="onCashAccount"
                  v-permission="'userCashAccountDetail/queryPage'"
                  type="primary">交易明细</el-button>
-    </div>
+    </div> -->
     <!-- 搜索类型 -->
     <el-form :inline="true"
              class="searchForm"
@@ -655,6 +698,38 @@ export default {
     right: 20px;
   }
 }
+.header-items{
+  padding: 20px 0;
+  text-align: center;
+  /deep/ .el-icon-edit{
+    cursor: pointer;
+    color: #14928A;
+    font-size: 20px;
+  }
+  /deep/ .el-col {
+    display: flex;
+    align-items: center;
+    min-height: 60px;
+    align-items: center;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
+  /deep/ .el-col-1{
+    font-size: 60px;
+  }
+  span{
+    display: block;
+    line-height: 1.8;
+    color: rgba(0, 0, 0, .85);
+    font-size: 24px;
+    &:first-child{
+      font-size: 14px;
+      font-weight: normal;
+      color: rgba(0, 0, 0, .45);
+    }
+  }
+}
 /deep/.el-table .cell {
   display: -webkit-box;
   overflow: hidden;
@@ -665,4 +740,4 @@ export default {
 
 // .studentOrder {
 // }
-</style>
+</style>

src/views/teamDetail/components/studentList.vue

@@ -1,28 +1,20 @@
 <template>
   <div class="stu-container">
     <!-- 头部展示 -->
-    <div class="headWrap">
-      <div class="left">
-        <div class="headItem">
-          <p>
-            在读人数:
-            <span>{{studentListInfo.studying}}</span>
-          </p>
-        </div>
-        <div class="headItem">
-          <p>
-            退团人数:
-            <span>{{studentListInfo.quit}}</span>
-          </p>
-        </div>
-        <div class="headItem">
-          <p>
-            新增人数:
-            <span>{{studentListInfo.add}}</span>
-          </p>
-        </div>
-      </div>
-      <div class="right">
+    <statistic>
+      <statistic-item>
+        <span>在读人数</span>
+        <span>{{studentListInfo.studying}}</span>
+      </statistic-item>
+      <statistic-item>
+        <span>退团人数</span>
+        <span>{{studentListInfo.quit}}</span>
+      </statistic-item>
+      <statistic-item>
+        <span>新增人数</span>
+        <span>{{studentListInfo.add}}</span>
+      </statistic-item>
+      <statistic-item>
         <div class="newStudent"
              style="margin-bottom:10px;"
              v-permission="'studentRegistration/insertStudent'"
@@ -34,8 +26,8 @@
         <div class="newStudent"
              v-permission="'/studentSignin'"
              @click="gotoSignin">点名总览</div>
-      </div>
-    </div>
+      </statistic-item>
+    </statistic>
 
     <!-- 搜索类型 -->
     <el-form :inline="true"

src/views/vipClass/vipDetail/components/fnanceInfo.vue

@@ -1,7 +1,33 @@
 <template>
   <div class>
     <!-- 头部展示 -->
-    <div class="headWrap">
+    <statistic :col="3">
+      <statistic-item>
+        <span>课程总价</span>
+        <span>{{ totalPrice | moneyFormat }}</span>
+      </statistic-item>
+      <statistic-item>
+        <span>实收笔数</span>
+        <span>{{ feeDeductionNum }}</span>
+      </statistic-item>
+      <statistic-item>
+        <span>线上课课酬</span>
+        <span>{{ onlineClassesUnitPrice | moneyFormat }}</span>
+      </statistic-item>
+      <statistic-item>
+        <span>课酬总额</span>
+        <span>{{ totalSalary | moneyFormat }}</span>
+      </statistic-item>
+      <statistic-item>
+        <span>实收总额</span>
+        <span>{{ totalFeeDeduction | moneyFormat }}</span>
+      </statistic-item>
+      <statistic-item>
+        <span>线下课课酬</span>
+        <span>{{ offlineClassesUnitPrice | moneyFormat }}</span>
+      </statistic-item>
+    </statistic>
+    <!-- <div class="headWrap">
       <div class="left">
         <div class="headItem">
           <p>
@@ -40,7 +66,7 @@
           </p>
         </div>
       </div>
-    </div>
+    </div> -->
     <!-- 搜索栏 -->
     <el-form :inline="true"
              :model="searchForm">
@@ -207,4 +233,4 @@ export default {
 };
 </script>
 <style lang="scss" scope>
-</style>
+</style>

src/views/vipClass/vipDetail/components/teacherRecord.vue

@@ -1,7 +1,25 @@
 <template >
   <div>
     <!-- 头部展示 -->
-    <div class="headWrap">
+    <statistic>
+      <statistic-item>
+        <span>未上课时</span>
+        <span>{{ totalClassTimes }}</span>
+      </statistic-item>
+      <statistic-item>
+        <span>已上课时</span>
+        <span>{{ currentClassTimes }}</span>
+      </statistic-item>
+      <statistic-item>
+        <span>已结算</span>
+        <span>{{ isSalaryNum }}</span>
+      </statistic-item>
+      <statistic-item>
+        <span>被投诉</span>
+        <span>{{ complaintsNum }}</span>
+      </statistic-item>
+    </statistic>
+    <!-- <div class="headWrap">
       <div class="left">
         <div class="headItem">
           <p>未上课时:<span>{{ totalClassTimes }}</span></p>
@@ -18,7 +36,7 @@
       </div>
       <div class="right">
       </div>
-    </div>
+    </div> -->
     <!-- 搜索标题 -->
     <el-form :inline="true"
              label-position="right"
@@ -582,4 +600,4 @@ export default {
 }
 </script>
 <style lang="scss" scope>
-</style>
+</style>