修改小组课样式

src/business-components/group-plan-step/index.module.less

@@ -0,0 +1,76 @@
+.groupPlanStep {
+  background: #FFFFFF;
+  border-radius: 10px;
+  overflow: hidden;
+  margin: 12px 14px 0;
+  :global {
+    .van-cell {
+      padding: 12px;
+      --van-cell-border-color: #f2f2f2;
+    }
+  }
+
+  .iconTimer {
+    width: 16px;
+    height: 16px;
+    margin-right: 7px;
+  }
+  .name {
+    font-size: 13px;
+    color: #666666;
+    line-height: 18px;
+  }
+
+  .top {
+    display: flex;
+    align-items: center;
+    padding-bottom: 12px;
+  }
+  .groupLogo {
+    width: 40px;
+    height: 40px;
+    flex-shrink: 0;
+    margin-right: 10px;
+  }
+  .topContent {
+    h2 {
+      font-weight: 400;
+      font-size: 15px;
+      color: #131415;
+      line-height: 21px;
+      padding-bottom: 4px;
+    }
+    .desc {
+      display: flex;
+      align-items: center;
+    }
+    .username {
+      display: inline-block;
+      max-width: 150px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 13px;
+      color: #999999;
+      line-height: 17px;
+      margin-right: 5px;
+    }
+    .subjectName {
+      padding: 1px 4px 2px;
+      background: #FFF1DE;
+      border-radius: 4px;
+      font-size: 11px;
+      color: #FF8C00;
+      line-height: 14px;
+    }
+  }
+
+  .bottom {
+    background: #F8F8F8;
+    border-radius: 6px;
+    padding: 6px;
+    font-size: 13px;
+    color: #777777;
+    line-height: 20px;
+  }
+}

src/business-components/group-plan-step/index.tsx

@@ -0,0 +1,60 @@
+import { defineComponent, PropType } from 'vue'
+import styles from './index.module.less'
+import { Cell, CellGroup } from 'vant'
+import iconTimer from './images/icon-timer.png'
+import groupLogo from './images/group-logo.png'
+
+interface IProps {
+  courseTime: string
+  coursePlan: string
+  roomUid?: string
+  teacherName: string
+  subjectName: string
+  liveState?: number
+  id?: number | string
+}
+
+export default defineComponent({
+  name: 'group-plan-step',
+  props: {
+    courseId: {
+      // 用于判断当前选择哪一节课程
+      type: Number,
+      default: 0
+    },
+    courseInfo: {
+      type: Array as PropType<IProps[]>,
+      default: []
+    }
+  },
+  setup(props) {
+    return () =>
+      props.courseInfo.map((item: IProps, index: number) => (
+        <CellGroup border={false} class={styles.groupPlanStep}>
+          <Cell
+            center
+            border
+            v-slots={{
+              icon: () => <img src={iconTimer} class={styles.iconTimer} />,
+              title: () => <div class={styles.name}>{item.courseTime}</div>
+            }}
+          ></Cell>
+          <Cell center class={styles.contentClass}>
+            <div class={styles.top}>
+              <img src={groupLogo} class={styles.groupLogo} />
+              <div class={styles.topContent}>
+                <h2>第{index + 1}课时</h2>
+                <div class={styles.desc}>
+                  <span class={styles.username}>{item.teacherName}</span>
+                  <span class={styles.subjectName}>{item.subjectName}</span>
+                </div>
+              </div>
+            </div>
+            <div class={styles.bottom}>
+              {item.coursePlan}
+            </div>
+          </Cell>
+        </CellGroup>
+      ))
+  }
+})

src/business-components/user-detail/index.tsx

@@ -2,12 +2,12 @@ import { Cell, CellGroup, Icon, Image, Tag } from 'vant'
 import { defineComponent, PropType } from 'vue'
 import styles from './index.module.less'
 
-import iconUserNum from '@common/images/icon_user_num.png'
+// import iconUserNum from '@common/images/icon_user_num.png'
 import defaultIcon from '@common/images/icon_teacher.png'
 import iconTimer from '@common/images/icon_timer2.png'
