1

1

src/router/routes-school.ts

@@ -268,7 +268,16 @@ export default [
         meta: {
           title: '修改学校地址'
         }
+      },
+      {
+        path: '/attendance-rule',
+        name: 'attendance-rule',
+        component: () => import('@/views/attendance-rule/index'),
+        meta: {
+          title: '考勤规则'
+        }
       }
+
       //
     ]
   },

src/router/routes-teacher.ts

@@ -53,6 +53,14 @@ export default [
         meta: {
           title: '我的考勤'
         }
+      },
+      {
+        path: '/attendance-rule',
+        name: 'attendance-rule',
+        component: () => import('@/views/attendance-rule/index'),
+        meta: {
+          title: '考勤规则'
+        }
       }
     ]
   },

src/school/attendance/components/attend-teacher.tsx

@@ -77,9 +77,7 @@ export default defineComponent({
         }
 
         forms.page = res.data.current + 1
-        for (let i = 0; i < 10; i++) {
-          list.value = list.value.concat(res.data.rows || [])
-        }
+        list.value = list.value.concat(res.data.rows || [])
 
         showContact.value = list.value.length > 0
         loading.value = false

src/views/attendance-rule/index.module.less

@@ -0,0 +1,98 @@
+.attCollapseWrap {
+  margin-top: 12px;
+  :global {
+    .van-collapse {
+      border: none;
+      &:after {
+        transform: scale(0);
+      }
+    }
+    .van-collapse-item {
+      margin: 0 13px 12px;
+      width: auto;
+      overflow: hidden;
+      border-radius: 10px;
+      border: none;
+      background-color: #fff;
+    }
+    .van-collapse-item__content {
+      padding: 0 15px 18px;
+      padding-top: 18px;
+      border-top: 1px solid #f2f2f2;
+      // margin-top: 18px;
+    }
+    .van-icon {
+      color: #333;
+      font-size: 16px;
+    }
+    .van-cell {
+      padding: 0;
+      align-items: center;
+      padding-right: 15px;
+    }
+    .van-cell__title {
+      align-items: center;
+      font-size: 18px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #333333;
+      line-height: 25px;
+      padding: 18px 15px;
+      border: none;
+      &:active {
+      }
+    }
+  }
+  .collapseTitle {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    line-height: 25px;
+    .dot {
+      width: 4px;
+      height: 13px;
+      background: #ff8057;
+      border-radius: 2px;
+      margin-right: 6px;
+    }
+  }
+  .mainMsg {
+    background: #ffeee2;
+    border-radius: 8px;
+    line-height: 38px;
+    background: #ffeee2;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    color: #f67146;
+    padding: 0 8px;
+    margin-bottom: 18px;
+
+    .clockIcon {
+      width: 18px;
+      height: 18px;
+      margin-right: 4px;
+    }
+  }
+  .textWrap {
+    margin-bottom: 16px;
+    h4 {
+      font-size: 16px;
+      font-weight: 500;
+      color: #333333;
+      line-height: 22px;
+      margin-bottom: 8px;
+    }
+    p {
+      font-size: 14px;
+      font-weight: 400;
+      color: #777777;
+      line-height: 21px;
+      margin-bottom: 8px;
+      span {
+        color: #f44541;
+      }
+    }
+  }
+}

src/views/attendance-rule/index.tsx

@@ -0,0 +1,197 @@
+import OHeader from '@/components/o-header'
+import OSticky from '@/components/o-sticky'
+import { useRect } from '@vant/use'
+
+import { Collapse, CollapseItem, dividerProps } from 'vant'
+import { defineComponent, onMounted, reactive, ref, nextTick } from 'vue'
+import { useRouter } from 'vue-router'
+import clockIcon from './images/clock-icon.png'
+import styles from './index.module.less'
+const activeName = ref('student')
+export default defineComponent({
+  name: 'attendance-rule',
+  setup() {
+    const router = useRouter()
+    const state = reactive({
+      activeNames: ['1']
+    })
+    const stickyRef = ref()
+
+    return () => (
+      <>
+        <OSticky position="top" background="#F8F8F8">
+          <OHeader></OHeader>
+        </OSticky>
+        <div class={styles.attCollapseWrap}>
+          <Collapse v-model={state.activeNames}>
+            <CollapseItem
+              name="1"
+              border={false}
+              v-slots={{
+                title: () => (
+                  <div class={styles.collapseTitle}>
+                    <span class={styles.dot}></span>
+                    签到规则
+                  </div>
+                )
+              }}
+            >
+              <div>
+                <div class={styles.mainMsg}>
+                  <img src={clockIcon} alt="" class={styles.clockIcon} />
+                  <p>以课程时间12:00:00 ~ 13:00:00为例</p>
+                </div>
+                <div class={styles.textWrap}>
+                  <h4>可签到时间范围：</h4>
+                  <p>
+                    课程<span>开始前60分钟</span>至课程<span>结束前</span>
+                  </p>
+                  <p>时间段：11:00:00 ~ 13:00</p>
+                </div>
+
+                <div class={styles.textWrap}>
+                  <h4>正常签到：</h4>
+                  <p>
+                    课程<span>开始前60分钟</span>至课程<span>开始前20分钟</span>
+                    签到GPS定位点在教学点<span>1000米内</span>
+                  </p>
+                  <p>时间段：11:00:00 ~ 11:40:00</p>
+                </div>
+
+                <div class={styles.textWrap}>
+                  <h4>异常签到：</h4>
+                  <p>
+                    课程<span>开始前20分钟</span>后至课程<span>开始前</span>
+                    签到GPS定位点在教学点<span>1000米外</span>
+                  </p>
+                  <p>时间段：11:00:00 ~ 11:40:00</p>
+                  <p>
+                    扣除训练补助：<span>-50元</span>
+                  </p>
+                </div>
+
+                <div class={styles.textWrap}>
+                  <h4>迟到：</h4>
+                  <p>
+                    课程<span>开始后30分钟</span>内签到
+                  </p>
+                  <p>时间段：12:00:00 ~ 12:30:00</p>
+                  <p>
+                    扣除训练补助：<span>-100%</span>
+                  </p>
+                </div>
+
+                <div class={styles.textWrap}>
+                  <h4>旷课：</h4>
+                  <p>
+                    课程<span>开始后30分钟</span>至课程<span>结束前</span>签到
+                  </p>
+                  <p>时间段：11:30:00后签到（含11:30:00）</p>
+                  <p>
+                    扣除训练补助：<span>-100%</span>
+                  </p>
+                </div>
+
+                <div class={styles.textWrap}>
+                  <h4>未签到：</h4>
+                  <p>未进行【签到】操作</p>
+                  <p>
+                    扣除训练补助：<span>-100%</span>
+                  </p>
+                </div>
+              </div>
+            </CollapseItem>
+            <CollapseItem
+              name="2"
+              border={false}
+              v-slots={{
+                title: () => (
+                  <div class={styles.collapseTitle}>
+                    <span class={styles.dot}></span>
+                    签退规则
+                  </div>
+                )
+              }}
+            >
+              <div>
+                <div class={styles.mainMsg}>
+                  <img src={clockIcon} alt="" class={styles.clockIcon} />
+                  <p>以课程时间12:00:00 ~ 13:00:00为例</p>
+                </div>
+                <div class={styles.textWrap}>
+                  <h4>可签退时间范围：</h4>
+                  <p>
+                    课程<span>开始后</span>至课程当天24点前
+                  </p>
+                  <p>时间段：12:00:00 ~ 23:59:59</p>
+                </div>
+
+                <div class={styles.textWrap}>
+                  <h4>正常签退：</h4>
+                  <p>
+                    课程<span>结束后</span>至课程<span>开始后360分钟</span>
+                    签退GPS定位点在教学点<span>1000米内</span>
+                  </p>
+                  <p>时间段：13:00:00 ~ 19:00:00</p>
+                </div>
+                <div class={styles.textWrap}>
+                  <h4>早退：</h4>
+                  <p>
+                    课程<span>开始后30分钟</span>内签到
+                  </p>
+                  <p>时间段：12:00:00 ~ 12:30:00</p>
+                  <p>
+                    扣除训练补助：<span>-100%</span>
+                  </p>
+                </div>
+
+                <div class={styles.textWrap}>
+                  <h4>异常签到：</h4>
+                  <p>
+                    课程<span>开始前20分钟</span>后至课程<span>开始前</span>
+                    签到GPS定位点在教学点<span>1000米外</span>
+                  </p>
+                  <p>时间段：11:00:00 ~ 11:40:00</p>
+                  <p>
+                    扣除训练补助：<span>-50元</span>
+                  </p>
+                </div>
+
+                <div class={styles.textWrap}>
+                  <h4>旷课：</h4>
+                  <p>
+                    课程<span>开始后30分钟</span>至课程<span>结束前</span>签到
+                  </p>
+                  <p>时间段：11:30:00后签到（含11:30:00）</p>
+                  <p>
+                    扣除训练补助：<span>-100%</span>
+                  </p>
+                </div>
+
+                <div class={styles.textWrap}>
+                  <h4>未签到：</h4>
+                  <p>未进行【签到】操作</p>
+                  <p>
+                    扣除训练补助：<span>-100%</span>
+                  </p>
+                </div>
+              </div>
+            </CollapseItem>
+            <CollapseItem
+              name="3"
+              border={false}
+              v-slots={{
+                title: () => (
+                  <div class={styles.collapseTitle}>
+                    <span class={styles.dot}></span>
+                    签到规则
+                  </div>
+                )
+              }}
+            ></CollapseItem>
+          </Collapse>
+        </div>
+      </>
+    )
+  }
+})