导航样式

src/views/home/contentItem.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, reactive, toRefs } from 'vue';
+import { defineComponent, onMounted, reactive, toRefs, watch } from 'vue';
 import CurrentStudent from './component/CurrentStudent';
 import Subjects from './component/Subjects';
 import MusicGroup from './component/MusicGroup';
@@ -25,6 +25,10 @@ export default defineComponent({
     musicGroupId: {
       type: String,
       default: ''
+    },
+    reloadTotal:{
+      type: Number,
+      default: 0
     }
   },
   setup(props) {
@@ -40,7 +44,7 @@ export default defineComponent({
       /** 练习 */
       studentLessons: {} as IStudentLessons
     });
-    const { musicGroupId } = toRefs(props);
+    const { musicGroupId, reloadTotal } = toRefs(props);
     /** 统计 */
     const getSchool = async () => {
       const res = await api_schoolIndexStat({
@@ -92,6 +96,10 @@ export default defineComponent({
     onMounted(() => {
       init();
     });
+
+    watch(() => reloadTotal.value, () => {
+      init();
+    })
     return () => (
       <div>
         <CurrentStudent list={data.gradeDistributions} />

src/views/home/index.module.less

@@ -1,7 +1,7 @@
 .homeTab {
     & :global {
         .van-tabs__nav:not(.van-tabs__nav--shrink) {
-            background: rgba(248, 249, 252, 1);
+            background: transparent;
 
             .van-tab {
                 z-index: 10;
@@ -14,8 +14,14 @@
                 background: linear-gradient(250deg, rgba(45, 199, 170, 0.22) 0%, #2DC7AA 100%);
             }
         }
+    }
 
-
+    & div:first-child {
+        :global {
+            .van-sticky--fixed {
+                background: rgba(225, 244, 240, 1);
+            }
+        }
     }
 }
 
@@ -24,7 +30,8 @@
     border-radius: 10px;
     background: #FFFFFF;
 }
-.itemEmtry{
+
+.itemEmtry {
     padding: 12px;
 }
 
@@ -199,6 +206,7 @@
 .detailDataContainer {
     display: flex;
     font-family: DINAlternate-Bold, DINAlternate;
+
     .detailLeft {
         display: flex;
         padding-left: 12px;
@@ -211,6 +219,7 @@
         overflow-x: auto;
         background: rgba(249, 249, 249, 1);
         padding-bottom: 12px;
+
         &::-webkit-scrollbar {
             width: 0;
             display: none;
@@ -223,7 +232,8 @@
         font-size: 10px;
         line-height: 14px;
         white-space: nowrap;
-        & > div:first-child{
+
+        &>div:first-child {
             position: absolute;
             left: 0;
             top: 0;
@@ -231,7 +241,8 @@
             height: 100%;
             opacity: .1;
         }
-        & > div:last-child{
+
+        &>div:last-child {
             position: relative;
             z-index: 2;
         }
@@ -247,7 +258,8 @@
         line-height: 17px;
         white-space: nowrap;
     }
-    .tableTr:not(:last-child){
+
+    .tableTr:not(:last-child) {
         border-bottom: 1Px solid #F2F2F2;
     }
 }

src/views/home/index.tsx

@@ -5,6 +5,7 @@ import styles from './index.module.less';
 import { api_musicGroupFindByCooperationId } from './api';
 import ContentItem from './contentItem';
 import { IMusicGroup } from './type';
+import { listenerMessage } from '@/helpers/native-message';
 
 export default defineComponent({
   name: 'home-page',
@@ -12,7 +13,8 @@ export default defineComponent({
     const homeData = reactive({
       /** 乐团列表 */
       musicGroups: [] as IMusicGroup[],
-      tab: 'home'
+      tab: 'home',
+      reloadTotal: 0
     });
     /** 获取学校乐团列表 */
     const getMusicGroup = async () => {
@@ -22,8 +24,14 @@ export default defineComponent({
       }
     };
 
+    /** 重新加载数据 */
+    const reloadData = () => {
+      homeData.reloadTotal += 1;
+    };
+
     onMounted(() => {
       getMusicGroup();
+      listenerMessage('webViewOnResume', reloadData);
     });
     return () => (
       <div class={styles.home}>
@@ -35,11 +43,14 @@ export default defineComponent({
           swipeable
           sticky>
           <Tab title="数据汇总" name="home">
-            <ContentItem />
+            <ContentItem reloadTotal={homeData.reloadTotal} />
           </Tab>
           {homeData.musicGroups.map(group => (
             <Tab title={group.name} name={group.id}>
-              <ContentItem musicGroupId={group.id} />
+              <ContentItem
+                reloadTotal={homeData.reloadTotal}
+                musicGroupId={group.id}
+              />
             </Tab>
           ))}
         </Tabs>