orchestra-app/src/school/approval-manage/subsidy/exercise-detail.tsx

import { Cell, Grid, GridItem, NavBar, Popup, Sticky } from 'vant'
import { defineComponent, onMounted, reactive, ref } from 'vue'
import styles from '../index.module.less'
import iconTeacher from '@/common/images/icon_teacher.png'
import { useRoute, useRouter } from 'vue-router'
import request from '@/helpers/request'
import { state } from '@/state'
import OFullRefresh from '@/components/o-full-refresh'
import Details from './details'
import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import { courseEmnu } from '@/constant'
import { moneyFormat } from '@/helpers/utils'
import dayjs from 'dayjs'

export const courseSalaryRecordDetailItem = ref<ICourseSalaryRecordDetailItem>()

export default defineComponent({
  name: 'subsidy-exercise-detail',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const refreshing = ref(false)
    const modelData = reactive({
      show: false,
      row: null as any
    })
    const data = reactive({
      /**补助明细 */
      record: {
        userName: '',
        avatar: '',
        courseSalaryRecordDetailList: [] as ICourseSalaryRecordDetailItem[]
      } as ICourseSalaryRecordDetail
    })
    const getData = () => {
      request
        .post(`${state.platformApi}/schoolWeekSalaryRecord/detailInfo/course`, {
          data: {
            ...route.query
          }
        })
        .then((res: any) => {
          data.record = res?.data || {}
        })
        .finally(() => {
          refreshing.value = false
        })
    }
    onMounted(() => {
      getData()
    })
    return () => (
      <div>
        <OSticky
          onGetHeight={(height: number) => {
            document.documentElement.style.setProperty('--header-height', height + 'px')
          }}
        >
          <OHeader></OHeader>
        </OSticky>
        <OFullRefresh
          v-model:modelValue={refreshing.value}
          onRefresh={getData}
          style="min-height: calc(100vh - var(--header-height))"
        >
          <div class={styles.wrap}>
            <div class={styles.item}>
              <Cell center class={styles.rewardItem}>
                {{
                  icon: () => (
                    <img class={styles.itemPicture} src={data.record.avatar || iconTeacher} />
                  ),
                  title: () => (
                    <div class={styles.itemTitle}>
                      <span>{data.record.userName}</span>
                    </div>
                  ),
                  value: () => (
                    <>
                      <div class={styles.gridItem}>
                        <div class={styles.gridItemTop}>
                          <span class={styles.topNum} style={{ color: '#333' }}>
                            {moneyFormat(data.record.expectSalary || 0)}
                          </span>
                          元
                        </div>
                        <div class={styles.valeLabel}>预计补助</div>
                      </div>
                      <div class={styles.gridItem}>
                        <div class={styles.gridItemTop}>
                          <span class={styles.topNum}>
                            {moneyFormat(data.record.actualSalary || 0)}
                          </span>
                          元
                        </div>
                        <div class={styles.valeLabel}>实际补助</div>
                      </div>
                    </>
                  )
                }}
              </Cell>
            </div>

            {data.record.courseSalaryRecordDetailList.map((item: ICourseSalaryRecordDetailItem) => (
              <div class={styles.item}>
                <Cell
                  center
                  value={`${dayjs(item.date).format('YYYY-MM-DD')}`}
                  valueClass={styles.exerciseValue}
                  isLink
                  class={styles.itemCourseName}
                  onClick={() => {
                    courseSalaryRecordDetailItem.value = item
                    router.push({
                      path: '/subsidy-exercise-details',
                      query: {
                        ...route.query,
                        courseType: item.courseType,
                        courseSalaryId: item.courseSalaryId
                      }
                    })
                  }}
                >
                  {{
                    title: () => (
                      <div class={styles.itemTitle}>
                        <div class={styles.titleLine}></div>
                        <span>{courseEmnu[item.courseType]}</span>
                      </div>
                    )
                  }}
                </Cell>
                <Grid class={styles.grid} columnNum={3} border={false}>
                  <GridItem>
                    <div class={styles.gridItem}>
                      <div class={styles.gridItemTop}>
                        <span class={[styles.topNum, styles.small]} style={{ color: '#333' }}>
                          {moneyFormat(item.expectSalary || 0)}
                        </span>
                        元
                      </div>
                      <div>补助标准</div>
                    </div>
                  </GridItem>
                  <GridItem>
                    <div class={styles.gridItem}>
                      <div class={styles.gridItemTop}>
                        <span class={[styles.topNum, styles.small]} style={{ color: '#333' }}>
                          {moneyFormat(item.reduceSalary || 0)}
                        </span>
                        元
                      </div>
                      <div>扣款金额</div>
                    </div>
                  </GridItem>
                  <GridItem>
                    <div class={styles.gridItem}>
                      <div class={styles.gridItemTop}>
                        <span class={[styles.topNum, styles.small]}>
                          {moneyFormat(item.actualSalary || 0)}
                        </span>
                        元
                      </div>
                      <div>实际补助</div>
                    </div>
                  </GridItem>
                </Grid>
              </div>
            ))}
          </div>
        </OFullRefresh>
      </div>
    )
  }
})