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 iconA from '../images/icon-photo.png'
import { useRoute } 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'

export default defineComponent({
  name: 'subsidy-exercise-detail',
  setup() {
    const route = useRoute()
    const refreshing = ref(false)
    const modelData = reactive({
      show: false,
      row: null as any
    })
    const data = reactive({
      /**补助明细 */
      record: {
        courseSalaryRecordDetailList: [] as ICourseSalaryRecordDetailItem[]
      } as ICourseSalaryRecordDetail
    })
    const getData = () => {
      request
        .post(`${state.platformApi}/schoolWeekSalaryRecord/detailInfo/course`, {
          data: {
            id: route.query.id,
            userId: state.user.data.id
          }
        })
        .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={iconA} />,
                  title: () => (
                    <div class={styles.itemTitle}>
                      <span>邓同学</span>
                    </div>
                  ),
                  value: () => (
                    <div class={styles.gridItem}>
                      <div class={styles.gridItemTop}>
                        <span class={styles.topNum}>{data.record.actualSalary}</span>元
                      </div>
                      <div class={styles.valeLabel}>实际补助</div>
                    </div>
                  )
                }}
              </Cell>
            </div>

            {data.record.courseSalaryRecordDetailList.map((item: ICourseSalaryRecordDetailItem) => (
              <div class={styles.item}>
                <Cell
                  center
                  value={`${item.days}天`}
                  isLink
                  onClick={() => {
                    modelData.show = true
                    modelData.row = item
                  }}
                >
                  {{
                    title: () => (
                      <div class={styles.itemTitle}>
                        <div class={styles.titleLine}></div>
                        <span>长笛单技训练</span>
                      </div>
                    )
                  }}
                </Cell>
                <Grid class={styles.grid} columnNum={3} border={false}>
                  <GridItem>
                    <div class={styles.gridItem}>
                      <div class={styles.gridItemTop}>
                        <span class={styles.topNum}>{item.expectSalary || 0}</span>元
                      </div>
                      <div>预计补助</div>
                    </div>
                  </GridItem>
                  <GridItem>
                    <div class={styles.gridItem}>
                      <div class={styles.gridItemTop}>
                        <span class={styles.topNum}>{item.reduceSalary || 0}</span>元
                      </div>
                      <div>考勤扣款</div>
                    </div>
                  </GridItem>
                  <GridItem>
                    <div class={styles.gridItem}>
                      <div class={styles.gridItemTop}>
                        <span class={styles.topNum}>{item.actualSalary || 0}</span>课元
                      </div>
                      <div>实际补助</div>
                    </div>
                  </GridItem>
                </Grid>
              </div>
            ))}
          </div>
        </OFullRefresh>
        <Popup
          v-model:show={modelData.show}
          position="bottom"
          closeable
          style={{
            width: '100vw',
            height: '80vh',
            '--van-popup-background': 'rgba(246,246,246,1)',
            '--van-nav-bar-icon-color': '#333',
            '--van-popup-close-icon-margin':
              'calc(var(--van-nav-bar-height) / 2 - var(--van-popup-close-icon-size) / 2)'
          }}
        >
          <NavBar title="补助明细" />
          <div
            style={{
              height: 'calc(80vh - var(--van-nav-bar-height))',
              overflow: 'hidden',
              'overflow-y': 'auto'
            }}
          >
            <Details item={modelData.row || {}} />
          </div>
        </Popup>
      </div>
    )
  }
})