-import IconXueli from '@common/images/icon-xueli.png'
-import IconJiaozi from '@common/images/icon-jiaozi.png'
-import item from '@/views/coupons/item'
+// import IconXueli from '@common/images/icon-xueli.png'
+// import IconJiaozi from '@common/images/icon-jiaozi.png'
+// import item from '@/views/coupons/item'
 /**
  * @description: 视频详情
  * @param {type} headUrl 头像

src/router/routes-student.ts

@@ -75,7 +75,7 @@ export default [
       {
         path: '/groupDetail',
         name: 'groupDetail',
-        component: () => import('@/student/group-class/live-detail'),
+        component: () => import('@/student/group-class/group-detail'),
         meta: {
           title: '小组课详情'
         }

src/router/routes-teacher.ts

@@ -24,6 +24,14 @@ const noLoginRouter = [
     }
   },
   {
+    path: '/shareGroup',
+    name: 'shareGroup',
+    component: () => import('@/teacher/share-page/share-group/index'),
+    meta: {
+      title: '分享小组课'
+    }
+  },
+  {
     path: '/shareMall',
     name: 'shareMall',
     component: () => import('@/teacher/share-page/share-mall/index'),

src/student/group-class/live-detail.tsx → src/student/group-class/group-detail.tsx

@@ -5,7 +5,7 @@ import request from '@/helpers/request'
 import dayjs from 'dayjs'
 import { Icon, Sticky, Button, Dialog, Toast, Popup } from 'vant'
 import { defineComponent } from 'vue'
-import styles from './live-detail.module.less'
+import styles from './group-detail.module.less'
 import iconTips from '@common/images/icon_tips.png'
 import { onSubmitZero, orderStatus } from '@/views/order-detail/orderStatus'
 import ColHeader from '@/components/col-header'
@@ -17,12 +17,14 @@ import iconShare from '@/views/shop-mall/images/icon-share.svg'
 import { state } from '@/state'
 import { browser } from '@/helpers/utils'
 import { tradeOrder } from '../trade/tradeOrder'
-import { courseType } from '@/constant';
+import { courseType } from '@/constant'
+import GroupPlanStep from '@/business-components/group-plan-step'
 interface IProps {
   courseTime: string
   coursePlan: string
-  videoPosterUrl?: string
   roomUid?: string
+  teacherName: string
+  subjectName: string
   liveState?: number
   id?: number | string
 }
@@ -82,6 +84,7 @@ export default defineComponent({
     },
     courseInfo() {
       const tempArr = [] as IProps[]
+      const live = this.live
       const coursePlanList = this.live.planList || []
       coursePlanList.forEach((item: any) => {
         const startTime = item.startTime || new Date()
@@ -92,6 +95,8 @@ export default defineComponent({
           ).format('HH:mm')}~${dayjs(endTime).format('HH:mm')}`,
           coursePlan: item.plan,
           roomUid: item.roomUid,
+          teacherName: live.teacherName,
+          subjectName: live.subjectName,
           liveState: item.liveState,
           id: item.courseId
         })
@@ -122,9 +127,9 @@ export default defineComponent({
   async mounted() {
     await this._init()
     if (/(localhost|192)/g.test(location.origin)) {
-      this.shareUrl = `https://dev.colexiu.com/teacher/#/shareLive?recomUserId=${state.user.data?.userId}&groupId=${this.groupId}&userType=${state.platformType}&p=tenant`
+      this.shareUrl = `https://dev.colexiu.com/teacher/#/shareGroup?recomUserId=${state.user.data?.userId}&groupId=${this.groupId}&userType=${state.platformType}&p=tenant`
     } else {
-      this.shareUrl = `${location.origin}/teacher/#/shareLive?recomUserId=${state.user.data?.userId}&groupId=${this.groupId}&userType=${state.platformType}&p=tenant`
+      this.shareUrl = `${location.origin}/teacher/#/shareGroup?recomUserId=${state.user.data?.userId}&groupId=${this.groupId}&userType=${state.platformType}&p=tenant`
     }
   },
   methods: {
@@ -139,7 +144,7 @@ export default defineComponent({
           }
         )
         this.live = res.data || {}
-        console.log(this.live, "list");
+        console.log(this.live, 'list')
       } catch {}
     },
     async onJoinRoom() {
@@ -180,7 +185,7 @@ export default defineComponent({
         }
       } catch {}
     },
-    initLive () {
+    initLive() {
       const live = this.live
       orderStatus.orderObject.orderType = 'GROUP'
       orderStatus.orderObject.orderName = '小组课购买'
@@ -306,7 +311,14 @@ export default defineComponent({
           <p class={styles.introduction}>{this.userInfo.lessonDesc}</p>
         </SectionDetail>
 
-        <SectionDetail
+        {this.courseInfo.length > 0 && (
+          <GroupPlanStep
+            courseInfo={this.courseInfo}
+            courseId={Number(this.courseId) || 0}
+          />
+        )}
+
+        {/* <SectionDetail
           title="课程列表"
           icon="courseList"
           border
@@ -318,7 +330,7 @@ export default defineComponent({
               courseId={Number(this.courseId) || 0}
             />
           )}
-        </SectionDetail>
+        </SectionDetail> */}
 
         {/* <div class={styles.tips}>
           <h3>
@@ -335,21 +347,22 @@ export default defineComponent({
             3、若您错过老师直播，可通过视频回放观看完整课程。
           </p>
         </div> */}
