添加统计

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

@@ -1,5 +1,26 @@
+.tenantApplyData {
+  --van-tabs-nav-background: transparent !important;
+  --van-tabs-bottom-bar-height: 6px;
+  --van-tabs-bottom-bar-width: 64px;
+  --van-tab-font-size: 16px;
+
+
+  :global {
+    .van-tabs__line {
+      background: linear-gradient(270deg, rgba(119, 255, 239, 0.59) 0%, #42CDFF 100%);
+      border-radius: 0;
+      bottom: 26px;
+    }
+
+    .van-tab--active {
+      position: relative;
+      z-index: 9;
+    }
+  }
+}
+
 .searchSchool {
-  margin: 12px 13px;
+  margin: 0 13px 12px;
   width: auto;
   padding: 10px 12px;
   border-radius: 10px;
@@ -22,31 +43,32 @@
     display: flex;
     justify-content: center;
     flex-direction: column;
-    height: 68px;
+    height: 126px;
     background: #fff;
     border-radius: 10px;
     border-left: 6px solid #CAE7FF;
-    margin-bottom: 9px;
-    padding-left: 6px;
+    margin-bottom: 14px;
+    padding-left: 10px;
 
     .price {
-      font-size: 20px;
+      font-size: 24px;
       font-family: DINAlternate-Bold, DINAlternate;
       font-weight: bold;
-      line-height: 24px;
+      line-height: 28px;
     }
 
     .text {
       display: flex;
       align-items: center;
-      font-size: 12px;
-      line-height: 17px;
+      font-size: 15px;
+      line-height: 21px;
       color: #777777;
+      margin-top: 3px;
     }
 
     .icon {
-      width: 14px;
-      height: 14px;
+      width: 16px;
+      height: 16px;
       margin-right: 3px;
     }
   }
@@ -82,4 +104,70 @@
       color: #11B9CE;
     }
   }
+}
+
+.buyList {
+  background: #FFFFFF;
+  border-radius: 10px;
+  margin: 0 13px 12px;
+  overflow: hidden;
+
+  .buyHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: #777777;
+    font-size: 14px;
+
+    .buyPrice {
+      font-size: 22px;
+      font-family: DINAlternate-Bold, DINAlternate;
+      font-weight: bold;
+      color: #FC1A19;
+
+      i {
+        font-size: 18px;
+        font-style: normal;
+      }
+    }
+  }
+
+  .iconTimer {
+    width: 14px;
+    height: 14px;
+    margin-right: 5px;
+  }
+
+  .buyTimer {
+    display: flex;
+    align-items: center;
+  }
+
+  .b {
+    font-size: 14px;
+    color: #333;
+  }
+
+  .contact {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .buyContent {
+    font-size: 13px;
+    color: #777777;
+
+    span {
+      height: 18px;
+      background: rgba(255, 166, 115, 0.07);
+      border-radius: 9px;
+      border: 1px solid #FFBF9A;
+      font-size: 12px;
+      color: #FF7B31;
+      line-height: 17px;
+      padding: 1px 6px;
+      margin-right: 4px;
+    }
+  }
 }

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

@@ -1,82 +1,210 @@
-import { defineComponent } from 'vue';
+import { defineComponent, onMounted, reactive, ref } from 'vue';
 import styles from './index.module.less';
