补助明细

src/school/approval-manage/index.module.less

@@ -36,7 +36,7 @@
     }
   }
 }
-.wrap{
+.wrap {
   padding: 12px 0;
   box-sizing: border-box;
 }
@@ -108,8 +108,8 @@
 }
 .tipItem {
   margin: 0;
-  :global{
-    .van-cell{
+  :global {
+    .van-cell {
       padding: 25px 25px 20px 25px;
     }
   }
@@ -169,13 +169,15 @@
     font-size: 16px;
     color: #333;
     padding-bottom: 6px;
+    line-height: 22px;
   }
   .itemContentTitleDetail {
     font-size: 14px;
   }
   .itemContentLabel {
-    font-size: 14px;
+    font-size: 12px;
     color: #777;
+    line-height: 20px;
   }
 }
 
@@ -229,7 +231,7 @@
     margin-left: 5px;
   }
 }
-.confirmBtn{
+.confirmBtn {
   position: fixed;
   left: 0;
   bottom: 0;
@@ -237,4 +239,4 @@
   padding: 15px 25px;
   background: #fff;
   z-index: 10;
-}
+}

src/school/approval-manage/subsidy/details.tsx

@@ -1,93 +1,120 @@
 import { Cell, Grid, GridItem } from 'vant'
-import { defineComponent, PropType } from 'vue'
+import { defineComponent, onMounted, PropType } from 'vue'
 import styles from '../index.module.less'
 import iconA from '../images/icon-photo.png'
 import iconTime from '../images/icon-time.png'
 import iconPrimary from '../images/icon-primary.png'
 import iconError from '../images/icon-error.png'
