1

1

src/router/routes-school.ts

@@ -66,28 +66,32 @@ 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: '/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'),
@@ -126,6 +130,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/index.module.less

@@ -0,0 +1,9 @@
+@img: './images';
+.topWrap {
+  height: 280px;
+  background: url('@{img}/ranking-bg.png') center center/ cover;
+}
+.rankTabs {
+  position: relative;
+  top: -45px;
+}

src/school/ranking-list/index.tsx

@@ -0,0 +1,43 @@
+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 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>
+          </div>
+          <Tabs
+            v-model:active={activeName.value}
+            class={styles.rankTabs}
+            background={'rgba(0,0,0,.35)'}
+          >
+            <Tab name="student" title="天数榜">
+              学生考勤
+            </Tab>
+            <Tab name="teacher" title="时长榜">
+              伴学指导考勤
+            </Tab>
+          </Tabs>
+        </OSticky>
+      </>
+    )
+  }
+})