-import { Cell, CellGroup, Col, Row } from 'vant';
+import { Cell, CellGroup, Col, 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';
 import icon3 from './images/icon3.png';
 import icon4 from './images/icon4.png';
 import iconTimer from './images/icon-timer.png';
+import request from '@/helpers/request';
+import { useRoute } from 'vue-router';
 
 export default defineComponent({
   name: 'tenant-apply-data',
   setup() {
+    const route = useRoute();
+    const tabName = ref('all');
+    const forms = reactive({
+      id: route.query.id,
+      classStatus: false,
+      classList: [] as any,
+      classStatus1: false,
+      classList1: [] as any
+    });
+
+    const getSchoolList = async () => {
+      try {
+        const { data } = await request.get('/edu-app/open/school/list', {
+          params: {
+            tenantId: forms.id
+          }
+        });
+        const temp = [
+          {
+            value: '',
+            text: '全部学校'
+          }
+        ];
+        if (Array.isArray(data)) {
+          data.forEach((item: any) => {
+            temp.push({
+              value: item.id,
+              text: item.name
+            });
+          });
+          forms.classList = temp;
+          forms.classList1 = temp;
+        }
+      } catch {
+        //
+      }
+    };
+
+    const getStat = async () => {
+      try {
+        // open/school/registerStat
+      } catch {
+        //
+      }
+    };
+
+    onMounted(async () => {
+      await getSchoolList();
+    });
     return () => (
       <div class={styles.tenantApplyData}>
-        <MSticky>
-          <Cell
-            class={styles.searchSchool}
-            title={'全部学校'}
-            isLink
-            arrowDirection="down"></Cell>
-        </MSticky>
+        <Tabs v-model:active={tabName.value}>
+          <Tab title="数据总览" name={'all'}>
+            <Cell
+              class={styles.searchSchool}
+              title={'全部学校'}
+              isLink
+              arrowDirection="down"
+              onClick={() => (forms.classStatus = true)}></Cell>
 
-        <div class={styles.statisticsGroup}>
-          <Row gutter={12}>
-            <Col span={12}>
-              <div class={[styles.item, styles.item1]}>
-                <p class={styles.price}>1,200,000.00</p>
-                <p class={styles.text}>
-                  <img src={icon1} class={styles.icon} />
-                  缴费总金额
-                </p>
-              </div>
-            </Col>
-            <Col span={12}>
-              <div class={[styles.item, styles.item2]}>
-                <p class={styles.price}>1,200,000.00</p>
-                <p class={styles.text}>
-                  <img src={icon2} class={styles.icon} />
-                  缴费总人数
-                </p>
-              </div>
-            </Col>
-            <Col span={12}>
-              <div class={[styles.item, styles.item3]}>
-                <p class={styles.price}>1,200,000.00</p>
-                <p class={styles.text}>
-                  <img src={icon3} class={styles.icon} />
-                  乐器购买人数
-                </p>
-              </div>
-            </Col>
-            <Col span={12}>
-              <div class={[styles.item, styles.item4]}>
-                <p class={styles.price}>1,200,000.00</p>
-                <p class={styles.text}>
-                  <img src={icon4} class={styles.icon} />
-                  学练工具购买人数
-                </p>
-              </div>
-            </Col>
-          </Row>
-        </div>
-
-        <div class={styles.buyList}>
-          <CellGroup class={styles.buyItem}>
-            <Cell>
-              {{
-                title: () => (
-                  <div>
-                    <img src={iconTimer} class={styles.iconTimer} />
-                    2023/03/29 12:20:34
+            <div class={styles.statisticsGroup}>
+              <Row gutter={12}>
+                <Col span={12}>
+                  <div class={[styles.item, styles.item1]}>
+                    <p class={styles.price}>1,200,000.00</p>
+                    <p class={styles.text}>
+                      <img src={icon4} class={styles.icon} />
+                      缴费总金额
+                    </p>
+                  </div>
+                </Col>
+                <Col span={12}>
+                  <div class={[styles.item, styles.item1]}>
+                    <p class={styles.price}>1,200,000.00</p>
+                    <p class={styles.text}>
+                      <img src={icon1} class={styles.icon} />
+                      缴费总人数
+                    </p>
+                  </div>
+                </Col>
+                <Col span={12}>
+                  <div class={[styles.item, styles.item3]}>
+                    <p class={styles.price}>1,200,000.00</p>
+                    <p class={styles.text}>
+                      <img src={icon4} class={styles.icon} />
+                      乐器缴费金额
+                    </p>
                   </div>
-                ),
-                value: () => <span>¥ 310.00</span>
-              }}
-            </Cell>
-          </CellGroup>
-        </div>
+                </Col>
+                <Col span={12}>
+                  <div class={[styles.item, styles.item3]}>
+                    <p class={styles.price}>1,200,000.00</p>
+                    <p class={styles.text}>
+                      <img src={icon2} class={styles.icon} />
+                      乐器购买人数
+                    </p>
+                  </div>
+                </Col>
+                <Col span={12}>
+                  <div class={[styles.item, styles.item4]}>
+                    <p class={styles.price}>1,200,000.00</p>
+                    <p class={styles.text}>
+                      <img src={icon4} class={styles.icon} />
+                      学练工具缴费金额
+                    </p>
+                  </div>
+                </Col>
+                <Col span={12}>
+                  <div class={[styles.item, styles.item4]}>
+                    <p class={styles.price}>1,200,000.00</p>
+                    <p class={styles.text}>
+                      <img src={icon3} class={styles.icon} />
+                      学练工具购买人数
+                    </p>
+                  </div>
+                </Col>
+              </Row>
+            </div>
+          </Tab>
+          <Tab title="购买详情" name={'detail'}>
+            <Cell
+              class={styles.searchSchool}
+              title={'全部学校'}
+              isLink
+              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>
+            </div>
+          </Tab>
+        </Tabs>
+
+        <Popup
+          v-model:show={forms.classStatus}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}>
+          <Picker
+            showToolbar
+            columns={forms.classList}
+            onCancel={() => (forms.classStatus = false)}
+            onConfirm={(val: any) => {
+              // const selectedOption = val.selectedOptions[0];
+            }}
+          />
+        </Popup>
+
+        <Popup
+          v-model:show={forms.classStatus1}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}>
+          <Picker
+            showToolbar
+            columns={forms.classList1}
+            onCancel={() => (forms.classStatus1 = false)}
+            onConfirm={(val: any) => {
+              // const selectedOption = val.selectedOptions[0];
+            }}
+          />
+        </Popup>
       </div>
     );
   }

vite.config.ts

@@ -13,8 +13,8 @@ function resolve(dir: string) {
 }
 // https://vitejs.dev/config/
 // https://github.com/vitejs/vite/issues/1930 .env
-const proxyUrl = 'https://test.lexiaoya.cn/';
-// const proxyUrl = 'https://dev.kt.colexiu.com/';
+// const proxyUrl = 'https://test.lexiaoya.cn/';
+const proxyUrl = 'https://dev.kt.colexiu.com/';
 // const proxyUrl = 'http://192.168.3.143:7989/';
 export default defineConfig({
   base: './',