1

1

package-lock.json

@@ -37,7 +37,7 @@
         "vue-echarts": "^6.2.3",
         "vue-qr": "^4.0.9",
         "vue-router": "^4.0.12",
-        "vue3-lottie": "^2.3.0",
+        "vue3-lottie": "^2.4.0",
         "vuedraggable": "^2.24.3",
         "vuex": "^4.0.2"
       },
@@ -6485,7 +6485,6 @@
       "version": "4.17.21",
       "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/lodash.debounce": {
@@ -9555,11 +9554,11 @@
       }
     },
     "node_modules/vue3-lottie": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmmirror.com/vue3-lottie/-/vue3-lottie-2.3.0.tgz",
-      "integrity": "sha512-pThHpAIxxvk9c5lJXyCgrIAUIy/Xn/XLETqW2yA+VIg5B+phjQkdxkTvRG60pq3zOZ9su2hee+HZgT9tWA+8Fw==",
-      "license": "MIT",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmmirror.com/vue3-lottie/-/vue3-lottie-2.4.0.tgz",
+      "integrity": "sha512-arNBADu3vW+1Lf+Pw32mU9T6X7c1bMn1tBvJ0/uo+W0G/0UxHyCwoXzyYIKZWB0WoeEvdo5x7HCf8VH0J7rLsw==",
       "dependencies": {
+        "lodash": "^4.17.21",
         "lottie-web": "^5.8.1"
       },
       "engines": {
@@ -11513,8 +11512,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-2.0.1.tgz",
       "integrity": "sha512-wtdMnGVvys9K8tg+DxowU1ytTrdVveXr3LzdhaKakysgGXyrsfaeds2cDywtvujEASjWOwWL/OgWM+qoeM8Plg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@vitejs/plugin-vue-jsx": {
       "version": "1.3.8",
@@ -11798,8 +11796,7 @@
       "version": "5.3.1",
       "resolved": "https://registry.npmmirror.com/acorn-jsx/-/acorn-jsx-5.3.1.tgz",
       "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "aggregate-error": {
       "version": "3.1.0",
@@ -14256,8 +14253,7 @@
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "lodash.debounce": {
       "version": "4.0.8",
@@ -15113,8 +15109,7 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmmirror.com/postcss-pxtorem/-/postcss-pxtorem-6.0.0.tgz",
       "integrity": "sha512-ZRXrD7MLLjLk2RNGV6UA4f5Y7gy+a/j1EqjAfp9NdcNYVjUMvg5HTYduTjSkKBkRkfqbg/iKrjMO70V4g1LZeg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-value-parser": {
       "version": "4.2.0",
@@ -15315,8 +15310,7 @@
     "qrcode.vue": {
       "version": "3.3.3",
       "resolved": "https://registry.npmmirror.com/qrcode.vue/-/qrcode.vue-3.3.3.tgz",
-      "integrity": "sha512-OsD4tQjIbxg/K6D5ZkWjBdYI9eg9K2i8qeYILdEAX5mdAydSAxV7xKmmZSP/hA12olLqEMZ9ryqDQrwa9jEMgw==",
-      "requires": {}
+      "integrity": "sha512-OsD4tQjIbxg/K6D5ZkWjBdYI9eg9K2i8qeYILdEAX5mdAydSAxV7xKmmZSP/hA12olLqEMZ9ryqDQrwa9jEMgw=="
     },
     "qs": {
       "version": "6.10.3",
@@ -16291,8 +16285,7 @@
     "vue-demi": {
       "version": "0.13.2",
       "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.2.tgz",
-      "integrity": "sha512-41ukrclEbMddAyP7PvxMSYqnOSzPV6r7GNnyTSKSCNTaz19GehxmTiXyP9kwHSUv2+Dr6hHqiUiF7L1VAw2KdQ==",
-      "requires": {}
+      "integrity": "sha512-41ukrclEbMddAyP7PvxMSYqnOSzPV6r7GNnyTSKSCNTaz19GehxmTiXyP9kwHSUv2+Dr6hHqiUiF7L1VAw2KdQ=="
     },
     "vue-echarts": {
       "version": "6.2.3",
@@ -16405,10 +16398,11 @@
       }
     },
     "vue3-lottie": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmmirror.com/vue3-lottie/-/vue3-lottie-2.3.0.tgz",
-      "integrity": "sha512-pThHpAIxxvk9c5lJXyCgrIAUIy/Xn/XLETqW2yA+VIg5B+phjQkdxkTvRG60pq3zOZ9su2hee+HZgT9tWA+8Fw==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmmirror.com/vue3-lottie/-/vue3-lottie-2.4.0.tgz",
+      "integrity": "sha512-arNBADu3vW+1Lf+Pw32mU9T6X7c1bMn1tBvJ0/uo+W0G/0UxHyCwoXzyYIKZWB0WoeEvdo5x7HCf8VH0J7rLsw==",
       "requires": {
+        "lodash": "^4.17.21",
         "lottie-web": "^5.8.1"
       }
     },

package.json

@@ -49,7 +49,7 @@
     "vue-echarts": "^6.2.3",
     "vue-qr": "^4.0.9",
     "vue-router": "^4.0.12",
-    "vue3-lottie": "^2.3.0",
+    "vue3-lottie": "^2.4.0",
     "vuedraggable": "^2.24.3",
     "vuex": "^4.0.2"
   },

src/components/o-full-refresh/index.module.less

@@ -0,0 +1,4 @@
+.animateWrap {
+  width: 40px;
+  height: 40px;
+}

src/components/o-full-refresh/index.tsx

@@ -0,0 +1,65 @@
+import { postMessage } from '@/helpers/native-message'
+import { browser } from '@/helpers/utils'
+import { PullRefresh } from 'vant'
+import { defineComponent, PropType, reactive, Teleport, watch } from 'vue'
+import styles from './index.module.less'
+import { Vue3Lottie } from 'vue3-lottie'
+import AstronautJSON from './datas/data.json'
+import 'vue3-lottie/dist/style.css'
+export default defineComponent({
+  name: 'o-full-refresh',
+  props: {
+    title: String,
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    onRefresh: {
+      type: Function,
+      default: () => {}
+    }
+  },
+
+  setup(props, { emit, slots }) {
+    const state = reactive({
+      fullState: false
+    })
+    watch(
+      () => props.modelValue,
+      (val: boolean) => {
+        state.fullState = val
+        // console.log('刷新结束')
+        // emit('update:modelValue', val)
+      }
+    )
+    watch(
+      () => state.fullState,
+      (val: boolean) => {
+        console.log('刷新结束')
+        emit('update:modelValue', val)
+      }
+    )
+    return () => (
+      <PullRefresh v-model:modelValue={state.fullState} onRefresh={props.onRefresh}>
+        {{
+          pulling: () => (
+            <div>
+              {<Vue3Lottie class={styles.animateWrap} animationData={AstronautJSON}></Vue3Lottie>}
+            </div>
+          ),
+          loading: () => (
+            <div>
+              {<Vue3Lottie class={styles.animateWrap} animationData={AstronautJSON}></Vue3Lottie>}
+            </div>
+          ),
+          loosing: () => (
+            <div>
+              {<Vue3Lottie class={styles.animateWrap} animationData={AstronautJSON}></Vue3Lottie>}
+            </div>
+          ),
+          default: () => <> {slots.default && slots.default()}</>
+        }}
+      </PullRefresh>
+    )
+  }
+})

src/school/approval-manage/components/approval-item.module.less

@@ -46,6 +46,12 @@
         color: #f44541;
         line-height: 20px;
       }
+      .invalidLabel {
+        font-size: 14px;
+        font-weight: 500;
+        color: #ccc;
+        line-height: 20px;
+      }
       .passIcon {
         font-size: 16px;
         margin-right: 4px;

src/school/approval-manage/components/approval-item.tsx

@@ -5,6 +5,8 @@ import passIcon from '../images/pass-icon.png'
 import unpassIcon from '../images/unpass-icon.png'
 import defaultIcon from '@/school/images/default-icon.png'
 import studentIcon from '@/school/images/student-icon.png'
+import invalidIcon from '../images/invalid-icon.png'
+
 import msgIcon from '@/school/images/msg-icon.png'
 import { Icon, ActionSheet, showToast } from 'vant'
 import dayjs from 'dayjs'
@@ -56,6 +58,12 @@ export default defineComponent({
                 <p class={styles.unpassLabel}>拒绝</p>
               </div>
             ) : null}
+            {props.type == 'end' && props.item.status == 'INVALID' ? (
+              <div class={styles.itemWrapTopRight}>
+                <Icon class={styles.passIcon} name={invalidIcon}></Icon>
+                <p class={styles.invalidLabel}>失效</p>
+              </div>
+            ) : null}
             {props.type == 'doing' && props.item.status == 'DOING' ? (
               <div class={styles.itemWrapTopRight} onClick={gotoMsg}>
                 <Icon class={styles.msgIcon} name={msgIcon}></Icon>

src/school/approval-manage/components/end-approval.tsx

@@ -1,4 +1,5 @@
 import OEmpty from '@/components/o-empty'
+import OFullRefresh from '@/components/o-full-refresh'
 import dayjs from 'dayjs'
 import { List, PullRefresh, showToast } from 'vant'
 import { defineComponent, reactive, ref, onMounted } from 'vue'
@@ -69,8 +70,8 @@ export default defineComponent({
       <>
         <div class={styles.approvalWrap}>
           {showContact.value ? (
-            <PullRefresh
-              v-model={refreshing.value}
+            <OFullRefresh
+              v-model:modelValue={refreshing.value}
               onRefresh={onRefresh}
               style="min-height: 100vh;"
             >
@@ -86,7 +87,7 @@ export default defineComponent({
                   </div>
                 ))}
               </List>
-            </PullRefresh>
+            </OFullRefresh>
           ) : (
             <OEmpty />
           )}

src/school/approval-manage/components/student-course-item.tsx

@@ -1,6 +1,7 @@
 import { defineComponent, reactive, ref } from 'vue'
 import styles from './studnet-course-item.module.less'
 import clockIcon from '@/school/attendance/images/clock-icon.png'
+import unclockIcon from '../images/unclock.png'
 import passIcon from '../images/pass-icon.png'
 import unpassIcon from '../images/unpass-icon.png'
 import msgIcon from '@/school/images/msg-icon.png'
@@ -21,7 +22,7 @@ export default defineComponent({
           <div class={styles.itemWrapTop}>
             <div class={styles.itemWrapTopLeft}>
               <div class={styles.clockWrap}>
-                <img src={clockIcon} alt="" />
+                <img src={unclockIcon} alt="" />
               </div>
               <p class={styles.leftTimer}>
                 {dayjs(props.item.startTime).format('YYYY-MM-DD HH:mm')} -

src/school/approval-manage/components/student-leave.module.less

@@ -27,7 +27,7 @@
       font-weight: 400;
       color: #333333;
       line-height: 21px;
-      margin-bottom: 25px;
+      margin-bottom: 20px;
     }
     .leaveReason {
       margin-top: 10px;
@@ -91,3 +91,11 @@
     }
   }
 }
+
+.titleDot {
+  width: 4px;
+  height: 12px;
+  background: #ff8057;
+  border-radius: 2px;
+  margin-right: 6px;
+}

src/school/approval-manage/components/student-leave.tsx

@@ -75,7 +75,8 @@ export default defineComponent({
             <div>
               <div class={styles.leaveInfo}>
                 <p class={styles.subTitle}>
-                  <Icon class={styles.subTitleIcon} name={dateICon}></Icon>
+                  {/* <Icon class={styles.subTitleIcon} name={dateICon}></Icon> */}
+                  <span class={styles.titleDot}></span>
                   <span>请假日期</span>
                 </p>
                 <p class={styles.leaveDate}>
@@ -83,7 +84,8 @@ export default defineComponent({
                   {dayjs(item.value.endTime).format('YYYY年MM月DD日')}
                 </p>
                 <p class={styles.subTitle}>
-                  <Icon class={styles.subTitleIcon} name={questICon}></Icon>
+                  {/* <Icon class={styles.subTitleIcon} name={questICon}></Icon> */}
+                  <span class={styles.titleDot}></span>
                   <span>请假原因</span>
                 </p>
                 <p class={styles.leaveReason}>{item.value.approveReason}</p>
@@ -93,7 +95,8 @@ export default defineComponent({
                   <div class={styles.courseWrapTitlte}>
                     {' '}
                     <p class={styles.subTitle}>
-                      <Icon class={styles.subTitleIcon} name={cardICon}></Icon>
+                      {/* <Icon class={styles.subTitleIcon} name={cardICon}></Icon> */}
+                      <span class={styles.titleDot}></span>
                       <span>涉及课程</span>
                     </p>
                   </div>
@@ -115,7 +118,8 @@ export default defineComponent({
             <div>
               <div class={styles.leaveInfo}>
                 <p class={styles.subTitle}>
-                  <Icon class={styles.subTitleIcon} name={questICon}></Icon>
+                  {/* <Icon class={styles.subTitleIcon} name={questICon}></Icon> */}
+                  <span class={styles.titleDot}></span>
                   <span>退团原因</span>
                 </p>
                 <p class={styles.leaveReason}>{item.value.approveReason}</p>
@@ -139,7 +143,9 @@ export default defineComponent({
                   <div>
                     <div class={styles.reasonLabelLeft}>
                       {' '}
-                      <Icon class={styles.bottomIcon} name={eiditICon}></Icon> <span>意见审批</span>
+                      {/* <Icon class={styles.bottomIcon} name={eiditICon}></Icon> */}
+                      <span class={styles.titleDot}></span>
+                      <span>意见审批</span>
                     </div>
                   </div>
                 )

src/school/main.ts

@@ -9,8 +9,10 @@ import 'vant/lib/index.css'
 import '../styles/index.less'
 import { state } from '@/state'
 import { browser, setAuth } from '@/helpers/utils'
+import Vue3Lottie from 'vue3-lottie'
+import 'vue3-lottie/dist/style.css'
 
-const app = createApp(App)
+const app = createApp(App).use(Vue3Lottie)
 
 // 获取token
 promisefiyPostMessage({ api: 'getToken' }).then((res: any) => {

src/student/main.ts

@@ -2,14 +2,15 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from '../router/index'
 // import { postMessage } from '@/helpers/native-message'
-import 'vant/lib/index.css';
+import 'vant/lib/index.css'
 import 'normalize.css'
-
+import Vue3Lottie from 'vue3-lottie'
+import 'vue3-lottie/dist/style.css'
 import '../styles/index.less'
-import { promisefiyPostMessage } from '@/helpers/native-message';
-import { setAuth } from './music-group/layout/utils';
-import { browser } from '@/helpers/utils';
-import { state } from '@/state';
+import { promisefiyPostMessage } from '@/helpers/native-message'
+import { setAuth } from './music-group/layout/utils'
+import { browser } from '@/helpers/utils'
+import { state } from '@/state'
 
 // 获取token
 promisefiyPostMessage({ api: 'getToken' }).then((res: any) => {
@@ -40,10 +41,9 @@ if (state.platformType === 'TEACHER') {
   state.platformApi = '/api-student'
 }
 
-
 // import Vconsole from 'vconsole'
 // const vconsole = new Vconsole()
-const app = createApp(App)
+const app = createApp(App).use(Vue3Lottie)
 app.use(router)
 
 app.mount('#app')

src/teacher/main.ts

@@ -2,14 +2,15 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from '../router/index'
 import { postMessage, promisefiyPostMessage } from '@/helpers/native-message'
-
+import Vue3Lottie from 'vue3-lottie'
+import 'vue3-lottie/dist/style.css'
 import 'normalize.css'
-import 'vant/lib/index.css';
+import 'vant/lib/index.css'
 import '../styles/index.less'
 import { state } from '@/state'
 import { browser, setAuth } from '@/helpers/utils'
 
-const app = createApp(App)
+const app = createApp(App).use(Vue3Lottie)
 
 // 将selects全局混入当前vue实例中
 // import activeButtonIcon from '@/common/images/icon_check.png';
@@ -32,7 +33,6 @@ promisefiyPostMessage({ api: 'getToken' }).then((res: any) => {
   }
 })
 
-
 postMessage(
   {
     api: 'getVersion'