添加数据统计页面

src/views/student-register/tenant-apply-data/index.module.less

@@ -4,6 +4,7 @@
   --van-tabs-bottom-bar-width: 64px;
   --van-tab-font-size: 16px;
 
+  --van-tab-line-height: 50px;
 
   :global {
     .van-tabs__line {
@@ -22,7 +23,9 @@
 .searchSchool {
   margin: 0 13px 12px;
   width: auto;
-  padding: 10px 12px;
+  padding: 0px 12px;
+  height: 40px;
+  line-height: 40px;
   border-radius: 10px;
   font-size: 15px;
   font-weight: 500;
@@ -31,6 +34,9 @@
     .van-cell__right-icon {
       color: #333;
       font-size: 16px;
+      height: 100%;
+      display: flex;
+      align-items: center;
     }
   }
 }
@@ -38,7 +44,6 @@
 .statisticsGroup {
   margin: 0 13px 15px;
 
-
   .item {
     display: flex;
     justify-content: center;
@@ -50,6 +55,7 @@
     margin-bottom: 14px;
     padding-left: 10px;
 
+
     .price {
       font-size: 24px;
       font-family: DINAlternate-Bold, DINAlternate;
@@ -106,11 +112,24 @@
   }
 }
 
+.refreshC {
+  min-height: calc(100vh - 40px - 24px - 50px);
+}
+
+.emptyC {
+  padding-bottom: 0;
+  min-height: calc(100vh - 40px - 24px - 50px);
+}
+
 .buyList {
-  background: #FFFFFF;
-  border-radius: 10px;
   margin: 0 13px 12px;
-  overflow: hidden;
+
+  .buyItem {
+    margin-bottom: 12px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    overflow: hidden;
+  }
 
   .buyHeader {
     display: flex;

src/views/student-register/tenant-apply-data/index.tsx

@@ -1,6 +1,16 @@
 import { defineComponent, onMounted, reactive, ref } from 'vue';
 import styles from './index.module.less';
-import { Cell, CellGroup, Col, Picker, Popup, Row, Tab, Tabs } from 'vant';
+import {
+  Cell,
+  CellGroup,
+  Col,
+  List,
+  Picker,
+  Popup,
+  Row,
+  Tab,
+  Tabs
+} from 'vant';
 import MSticky from '@/components/m-sticky';
 import icon1 from './images/icon1.png';
 import icon2 from './images/icon2.png';
@@ -9,20 +19,35 @@ import icon4 from './images/icon4.png';
 import iconTimer from './images/icon-timer.png';
 import request from '@/helpers/request';
 import { useRoute } from 'vue-router';
+import { moneyFormat, numberFormat } from '@/helpers/utils';
+import OFullRefresh from '@/components/m-full-refresh';
+import OEmpty from '@/components/m-empty';
 
 export default defineComponent({
   name: 'tenant-apply-data',
   setup() {
     const route = useRoute();
-    const tabName = ref('all');
+    const tabName = ref('detail');
     const forms = reactive({
       id: route.query.id,
       classStatus: false,
+      schoolId: null,
       classList: [] as any,
+      statObj: {} as any,
       classStatus1: false,
-      classList1: [] as any
+      schoolId1: null,
+      classList1: [] as any,
+      page: 1,
+      rows: 20,
+      isClick: false
     });
 
+    const refreshing = ref(false);
+    const loading = ref(true);
+    const finished = ref(false);
+    const showContact = ref(false);
+    const list = ref([]);
+
     const getSchoolList = async () => {
       try {
         const { data } = await request.get('/edu-app/open/school/list', {
@@ -53,14 +78,70 @@ export default defineComponent({
 
     const getStat = async () => {
       try {
-        // open/school/registerStat
+        const { data } = await request.post(
+          '/edu-app/open/school/registerStat',
+          {
+            data: {
+              tenantId: forms.id,
+              schoolId: forms.schoolId
+            }
+          }
+        );
+        forms.statObj = data;
       } catch {
         //
       }
     };
 
+    const getOrderPage = async () => {
+      if (forms.isClick) {
+        return;
+      }
+      forms.isClick = true;
+      if (refreshing.value) {
+        list.value = [];
+        forms.page = 1;
+        refreshing.value = false;
+      }
+      try {
+        const res = await request.post('/edu-app/open/school/orderPage', {
+          data: {
+            tenantId: forms.id,
+            schoolId: forms.schoolId,
+            page: forms.page,
+            rows: forms.rows
+          }
+        });
+
+        if (list.value.length > 0 && res.data.current === 1) {
+          return;
+        }
+
+        list.value = list.value.concat(res.data.rows || []);
+        forms.page = res.data.current + 1;
+        showContact.value = list.value.length > 0;
+        loading.value = false;
+        finished.value = res.data.current >= res.data.pages;
+      } catch {
+        showContact.value = false;
+        finished.value = true;
+      } finally {
+        loading.value = false;
+      }
+      forms.isClick = false;
+    };
+    const onRefresh = () => {
+      finished.value = false;
+      // 重新加载数据
+      // 将 loading 设置为 true，表示处于加载状态
+      loading.value = true;
+      getOrderPage();
+    };
+
     onMounted(async () => {
       await getSchoolList();
+      await getStat();
+      await getOrderPage();
     });
     return () => (
       <div class={styles.tenantApplyData}>
@@ -77,7 +158,9 @@ export default defineComponent({
               <Row gutter={12}>
                 <Col span={12}>
                   <div class={[styles.item, styles.item1]}>
-                    <p class={styles.price}>1,200,000.00</p>
+                    <p class={styles.price}>
+                      {moneyFormat(forms.statObj.totalAmount)}
+                    </p>
                     <p class={styles.text}>
                       <img src={icon4} class={styles.icon} />
                       缴费总金额
@@ -86,7 +169,9 @@ export default defineComponent({
                 </Col>
                 <Col span={12}>
                   <div class={[styles.item, styles.item1]}>
-                    <p class={styles.price}>1,200,000.00</p>
+                    <p class={styles.price}>
+                      {numberFormat(forms.statObj.totalNum)}
+                    </p>
                     <p class={styles.text}>
                       <img src={icon1} class={styles.icon} />
                       缴费总人数
@@ -95,7 +180,9 @@ export default defineComponent({
                 </Col>
                 <Col span={12}>
                   <div class={[styles.item, styles.item3]}>
-                    <p class={styles.price}>1,200,000.00</p>
+                    <p class={styles.price}>
+                      {moneyFormat(forms.statObj.instrumentAmount)}
+                    </p>
                     <p class={styles.text}>
                       <img src={icon4} class={styles.icon} />
                       乐器缴费金额
@@ -104,7 +191,9 @@ export default defineComponent({
                 </Col>
                 <Col span={12}>
                   <div class={[styles.item, styles.item3]}>
-                    <p class={styles.price}>1,200,000.00</p>
+                    <p class={styles.price}>
+                      {numberFormat(forms.statObj.instrumentNum)}
+                    </p>
                     <p class={styles.text}>
                       <img src={icon2} class={styles.icon} />
                       乐器购买人数
@@ -113,7 +202,9 @@ export default defineComponent({
                 </Col>
                 <Col span={12}>
                   <div class={[styles.item, styles.item4]}>
-                    <p class={styles.price}>1,200,000.00</p>
+                    <p class={styles.price}>
+                      {moneyFormat(forms.statObj.vipAmount)}
+                    </p>
                     <p class={styles.text}>
                       <img src={icon4} class={styles.icon} />
                       学练工具缴费金额
@@ -122,7 +213,9 @@ export default defineComponent({
                 </Col>
                 <Col span={12}>
                   <div class={[styles.item, styles.item4]}>
-                    <p class={styles.price}>1,200,000.00</p>
+                    <p class={styles.price}>
+                      {numberFormat(forms.statObj.vipNum)}
+                    </p>
                     <p class={styles.text}>
                       <img src={icon3} class={styles.icon} />
                       学练工具购买人数
@@ -140,38 +233,63 @@ export default defineComponent({
               arrowDirection="down"
               onClick={() => (forms.classStatus1 = true)}></Cell>
             <div class={styles.buyList}>
-              <CellGroup class={styles.buyItem}>
-                <Cell>
-                  {{
-                    title: () => (
-                      <div class={styles.buyHeader}>
-                        <span class={styles.buyTimer}>
-                          <img src={iconTimer} class={styles.iconTimer} />
-                          2023/03/29 12:20:34
-                        </span>
-                        <span class={styles.buyPrice}>
-                          <i>¥</i> 310.00
-                        </span>
-                      </div>
-                    )
-                  }}
-                </Cell>
-                <Cell>
-                  {{
-                    title: () => (
-                      <div class={styles.contact}>
-                        <span class={styles.b}>张丹丹</span>
-                        <span class={styles.b}>武昌区武珞路第二小学</span>
-                      </div>
-                    ),
-                    label: () => (
-                      <div class={styles.buyContent}>
-                        <span>购买内容</span>竖笛、乐器AI学练工具
-                      </div>
-                    )
-                  }}
-                </Cell>
-              </CellGroup>
+              {showContact.value ? (
+                <OFullRefresh
+                  v-model:modelValue={refreshing.value}
+                  onRefresh={onRefresh}
+                  class={styles.refreshC}>
+                  <List
+                    loading-text=" "
+                    finished={finished.value}
+                    finished-text=" "
+                    onLoad={getOrderPage}>
+                    {list.value.map((item: any) => (
+                      <CellGroup class={styles.buyItem}>
+                        <Cell>
+                          {{
+                            title: () => (
+                              <div class={styles.buyHeader}>
+                                <span class={styles.buyTimer}>
+                                  <img
+                                    src={iconTimer}
+                                    class={styles.iconTimer}
+                                  />
+                                  {item.payTime}
+                                </span>
+                                <span class={styles.buyPrice}>
+                                  <i>¥</i> {moneyFormat(item.paymentCashAmount)}
+                                </span>
+                              </div>
+                            )
+                          }}
+                        </Cell>
+                        <Cell>
+                          {{
+                            title: () => (
+                              <div class={styles.contact}>
+                                <span class={styles.b}>{item.userName}</span>
+                                <span class={styles.b}>{item.schoolName}</span>
+                              </div>
+                            ),
+                            label: () => (
+                              <div class={styles.buyContent}>
+                                <span>购买内容</span>
+                                {item.goodsName}
+                              </div>
+                            )
+                          }}
+                        </Cell>
+                      </CellGroup>
+                    ))}
+                  </List>
+                </OFullRefresh>
+              ) : (
+                ''
+              )}
+
+              {showContact.value && loading.value && (
+                <OEmpty description="暂无购买详情" class={styles.emptyC} />
+              )}
             </div>
           </Tab>
         </Tabs>
@@ -186,7 +304,10 @@ export default defineComponent({
             columns={forms.classList}
             onCancel={() => (forms.classStatus = false)}
             onConfirm={(val: any) => {
-              // const selectedOption = val.selectedOptions[0];
+              const selectedOption = val.selectedOptions[0];
+              forms.schoolId = selectedOption.value;
+              getStat();
+              forms.classStatus = false;
             }}
           />
         </Popup>