-        {this.courseInfo.length > 0 && (this.live.existBuy !== 1 || this.live.existBuy !== 2) && (
-          <ColSticky position="bottom" background="white">
-            <div class={['btnGroup', styles.btnMore]}>
-              <Button
-                block
-                round
-                type="primary"
-                onClick={this.onBuy}
-                disabled={this.platformStatus}
-              >
-                {this.live.coursePrice <= 0 ? '免费领取' : `立即购买`}
-              </Button>
-            </div>
-          </ColSticky>
-        )}
+        {this.courseInfo.length > 0 &&
+          (this.live.existBuy !== 1 && this.live.existBuy !== 2) && (
+            <ColSticky position="bottom" background="white">
+              <div class={['btnGroup', styles.btnMore]}>
+                <Button
+                  block
+                  round
+                  type="primary"
+                  onClick={this.onBuy}
+                  disabled={this.platformStatus}
+                >
+                  {this.live.coursePrice <= 0 ? '免费领取' : `立即购买`}
+                </Button>
+              </div>
+            </ColSticky>
+          )}
 
         {this.joinRoom == '1' && this.liveStatus.liveStatus !== 2 && (
           <ColSticky position="bottom" background="white">

src/student/group-class/index.module.less

@@ -1,29 +0,0 @@
-.classHeader {
-  // background: linear-gradient(180deg, #59e5d5 0%, #fff 100%);
-  background: linear-gradient(#59e5d5, 30%, #ffffff);
-}
-.banner {
-  background: #fff;
-  padding: 12px 14px;
-}
-
-.label {
-  margin-right: 8px;
-  font-size: 14px;
-  :global {
-    .van-list__loading,
-    .van-list__finished-text,
-    .van-list__error-text {
-      width: 100%;
-    }
-    .iconfont-down {
-      margin-left: 4px;
-    }
-  }
-}
-
-.liveClass {
-  :global(.van-sticky--fixed) {
-    box-shadow: 10px 10px 10px var(--box-shadow-color);
-  }
-}

src/student/group-class/index.tsx

@@ -1,193 +0,0 @@
-import ColHeader from '@/components/col-header'
-import ColSearch from '@/components/col-search'
-import { Sticky, Image, List, Icon, Popup } from 'vant'
-import { defineComponent } from 'vue'
-import styles from './index.module.less'
-import request from '@/helpers/request'
-import ColResult from '@/components/col-result'
-import LiveItem from './live-item'
-
-import banner from '../video-class/images/banner.png'
-import { state } from '@/state'
-import OrganSearch from '../practice-class/model/organ-search'
-import { useEventTracking } from '@/helpers/hooks'
-
-export default defineComponent({
-  name: 'liveClass',
-  data() {
-    const sessionSubjectId = sessionStorage.getItem('liveClassSubjectId')
-
-    return {
-      list: [],
-      dataShow: true, // 判断是否有数据
-      loading: false,
-      finished: false,
-      searchStatus: false,
-      openStatus: false,
-      subjectList: [],
-      sessionSubjectId,
-      params: {
-        search: '',
-        courseType: "GROUP",
-        subjectId: (sessionSubjectId ||
-          state.user.data?.subjectId ||
-          null) as any,
-        subjectName: '',
-        groupStatus: 'APPLY',
-        page: 1,
-        rows: 20
-      }
-    }
-  },
-  async mounted() {
-    try {
-      const res = await request.get('/api-student/subject/subjectSelect')
-      this.subjectList = res.data || []
-    } catch {}
-    let subjectName = ''
-    this.subjectList.forEach((item: any) => {
-      item.subjects?.forEach((child: any) => {
-        if (child.id === Number(this.sessionSubjectId)) {
-          subjectName = child.name
-        }
-      })
-    })
-    this.params.subjectName = subjectName || state.user.data?.subjectName || ''
-
-    sessionStorage.removeItem('liveClassSubjectId')
-    useEventTracking('直播课')
-  },
-  methods: {
-    onSort() {
-      this.params.page = 1
-      this.list = []
-      this.dataShow = true // 判断是否有数据
-      this.loading = false
-      this.finished = false
-      this.searchStatus = false
-      this.getList()
-    },
-    onSearch(value: string) {
-      this.params.search = value
-      this.onSort()
-    },
-    async getList() {
-      try {
-        const params: any = {
-          ...this.params
-        }
-        if (state.version) {
-          params.version = state.version || '' // 处理ios审核版本
-          params.platform = 'ios-student'
-        }
-        const res = await request.post(
-          '/api-student/courseGroup/queryPageCourseGroup',
-          {
-            data: {
-              ...params
-            }
-          }
-        )
-        this.loading = false
-        const result = res.data || {}
-        // 处理重复请求数据
-        if (this.list.length > 0 && result.pageNo === 1) {
-          return
-        }
-        this.list = this.list.concat(result.rows || [])
-        this.finished = result.pageNo >= result.totalPage
-        this.params.page = result.pageNo + 1
-        this.dataShow = this.list.length > 0
-      } catch {
-        this.dataShow = false
-        this.finished = true
-      }
-    },
-    onDetail(item: any) {
-      this.params.subjectId &&
-        sessionStorage.setItem('liveClassSubjectId', this.params.subjectId)
-      this.$router.push({
-        path: '/groupDetail',
-        query: {
-          groupId: item.courseGroupId
-        }
-      })
-    }
-  },
-  render() {
-    return (
-      <div class={styles.liveClass}>
-        <Sticky offsetTop={0} position="top">
-          <ColHeader
-            class={styles.classHeader}
-            border={false}
-            isFixed={false}
-            background="transparent"
-          />
-          <ColSearch
-            placeholder="请输入老师名称/课程名称"
-            onSearch={this.onSearch}
-            v-slots={{
-              left: () => (
-                <div
-                  class={styles.label}
-                  onClick={() => {
-                    this.searchStatus = !this.searchStatus
-                    this.openStatus = !this.openStatus
-                  }}
-                >
-                  {this.params.subjectName}
-                  <Icon
-                    classPrefix="iconfont"
-                    name="down"
-                    size={12}
-                    color="#333"
-                  />
-                </div>
-              )
-            }}
-          />
-        </Sticky>
-
-        <div class={styles.banner}>
-          <Image src={banner} />
-        </div>
-
-        {this.dataShow ? (
-          <List
-            v-model:loading={this.loading}
-            finished={this.finished}
-            finishedText=" "
-            class={[styles.liveList]}
-            onLoad={this.getList}
-          >
-            {this.list.map((item: any) => (
-              <LiveItem onClick={this.onDetail} liveInfo={item} />
-            ))}
-          </List>
-        ) : (
-          <ColResult btnStatus={false} classImgSize="SMALL" tips="暂无小组课" />
-        )}
-
-        <Popup
-          show={this.searchStatus}
-          position="bottom"
-          round
-          closeable
-          safe-area-inset-bottom
-          onClose={() => (this.searchStatus = false)}
-          onClosed={() => (this.openStatus = false)}
-        >
-          {this.openStatus && (
-            <OrganSearch
-              subjectList={this.subjectList}
-              onSort={this.onSort}
-              v-model={this.params.subjectId}
-              v-model:subjectName={this.params.subjectName}
-            />
-          )}
-        </Popup>
-      </div>
-    )
-  }
-})

src/student/group-class/live-item.module.less

@@ -1,99 +0,0 @@
-.liveItem {
-  margin: 10px 10px 0;
-  width: auto !important;
-  border-radius: 8px;
-  padding: 10px;
-
-  .liCover {
-    width: 170px;
-    height: 96px;
-    background: #c6c7cb;
-    border-radius: 8px;
-    overflow: hidden;
-    margin-right: 8px;
-    vertical-align: middle;
-  }
-
-  .liTitle {
-    padding-top: 4px;
-    font-size: 14px;
-    font-weight: 600;
-    color: #333333;
-    line-height: 20px;
-    max-width: 150px;
-  }
-
-  .liUserInfo {
-    padding-top: 4px;
-    padding-bottom: 9px;
-    font-size: 12px;
-    color: #6a6a6a;
-    line-height: 16px;
-  }
-
-  .liteachername {
-    display: flex;
-    align-items: center;
-    margin-bottom: 6px;
-  }
-
-  .liteacherIcon {
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    overflow: hidden;
-    margin-right: 4px;
-  }
-
-  .liPrice {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .price {
-      color: #fa6400;
-      font-size: 14px;
-      margin-right: 10px;
-      font-weight: 600;
-      i {
-        font-style: normal;
-        font-size: 11px;
-      }
-    }
-
-    .classNum {
-      background: #fff1de;
-      border-radius: 4px;
-      font-size: 12px;
-      color: #ff9300;
-      line-height: 18px;
-      padding: 1px 4px;
-    }
-
-    .num,
-    .buyNum {
-      font-size: 12px;
-      color: #ff802c;
-      line-height: 18px;
-    }
-
-    .buyNum {
-      color: #999999;
-      display: flex;
-      align-items: center;
-      line-height: 1;
-    }
-  }
-
-  .subjectName {
-    position: absolute;
-    top: 8px;
-    left: 8px;
-    font-size: 12px;
-    padding: 3px 5px;
-    color: #ffffff;
-    line-height: 1;
-    border-radius: 1px;
-    background: rgba(0, 0, 0, 0.29);
-  }
-}

src/student/group-class/live-item.tsx

@@ -1,109 +0,0 @@
-import { defineComponent, PropType } from 'vue'
-import { Image, CellGroup, Cell, Icon } from 'vant'
-import styles from './live-item.module.less'
-import dayjs from 'dayjs'
-
-import iconSuccess from '@common/images/icon_success.png'
-import iconTeacher from '@common/images/icon_teacher.png'
-
-interface IProps {
-  backgroundPic: string
-  courseGroupId: number
-  courseGroupName: string
-  courseNum: string
-  courseStartTime: number
-  coursePrice: number
-  teacherName: string
-  teacherId: number
-  avatar?: string
-  studentCount: number
-  existBuy: number
-  subjectName: string
-}
-
-export default defineComponent({
-  name: 'liveItem',
-  props: {
-    onClick: {
-      type: Function,
-      default: (item?: any) => {}
-    },
-    liveInfo: {
-      type: Object as PropType<IProps>,
-      default: {}
-    }
-  },
-  render() {
-    return (
-      <Cell
-        center
-        border={false}
-        class={styles.liveItem}
-        onClick={() => this.onClick(this.liveInfo)}
-        v-slots={{
-          icon: () => (
-            <div style={{ position: 'relative' }}>
-              <Image
-                class={styles.liCover}
-                fit="cover"
-                src={this.liveInfo.backgroundPic}
-              />
-              <span class={styles.subjectName}>
-                {this.liveInfo.subjectName}
-              </span>
-            </div>
-          ),
-          title: () => (
-            <div>
-              <div class={[styles.liTitle, 'van-ellipsis']}>
-                {this.liveInfo.courseGroupName}
-              </div>
-              <div class={styles.liUserInfo}>
-                <p class={styles.liteachername}>
-                  {/* 老师： */}
-                  <Image
-                    src={this.liveInfo.avatar || iconTeacher}
-                    class={styles.liteacherIcon}
-                  />
-                  {this.liveInfo.teacherName ||
-                    `游客${this.liveInfo.teacherId}`}
-                </p>
-                <p>
-                  开课时间：
-                  {dayjs(this.liveInfo.courseStartTime).format(
-                    'MM月DD日 HH:mm'
-                  )}
-                </p>
-              </div>
-              <div class={styles.liPrice}>
-                <p>
-                  {this.liveInfo.coursePrice > 0 && (
-                    <span class={styles.price}>
-                      <i>¥</i>
-                      {this.liveInfo.coursePrice}
-                    </span>
-                  )}
-
-                  <span class={styles.classNum}>
-                    {this.liveInfo.courseNum}课时
-                  </span>
-                </p>
-                {this.liveInfo.existBuy === 1 && (
-                  <span class={styles.buyNum}>
-                    {/* <Icon name={iconSuccess} size="15" /> */}
-                    学习
-                  </span>
-                )}
-                {/* : (
-                <span class={styles.num}>
-                   {this.liveInfo.studentCount}人学习
-                </span>
-                ) */}
-              </div>
-            </div>
-          )
-        }}
-      />
-    )
-  }
-})

src/student/teacher-dependent/components/group.tsx

@@ -9,7 +9,7 @@ import { state } from '@/state'
 import Tips from './tips'
 
 export default defineComponent({
-  name: 'live',
+  name: 'group',
   data() {
     const query = this.$route.query
     return {
@@ -80,7 +80,7 @@ export default defineComponent({
   },
   render() {
     return (
-      <>
+      <div>
         <Tips
           type="GROUP"
           class={styles.tips}
@@ -148,20 +148,7 @@ export default defineComponent({
         ) : (
           <ColResult btnStatus={false} classImgSize="SMALL" tips="暂无小组课" />
         )}
-      </>
+      </div>
     )
-
-    {
-      /* <List
-v-model:loading={this.loading}
-finished={this.finished}
-finishedText="没有更多了"
-onLoad={this.getList}
->
-{this.buyUserList.map(item => (
-  <UserList class="mb12" users={item} />
-))}
-</List> */
-    }
   }
 })

src/student/teacher-dependent/components/tips/index.tsx

@@ -24,19 +24,19 @@ export default defineComponent({
     btnTxt: {
       type: String,
       default: '不再提醒'
+    },
+    class: {
+      type: String,
+      default: ''
     }
   },
   emits: ['close', 'confirm'],
   setup(props, { emit }) {
     const isStatus = ref(true)
-
-    console.log(props.type, '1212')
-
     // 获取当前提示是否有缓存
     const getTypeIsCatch = () => {
       const localType = localStorage.getItem('teacher_home_local');
       const formatLocalType = localType ? JSON.parse(localType) : {}
-      console.log(formatLocalType[props.type])
       if(formatLocalType[props.type]) {
         return true
       } else {
@@ -56,7 +56,7 @@ export default defineComponent({
       isStatus.value = !getTypeIsCatch()
     })
     return () => (
-      isStatus.value ? <div class={styles.tipSection}>
+      isStatus.value ? <div class={[styles.tipSection, props.class]}>
       <Icon class={styles.iconCross} onClick={() => {
         emit('close')
         isStatus.value = false

src/teacher/group-class/create-components/createState.ts

@@ -28,6 +28,7 @@ export const createState = reactive({
     courseType: 'GROUP',
     name: '',
     subjectId: null as any,
+    subjectName: "",
     courseIntroduce: '',
     courseNum: null as any,
     singleCourseMinutes: 0,

src/teacher/group-class/create-components/detail.tsx

@@ -12,7 +12,8 @@ import { postMessage } from '@/helpers/native-message'
 interface IProps {
   courseTime: string
   coursePlan: string
-  videoPosterUrl?: string
+  teacherName: string
+  subjectName: string
   roomUid?: string
   liveState?: number
   id?: number | string
@@ -47,12 +48,15 @@ export default defineComponent({
     courseInfo() {
       const tempArr = [] as IProps[]
       const coursePlanList = createState.live.coursePlanList || []
+      console.log(createState.live, "createState.live");
       coursePlanList.forEach((item: any) => {
         tempArr.push({
           courseTime: `${dayjs(item.startTime).format('YYYY-MM-DD')} ${dayjs(
             item.startTime
           ).format('HH:mm')}~${dayjs(item.endTime).format('HH:mm')}`,
           roomUid: item.roomUid,
+          teacherName: state.user.data?.username,
+          subjectName: "",
           liveState: item.liveState,
           coursePlan: item.plan,
           id: item.courseId