Merge branch 'master' of http://git.dayaedu.com/lex/orchestra-app

src/router/routes-school.ts

@@ -7,21 +7,22 @@ type metaType = {
 
 // 不需要登录的路由
 // companion-teacher-register
-const noLoginRouter = [{
-  path: '/companion-teacher-register',
-  name: 'companion-teacher-register',
-  component: () => import('@/school/companion-teacher/companion-teacher-register'),
-  meta: {
-    title: '乐团伴学老师注册'
-  }
-}, {
-  path: '/manage-teacher-register',
-  name: 'manage-teacher-register',
-  component: () => import('@/school/manage-teacher/manage-teacher-register'),
-  meta: {
-    title: '乐团管理老师注册'
-  }
-}]
+const noLoginRouter = [
+  {
+    path: '/companion-teacher-register',
+    name: 'companion-teacher-register',
+    component: () => import('@/school/companion-teacher/companion-teacher-register'),
+    meta: {
+      title: '乐团伴学老师注册'
+    }
+  }, {
+    path: '/manage-teacher-register',
+    name: 'manage-teacher-register',
+    component: () => import('@/school/manage-teacher/manage-teacher-register'),
+    meta: {
+      title: '乐团管理老师注册'
+    }
+  }]
 
 export default [
   {
@@ -81,21 +82,24 @@ export default [
         meta: {
           title: '群发消息'
         }
-      }, {
+      },
+      {
         path: '/content-information',
         name: 'content-information',
         component: () => import('@/school/content-information/index'),
         meta: {
           title: '资讯管理'
         }
-      }, {
+      },
+      {
         path: '/companion-teacher',
         name: 'companion-teacher',
         component: () => import('@/school/companion-teacher/index'),
         meta: {
           title: '伴学老师'
         }
-      }, {
+      },
+      {
         path: '/companion-teacher-detail',
         name: 'companion-teacher-detail',
         component: () => import('@/school/companion-teacher/companion-detail'),
@@ -109,14 +113,16 @@ export default [
         meta: {
           title: '课程交接'
         }
-      }, {
+      },
+      {
         path: '/manage-teacher',
         name: 'manage-teacher',
         component: () => import('@/school/manage-teacher/index'),
         meta: {
           title: '管理老师'
         }
-      }, {
+      },
+      {
         path: '/manage-teacher-detail',
         name: 'manage-teacher-detail',
         component: () => import('@/school/manage-teacher/manage-detail'),
@@ -155,6 +161,15 @@ export default [
         meta: {
           title: '考勤详情'
         }
+      },
+
+      {
+        path: '/ranking-list',
+        name: 'ranking-list',
+        component: () => import('@/school/ranking-list/index'),
+        meta: {
+          title: '排行榜'
+        }
       }
     ]
   },

src/school/exercise-record/modals/detail-item.module.less

@@ -30,7 +30,7 @@
       flex-direction: row;
       align-items: center;
       .imgWrap {
-        width: 87px;
+        width: 100px;
         height: 33px;
         background: #e9e3ff;
         border-radius: 19px;

src/school/exercise-record/modals/detail-item.tsx

@@ -5,10 +5,60 @@ 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 { Icon, ActionSheet } from 'vant'
+import Image1 from '../../images/Image1.png'
+import Image2 from '../../images/Image2.png'
+import Image3 from '../../images/Image3.png'
+import Image4 from '../../images/Image4.png'
+import Image5 from '../../images/Image5.png'
+
+const scoreInfos: any = {
+  1: {
+    img: Image1,
+    tips: '你的演奏不太好，音准和完整性还需加强，再练一练吧～',
+    mome: '敢于尝试'
+  },
+  2: {
+    img: Image2,
+    tips: '你的演奏还不熟练，音准和完整性还需加强，加紧训练才能有好成绩哦～',
+    mome: '还要加油哦～'
+  },
+  3: {
+    img: Image3,
+    tips: '你的演奏还不流畅，音准和节奏还需加强，科学的练习才能更完美哦～',
+    mome: '突破自我'
+  },
+  4: {
+    img: Image4,
+    tips: '你的演奏还不错，继续加油吧，加强音准，离完美就差一步啦～',
+    mome: '崭露头角'
+  },
+  5: {
+    img: Image5,
+    tips: '你的演奏非常不错，音准的把握和节奏稍有瑕疵，完整性把握的很好~',
+    mome: '你很棒'
+  }
+}
 export default defineComponent({
   props: ['item'],
   name: 'detail-item',
+
   setup(props) {
+    const getLeveByScoreId = (score?: string | number) => {
+      if (!score && typeof score !== 'number') {
+        return {}
+      }
+      let leve: any = 1
+      if (score > 20 && score <= 40) {
+        leve = 2
+      } else if (score > 40 && score <= 60) {
+        leve = 3
+      } else if (score > 60 && score <= 80) {
+        leve = 4
+      } else if (score > 80) {
+        leve = 5
+      }
+      return leve
+    }
     return () => (
       <>
         <div>
@@ -20,7 +70,7 @@ export default defineComponent({
               </div>
               <div class={styles.itemTopRight}>
                 <div class={styles.imgWrap}>
-                  <img src="" alt="" />
+                  <img src={scoreInfos[getLeveByScoreId(props.item.score)].img} alt="" />
                 </div>
                 <Icon name="arrow" class={styles.imgIcon} />
               </div>

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

@@ -0,0 +1,22 @@
+@img: './images';
+.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: -44px;
+  height: 45px;
+  line-height: 45px;
+}

src/school/ranking-list/index.tsx

@@ -0,0 +1,48 @@
+import OHeader from '@/components/o-header'
+import OSticky from '@/components/o-sticky'
+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')
+
+export default defineComponent({
+  name: 'ranking-list',
+  setup() {
+    const router = useRouter()
+    const state = reactive({})
+
+    return () => (
+      <>
+        <OSticky position="top" background="#F8F8F8">
+          <div class={styles.topWrap}>
+            <OHeader
+              isBack={true}
+              color={'#ffffff'}
+              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>
+      </>
+    )
+  }
+})