orchestra-app/src/views/attendance-rule/index.tsx

import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import { Collapse, CollapseItem } from 'vant'
import { defineComponent, reactive, onMounted, nextTick, ref } from 'vue'
import clockIcon from './images/clock-icon.png'
import styles from './index.module.less'
import request from '@/helpers/request'
import { addFormMinute, reduceFormMinute } from '@/helpers/date'
import { useRect } from '@vant/use'
import { Html5Event } from 'plyr'
import { useRoute } from 'vue-router'
import { state as baseState } from '@/state'
export default defineComponent({
  name: 'attendance-rule',
  setup() {
    const route = useRoute()
    const state = reactive({
      activeNames: '',
      wrapHeight: 0
    })
    const divRef = ref()
    const forms = reactive({} as any)
    const getRules = async () => {
      try {
        const { data } = await request.get(
          baseState.platformApi + '/courseSchedule/getAttendanceConfig',
          {
            params: {
              courseScheduleId: route.query.courseScheduleId,
              group: 'ATTENDANCE'
            }
          }
        )
        if (data) {
          data.forEach((item: any) => {
            forms[item.paramName] = item.paramValue
          })
        }
        console.log(forms)
      } catch (e) {
        console.log(e)
      }
    }
    onMounted(() => {
      getRules()
      nextTick(() => {
        setTimeout(() => {
          console.log(divRef.value)
          const { height, top } = useRect(divRef.value as Element)
          state.wrapHeight = height + top + 45
        }, 100)
      })
    })
    return () => (
      <>
        <OSticky position="top" background="#F8F8F8">
          <OHeader />
        </OSticky>
        <div class={styles.attCollapseWrap} ref={divRef}>
          <Collapse v-model={state.activeNames} accordion>
            <CollapseItem
              name="1"
              border={false}
              v-slots={{
                title: () => (
                  <div class={styles.collapseTitle}>
                    <span class={styles.dot}></span>
                    签到规则
                  </div>
                )
              }}
            >
              <div
                class={styles.collapseWrap}
                style={{ height: `calc(100vh - ${state.wrapHeight}px)` }}
              >
                <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>
                      开始前{forms['normal_sign_in_start'] ? forms['normal_sign_in_start'] : 0}分钟
                    </span>
                    至课程<span>结束前</span>
                  </p>
                  <p>
                    时间段：{reduceFormMinute('12:00:00', forms['normal_sign_in_start'])} ~13:00:00{' '}
                  </p>
                </div>

                <div class={styles.textWrap}>
                  <h4>正常签到：</h4>
                  <p>
                    课程
                    <span>
                      开始前{forms['normal_sign_in_start'] ? forms['normal_sign_in_start'] : 0}分钟
                    </span>
                    至课程
                    <span>
                      开始前{forms['normal_sign_in_end'] ? forms['normal_sign_in_end'] : 0}分钟
                    </span>
                    签到 <br />
                    GPS定位点在教学点
                    <span>
                      {forms['scope_of_attendance'] ? forms['scope_of_attendance'] : 0}米内
                    </span>
                  </p>
                  <p>
                    时间段：{reduceFormMinute('12:00:00', forms['normal_sign_in_start'])} ~{' '}
                    {reduceFormMinute('12:00:00', forms['normal_sign_in_end'])}
                  </p>
                </div>

                {/* <div class={styles.textWrap}>
                  <h4>异常签到：</h4>
                  <p>
                    课程
                    <span>
                      开始前{forms['normal_sign_in_end'] ? forms['normal_sign_in_end'] : 0}分钟
                    </span>
                    后至课程
                    <span>开始前</span>
                    签到
                    <br />
                    GPS定位点在教学点
                    <span>
                      {forms['scope_of_attendance'] ? forms['scope_of_attendance'] : 0}米内
                    </span>
                  </p>
                  <p>
                    时间段：{reduceFormMinute('12:00:00', forms['abnormal_sign_in'])} ~ 12:00:00
                  </p>
                  <p>
                    扣除训练补助：
                    <span>
                      -{forms['abnormal_sign_in_fee'] ? forms['abnormal_sign_in_fee'] : 0}
                      {forms['abnormal_sign_in_fee_type'] == 'MONEY' ? '元' : '%'}
                    </span>
                  </p>
                </div>

                <div class={styles.textWrap}>
                  <h4>迟到：</h4>
                  <p>
                    课程
                    <span>开始后{forms['absence_sign_in'] ? forms['absence_sign_in'] : 0}分钟</span>
                    内签到
                  </p>
                  <p>时间段：12:00:00 ~ {addFormMinute('12:00:00', forms['absence_sign_in'])}</p>
                  <p>
                    扣除训练补助：
                    <span>
                      -{forms['late_sign_in_fee'] ? forms['late_sign_in_fee'] : 0}
                      {forms['late_sign_in_fee_type'] == 'MONEY' ? '元' : '%'}
                    </span>
                  </p>
                </div>

                <div class={styles.textWrap}>
                  <h4>旷课：</h4>
                  <p>
                    课程
                    <span>开始后{forms['absence_sign_in'] ? forms['absence_sign_in'] : 0}分钟</span>
                    至课程<span>结束前</span>
                    签到
                  </p>
                  <p>
                    时间段：{addFormMinute('12:00:00', forms['absence_sign_in'])}后签到（含
                    {addFormMinute('12:00:00', forms['absence_sign_in'])}）
                  </p>
                  <p>
                    扣除训练补助：
                    <span>
                      -{forms['absence_sign_in_fee'] ? forms['absence_sign_in_fee'] : 0}
                      {forms['absence_sign_in_fee_type'] == 'MONEY' ? '元' : '%'}
                    </span>
                  </p>
                </div>

                <div class={styles.textWrap}>
                  <h4>未签到：</h4>
                  <p>未进行【签到】操作</p>
                  <p>
                    扣除训练补助：
                    <span>
                      -{forms['not_sign_in_fee'] ? forms['not_sign_in_fee'] : 0}{' '}
                      {forms['not_sign_in_fee_type'] == 'MONEY' ? '元' : '%'}
                    </span>
                  </p>
                </div> */}
              </div>
            </CollapseItem>
            <CollapseItem
              name="2"
              border={false}
              class={styles.sticky}
              v-slots={{
                title: () => (
                  <div class={styles.collapseTitle}>
                    <span class={styles.dot}></span>
                    签退规则
                  </div>
                )
              }}
            >
              <div
                class={styles.collapseWrap}
                style={{ height: `calc(100vh - ${state.wrapHeight}px)` }}
              >
                <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>结束后{forms['normal_sign_out'] ? forms['normal_sign_out'] : 0}分钟</span>
                    签退 <br />
                    GPS定位点在教学点
                    <span>
                      {forms['scope_of_attendance'] ? forms['scope_of_attendance'] : 0}米内
                    </span>
                  </p>
                  <p>时间段：13:00:00 ~ {addFormMinute('13:00:00', forms['normal_sign_out'])}</p>
                </div>
                {/* <div class={styles.textWrap}>
                  <h4>早退：</h4>
                  <p>
                    课程
                    <span>
                      结束前{forms['premise_sign_out'] ? forms['premise_sign_out'] : 0}分钟
                    </span>
                    内签退
                  </p>
                  <p>
                    时间段：{reduceFormMinute('13:00:00', forms['premise_sign_out'])}前签退（含
                    {reduceFormMinute('13:00:00', forms['premise_sign_out'])}）{' '}
                  </p>
                  <p>
                    扣除训练补助：
                    <span>
                      -{forms['premise_sign_out_fee'] ? forms['premise_sign_out_fee'] : 0}
                      {forms['premise_sign_out_fee_type'] == 'MONEY' ? '元' : '%'}
                    </span>
                  </p>
                </div>

                <div class={styles.textWrap}>
                  <h4>异常签退：</h4>
                  <p>
                    课程
                    <span>
                      结束前{forms['abnormal_sign_out'] ? forms['abnormal_sign_out'] : 0}分钟
                    </span>
                    至<span>课程结束前</span>
                    <br /> 或GPS定位点在教学点
                    <span>
                      {' '}
                      {forms['scope_of_attendance'] ? forms['scope_of_attendance'] : 0}米内
                    </span>
                  </p>
                  <p>
                    时间段：{reduceFormMinute('13:00:00', forms['abnormal_sign_out'])} ~ 12:59:59
                  </p>
                  <p>
                    扣除训练补助：
                    <span>
                      -{forms['abnormal_sign_out_fee'] ? forms['abnormal_sign_out_fee'] : 0}{' '}
                      {forms['abnormal_sign_out_fee_type'] == 'MONEY' ? '元' : '%'}
                    </span>
                  </p>
                </div>

                <div class={styles.textWrap}>
                  <h4>未签退：</h4>
                  <p>未进行【签退】操作</p>
                  <p>
                    扣除训练补助：
                    <span>
                      -{forms['not_sign_out_fee'] ? forms['not_sign_out_fee'] : 0}
                      {forms['not_sign_out_fee_type'] == 'MONEY' ? '元' : '%'}
                    </span>
                  </p>
                </div> */}
              </div>
            </CollapseItem>
            {/* <CollapseItem
              name="3"
              border={false}
              v-slots={{
                title: () => (
                  <div class={styles.collapseTitle}>
                    <span class={styles.dot}></span>
                    GPS定位
                  </div>
                )
              }}
            >
              <div
                class={styles.collapseWrap}
                style={{ maxHeight: `calc(100vh - ${state.wrapHeight}px)` }}
              >
                <div class={styles.textWrap}>
                  <p>
                    <span>
                      若签到时间在正常范围内
                      <br /> 但同时GPS定位在教学点
                      {forms['scope_of_attendance'] ? forms['scope_of_attendance'] : 0}
                      米外
                    </span>
                  </p>
                  <p>
                    扣除训练补助：
                    <span>
                      - {forms['sign_in_attendance'] ? forms['sign_in_attendance'] : 0}
                      {forms['sign_in_attendance_type'] == 'MONEY' ? '元' : '%'}
                    </span>
                  </p>
                </div>
                <div class={styles.textWrap}>
                  <p>
                    <span>
                      若签退时间在正常范围内 <br /> 但同时GPS定位在教学点
                      {forms['scope_of_attendance'] ? forms['scope_of_attendance'] : 0}
                      米外
                    </span>
                  </p>
                  <p>
                    扣除训练补助：
                    <span>
                      - {forms['sign_out_attendance'] ? forms['sign_out_attendance'] : 0}
                      {forms['sign_out_attendance_type'] == 'MONEY' ? '元' : '%'}
                    </span>
                  </p>
                </div>
              </div>
            </CollapseItem> */}
          </Collapse>
        </div>
      </>
    )
  }
})