orchestra-app/src/teacher/attendance/modals/teacherAtt-item.tsx

import { defineComponent, reactive, ref } from 'vue'
import styles from './teacherAtt-item.module.less'
import clockIcon from '@/school/attendance/images/clock-icon.png'
import errorIcon from '@/school/attendance/images/error-icon.png'
import successIcon from '@/school/attendance/images/success-icon.png'
import { Icon, ActionSheet } from 'vant'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router'
export default defineComponent({
  props: ['item'],
  name: 'teacherAtt-item',
  setup(props) {
    const router = useRouter()
    const gotoTeacherDetail = () => {
      router.push({
        path: '/teacher-attendDetail',
        query: { courseScheduleId: props.item.courseScheduleId }
      })
    }
    return () => (
      <>
        <div class={styles.itemWrap} onClick={gotoTeacherDetail}>
          <div class={styles.itemWrapTop}>
            <div class={styles.itemWrapTopLeft}>
              <div class={styles.clockWrap}>
                <img src={clockIcon} alt="" />
              </div>
              <p class={styles.leftTimer}>
                {dayjs(props.item.startTime).format('YYYY-MM-DD HH:mm')}
                {'-'}
                {dayjs(props.item.endTime).format('HH:mm')}
              </p>
            </div>
            <div class={styles.itemWrapTopRight}>
              <Icon name="arrow"></Icon>
            </div>
          </div>
          <div class={styles.itemWrapBottom}>
            <div class={styles.courseInfo}>
              <div class={styles.infoMsg}>
                <p class={styles.infoMsgMain}>{props.item.classGroupName}</p>
                <p class={styles.infoMsgSub}>{props.item.orchestraName}</p>
              </div>
              {props.item.subsidyFlag ? (
                <div class={styles.typeTag}>补助课</div>
              ) : (
                <div class={styles.typeTagNo}>非补助课</div>
              )}
            </div>
            <div class={styles.attInfo}>
              <div class={props.item.signInStatus === 'NORMAL' ? styles.passWrap : styles.goWrap}>
                <div class={styles.attInfoDot}>
                  <div class={styles.attInfoDotTitle}>
                    <span>签到时间</span>
                    <img
                      src={props.item.signInStatus === 'NORMAL' ? successIcon : errorIcon}
                      alt=""
                    />
                  </div>
                  <p class={styles.signTime}>
                    {props.item.signInTime
                      ? dayjs(props.item.signInTime).format('HH:mm:ss')
                      : '未签到'}
                  </p>
                </div>
              </div>
              <div class={props.item.signOutStatus === 'NORMAL' ? styles.passWrap : styles.goWrap}>
                <div class={styles.attInfoDot}>
                  <div class={styles.attInfoDotTitle}>
                    <span>签退时间</span>
                    <img
                      src={props.item.signOutStatus === 'NORMAL' ? successIcon : errorIcon}
                      alt=""
                    />
                  </div>
                  <p class={styles.signTime}>
                    {props.item.signOutTime
                      ? dayjs(props.item.signOutTime).format('HH:mm:ss')
                      : '未签到'}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </>
    )
  }
})