-import {courseEmnu} from '@/constant'
+import { courseEmnu } from '@/constant'
+import { courseSalaryRecordDetailItem } from './exercise-detail'
+import OSticky from '@/components/o-sticky'
+import OHeader from '@/components/o-header'
+import OEmpty from '@/components/o-empty'
+import dayjs from 'dayjs'
+import { getSecondRPM } from '@/helpers/utils'
 
 export default defineComponent({
   name: 'subsidy-detail',
-  props: {
-    item: {
-      type: Object,
-      default: () => {}
+  setup() {
+    const record: ICourseSalaryRecordDetailItem = courseSalaryRecordDetailItem.value! || ''
+    if (Array.isArray(record?.courseScheduleTeacherAttendanceList)) {
+      record.courseScheduleTeacherAttendanceList.forEach((n: any) => {
+        n.times =
+          (n?.startTime ? dayjs(n.startTime).format('YYYY-MM-DD HH:mm') : '') +
+          ' ～ ' +
+          (n?.endTime ? dayjs(n.endTime).format('HH:mm') : '')
+        n.signInTime = n?.signInTime?.split(' ')[1]
+        n.signOutTime = n?.signOutTime?.split(' ')[1]
+      })
     }
-  },
-  setup(props) {
-    console.log("🚀 ~ props", props)
-    const item = (props?.item || {}) as ICourseSalaryRecordDetailItem
     return () => (
-      <div class={styles.wrap}>
-        <div class={[styles.item, styles.listItem]}>
-          <Cell border={false} center class={styles.listItem} title="补助标准" value={`${item.standardSalary}元/天`} />
-          <Cell
-            border={false}
-            center
-            class={styles.listItem}
-            title="补助课程"
-            value={courseEmnu[item.courseType]}
-          />
-          <Cell
-            border={false}
-            center
-            class={styles.listItem}
-            title="课件使用未达标"
-            value={`-${item.reduceSalary}元`}
-          />
-          <Cell border={false} center class={styles.listItem} title="早退" value={`-0.00元`} />
-          <Cell
-            border={false}
-            center
-            class={styles.listItem}
-            title="实际补助金额"
-            value={`${item.actualSalary}元`}
-          />
-        </div>
+      <div>
+        <OSticky>
+          <OHeader />
+        </OSticky>
+        {!!record && (
+          <div class={styles.wrap}>
+            <div class={[styles.item, styles.listItem]}>
+              <Cell
+                border={false}
+                center
+                class={styles.listItem}
+                title="补助标准"
+                value={`${record.standardSalary}元/天`}
+              />
+              <Cell
+                border={false}
+                center
+                class={styles.listItem}
+                title="补助课程"
+                value={courseEmnu[record.courseType]}
+              />
+              <Cell
+                border={false}
+                center
+                class={styles.listItem}
+                title="课件使用未达标"
+                value={`-${record.reduceSalary}元`}
+              />
+              <Cell border={false} center class={styles.listItem} title="早退" value={`-0.00元`} />
+              <Cell
+                border={false}
+                center
+                class={styles.listItem}
+                title="实际补助金额"
+                value={`${record.actualSalary}元`}
+              />
+            </div>
 
-        {item?.courseScheduleTeacherAttendanceList.map((item: ICourseScheduleTeacherAttendance) => (
-          <div class={styles.item}>
-            <Cell center>
-              {{
-                title: () => (
-                  <div class={styles.itemTitle}>
-                    <img class={styles.titleIcon} src={iconTime} />
-                    <span>{item.startTime} - {item.endTime}</span>
-                  </div>
-                )
-              }}
-            </Cell>
-            <div class={styles.itemContent}>
-              <div class={styles.itemContentTitle}>
-                <span>{item.classGroupName}-{item.teacherName}</span>
-                <span
-                  class={styles.itemContentTitleDetail}
-                  style={{ color: 1 ? '#358AF5' : '#F44541' }}
-                >
-                  课件使用：15/20分钟
-                </span>
-              </div>
-              <div class={styles.itemContentLabel}>{item.orchestraName}</div>
-              <div class={styles.times}>
-                <div class={[styles.timesItem, styles.startTime]}>
-                  <div class={styles.startTimeTop}>
-                    <span>签到时间</span>
-                    <img src={item.signInStatus === 'NORMAL' ? iconPrimary : iconError} />
+            {record?.courseScheduleTeacherAttendanceList?.map(
+              (item: ICourseScheduleTeacherAttendance) => (
+                <div class={styles.item}>
+                  <Cell center>
+                    {{
+                      title: () => (
+                        <div class={styles.itemTitle}>
+                          <img class={styles.titleIcon} src={iconTime} />
+                          <span>{item.times}</span>
+                        </div>
+                      )
+                    }}
+                  </Cell>
+                  <div class={styles.itemContent}>
+                    <div class={styles.itemContentTitle}>
+                      <span>
+                        {item.classGroupName}-{item.teacherName}
+                      </span>
+                      <span
+                        class={styles.itemContentTitleDetail}
+                        style={{ color: 1 ? '#358AF5' : '#F44541' }}
+                      >
+                        课件使用：{getSecondRPM(item.coursewarePlayTime)}/{getSecondRPM(item.adviseStudyTimeSecond)}分钟
+                      </span>
+                    </div>
+                    <div class={styles.itemContentLabel}>{item.orchestraName}</div>
+                    <div class={styles.times}>
+                      <div class={[styles.timesItem, styles.startTime]}>
+                        <div class={styles.startTimeTop}>
+                          <span>签到时间</span>
+                          <img src={item.signInStatus === 'NORMAL' ? iconPrimary : iconError} />
+                        </div>
+                        <div class={styles.startTimeBottom}>{item.signInTime}</div>
+                      </div>
+                      <div class={[styles.timesItem, styles.endTime]}>
+                        <div class={styles.startTimeTop}>
+                          <span>签退时间</span>
+                          <img src={item.signOutStatus === 'NORMAL' ? iconPrimary : iconError} />
+                        </div>
+                        <div class={styles.startTimeBottom}>{item.signOutTime}</div>
+                      </div>
+                    </div>
                   </div>
-                  <div class={styles.startTimeBottom}>{item.signInTime}</div>
                 </div>
-                <div class={[styles.timesItem, styles.endTime]}>
-                  <div class={styles.startTimeTop}>
-                    <span>签退时间</span>
-                    <img src={item.signOutStatus === 'NORMAL' ?iconPrimary : iconError} />
-                  </div>
-                  <div class={styles.startTimeBottom}>{item.signOutTime}</div>
-                </div>
-              </div>
-            </div>
+              )
+            )}
           </div>
-        ))}
+        )}
+        {!record && <OEmpty tips="暂无明细" />}
       </div>
     )
   }

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

@@ -2,7 +2,7 @@ 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 { useRoute, useRouter } from 'vue-router'
 import request from '@/helpers/request'
 import { state } from '@/state'
 import OFullRefresh from '@/components/o-full-refresh'
@@ -10,10 +10,13 @@ import Details from './details'
 import OHeader from '@/components/o-header'
 import OSticky from '@/components/o-sticky'
 
+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,
@@ -22,6 +25,8 @@ export default defineComponent({
     const data = reactive({
       /**补助明细 */
       record: {
+        userName: '',
+        avatar: '',
         courseSalaryRecordDetailList: [] as ICourseSalaryRecordDetailItem[]
       } as ICourseSalaryRecordDetail
     })
@@ -29,9 +34,9 @@ export default defineComponent({
       request
         .post(`${state.platformApi}/schoolWeekSalaryRecord/detailInfo/course`, {
           data: {
-            id: route.query.id,
-            userId: state.user.data.id
-          }
+            ...route.query
+          },
+          hideLoading: refreshing.value
         })
         .then((res: any) => {
           data.record = res?.data || {}
@@ -61,10 +66,10 @@ export default defineComponent({
             <div class={styles.item}>
               <Cell center class={styles.rewardItem}>
                 {{
-                  icon: () => <img class={styles.itemPicture} src={iconA} />,
+                  icon: () => <img class={styles.itemPicture} src={data.record.avatar || iconA} />,
                   title: () => (
                     <div class={styles.itemTitle}>
-                      <span>邓同学</span>
+                      <span>{data.record.userName}</span>
                     </div>
                   ),
                   value: () => (
@@ -86,8 +91,10 @@ export default defineComponent({
                   value={`${item.days}天`}
                   isLink
                   onClick={() => {
-                    modelData.show = true
-                    modelData.row = item
+                    courseSalaryRecordDetailItem.value = item
+                    router.push({
+                      path: '/subsidy-exercise-details'
+                    })
                   }}
                 >
                   {{
@@ -129,30 +136,6 @@ export default defineComponent({
             ))}
           </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>
     )
   }

src/school/approval-manage/subsidy/index.tsx

@@ -17,12 +17,13 @@ export default defineComponent({
     const router = useRouter()
     const dialog = ref(false)
     const refreshing = ref(false)
+    const recordId = ref('')
     const data = reactive({
       startDate: '',
       endDate: '',
       manageSalary: '',
       courseSalary: '',
-      practiceSalary: '',
+      trainingSalary: '',
       /**管理补助 */
       manageSalaryInfo: {} as any,
       /**训练补助 */
@@ -47,7 +48,8 @@ export default defineComponent({
             endDate = '',
             manageSalary,
             courseSalary,
-            practiceSalary
+            trainingSalary,
+            id
           } = res.data
           data.courseSalaryInfo = courseSalaryInfo
           data.manageSalaryInfo = manageSalaryInfo
@@ -56,7 +58,8 @@ export default defineComponent({
           data.endDate = endDate?.split(' ')[0] || ''
           data.manageSalary = manageSalary
           data.courseSalary = courseSalary
-          data.practiceSalary = practiceSalary
+          data.trainingSalary = trainingSalary
+          recordId.value = id
         }
       } catch (error) {}
       refreshing.value = false
@@ -127,7 +130,7 @@ export default defineComponent({
                   <GridItem>
                     <div class={styles.gridItem}>
                       <div class={styles.gridItemTop}>
-                        <span class={styles.topNum}>{data.practiceSalary || 0}</span>元
+                        <span class={styles.topNum}>{data.trainingSalary || 0}</span>元
                       </div>
                       <div>练习奖励</div>
                     </div>
@@ -293,7 +296,7 @@ export default defineComponent({
                       center
                       title={teacher.userName}
                       isLink
-                      to={'/subsidy-exercise-detail?id=' + teacher.id}
+                      to={`/subsidy-exercise-detail?id=${recordId.value}&userId=${teacher.userId}`}
                     >
                       {{
                         icon: () => (

src/school/approval-manage/subsidy/subsidyTypes.ts

@@ -156,6 +156,10 @@ interface ICourseSalaryRecordDetail {
   actualSalary: number
   /**预计补助金额 */
   expectSalary: number
+  /**老师名字 */
+  userName: string
+  /**老师头像 */
+  avatar: string
 }
 /**课程补助详情数据集合 */
 interface ICourseSalaryRecordDetailItem {
@@ -189,6 +193,12 @@ interface ICourseSalaryRecordDetailItem {
 }
 /**伴学指导签到 */
 interface ICourseScheduleTeacherAttendance {
+  /** 播放时长 */
+  coursewarePlayTime: number
+  /**建议学习时长 */
+  adviseStudyTimeSecond: number
+  /**上课时间 */
+  times: string
   /**老师名称 */
   teacherName: string
   /**乐团名称 */