1

1

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

@@ -0,0 +1,9 @@
+.chioseWrap {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-around;
+  background-color: #fff;
+  color: #333;
+  font-weight: 500;
+}

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

@@ -0,0 +1,247 @@
+import OSearch from '@/components/o-search'
+import oEmpty from '@/components/o-empty'
+import dayjs from 'dayjs'
+import {
+  Icon,
+  Popover,
+  DatePicker,
+  DatePickerColumnType,
+  Popup,
+  List,
+  PullRefresh,
+  ActionSheet,
+  showToast
+} from 'vant'
+import { defineComponent, reactive, ref, onMounted } 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'
+
+export default defineComponent({
+  name: 'attend-student',
+  setup() {
+    const router = useRouter()
+    const state = reactive({
+      showPopoverTime: false,
+      showPopoverOrchestra: false,
+      showPopoverSubject: false,
+      actions: [],
+      subjects: [] as any,
+      currentDate: [dayjs().format('YYYY'), dayjs().format('MM')]
+    })
+    const forms = reactive({
+      time: state.currentDate[0] + '' + state.currentDate[1],
+      timeName: state.currentDate[0] + '年' + state.currentDate[1] + '月',
+      orchestraId: '',
+      orchestraName: '全部乐团',
+      subjectId: '',
+      subjectName: '全部声部',
+      page: 1,
+      rows: 50,
+      sortType: 'PRACTICE_DAY'
+    })
+    const minDate = ref(new Date(dayjs().subtract(5, 'year').format('YYYY-MM-DD')))
+    const maxDate = ref(new Date(dayjs().add(5, 'year').format('YYYY-MM-DD')))
+    const columnsType = ref<DatePickerColumnType[]>(['year', 'month'])
+    const refreshing = ref(false)
+    const loading = ref(false)
+    const finished = ref(false)
+    const showContact = ref(false)
+    const list = ref([])
+
+    const getList = async () => {
+      console.log('getList')
+      loading.value = true
+      try {
+        if (refreshing.value) {
+          forms.page = 1
+          list.value = []
+          refreshing.value = false
+        }
+
+        const res = await request.post('/api-school/student/page', {
+          data: { ...forms }
+        })
+
+        if (list.value.length > 0 && res.data.pages === 1) {
+          return
+        }
+
+        forms.page = res.data.current + 1
+        // list.value = list.value.concat(res.data.rows || [])
+        list.value = res.data.rows
+        showContact.value = list.value.length > 0
+        console.log(showContact.value, ' showContact.value ')
+        loading.value = false
+        finished.value = true
+        // finished.value = res.data.current >= res.data.pages
+      } catch (e: any) {
+        // console.log(e, 'e')
+        const message = e.message
+        showToast(message)
+        showContact.value = false
+        finished.value = true
+      }
+    }
+
+    const checkTimer = (val: any) => {
+      forms.time = val.selectedValues[0] + val.selectedValues[1]
+      forms.timeName = val.selectedValues[0] + '年' + val.selectedValues[1] + '月'
+      state.showPopoverTime = false
+      getList()
+    }
+    const checkOrchestra = (val: any) => {
+      forms.orchestraId = val.value
+      forms.orchestraName = val.name
+      state.showPopoverOrchestra = false
+      refreshing.value = true
+      getList()
+    }
+
+    const checkSubject = (val: any) => {
+      forms.subjectId = val.value
+      forms.subjectName = val.name
+      console.log(val, forms)
+      refreshing.value = true
+      getList()
+    }
+    const getOrchestraList = async () => {
+      const schoolId = globalState.user.data.schoolInfos
+        .map((item) => {
+          return item.id
+        })
+        .join(',')
+      try {
+        const res = await request.post('/api-school/orchestra/page', {
+          data: { page: 1, rows: 9999, schoolId }
+        })
+        state.actions = res.data.rows.map((item) => {
+          return {
+            name: item.name,
+            value: item.id as string
+          }
+        })
+        state.actions.unshift({ name: '全部乐团', value: '' })
+      } catch (e: any) {
+        const message = e.message
+        showToast(message)
+      }
+    }
+
+    const getSubjects = async () => {
+      try {
+        const res = await request.post('/api-school/subject/page', {
+          data: { page: 1, rows: 9999 }
+        })
+        state.subjects = res.data.rows.map((item) => {
+          return {
+            name: item.name,
+            value: item.id as string
+          }
+        })
+        state.subjects.unshift({ name: '全部声部', value: '' })
+      } catch (e: any) {
+        const message = e.message
+        showToast(message)
+      }
+    }
+    onMounted(() => {
+      getSubjects()
+      getOrchestraList()
+      getList()
+    })
+    const onRefresh = () => {
+      finished.value = false
+      // 重新加载数据
+      // 将 loading 设置为 true，表示处于加载状态
+      loading.value = true
+      getList()
+    }
+    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'} />
+            </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>
+          </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>
+          </div>
+        </div>
+        {/* </OSticky> */}
+
+        {}
+        <PullRefresh v-model={refreshing.value} onRefresh={onRefresh}>
+          <List
+            v-model:loading={loading.value}
+            finished={finished.value}
+            finished-text="没有更多了"
+            onLoad={getList}
+          >
+            {list.value.map((item: any) => 111)}
+          </List>
+        </PullRefresh>
+
+        <Popup v-model:show={state.showPopoverTime} position="bottom" style="{ height: '30%' }">
+          <DatePicker
+            onCancel={() => {
+              state.showPopoverTime = false
+            }}
+            onConfirm={checkTimer}
+            v-model={state.currentDate}
+            title="选择年月"
+            minDate={minDate.value}
+            maxDate={maxDate.value}
+            columnsType={columnsType.value}
+          />
+        </Popup>
+
+        <ActionSheet
+          v-model:show={state.showPopoverOrchestra}
+          title="选择乐团"
+          actions={state.actions}
+          onSelect={checkOrchestra}
+        ></ActionSheet>
+
+        <ActionSheet
+          style={{ height: '40%' }}
+          close-on-click-action
+          v-model:show={state.showPopoverSubject}
+          title="选择声部"
+          actions={state.subjects}
+          onSelect={checkSubject}
+        ></ActionSheet>
+      </>
+    )
+  }
+})

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

