提交

1

src/school/ranking-list/components/day-bang.tsx

@@ -10,15 +10,17 @@ import {
   List,
   PullRefresh,
   ActionSheet,
-  showToast
+  showToast,
+  Sticky
 } from 'vant'
-import { defineComponent, reactive, ref, onMounted } from 'vue'
+import { defineComponent, reactive, ref, onMounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import styles from './timer-bang.module.less'
 import request from '@/helpers/request'
 import { state as globalState } from '@/state'
 import RankItem from '../modals/rank-item'
 export default defineComponent({
+  props: ['toHeight'],
   emits: ['setTime'],
   name: 'day-bang',
   setup(props, { slots, attrs, emit }) {
@@ -32,7 +34,7 @@ export default defineComponent({
       currentDate: [dayjs().format('YYYY'), dayjs().format('MM')]
     })
     const forms = reactive({
-      time: state.currentDate[0] + '' + state.currentDate[1],
+      practiceMonth: state.currentDate[0] + '' + state.currentDate[1],
       timeName: state.currentDate[0] + '年' + state.currentDate[1] + '月',
       orchestraId: '',
       orchestraName: '全部乐团',
@@ -50,7 +52,14 @@ export default defineComponent({
     const finished = ref(false)
     const showContact = ref(false)
     const list = ref([])
-
+    const toTop = ref(props.toHeight)
+    console.log(props.toHeight)
+    watch(
+      () => props.toHeight,
+      (val: number) => {
+        toTop.value = val
+      }
+    )
     const getList = async () => {
       loading.value = true
       try {
@@ -86,7 +95,7 @@ export default defineComponent({
     }
 
     const checkTimer = (val: any) => {
-      forms.time = val.selectedValues[0] + val.selectedValues[1]
+      forms.practiceMonth = val.selectedValues[0] + val.selectedValues[1]
       forms.timeName = val.selectedValues[0] + '年' + val.selectedValues[1] + '月'
       state.showPopoverTime = false
       emit('setTime', forms.timeName)
@@ -148,6 +157,7 @@ export default defineComponent({
         showToast(message)
       }
     }
+
     onMounted(() => {
       getSubjects()
       getOrchestraList()
@@ -164,43 +174,44 @@ export default defineComponent({
     return () => (
       <>
         {/* <OSticky position="top" background="#FFF"> */}
-
-        <div class={styles.chioseWrap}>
-          <div style={{ padding: '0 13px', background: '#FFF' }}>
-            <div
-              class={styles.searchBand}
-              onClick={() => {
-                state.showPopoverTime = true
-              }}
-            >
-              {forms.timeName}
-              <Icon name={state.showPopoverTime ? 'arrow-up' : 'arrow-down'} />
+        <Sticky offsetTop={toTop.value}>
+          <div class={styles.chioseWrap}>
+            <div style={{ padding: '0 13px', background: '#FFF' }}>
+              <div
+                class={styles.searchBand}
+                onClick={() => {
+                  state.showPopoverTime = true
+                }}
+              >
+                {forms.timeName}
+                <Icon name={state.showPopoverTime ? 'arrow-up' : 'arrow-down'} />
+              </div>
             </div>
-          </div>
 
-          <div style={{ padding: '0 13px', background: '#FFF' }}>
-            <div
-              class={styles.searchBand}
-              onClick={() => {
-                state.showPopoverOrchestra = true
-              }}
-            >
-              {forms.orchestraName}
-              <Icon name={state.showPopoverOrchestra ? 'arrow-up' : 'arrow-down'} />
+            <div style={{ padding: '0 13px', background: '#FFF' }}>
+              <div
+                class={styles.searchBand}
+                onClick={() => {
+                  state.showPopoverOrchestra = true
+                }}
+              >
+                {forms.orchestraName}
+                <Icon name={state.showPopoverOrchestra ? 'arrow-up' : 'arrow-down'} />
+              </div>
             </div>
-          </div>
-          <div style={{ padding: '0 13px', background: '#FFF' }}>
-            <div
-              class={styles.searchBand}
-              onClick={() => {
-                state.showPopoverSubject = true
-              }}
-            >
-              {forms.subjectName}
-              <Icon name={state.showPopoverSubject ? 'arrow-up' : 'arrow-down'} />
+            <div style={{ padding: '0 13px', background: '#FFF' }}>
+              <div
+                class={styles.searchBand}
+                onClick={() => {
+                  state.showPopoverSubject = true
+                }}
+              >
+                {forms.subjectName}
+                <Icon name={state.showPopoverSubject ? 'arrow-up' : 'arrow-down'} />
+              </div>
             </div>
           </div>
-        </div>
+        </Sticky>
         {/* </OSticky> */}
 
         {showContact.value ? (

src/school/ranking-list/components/timer-bang.module.less

@@ -6,4 +6,5 @@
   background-color: #fff;
   color: #333;
   font-weight: 500;
+  padding: 12px 0;
 }

src/school/ranking-list/components/timer-bang.tsx

@@ -10,9 +10,10 @@ import {
   List,
   PullRefresh,
   ActionSheet,
-  showToast
+  showToast,
+  Sticky
 } from 'vant'
-import { defineComponent, reactive, ref, onMounted } from 'vue'
+import { defineComponent, reactive, ref, onMounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import styles from './timer-bang.module.less'
 import request from '@/helpers/request'
@@ -20,6 +21,7 @@ import { state as globalState } from '@/state'
 import RankItem from '../modals/rank-item'
 export default defineComponent({
   name: 'timer-bang',
+  props: ['toHeight'],
   emits: ['setTime'],
   setup(props, { slots, attrs, emit }) {
     const router = useRouter()
@@ -32,7 +34,7 @@ export default defineComponent({
       currentDate: [dayjs().format('YYYY'), dayjs().format('MM')]
     })
     const forms = reactive({
-      time: state.currentDate[0] + '' + state.currentDate[1],
+      practiceMonth: state.currentDate[0] + '' + state.currentDate[1],
       timeName: state.currentDate[0] + '年' + state.currentDate[1] + '月',
       orchestraId: '',
       orchestraName: '全部乐团',
@@ -50,7 +52,14 @@ export default defineComponent({
     const finished = ref(false)
     const showContact = ref(false)
     const list = ref([])
-
+    const toTop = ref(props.toHeight)
+    watch(
+      () => props.toHeight,
+      (val: number) => {
+        toTop.value = val
+        console.log(toTop.value)
+      }
+    )
     const getList = async () => {
       console.log('getList')
       loading.value = true
@@ -87,7 +96,7 @@ export default defineComponent({
     }
 
     const checkTimer = (val: any) => {
-      forms.time = val.selectedValues[0] + val.selectedValues[1]
+      forms.practiceMonth = val.selectedValues[0] + val.selectedValues[1]
       forms.timeName = val.selectedValues[0] + '年' + val.selectedValues[1] + '月'
       emit('setTime', forms.timeName)
       state.showPopoverTime = false
@@ -165,43 +174,44 @@ export default defineComponent({
     return () => (
       <>
         {/* <OSticky position="top" background="#FFF"> */}
-
-        <div class={styles.chioseWrap}>
-          <div style={{ padding: '0 13px', background: '#FFF' }}>
-            <div
-              class={styles.searchBand}
-              onClick={() => {
-                state.showPopoverTime = true
-              }}
-            >
-              {forms.timeName}
-              <Icon name={state.showPopoverTime ? 'arrow-up' : 'arrow-down'} />
+        <Sticky offsetTop={toTop.value}>
+          <div class={styles.chioseWrap}>
+            <div style={{ padding: '0 13px', background: '#FFF' }}>
+              <div
+                class={styles.searchBand}
+                onClick={() => {
+                  state.showPopoverTime = true
+                }}
+              >
+                {forms.timeName}
+                <Icon name={state.showPopoverTime ? 'arrow-up' : 'arrow-down'} />
+              </div>
             </div>
-          </div>
 
-          <div style={{ padding: '0 13px', background: '#FFF' }}>
-            <div
-              class={styles.searchBand}
-              onClick={() => {
-                state.showPopoverOrchestra = true
-              }}
-            >
-              {forms.orchestraName}
-              <Icon name={state.showPopoverOrchestra ? 'arrow-up' : 'arrow-down'} />
+            <div style={{ padding: '0 13px', background: '#FFF' }}>
+              <div
+                class={styles.searchBand}
+                onClick={() => {
+                  state.showPopoverOrchestra = true
+                }}
+              >
+                {forms.orchestraName}
+                <Icon name={state.showPopoverOrchestra ? 'arrow-up' : 'arrow-down'} />
+              </div>
             </div>
-          </div>
-          <div style={{ padding: '0 13px', background: '#FFF' }}>
-            <div
-              class={styles.searchBand}
-              onClick={() => {
-                state.showPopoverSubject = true
-              }}
-            >
-              {forms.subjectName}
-              <Icon name={state.showPopoverSubject ? 'arrow-up' : 'arrow-down'} />
+            <div style={{ padding: '0 13px', background: '#FFF' }}>
+              <div
+                class={styles.searchBand}
+                onClick={() => {
+                  state.showPopoverSubject = true
+                }}
+              >
+                {forms.subjectName}
+                <Icon name={state.showPopoverSubject ? 'arrow-up' : 'arrow-down'} />
+              </div>
             </div>
           </div>
-        </div>
+        </Sticky>
         {/* </OSticky> */}
 
         {showContact.value ? (

src/school/ranking-list/index.module.less

@@ -16,8 +16,9 @@
 }
 
 .rankTabs {
-  position: relative;
-  top: -44px;
+  position: absolute;
+  width: 100%;
+  bottom: -1px;
   height: 45px;
   line-height: 45px;
   :global {

src/school/ranking-list/index.tsx

@@ -13,14 +13,18 @@ export default defineComponent({
   name: 'ranking-list',
   setup() {
     const router = useRouter()
-    const state = reactive({})
+    const state = reactive({ heightV: 0 })
 
     const setTime = (val: string) => {
       timers.value = val
     }
+    const getHeight = (dataHeight: number) => {
+      state.heightV = dataHeight
+      console.log(state.heightV, '获取高度')
+    }
     return () => (
       <>
-        <OSticky position="top" background="#F8F8F8">
+        <OSticky position="top" background="#F8F8F8" onGetHeight={getHeight}>
           <div class={styles.topWrap}>
             <OHeader
               isBack={true}
@@ -38,18 +42,15 @@ export default defineComponent({
             title-inactive-color={'#fff'}
             color={'#fff'}
           >
-            <Tab name="student" title="天数榜">
-              {activeName.value == 'student' ? (
-                <TimerBang onSetTime={(val: string) => setTime(val)}></TimerBang>
-              ) : null}
-            </Tab>
-            <Tab name="teacher" title="时长榜">
-              {activeName.value == 'teacher' ? (
-                <DayBang onSetTime={(val: string) => setTime(val)}></DayBang>
-              ) : null}
-            </Tab>
+            <Tab name="student" title="天数榜"></Tab>
+            <Tab name="teacher" title="时长榜"></Tab>
           </Tabs>
         </OSticky>
+        {activeName.value == 'student' ? (
+          <TimerBang onSetTime={(val: string) => setTime(val)} toHeight={state.heightV}></TimerBang>
+        ) : (
+          <DayBang onSetTime={(val: string) => setTime(val)} toHeight={state.heightV}></DayBang>
+        )}
       </>
     )
   }

vite.config.ts

@@ -12,8 +12,8 @@ function resolve(dir: string) {
 // https://vitejs.dev/config/
 // https://github.com/vitejs/vite/issues/1930 .env
 // const proxyUrl = 'https://mstutest.dayaedu.com/';
-// const proxyUrl = 'http://47.98.131.38:8989/'
-const proxyUrl = 'http://192.168.3.143:8989/' // 尚科
+const proxyUrl = 'http://47.98.131.38:8989/'
+// const proxyUrl = 'http://192.168.3.143:8989/' // 尚科
 // const proxyUrl = 'http://192.168.3.26:8989/' // 刘俊驰
 export default defineConfig({
   base: './',