@@ -2,8 +2,21 @@
 .topWrap {
   height: 280px;
   background: url('@{img}/ranking-bg.png') center center/ cover;
+  position: relative;
+  .topTime {
+    position: absolute;
+    left: 29px;
+    bottom: 73px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #ffffff;
+    line-height: 20px;
+    letter-spacing: 1px;
+  }
 }
 .rankTabs {
   position: relative;
-  top: -45px;
+  top: -44px;
+  height: 45px;
+  line-height: 45px;
 }

src/school/ranking-list/index.tsx

@@ -4,6 +4,7 @@ import { Tabs, Tab } from 'vant'
 import { defineComponent, reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
 // import linkBg from './images/ranking-bg.png'
+import TimerBang from './components/timer-bang'
 import styles from './index.module.less'
 const activeName = ref('student')
 
@@ -23,17 +24,21 @@ export default defineComponent({
               background={'transparent'}
               border={false}
             ></OHeader>
+            <span class={styles.topTime}>2022年10月</span>
           </div>
           <Tabs
             v-model:active={activeName.value}
             class={styles.rankTabs}
             background={'rgba(0,0,0,.35)'}
+            title-active-color={'#fff'}
+            title-inactive-color={'#fff'}
+            color={'#fff'}
           >
             <Tab name="student" title="天数榜">
-              学生考勤
+              <TimerBang></TimerBang>
             </Tab>
             <Tab name="teacher" title="时长榜">
-              伴学指导考勤
+              天数榜
             </Tab>
           </Tabs>
         </OSticky>

src/school/ranking-list/modals/rank-item.tsx

@@ -0,0 +1,41 @@
+import { defineComponent, reactive, ref, watch } from 'vue'
+import styles from './student-item.module.less'
+import defaultIcon from '@/school/images/default-icon.jpg'
+import msgIcon from '@/school/images/msg-icon.png'
+import sendmsgIcon from '@/school/images/sendmsg-icon.png'
+import phoneIcon from '@/school/images/phone-icon.png'
+import { postMessage } from '@/helpers/native-message'
+import { Icon, ActionSheet, showToast } from 'vant'
+import { useRouter } from 'vue-router'
+const myForms = ref({}) as any
+export default defineComponent({
+  props: ['item', 'type'],
+  name: 'rank-item',
+  setup(props) {
+    return () => (
+      <>
+        <div>
+          <div class={styles.itemWrap}>
+            <div class={styles.wrapLeft}>
+              <div class={styles.numWrap}>
+                <img src="" alt="" />
+              </div>
+              <div class={styles.headerWrap}>
+                <img src="" alt="" />
+              </div>
+              <div>
+                <p class={styles.studentName}> </p>
+                <div class={styles.tag}></div>
+              </div>
+            </div>
+            <div class={styles.wrapRight}>
+              <p>
+                <span></span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </>
+    )
+  }
+})