Merge branch 'colexiu1.3' into more_function

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

@@ -1,140 +1,145 @@
-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 defaultIcon from '@common/images/icon_teacher.png'
-import iconTimer from '@common/images/icon_timer2.png'
-
-/**
- * @description: 视频详情
- * @param {type} headUrl 头像
- * @param {type} username 姓名
- * @param {type} startTime 开始时间
- * @param {type} buyNum 购买用户数
- * @param {type} lessonPrice 价格
- * @param {type} lessonCoverUrl 视频封面
- * @param {type} lessonDesc 课程描述
- * @param {type} lessonNum 课程数
- * @param {type} lessonName 课程名称
- */
-interface UserType {
-  headUrl: string
-  username: string
-  startTime?: string
-  id?: number
-  buyNum?: number
-  lessonPrice: number
-  lessonNum?: number
-  lessonDesc?: string
-  lessonCoverUrl: string
-  lessonName: string
-}
-
-export default defineComponent({
-  name: 'user-detail',
-  props: {
-    userInfo: {
-      type: Object as PropType<UserType>,
-      required: true
-    },
-    showType: {
-      type: String as PropType<'BUY' | 'TIME'>,
-      default: 'BUY'
-    },
-    showBuy: {
-      type: Boolean,
-      default: true
-    },
-    border: {
-      type: Boolean,
-      default: false
-    }
-  },
-  render() {
-    return (
-      <div class={styles.userDetail}>
-        <Image
-          class={[styles.banner]}
-          src={this.userInfo.lessonCoverUrl}
-          fit="cover"
-        />
-        <CellGroup class={styles.userInfo} border={this.border}>
-          <Cell
-            title={this.userInfo.lessonName}
-            titleClass={styles.userTitle}
-            v-slots={{
-              label: () =>
-                this.userInfo.startTime && (
-                  <span
-                    style={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      fontSize: '13px',
-                      paddingTop: 'var(--van-cell-label-margin-top)'
-                    }}
-                  >
-                    <Icon
-                      name={iconTimer}
-                      size="16"
-                      style={{ marginRight: '5px' }}
-                    />
-                    开课时间：
-                    {this.userInfo.startTime}
-                  </span>
-                )
-            }}
-          />
-          <Cell
-            v-slots={{
-              icon: () => (
-                <Image
-                  class={styles.avatar}
-                  src={this.userInfo.headUrl || defaultIcon}
-                  fit="cover"
-                />
-              ),
-              title: () => (
-                <div class={styles.name}>
-                  <div class={styles.username}>
-                    {this.userInfo.username || `游客${this.userInfo.id || ''}`}
-                  </div>
-                  {this.showType === 'TIME' ? (
-                    <Tag
-                      style={{ marginLeft: '8px' }}
-                      color="#FFF1DE"
-                      textColor="#FF9300"
-                    >
-                      {this.userInfo.lessonNum}课时
-                    </Tag>
-                  ) : (
-                    this.showBuy && (
-                      <div class={styles.buyNum}>
-                        {this.userInfo.buyNum}人已购买
-                      </div>
-                    )
-                  )}
-                </div>
-              ),
-              value: () =>
-                this.showType === 'TIME' ? (
-                  <div class={styles.buyNumInfo}>
-                    <Icon name={iconUserNum} size={14} class={styles.iconBuy} />{' '}
-                    已购 {this.userInfo.buyNum} 人
-                  </div>
-                ) : (
-                  <div class={styles.info}>
-                    {/* 0元不显示，为了处理ios审核问题 */}
-                    {this.userInfo.lessonPrice > 0 && (
-                      <>￥{this.userInfo.lessonPrice}/</>
-                    )}
-                    {this.userInfo.lessonNum}课时
-                  </div>
-                )
-            }}
-          ></Cell>
-        </CellGroup>
-      </div>
-    )
-  }
-})
+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 defaultIcon from '@common/images/icon_teacher.png'
+import iconTimer from '@common/images/icon_timer2.png'
+
+/**
+ * @description: 视频详情
+ * @param {type} headUrl 头像
+ * @param {type} username 姓名
+ * @param {type} startTime 开始时间
+ * @param {type} buyNum 购买用户数
+ * @param {type} lessonPrice 价格
+ * @param {type} lessonCoverUrl 视频封面
+ * @param {type} lessonDesc 课程描述
+ * @param {type} lessonNum 课程数
+ * @param {type} lessonName 课程名称
+ */
+interface UserType {
+  headUrl: string
+  username: string
+  startTime?: string
+  id?: number
+  buyNum?: number
+  lessonPrice: number
+  lessonNum?: number
+  lessonDesc?: string
+  lessonCoverUrl: string
+  lessonName: string
+  auditVersion: number
+}
+
+export default defineComponent({
+  name: 'user-detail',
+  props: {
+    userInfo: {
+      type: Object as PropType<UserType>,
+      required: true
+    },
+    showType: {
+      type: String as PropType<'BUY' | 'TIME'>,
+      default: 'BUY'
+    },
+    showBuy: {
+      type: Boolean,
+      default: true
+    },
+    border: {
+      type: Boolean,
+      default: false
+    }
+  },
+  render() {
+    return (
+      <div class={styles.userDetail}>
+        <Image
+          class={[styles.banner]}
+          src={this.userInfo.lessonCoverUrl}
+          fit="cover"
+        />
+        <CellGroup class={styles.userInfo} border={this.border}>
+          <Cell
+            title={this.userInfo.lessonName}
+            titleClass={styles.userTitle}
+            v-slots={{
+              label: () =>
+                this.userInfo.startTime && (
+                  <span
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      fontSize: '13px',
+                      paddingTop: 'var(--van-cell-label-margin-top)'
+                    }}
+                  >
+                    <Icon
+                      name={iconTimer}
+                      size="16"
+                      style={{ marginRight: '5px' }}
+                    />
+                    开课时间：
+                    {this.userInfo.startTime}
+                  </span>
+                )
+            }}
+          />
+          <Cell
+            v-slots={{
+              icon: () => (
+                <Image
+                  class={styles.avatar}
+                  src={this.userInfo.headUrl || defaultIcon}
+                  fit="cover"
+                />
+              ),
+              title: () => (
+                <div class={styles.name}>
+                  <div class={styles.username}>
+                    {this.userInfo.username || `游客${this.userInfo.id || ''}`}
+                  </div>
+                  {this.showType === 'TIME' ? (
+                    <Tag
+                      style={{ marginLeft: '8px' }}
+                      color="#FFF1DE"
+                      textColor="#FF9300"
+                    >
+                      {this.userInfo.lessonNum}课时
+                    </Tag>
+                  ) : (
+                    this.showBuy && (
+                      <div class={styles.buyNum}>
+                        {this.userInfo.buyNum}人已购买
+                      </div>
+                    )
+                  )}
+                </div>
+              ),
+              value: () =>
+                this.showType === 'TIME' ? (
+                  <div class={styles.buyNumInfo}>
+                    <Icon name={iconUserNum} size={14} class={styles.iconBuy} />{' '}
+                    已购 {this.userInfo.buyNum} 人
+                  </div>
+                ) : (
+                  <div class={styles.info}>
+                    {/* 0元不显示，为了处理ios审核问题 */}
+                    {this.userInfo.lessonPrice > 0 && (
+                      <>￥{this.userInfo.lessonPrice}/</>
+                    )}
+                    {this.userInfo.lessonPrice <= 0 &&
+                      this.userInfo.auditVersion && <>￥{0}/</>}
+                    {this.userInfo.lessonPrice <= 0 &&
+                      !this.userInfo.auditVersion && <>免费/</>}
+                    {this.userInfo.lessonNum}课时
+                  </div>
+                )
+            }}
+          ></Cell>
+        </CellGroup>
+      </div>
+    )
+  }
+})

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

@@ -1,283 +1,284 @@
-import CoursePlanStep from '@/business-components/course-plan-step'
-import SectionDetail from '@/business-components/section-detail'
-import UserDetail from '@/business-components/user-detail'
-import request from '@/helpers/request'
-import dayjs from 'dayjs'
-import { Icon, Sticky, Button, Dialog, Toast } from 'vant'
-import { defineComponent } from 'vue'
-import styles from './live-detail.module.less'
-import iconTips from '@common/images/icon_tips.png'
-import { orderStatus } from '@/views/order-detail/orderStatus'
-import ColHeader from '@/components/col-header'
-import { postMessage } from '@/helpers/native-message'
-interface IProps {
-  courseTime: string
-  coursePlan: string
-  videoPosterUrl?: string
-  roomUid?: string
-  liveState?: number
-  id?: number | string
-}
-export default defineComponent({
-  name: 'LiveDetail',
-  data() {
-    const query = this.$route.query
-    return {
-      joinRoom: query.joinRoom, // 原生传递过来的参数，判断是否进入直播间
-      recomUserId: query.recomUserId, // 推荐人id
-      groupId: query.groupId,
-      courseId: query.classId,
-      live: {} as any
-    }
-  },
-  computed: {
-    userInfo() {
-      const live = this.live as any
-      const planList = live.planList || []
-      const startTime = planList[0]?.startTime || new Date()
-      const endTime = planList[0]?.endTime || new Date()
-      return {
-        headUrl: live.avatar,
-        username: live.userName || `游客${live.teacherId || ''}`,
-        startTime:
-          `${dayjs(startTime).format('YYYY-MM-DD')} ${dayjs(startTime).format(
-            'HH:mm'
-          )}~${dayjs(endTime).format('HH:mm')}` || '',
-        buyNum: live.studentCount,
-        lessonPrice: live.coursePrice,
-        lessonNum: live.courseNum,
-        lessonDesc: live.courseIntroduce,
-        lessonCoverUrl: live.backgroundPic || live.backgroundPicTemplate,
-        lessonName: live.courseGroupName
-      }
-    },
-    courseInfo() {
-      const tempArr = [] as IProps[]
-      const coursePlanList = this.live.planList || []
-      coursePlanList.forEach((item: any) => {
-        const startTime = item.startTime || new Date()
-        const endTime = item.endTime || new Date()
-        tempArr.push({
-          courseTime: `${dayjs(startTime).format('YYYY-MM-DD')} ${dayjs(
-            startTime
-          ).format('HH:mm')}~${dayjs(endTime).format('HH:mm')}`,
-          coursePlan: item.plan,
-          roomUid: item.roomUid,
-          liveState: item.liveState,
-          id: item.courseId
-        })
-      })
-      return tempArr || []
-    },
-    salesEndDate() {
-      const live = this.live as any
-      return dayjs(live.salesEndDate || new Date()).format('YYYY-MM-DD')
-    },
-    liveStatus() {
-      const coursePlanList = this.live.planList || []
-      const tempObj = {
-        status: false,
-        liveStatus: 0,
-        roomUid: ''
-      }
-      coursePlanList.forEach((item: any) => {
-        if (item.courseId === Number(this.courseId)) {
-          tempObj.status = true
-          tempObj.liveStatus = item.liveStatus
-          tempObj.roomUid = item.roomUid
-        }
-      })
-      return tempObj
-    }
-  },
-  async mounted() {
-    try {
-      const res = await request.get(
-        '/api-student/courseGroup/queryLiveCourseInfo',
-        {
-          params: {
-            groupId: this.groupId
-          }
-        }
-      )
-      this.live = res.data || {}
-    } catch {}
-  },
-  methods: {
-    async onJoinRoom() {
-      try {
-        const res = await request.get(
-          '/api-student/courseGroup/queryLiveCourseInfo',
-          {
-            params: {
-              groupId: this.groupId
-            }
-          }
-        )
-        const result = res.data || {}
-        const coursePlanList = result.planList || []
-        let tempObj: any = {}
-        coursePlanList.forEach((item: any) => {
-          if (item.courseId === Number(this.courseId)) {
-            tempObj = item
-          }
-        })
-        console.log(tempObj, this.live, 'tempObj')
-        if (tempObj && tempObj.liveState === 1) {
-          postMessage({
-            api: 'joinLiveRoom',
-            content: {
-              roomId: tempObj.roomUid,
-              teacherId: this.live.teacherId
-            }
-          })
-        } else if (tempObj && tempObj.liveState === 2) {
-          setTimeout(() => {
-            Toast('课程已结束')
-          }, 100)
-        } else {
-          setTimeout(() => {
-            Toast('课程尚未开始，请耐心等候')
-          }, 100)
-        }
-      } catch {}
-    },
-    async onBuy() {
-      try {
-        const res = await request.post(
-          '/api-student/userOrder/getPendingOrder',
-          {
-            data: {
-              goodType: 'LIVE',
-              bizId: this.groupId
-            }
-          }
-        )
-        const live = this.live
-        orderStatus.orderObject.orderType = 'LIVE'
-        orderStatus.orderObject.orderName = '直播课购买'
-        orderStatus.orderObject.orderDesc = '直播课购买'
-        orderStatus.orderObject.actualPrice = live.coursePrice
-        orderStatus.orderObject.recomUserId = this.recomUserId
-        orderStatus.orderObject.orderNo = ''
-        orderStatus.orderObject.orderList = [
-          {
-            orderType: 'LIVE',
-            goodsName: '直播课购买',
-            courseGroupId: live.courseGroupId,
-            courseGroupName: live.courseGroupName,
-            coursePrice: live.coursePrice,
-            teacherName: live.userName || `游客${live.teacherId || ''}`,
-            teacherId: live.teacherId,
-            avatar: live.avatar,
-            courseInfo: this.courseInfo,
-            recomUserId: this.recomUserId
-          }
-        ]
-        const result = res.data
-        if (result) {
-          Dialog.confirm({
-            title: '提示',
-            message: '您有一个未支付的订单，是否继续支付？',
-            confirmButtonColor: '#269a93',
-            cancelButtonText: '取消订单',
-            confirmButtonText: '继续支付'
-          })
-            .then(async () => {
-              orderStatus.orderObject.orderNo = result.orderNo
-              orderStatus.orderObject.actualPrice = result.actualPrice
-              this.routerTo()
-            })
-            .catch(() => {
-              Dialog.close()
-              // 只用取消订单，不用做其它处理
-              this.cancelPayment(result.orderNo)
-            })
-        } else {
-          this.routerTo()
-        }
-      } catch {
-        //
-      }
-    },
-    routerTo() {
-      const live = this.live
-      this.$router.push({
-        path: '/orderDetail',
-        query: {
-          orderType: 'LIVE',
-          courseGroupId: live.courseGroupId
-        }
-      })
-    },
-    async cancelPayment(orderNo: string) {
-      try {
-        await request.post('/api-student/userOrder/orderCancel', {
-          data: {
-            orderNo
-          }
-        })
-        // this.routerTo()
-      } catch {}
-    }
-  },
-  render() {
-    return (
-      <div class={[styles['live-detail'], 'mb12']}>
-        <ColHeader />
-        <UserDetail userInfo={this.userInfo} showBuy={false} />
-        <SectionDetail>
-          <p class={styles.introduction}>{this.userInfo.lessonDesc}</p>
-        </SectionDetail>
-
-        <SectionDetail
-          title="课程列表"
-          icon="courseList"
-          contentStyle={{ paddingTop: '0' }}
-        >
-          {this.courseInfo.length > 0 && (
-            <CoursePlanStep
-              courseInfo={this.courseInfo}
-              courseId={Number(this.courseId) || 0}
-            />
-          )}
-        </SectionDetail>
-
-        <div class={styles.tips}>
-          <h3>
-            <Icon name={iconTips} size={15} />
-            温馨提示
-          </h3>
-          <p>
-            1、该直播课程销售截止后，报名人数若少于
-            {this.live.mixStudentNum || 0}
-            人将取消开课，已购买学员付费金额将自动返还，请您放心购买；
-            <br />
-            2、直播课教学计划中的上课时间为老师预计时间，实际上课时间以老师开启直播时间为准；
-            <br />
-            3、若您错过老师直播，可通过视频回放观看完整课程。
-          </p>
-        </div>
-        {this.courseInfo.length > 0 && this.live.existBuy !== 1 && (
-          <Sticky offsetBottom={0} position="bottom">
-            <div class={['btnGroup', styles.btnMore]}>
-              <Button block round type="primary" onClick={this.onBuy}>
-                立即购买
-              </Button>
-            </div>
-          </Sticky>
-        )}
-
-        {this.joinRoom == '1' && this.liveStatus.liveStatus !== 2 && (
-          <Sticky offsetBottom={0} position="bottom">
-            <div class={['btnGroup']} style={{ paddingTop: '12px' }}>
-              <Button block round type="primary" onClick={this.onJoinRoom}>
-                进入直播间
-              </Button>
-            </div>
-          </Sticky>
-        )}
-      </div>
-    )
-  }
-})
+import CoursePlanStep from '@/business-components/course-plan-step'
+import SectionDetail from '@/business-components/section-detail'
+import UserDetail from '@/business-components/user-detail'
+import request from '@/helpers/request'
+import dayjs from 'dayjs'
+import { Icon, Sticky, Button, Dialog, Toast } from 'vant'
+import { defineComponent } from 'vue'
+import styles from './live-detail.module.less'
+import iconTips from '@common/images/icon_tips.png'
+import { orderStatus } from '@/views/order-detail/orderStatus'
+import ColHeader from '@/components/col-header'
+import { postMessage } from '@/helpers/native-message'
+interface IProps {
+  courseTime: string
+  coursePlan: string
+  videoPosterUrl?: string
+  roomUid?: string
+  liveState?: number
+  id?: number | string
+}
+export default defineComponent({
+  name: 'LiveDetail',
+  data() {
+    const query = this.$route.query
+    return {
+      joinRoom: query.joinRoom, // 原生传递过来的参数，判断是否进入直播间
+      recomUserId: query.recomUserId, // 推荐人id
+      groupId: query.groupId,
+      courseId: query.classId,
+      live: {} as any
+    }
+  },
+  computed: {
+    userInfo() {
+      const live = this.live as any
+      const planList = live.planList || []
+      const startTime = planList[0]?.startTime || new Date()
+      const endTime = planList[0]?.endTime || new Date()
+      return {
+        headUrl: live.avatar,
+        username: live.userName || `游客${live.teacherId || ''}`,
+        startTime:
+          `${dayjs(startTime).format('YYYY-MM-DD')} ${dayjs(startTime).format(
+            'HH:mm'
+          )}~${dayjs(endTime).format('HH:mm')}` || '',
+        buyNum: live.studentCount,
+        lessonPrice: live.coursePrice,
+        lessonNum: live.courseNum,
+        lessonDesc: live.courseIntroduce,
+        lessonCoverUrl: live.backgroundPic || live.backgroundPicTemplate,
+        lessonName: live.courseGroupName,
+        auditVersion:0
+      }
+    },
+    courseInfo() {
+      const tempArr = [] as IProps[]
+      const coursePlanList = this.live.planList || []
+      coursePlanList.forEach((item: any) => {
+        const startTime = item.startTime || new Date()
+        const endTime = item.endTime || new Date()
+        tempArr.push({
+          courseTime: `${dayjs(startTime).format('YYYY-MM-DD')} ${dayjs(
+            startTime
+          ).format('HH:mm')}~${dayjs(endTime).format('HH:mm')}`,
+          coursePlan: item.plan,
+          roomUid: item.roomUid,
+          liveState: item.liveState,
+          id: item.courseId
+        })
+      })
+      return tempArr || []
+    },
+    salesEndDate() {
+      const live = this.live as any
+      return dayjs(live.salesEndDate || new Date()).format('YYYY-MM-DD')
+    },
+    liveStatus() {
+      const coursePlanList = this.live.planList || []
+      const tempObj = {
+        status: false,
+        liveStatus: 0,
+        roomUid: ''
+      }
+      coursePlanList.forEach((item: any) => {
+        if (item.courseId === Number(this.courseId)) {
+          tempObj.status = true
+          tempObj.liveStatus = item.liveStatus
+          tempObj.roomUid = item.roomUid
+        }
+      })
+      return tempObj
+    }
+  },
+  async mounted() {
+    try {
+      const res = await request.get(
+        '/api-student/courseGroup/queryLiveCourseInfo',
+        {
+          params: {
+            groupId: this.groupId
+          }
+        }
+      )
+      this.live = res.data || {}
+    } catch {}
+  },
+  methods: {
+    async onJoinRoom() {
+      try {
+        const res = await request.get(
+          '/api-student/courseGroup/queryLiveCourseInfo',
+          {
+            params: {
+              groupId: this.groupId
+            }
+          }
+        )
+        const result = res.data || {}
+        const coursePlanList = result.planList || []
+        let tempObj: any = {}
+        coursePlanList.forEach((item: any) => {
+          if (item.courseId === Number(this.courseId)) {
+            tempObj = item
+          }
+        })
+        console.log(tempObj, this.live, 'tempObj')
+        if (tempObj && tempObj.liveState === 1) {
+          postMessage({
+            api: 'joinLiveRoom',
+            content: {
+              roomId: tempObj.roomUid,
+              teacherId: this.live.teacherId
+            }
+          })
+        } else if (tempObj && tempObj.liveState === 2) {
+          setTimeout(() => {
+            Toast('课程已结束')
+          }, 100)
+        } else {
+          setTimeout(() => {
+            Toast('课程尚未开始，请耐心等候')
+          }, 100)
+        }
+      } catch {}
+    },
+    async onBuy() {
+      try {
+        const res = await request.post(
+          '/api-student/userOrder/getPendingOrder',
+          {
+            data: {
+              goodType: 'LIVE',
+              bizId: this.groupId
+            }
+          }
+        )
+        const live = this.live
+        orderStatus.orderObject.orderType = 'LIVE'
+        orderStatus.orderObject.orderName = '直播课购买'
+        orderStatus.orderObject.orderDesc = '直播课购买'
+        orderStatus.orderObject.actualPrice = live.coursePrice
+        orderStatus.orderObject.recomUserId = this.recomUserId
+        orderStatus.orderObject.orderNo = ''
+        orderStatus.orderObject.orderList = [
+          {
+            orderType: 'LIVE',
+            goodsName: '直播课购买',
+            courseGroupId: live.courseGroupId,
+            courseGroupName: live.courseGroupName,
+            coursePrice: live.coursePrice,
+            teacherName: live.userName || `游客${live.teacherId || ''}`,
+            teacherId: live.teacherId,
+            avatar: live.avatar,
+            courseInfo: this.courseInfo,
+            recomUserId: this.recomUserId
+          }
+        ]
+        const result = res.data
+        if (result) {
+          Dialog.confirm({
+            title: '提示',
+            message: '您有一个未支付的订单，是否继续支付？',
+            confirmButtonColor: '#269a93',
+            cancelButtonText: '取消订单',
+            confirmButtonText: '继续支付'
+          })
+            .then(async () => {
+              orderStatus.orderObject.orderNo = result.orderNo
+              orderStatus.orderObject.actualPrice = result.actualPrice
+              this.routerTo()
+            })
+            .catch(() => {
+              Dialog.close()
+              // 只用取消订单，不用做其它处理
+              this.cancelPayment(result.orderNo)
+            })
+        } else {
+          this.routerTo()
+        }
+      } catch {
+        //
+      }
+    },
+    routerTo() {
+      const live = this.live
+      this.$router.push({
+        path: '/orderDetail',
+        query: {
+          orderType: 'LIVE',
+          courseGroupId: live.courseGroupId
+        }
+      })
+    },
+    async cancelPayment(orderNo: string) {
+      try {
+        await request.post('/api-student/userOrder/orderCancel', {
+          data: {
+            orderNo
+          }
+        })
+        // this.routerTo()
+      } catch {}
+    }
+  },
+  render() {
+    return (
+      <div class={[styles['live-detail'], 'mb12']}>
+        <ColHeader />
+        <UserDetail userInfo={this.userInfo} showBuy={false} />
+        <SectionDetail>
+          <p class={styles.introduction}>{this.userInfo.lessonDesc}</p>
+        </SectionDetail>
+
+        <SectionDetail
+          title="课程列表"
+          icon="courseList"
+          contentStyle={{ paddingTop: '0' }}
+        >
+          {this.courseInfo.length > 0 && (
+            <CoursePlanStep
+              courseInfo={this.courseInfo}
+              courseId={Number(this.courseId) || 0}
+            />
+          )}
+        </SectionDetail>
+
+        <div class={styles.tips}>
+          <h3>
+            <Icon name={iconTips} size={15} />
+            温馨提示
+          </h3>
+          <p>
+            1、该直播课程销售截止后，报名人数若少于
+            {this.live.mixStudentNum || 0}
+            人将取消开课，已购买学员付费金额将自动返还，请您放心购买；
+            <br />
+            2、直播课教学计划中的上课时间为老师预计时间，实际上课时间以老师开启直播时间为准；
+            <br />
+            3、若您错过老师直播，可通过视频回放观看完整课程。
+          </p>
+        </div>
+        {this.courseInfo.length > 0 && this.live.existBuy !== 1 && (
+          <Sticky offsetBottom={0} position="bottom">
+            <div class={['btnGroup', styles.btnMore]}>
+              <Button block round type="primary" onClick={this.onBuy}>
+                立即购买
+              </Button>
+            </div>
+          </Sticky>
+        )}
+
+        {this.joinRoom == '1' && this.liveStatus.liveStatus !== 2 && (
+          <Sticky offsetBottom={0} position="bottom">
+            <div class={['btnGroup']} style={{ paddingTop: '12px' }}>
+              <Button block round type="primary" onClick={this.onJoinRoom}>
+                进入直播间
+              </Button>
+            </div>
+          </Sticky>
+        )}
+      </div>
+    )
+  }
+})

src/student/video-class/video-item.tsx

@@ -1,67 +1,69 @@
-import { defineComponent, PropType } from 'vue'
-import { Image } from 'vant'
-import styles from './video-item.module.less'
-
-import iconTeacher from '@common/images/icon_teacher.png'
-
-interface VideoItemProps {
-  id?: number
-  teacherId?: number
-  lessonName: string
-  userName: string
-  avatar: string
-  lessonCoverUrl: string
-  lessonCount: number
-  lessonPrice: number
-  countStudent: number
-  lessonSubjectName: string
-}
-
-export default defineComponent({
-  name: 'VideoItem',
-  props: {
-    item: Object as PropType<VideoItemProps>,
-    onClick: {
-      type: Function as PropType<(item: any) => void>,
-      default: (item: any) => {}
-    }
-  },
-  render() {
-    const item: any = this.item
-    return (
-      <div
-        class={styles.videoItem}
-        onClick={() => {
-          this.onClick(item)
-        }}
-      >
-        <div style={{ position: 'relative' }}>
-          <Image
-            class={styles.viCover}
-            fit="cover"
-            src={item?.lessonCoverUrl}
-          />
-          <span class={styles.subjectName}>{item?.lessonSubjectName}</span>
-        </div>
-
-        <div class={styles.viSection}>
-          <div class={[styles.viTitle, 'van-ellipsis']}>{item?.lessonName}</div>
-          <div class={styles.viUserInfo}>
-            <Image
-              src={item?.avatar || iconTeacher}
-              class={styles.viUserLogo}
-            />
-            <span class={[styles.viUserName, 'van-hairline--right']}>
-              {item?.userName || `游客${item?.teacherId || ''}`}
-            </span>
-            <span class={styles.viUserNum}>{item?.countStudent}人已购买</span>
-          </div>
-          <div class={styles.viPrice}>
-            {item?.lessonPrice > 0 && <>￥{item?.lessonPrice}/</>}
-            {item?.lessonCount}课时
-          </div>
-        </div>
-      </div>
-    )
-  }
-})
+import { defineComponent, PropType } from 'vue'
+import { Image } from 'vant'
+import styles from './video-item.module.less'
+
+import iconTeacher from '@common/images/icon_teacher.png'
+
+interface VideoItemProps {
+  id?: number
+  teacherId?: number
+  lessonName: string
+  userName: string
+  avatar: string
+  lessonCoverUrl: string
+  lessonCount: number
+  lessonPrice: number
+  countStudent: number
+  lessonSubjectName: string
+}
+
+export default defineComponent({
+  name: 'VideoItem',
+  props: {
+    item: Object as PropType<VideoItemProps>,
+    onClick: {
+      type: Function as PropType<(item: any) => void>,
+      default: (item: any) => {}
+    }
+  },
+  render() {
+    const item: any = this.item
+    return (
+      <div
+        class={styles.videoItem}
+        onClick={() => {
+          this.onClick(item)
+        }}
+      >
+        <div style={{ position: 'relative' }}>
+          <Image
+            class={styles.viCover}
+            fit="cover"
+            src={item?.lessonCoverUrl}
+          />
+          <span class={styles.subjectName}>{item?.lessonSubjectName}</span>
+        </div>
+
+        <div class={styles.viSection}>
+          <div class={[styles.viTitle, 'van-ellipsis']}>{item?.lessonName}</div>
+          <div class={styles.viUserInfo}>
+            <Image
+              src={item?.avatar || iconTeacher}
+              class={styles.viUserLogo}
+            />
+            <span class={[styles.viUserName, 'van-hairline--right']}>
+              {item?.userName || `游客${item?.teacherId || ''}`}
+            </span>
+            <span class={styles.viUserNum}>{item?.countStudent}人已购买</span>
+          </div>
+          <div class={styles.viPrice}>
+            {item?.lessonPrice > 0 && <>￥{item?.lessonPrice}/</>}
+            {item?.lessonPrice <= 0 &&item?.auditVersion &&<>￥{0}/</>}
+            {item?.lessonPrice <= 0 &&!item?.auditVersion &&<>免费/</>}
+            {item?.lessonCount}课时
+          </div>
+        </div>
+      </div>
+    )
+  }
+})

src/teacher/live-class/create-components/course-start.tsx

@@ -1,311 +1,312 @@
-import ColField from '@/components/col-field'
-import ColFieldGroup from '@/components/col-field-group'
-import {
-  Button,
-  Col,
-  Field,
-  Form,
-  Radio,
-  RadioGroup,
-  Row,
-  Sticky,
-  Tab,
-  Tabs,
-  Image,
-  Icon,
-  Popup,
-  DatetimePicker
-} from 'vant'
-import { defineComponent } from 'vue'
-import { createState } from './createState'
-import styles from './course-start.module.less'
-import ColUpload from '@/components/col-upload'
-import { verifiyNumberInteger } from '@/helpers/toolsValidate'
-import { formatterDate } from '@/helpers/utils'
-
-import activeButtonIcon from '@common/images/icon_checkbox.png'
-import inactiveButtonIcon from '@common/images/icon_checkbox_default.png'
-import dayjs from 'dayjs'
-
-export default defineComponent({
-  name: 'course-start',
-  data() {
-    return {
-      typeDateTime: 'start',
-      dateStatus: false,
-      currentDate: new Date(),
-      minDate: dayjs().toDate(),
-      maxDate: new Date()
-    }
-  },
-  mounted() {
-    this.maxDate = dayjs(createState.selectCourseList[0].startTime)
-      .subtract(1, 'day')
-      .toDate()
-
-    createState.live.salesStartDate =
-      createState.live.salesStartDate ||
-      dayjs(this.minDate).format('YYYY-MM-DD')
-    createState.live.salesEndDate =
-      createState.live.salesEndDate || dayjs(this.maxDate).format('YYYY-MM-DD')
-  },
-  methods: {
-    tabChange(name: number) {
-      createState.tabIndex = name
-    },
-    selectImg(val: string) {
-      createState.live.backgroundPic = ''
-      createState.live.backgroundPicTemplate = val
-    },
-    onFormatterInt(val: any) {
-      if (val && val >= 1) {
-        return verifiyNumberInteger(val)
-      } else {
-        return ''
-      }
-    },
-    onConfirm(val: any) {
-      if (this.typeDateTime === 'start') {
-        createState.live.salesStartDate = dayjs(val).format('YYYY-MM-DD')
-        if (
-          createState.live.salesEndDate &&
-          dayjs(createState.live.salesStartDate).isAfter(
-            dayjs(createState.live.salesEndDate)
-          )
-        ) {
-          createState.live.salesEndDate = ''
-        }
-      } else if (this.typeDateTime === 'end') {
-        createState.live.salesEndDate = dayjs(val).format('YYYY-MM-DD')
-      }
-      this.dateStatus = false
-    }
-  },
-  render() {
-    return (
-      <Form
-        class={styles.courseStart}
-        onSubmit={() => (createState.active = 5)}
-        scrollToError
-      >
-        <ColFieldGroup>
-          <ColField title="开售日期" required>
-            <Field
-              v-model={createState.live.salesStartDate}
-              name="salesStartDate"
-              readonly
-              isLink
-              placeholder="请选择开售日期"
-              onClick={() => {
-                this.minDate = dayjs().toDate()
-                this.currentDate = dayjs(
-                  createState.live.salesStartDate
-                ).toDate()
-                this.typeDateTime = 'start'
-                this.dateStatus = true
-              }}
-              rules={[{ required: true, message: '请选择开售日期' }]}
-            />
-          </ColField>
-          <ColField title="停售日期" required>
-            <Field
-              v-model={createState.live.salesEndDate}
-              name="salesEndDate"
-              readonly
-              isLink
-              onClick={() => {
-                this.minDate = dayjs(createState.live.salesStartDate).toDate()
-                this.currentDate = dayjs(createState.live.salesEndDate).toDate()
-                this.typeDateTime = 'end'
-                this.dateStatus = true
-              }}
-              rules={[{ required: true, message: '请选择停售日期' }]}
-              placeholder="请选择停售日期"
-            />
-          </ColField>
-        </ColFieldGroup>
-
-        <ColFieldGroup>
-          <ColField
-            title="最低开课人数"
-            required
-            style={{
-              marginBottom: '10px'
-            }}
-          >
-            <Field
-              v-model={createState.live.mixStudentNum}
-              name="mixStudentNum"
-              placeholder="请输入最低开课人数"
-              type="number"
-              maxlength={8}
-              formatter={this.onFormatterInt}
-              rules={[{ required: true, message: '请输入最低开课人数' }]}
-              v-slots={{
-                button: () => <span>人</span>
-              }}
-            />
-          </ColField>
-          <div class={styles.stepTips}>
-            课程停售时付费学员达到该人数可开课，若未达到该人数课程将会失效，已付费学员将自动退款
-          </div>
-        </ColFieldGroup>
-
-        <ColFieldGroup>
-          <ColField
-            required
-            border={false}
-            v-slots={{
-              title: () => (
-                <Tabs
-                  v-model:active={createState.tabIndex}
-                  class={styles.infoField}
-                  onChange={this.tabChange}
-                  shrink
-                  color="var(--van-primary)"
-                  lineWidth={20}
-                >
-                  <Tab title="图片模板" name={1}></Tab>
-                  <Tab title="自定义模板" name={2}></Tab>
-                </Tabs>
-              )
-            }}
-          >
-            <p class={styles.photoTip}>模板图片将作为该课程封面为学员展示</p>
-            {/* {createState.tabIndex === 1 ? ( */}
-            <Field
-              name="backgroundPicTemplate"
-              border={false}
-              v-show={createState.tabIndex === 1}
-              rules={[
-                {
-                  required:
-                    createState.tabIndex === 1 &&
-                    !createState.live.backgroundPic,
-                  message: '请选择图片模板'
-                }
-              ]}
-              v-slots={{
-                input: () => (
-                  <RadioGroup v-model={createState.live.backgroundPicTemplate}>
-                    <Row justify="space-between" style={{ width: '100%' }}>
-                      {createState.templateList.map((item: any) => (
-                        <Col
-                          span={12}
-                          class={styles.imgContainer}
-                          onClick={() => this.selectImg(item)}
-                        >
-                          <Image class={styles.imgContainer} src={item} />
-                          <Radio
-                            name={item}
-                            v-slots={{
-                              icon: (props: any) => (
-                                <Icon
-                                  class={styles.boxStyle}
-                                  name={
-                                    props.checked
-                                      ? activeButtonIcon
-                                      : inactiveButtonIcon
-                                  }
-                                  size="18"
-                                />
-                              )
-                            }}
-                          />
-                        </Col>
-                      ))}
-                    </Row>
-                  </RadioGroup>
-                )
-              }}
-            />
-            {/* ) : null} */}
-            {/* {createState.tabIndex == 2 ? ( */}
-            <Field
-              name="backgroundPic"
-              border={false}
-              v-show={createState.tabIndex == 2}
-              rules={[
-                {
-                  required: createState.tabIndex == 2,
-                  message: '请上传自定义模板'
-                }
-              ]}
-              v-slots={{
-                input: () => (
-                  <Row justify="space-between" style={{ width: '100%' }}>
-                    <Col span={12} class={styles.imgContainer}>
-                      <ColUpload
-                        cropper
-                        bucket="live-rewind"
-                        options={{
-                          fixedNumber: [1.77, 1],
-                          autoCropWidth: 750,
-                          autoCropHeight: 424
-                        }}
-                        onUploadChange={(val: any) => {
-                          if (val) {
-                            createState.live.backgroundPicTemplate = ''
-                          }
-                        }}
-                        v-model={createState.live.backgroundPic}
-                        class={styles.imgContainer}
-                      />
-                    </Col>
-                    <Col span={24}>
-                      <p
-                        class={styles.photoTip}
-                        style={{ color: '#ff4e19', padding: '0' }}
-                      >
-                        图片尺寸为750*424能达到最佳显示效果
-                      </p>
-                    </Col>
-                  </Row>
-                )
-              }}
-            />
-            {/* // ) : null} */}
-          </ColField>
-        </ColFieldGroup>
-
-        <Sticky offsetBottom={0} position="bottom">
-          <div class={['btnGroup', 'btnMore']}>
-            <Button
-              block
-              round
-              type="primary"
-              plain
-              onClick={() => {
-                createState.active = 3
-                createState.live.salesStartDate = ''
-                createState.live.salesEndDate = ''
-                createState.live.backgroundPic = ''
-                createState.live.backgroundPicTemplate = ''
-                createState.live.mixStudentNum = null
-              }}
-            >
-              上一步
-            </Button>
-            <Button block round type="primary" native-type="submit">
-              下一步
-            </Button>
-          </div>
-        </Sticky>
-
-        <Popup show={this.dateStatus} position="bottom" round>
-          <DatetimePicker
-            type="date"
-            v-model={this.currentDate}
-            minDate={this.minDate}
-            maxDate={this.maxDate}
-            formatter={formatterDate}
-            onCancel={() => {
-              this.dateStatus = false
-            }}
-            onConfirm={this.onConfirm}
-          />
-        </Popup>
-      </Form>
-    )
-  }
-})
+import ColField from '@/components/col-field'
+import ColFieldGroup from '@/components/col-field-group'
+import {
+  Button,
+  Col,
+  Field,
+  Form,
+  Radio,
+  RadioGroup,
+  Row,
+  Sticky,
+  Tab,
+  Tabs,
+  Image,
+  Icon,
+  Popup,
+  DatetimePicker
+} from 'vant'
+import { defineComponent } from 'vue'
+import { createState } from './createState'
+import styles from './course-start.module.less'
+import ColUpload from '@/components/col-upload'
+import { verifiyNumberInteger } from '@/helpers/toolsValidate'
+import { formatterDate } from '@/helpers/utils'
+
+import activeButtonIcon from '@common/images/icon_checkbox.png'
+import inactiveButtonIcon from '@common/images/icon_checkbox_default.png'
+import dayjs from 'dayjs'
+
+export default defineComponent({
+  name: 'course-start',
+  data() {
+    return {
+      typeDateTime: 'start',
+      dateStatus: false,
+      currentDate: new Date(),
+      minDate: dayjs().toDate(),
+      maxDate: new Date()
+    }
+  },
+  mounted() {
+    this.maxDate = dayjs(createState.selectCourseList[0].startTime)
+      .subtract(1, 'day')
+      .toDate()
+
+    createState.live.salesStartDate =
+      createState.live.salesStartDate ||
+      dayjs(this.minDate).format('YYYY-MM-DD')
+    createState.live.salesEndDate =
+      createState.live.salesEndDate || dayjs(this.maxDate).format('YYYY-MM-DD')
+  },
+  methods: {
+    tabChange(name: number) {
+      createState.tabIndex = name
+    },
+    selectImg(val: string) {
+      createState.live.backgroundPic = ''
+      createState.live.backgroundPicTemplate = val
+    },
+    onFormatterInt(val: any) {
+      if (val && val >= 1) {
+        return verifiyNumberInteger(val)
+      } else {
+        return ''
+      }
+    },
+    onConfirm(val: any) {
+      if (this.typeDateTime === 'start') {
+        createState.live.salesStartDate = dayjs(val).format('YYYY-MM-DD')
+        if (
+          createState.live.salesEndDate &&
+          dayjs(createState.live.salesStartDate).isAfter(
+            dayjs(createState.live.salesEndDate)
+          )
+        ) {
+          createState.live.salesEndDate = ''
+        }
+      } else if (this.typeDateTime === 'end') {
+        createState.live.salesEndDate = dayjs(val).format('YYYY-MM-DD')
+      }
+      this.dateStatus = false
+    }
+  },
+  render() {
+    return (
+      <Form
+        class={styles.courseStart}
+        onSubmit={() => (createState.active = 5)}
+        scrollToError
+      >
+        <ColFieldGroup>
+          <ColField title="开售日期" required>
+            <Field
+              v-model={createState.live.salesStartDate}
+              name="salesStartDate"
+              readonly
+              isLink
+              placeholder="请选择开售日期"
+              onClick={() => {
+                this.minDate = dayjs().toDate()
+                this.currentDate = dayjs(
+                  createState.live.salesStartDate
+                ).toDate()
+                this.typeDateTime = 'start'
+                this.dateStatus = true
+              }}
+              rules={[{ required: true, message: '请选择开售日期' }]}
+            />
+          </ColField>
+          <ColField title="停售日期" required>
+            <Field
+              v-model={createState.live.salesEndDate}
+              name="salesEndDate"
+              readonly
+              isLink
+              onClick={() => {
+                this.minDate = dayjs(createState.live.salesStartDate).toDate()
+                this.currentDate = dayjs(createState.live.salesEndDate).toDate()
+                this.typeDateTime = 'end'
+                this.dateStatus = true
+              }}
+              rules={[{ required: true, message: '请选择停售日期' }]}
+              placeholder="请选择停售日期"
+            />
+          </ColField>
+        </ColFieldGroup>
+
+        <ColFieldGroup>
+          <ColField
+            title="最低开课人数"
+            required
+            style={{
+              marginBottom: '10px'
+            }}
+          >
+            <Field
+              v-model={createState.live.mixStudentNum}
+              name="mixStudentNum"
+              placeholder="请输入最低开课人数"
+              type="number"
+              maxlength={8}
+              formatter={this.onFormatterInt}
+              rules={[{ required: true, message: '请输入最低开课人数' }]}
+              v-slots={{
+                button: () => <span>人</span>
+              }}
+            />
+          </ColField>
+          <div class={styles.stepTips}>
+            课程停售时付费学员达到该人数可开课，若未达到该人数课程将会失效，已付费学员将自动退款
+          </div>
+        </ColFieldGroup>
+
+        <ColFieldGroup>
+          <ColField
+            required
+            border={false}
+            v-slots={{
+              title: () => (
+                // <Tabs
+                //   v-model:active={createState.tabIndex}
+                //   class={styles.infoField}
+                //   onChange={this.tabChange}
+                //   shrink
+                //   color="var(--van-primary)"
+                //   lineWidth={20}
+                // >
+                //   <Tab title="图片模板" name={1}></Tab>
+                //   <Tab title="自定义模板" name={2}></Tab>
+                // </Tabs>
+                <p>请上传自定义模板</p>
+              )
+            }}
+          >
+            <p class={styles.photoTip}>模板图片将作为该课程封面为学员展示</p>
+            {/* {createState.tabIndex === 1 ? ( */}
+            {/* <Field
+              name="backgroundPicTemplate"
+              border={false}
+              v-show={createState.tabIndex === 1}
+              rules={[
+                {
+                  required:
+                    createState.tabIndex === 1 &&
+                    !createState.live.backgroundPic,
+                  message: '请选择图片模板'
+                }
+              ]}
+              v-slots={{
+                input: () => (
+                  <RadioGroup v-model={createState.live.backgroundPicTemplate}>
+                    <Row justify="space-between" style={{ width: '100%' }}>
+                      {createState.templateList.map((item: any) => (
+                        <Col
+                          span={12}
+                          class={styles.imgContainer}
+                          onClick={() => this.selectImg(item)}
+                        >
+                          <Image class={styles.imgContainer} src={item} />
+                          <Radio
+                            name={item}
+                            v-slots={{
+                              icon: (props: any) => (
+                                <Icon
+                                  class={styles.boxStyle}
+                                  name={
+                                    props.checked
+                                      ? activeButtonIcon
+                                      : inactiveButtonIcon
+                                  }
+                                  size="18"
+                                />
+                              )
+                            }}
+                          />
+                        </Col>
+                      ))}
+                    </Row>
+                  </RadioGroup>
+                )
+              }}
+            /> */}
+            {/* ) : null} */}
+            {/* {createState.tabIndex == 2 ? (   v-show={createState.tabIndex == 2}*/}
+            <Field
+              name="backgroundPic"
+              border={false}
+
+              rules={[
+                {
+                  required: true,
+                  message: '请上传自定义模板'
+                }
+              ]}
+              v-slots={{
+                input: () => (
+                  <Row justify="space-between" style={{ width: '100%' }}>
+                    <Col span={12} class={styles.imgContainer}>
+                      <ColUpload
+                        cropper
+                        bucket="live-rewind"
+                        options={{
+                          fixedNumber: [1.77, 1],
+                          autoCropWidth: 750,
+                          autoCropHeight: 424
+                        }}
+                        onUploadChange={(val: any) => {
+                          if (val) {
+                            createState.live.backgroundPicTemplate = ''
+                          }
+                        }}
+                        v-model={createState.live.backgroundPic}
+                        class={styles.imgContainer}
+                      />
+                    </Col>
+                    <Col span={24}>
+                      <p
+                        class={styles.photoTip}
+                        style={{ color: '#ff4e19', padding: '0' }}
+                      >
+                        图片尺寸为750*424能达到最佳显示效果
+                      </p>
+                    </Col>
+                  </Row>
+                )
+              }}
+            />
+            {/* // ) : null} */}
+          </ColField>
+        </ColFieldGroup>
+
+        <Sticky offsetBottom={0} position="bottom">
+          <div class={['btnGroup', 'btnMore']}>
+            <Button
+              block
+              round
+              type="primary"
+              plain
+              onClick={() => {
+                createState.active = 3
+                createState.live.salesStartDate = ''
+                createState.live.salesEndDate = ''
+                createState.live.backgroundPic = ''
+                createState.live.backgroundPicTemplate = ''
+                createState.live.mixStudentNum = null
+              }}
+            >
+              上一步
+            </Button>
+            <Button block round type="primary" native-type="submit">
+              下一步
+            </Button>
+          </div>
+        </Sticky>
+
+        <Popup show={this.dateStatus} position="bottom" round>
+          <DatetimePicker
+            type="date"
+            v-model={this.currentDate}
+            minDate={this.minDate}
+            maxDate={this.maxDate}
+            formatter={formatterDate}
+            onCancel={() => {
+              this.dateStatus = false
+            }}
+            onConfirm={this.onConfirm}
+          />
+        </Popup>
+      </Form>
+    )
+  }
+})

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

@@ -1,138 +1,139 @@
-import CoursePlanStep from '@/business-components/course-plan-step'
-import SectionDetail from '@/business-components/section-detail'
-import UserDetail from '@/business-components/user-detail'
-import request from '@/helpers/request'
-import { state } from '@/state'
-import { Button, Dialog, Sticky, Toast } from 'vant'
-import { defineComponent } from 'vue'
-import { createState } from './createState'
-import styles from './detail.module.less'
-import dayjs from 'dayjs'
-import { postMessage } from '@/helpers/native-message'
-interface IProps {
-  courseTime: string
-  coursePlan: string
-  videoPosterUrl?: string
-  roomUid?: string
-  liveState?: number
-  id?: number | string
-}
-export default defineComponent({
-  name: 'detail',
-  computed: {
-    userInfo() {
-      const startTime = createState.live.coursePlanList[0].startTime
-      const endTime = createState.live.coursePlanList[0].endTime
-      return {
-        headUrl: state.user.data?.heardUrl,
-        username:
-          state.user.data?.username || `游客${state.user.data?.userId || ''}`,
-        startTime:
-          `${dayjs(startTime).format('YYYY-MM-DD')} ${dayjs(startTime).format(
-            'HH:mm'
-          )}~${dayjs(endTime).format('HH:mm')}` || '',
-        buyNum: 0,
-        lessonPrice: createState.live.coursePrice,
-        lessonNum: createState.live.courseNum,
-        lessonDesc: createState.live.courseIntroduce,
-        lessonCoverUrl:
-          createState.live.backgroundPic ||
-          createState.live.backgroundPicTemplate,
-        lessonName: createState.live.name
-      }
-    },
-    courseInfo() {
-      const tempArr = [] as IProps[]
-      const coursePlanList = createState.live.coursePlanList || []
-      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,
-          liveState: item.liveState,
-          coursePlan: item.plan,
-          id: item.courseId
-        })
-      })
-      return tempArr || []
-    }
-  },
-  methods: {
-    async onSubmit() {
-      try {
-        const params = {
-          ...createState.live,
-          startTime: createState.live.coursePlanList[0].startTime,
-          backgroundPic:
-            createState.live.backgroundPic ||
-            createState.live.backgroundPicTemplate,
-          teacherId: state.user.data?.userId
-        }
-        await request.post('/api-teacher/courseGroup/addLiveCourse', {
-          data: params
-        })
-        Toast.success('创建成功')
-        setTimeout(() => {
-          postMessage({ api: 'back' })
-        }, 1000)
-      } catch (e: any) {
-        // 报错时需要重置日历表的数据
-        const message = e.message
-        Dialog.alert({
-          title: '提示',
-          confirmButtonColor: 'var(--van-primary)',
-          message
-        }).then(() => {
-          createState.active = 3
-          createState.selectCourseList = []
-          createState.live.salesStartDate = ''
-          createState.live.salesEndDate = ''
-          createState.live.mixStudentNum = null
-          createState.live.backgroundPic = ''
-          createState.live.backgroundPicTemplate = ''
-          createState.coursePlanStatus = false
-        })
-      }
-    }
-  },
-  render() {
-    return (
-      <div class={[styles['detail']]}>
-        <UserDetail userInfo={this.userInfo} />
-        <SectionDetail>
-          <p class={styles.introduction}>{this.userInfo.lessonDesc}</p>
-        </SectionDetail>
-
-        <SectionDetail
-          title="课程安排"
-          icon="courseList"
-          titleShow={false}
-          class={'mb12'}
-          contentStyle={{ paddingTop: '0' }}
-        >
-          <CoursePlanStep courseInfo={this.courseInfo} />
-        </SectionDetail>
-
-        <Sticky offsetBottom={0} position="bottom">
-          <div class={['btnGroup', 'btnMore']}>
-            <Button
-              block
-              round
-              type="primary"
-              plain
-              onClick={() => {
-                createState.active = 4
-              }}
-            >
-              返回编辑
-            </Button>
-            <Button block round type="primary" onClick={this.onSubmit}>
-              创建成功
-            </Button>
-          </div>
-        </Sticky>
-      </div>
-    )
-  }
-})
+import CoursePlanStep from '@/business-components/course-plan-step'
+import SectionDetail from '@/business-components/section-detail'
+import UserDetail from '@/business-components/user-detail'
+import request from '@/helpers/request'
+import { state } from '@/state'
+import { Button, Dialog, Sticky, Toast } from 'vant'
+import { defineComponent } from 'vue'
+import { createState } from './createState'
+import styles from './detail.module.less'
+import dayjs from 'dayjs'
+import { postMessage } from '@/helpers/native-message'
+interface IProps {
+  courseTime: string
+  coursePlan: string
+  videoPosterUrl?: string
+  roomUid?: string
+  liveState?: number
+  id?: number | string
+}
+export default defineComponent({
+  name: 'detail',
+  computed: {
+    userInfo() {
+      const startTime = createState.live.coursePlanList[0].startTime
+      const endTime = createState.live.coursePlanList[0].endTime
+      return {
+        headUrl: state.user.data?.heardUrl,
+        username:
+          state.user.data?.username || `游客${state.user.data?.userId || ''}`,
+        startTime:
+          `${dayjs(startTime).format('YYYY-MM-DD')} ${dayjs(startTime).format(
+            'HH:mm'
+          )}~${dayjs(endTime).format('HH:mm')}` || '',
+        buyNum: 0,
+        lessonPrice: createState.live.coursePrice,
+        lessonNum: createState.live.courseNum,
+        lessonDesc: createState.live.courseIntroduce,
+        lessonCoverUrl:
+          createState.live.backgroundPic ||
+          createState.live.backgroundPicTemplate,
+        lessonName: createState.live.name,
+        auditVersion:0
+      }
+    },
+    courseInfo() {
+      const tempArr = [] as IProps[]
+      const coursePlanList = createState.live.coursePlanList || []
+      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,
+          liveState: item.liveState,
+          coursePlan: item.plan,
+          id: item.courseId
+        })
+      })
+      return tempArr || []
+    }
+  },
+  methods: {
+    async onSubmit() {
+      try {
+        const params = {
+          ...createState.live,
+          startTime: createState.live.coursePlanList[0].startTime,
+          backgroundPic:
+            createState.live.backgroundPic ||
+            createState.live.backgroundPicTemplate,
+          teacherId: state.user.data?.userId
+        }
+        await request.post('/api-teacher/courseGroup/addLiveCourse', {
+          data: params
+        })
+        Toast.success('创建成功')
+        setTimeout(() => {
+          postMessage({ api: 'back' })
+        }, 1000)
+      } catch (e: any) {
+        // 报错时需要重置日历表的数据
+        const message = e.message
+        Dialog.alert({
+          title: '提示',
+          confirmButtonColor: 'var(--van-primary)',
+          message
+        }).then(() => {
+          createState.active = 3
+          createState.selectCourseList = []
+          createState.live.salesStartDate = ''
+          createState.live.salesEndDate = ''
+          createState.live.mixStudentNum = null
+          createState.live.backgroundPic = ''
+          createState.live.backgroundPicTemplate = ''
+          createState.coursePlanStatus = false
+        })
+      }
+    }
+  },
+  render() {
+    return (
+      <div class={[styles['detail']]}>
+        <UserDetail userInfo={this.userInfo} />
+        <SectionDetail>
+          <p class={styles.introduction}>{this.userInfo.lessonDesc}</p>
+        </SectionDetail>
+
+        <SectionDetail
+          title="课程安排"
+          icon="courseList"
+          titleShow={false}
+          class={'mb12'}
+          contentStyle={{ paddingTop: '0' }}
+        >
+          <CoursePlanStep courseInfo={this.courseInfo} />
+        </SectionDetail>
+
+        <Sticky offsetBottom={0} position="bottom">
+          <div class={['btnGroup', 'btnMore']}>
+            <Button
+              block
+              round
+              type="primary"
+              plain
+              onClick={() => {
+                createState.active = 4
+              }}
+            >
+              返回编辑
+            </Button>
+            <Button block round type="primary" onClick={this.onSubmit}>
+              创建成功
+            </Button>
+          </div>
+        </Sticky>
+      </div>
+    )
+  }
+})

src/teacher/live-class/live-detail.tsx

@@ -1,323 +1,324 @@
-import CoursePlanStep from '@/business-components/course-plan-step'
-import SectionDetail from '@/business-components/section-detail'
-import UserDetail from '@/business-components/user-detail'
-import UserList from '@/business-components/user-list'
-import ColResult from '@/components/col-result'
-import ColShare from '@/components/col-share'
-import ColSticky from '@/components/col-sticky'
-import { postMessage } from '@/helpers/native-message'
-import request from '@/helpers/request'
-import { state } from '@/state'
-import LiveItem from '@/views/live-class/live-item'
-import dayjs from 'dayjs'
-import { Button, Popup, Sticky, Tab, Tabs, Toast } from 'vant'
-import { defineComponent } from 'vue'
-import styles from './live-detail.module.less'
-interface IProps {
-  courseTime: string
-  coursePlan: string
-  videoPosterUrl?: string
-  roomUid?: string
-  liveState?: number
-  id?: number | string
-}
-export default defineComponent({
-  name: 'LiveDetail',
-  data() {
-    const query = this.$route.query
-    return {
-      share: query.share,
-      joinRoom: query.joinRoom, // 原生传递过来的参数，判断是否进入直播间
-      groupId: query.groupId,
-      courseId: query.classId,
-      live: {} as any,
-      shareStatus: false,
-      shareUrl: '',
-      myself: false
-    }
-  },
-  computed: {
-    userInfo() {
-      const live = this.live as any
-      const planList = live.planList || []
-      const startTime = planList[0]?.startTime || new Date()
-      const endTime = planList[0]?.endTime || new Date()
-      return {
-        headUrl: live.avatar,
-        avatar: live.avatar,
-        username: live.userName,
-        id: live.teacherId,
-        startTime:
-          `${dayjs(startTime).format('YYYY-MM-DD')} ${dayjs(startTime).format(
-            'HH:mm'
-          )}~${dayjs(endTime).format('HH:mm')}` || '',
-        lessonPrice: live.coursePrice,
-        buyNum: live.studentCount || 0,
-        lessonId: live.courseGroupId,
-        lessonNum: live.courseNum || 0, // 课时数
-        lessonDesc: live.courseIntroduce,
-        lessonCoverUrl: live.backgroundPic || live.backgroundPicTemplate,
-        lessonName: live.courseGroupName,
-        subjectName: live.subjectName,
-        courseStartTime: live.courseStartTime
-      }
-    },
-    courseInfo() {
-      const tempArr = [] as IProps[]
-      const coursePlanList = this.live.planList || []
-      coursePlanList.forEach((item: any) => {
-        const startTime = item.startTime || new Date()
-        const endTime = item.endTime || new Date()
-        tempArr.push({
-          courseTime: `${dayjs(startTime).format('YYYY-MM-DD')} ${dayjs(
-            startTime
-          ).format('HH:mm')}~${dayjs(endTime).format('HH:mm')}`,
-          coursePlan: item.plan,
-          roomUid: item.roomUid,
-          liveState: item.liveState,
-          id: item.courseId
-        })
-      })
-      return tempArr || []
-    },
-    liveStatus() {
-      const coursePlanList = this.live.planList || []
-      const tempObj = {
-        status: false,
-        liveStatus: 0,
-        roomUid: ''
-      }
-      coursePlanList.forEach((item: any) => {
-        if (item.courseId === Number(this.courseId)) {
-          tempObj.status = true
-          tempObj.liveStatus = item.liveStatus
-          tempObj.roomUid = item.roomUid
-        }
-      })
-      return tempObj
-    },
-    studentList() {
-      const live = this.live as any
-      return live.studentList || []
-    },
-    courseOffStatus() {
-      const live = this.live as any
-      let status = false
-      if (
-        (live.status === 'APPLY' && live.studentList.length === 0) ||
-        live.status === 'NOT_SALE'
-      ) {
-        status = true
-      }
-      return status
-    }
-  },
-  async mounted() {
-    try {
-      const res = await request.get(
-        '/api-teacher/courseGroup/queryLiveCourseInfo',
-        {
-          params: {
-            groupId: this.groupId
-          }
-        }
-      )
-      this.live = res.data || {}
-
-      if (state.platformType === 'TEACHER') {
-        this.myself = !res.data.myself
-      }
-
-      this.shareUrl = `${location.origin}/teacher/#/shareLive?recomUserId=${state.user.data?.userId}&groupId=${this.groupId}`
-      // console.log(this.live)
-    } catch {
-      //
-    }
-  },
-  methods: {
-    async onJoinRoom() {
-      try {
-        const res = await request.get(
-          '/api-teacher/courseGroup/queryLiveCourseInfo',
-          {
-            params: {
-              groupId: this.groupId
-            }
-          }
-        )
-        const result = res.data || {}
-        const coursePlanList = result.planList || []
-        let tempObj: any = {}
-        coursePlanList.forEach((item: any) => {
-          if (item.courseId === Number(this.courseId)) {
-            tempObj = item
-          }
-        })
-        if (tempObj && tempObj.liveState === 1) {
-          postMessage({
-            api: 'joinLiveRoom',
-            content: {
-              roomId: tempObj.roomUid,
-              teacherId: this.live.teacherId
-            }
-          })
-        } else if (tempObj && tempObj.liveState === 2) {
-          setTimeout(() => {
-            Toast('课程已结束')
-          }, 100)
-        } else {
-          setTimeout(() => {
-            Toast('课程尚未开始，请耐心等候')
-          }, 100)
-        }
-      } catch {
-        //
-      }
-    },
-    async cancelCourseGroup() {
-      try {
-        await request.get('/api-teacher/courseGroup/cancelCourseGroup', {
-          params: {
-            groupId: this.groupId
-          }
-        })
-        Toast('下架成功')
-        setTimeout(() => {
-          postMessage({ api: 'back', content: {} })
-        }, 500)
-      } catch {
-        //
-      }
-    }
-  },
-  render() {
-    return (
-      <div class={[styles['live-detail'], 'mb12']}>
-        <UserDetail userInfo={this.userInfo} />
-        <SectionDetail border>
-          <p class={styles.introduction}>{this.userInfo.lessonDesc}</p>
-        </SectionDetail>
-
-        {this.myself ? (
-          <SectionDetail title="课程列表" icon="courseList" border={true}>
-            <CoursePlanStep
-              courseInfo={this.courseInfo}
-              courseId={Number(this.courseId) || 0}
-            />
-          </SectionDetail>
-        ) : (
-          <SectionDetail
-            title="课程列表"
-            icon="courseList"
-            titleShow={false}
-            contentStyle={{ paddingTop: '0' }}
-          >
-            <Tabs color="var(--van-primary)" lineWidth={20} sticky>
-              <Tab title="课程" titleClass="van-hairline--bottom">
-                <CoursePlanStep
-                  courseInfo={this.courseInfo}
-                  courseId={Number(this.courseId) || 0}
-                />
-              </Tab>
-              <Tab title="学员列表" titleClass="van-hairline--bottom">
-                {this.studentList.map((item: any) => (
-                  <UserList
-                    class="mb12"
-                    users={{
-                      avatar: item.avatar,
-                      studentId: item.studentId,
-                      studentName: item.userName,
-                      createTime: item.createTime
-                    }}
-                  />
-                ))}
-                {this.studentList.length === 0 && (
-                  <ColResult
-                    tips="暂无购买学员"
-                    classImgSize="SMALL"
-                    btnStatus={false}
-                  />
-                )}
-              </Tab>
-            </Tabs>
-          </SectionDetail>
-        )}
-
-        {this.live.status !== 'OUT_SALE' && (
-          <>
-            {this.courseOffStatus && (
-              <ColSticky position="bottom">
-                <div class={['btnGroup']} style={{ paddingTop: '12px' }}>
-                  <Button
-                    block
-                    round
-                    type="primary"
-                    onClick={this.cancelCourseGroup}
-                  >
-                    下架
-                  </Button>
-                </div>
-              </ColSticky>
-            )}
-
-            {this.joinRoom == '1' && this.liveStatus.liveStatus !== 2 && (
-              <ColSticky position="bottom">
-                <div class={['btnGroup']} style={{ paddingTop: '12px' }}>
-                  <Button block round type="primary" onClick={this.onJoinRoom}>
-                    进入直播间
-                  </Button>
-                </div>
-              </ColSticky>
-            )}
-
-            {this.share == '1' && this.courseInfo.length > 0 && (
-              <ColSticky position="bottom">
-                <div class={['btnGroup']} style={{ paddingTop: '12px' }}>
-                  <Button
-                    block
-                    round
-                    type="primary"
-                    onClick={() => {
-                      this.shareStatus = true
-                    }}
-                  >
-                    分享
-                  </Button>
-                </div>
-              </ColSticky>
-            )}
-          </>
-        )}
-
-        <Popup
-          v-model:show={this.shareStatus}
-          style={{ background: 'transparent' }}
-        >
-          <ColShare
-            teacherId={this.userInfo.id}
-            shareUrl={this.shareUrl}
-            shareType="live"
-          >
-            <LiveItem
-              class={styles.shareCourse}
-              liveInfo={{
-                backgroundPic: this.userInfo.lessonCoverUrl,
-                courseGroupId: this.userInfo.lessonId,
-                courseGroupName: this.userInfo.lessonName,
-                courseNum: this.userInfo.lessonNum,
-                coursePrice: this.userInfo.lessonPrice,
-                teacherName: this.userInfo.username,
-                teacherId: this.userInfo.id,
-                avatar: this.userInfo.avatar,
-                studentCount: this.userInfo.buyNum,
-                courseStartTime: this.userInfo.courseStartTime,
-                existBuy: 0,
-                subjectName: this.userInfo.subjectName
-              }}
-            />
-          </ColShare>
-        </Popup>
-      </div>
-    )
-  }
-})
+import CoursePlanStep from '@/business-components/course-plan-step'
+import SectionDetail from '@/business-components/section-detail'
+import UserDetail from '@/business-components/user-detail'
+import UserList from '@/business-components/user-list'
+import ColResult from '@/components/col-result'
+import ColShare from '@/components/col-share'
+import ColSticky from '@/components/col-sticky'
+import { postMessage } from '@/helpers/native-message'
+import request from '@/helpers/request'
+import { state } from '@/state'
+import LiveItem from '@/views/live-class/live-item'
+import dayjs from 'dayjs'
+import { Button, Popup, Sticky, Tab, Tabs, Toast } from 'vant'
+import { defineComponent } from 'vue'
+import styles from './live-detail.module.less'
+interface IProps {
+  courseTime: string
+  coursePlan: string
+  videoPosterUrl?: string
+  roomUid?: string
+  liveState?: number
+  id?: number | string
+}
+export default defineComponent({
+  name: 'LiveDetail',
+  data() {
+    const query = this.$route.query
+    return {
+      share: query.share,
+      joinRoom: query.joinRoom, // 原生传递过来的参数，判断是否进入直播间
+      groupId: query.groupId,
+      courseId: query.classId,
+      live: {} as any,
+      shareStatus: false,
+      shareUrl: '',
+      myself: false
+    }
+  },
+  computed: {
+    userInfo() {
+      const live = this.live as any
+      const planList = live.planList || []
+      const startTime = planList[0]?.startTime || new Date()
+      const endTime = planList[0]?.endTime || new Date()
+      return {
+        headUrl: live.avatar,
+        avatar: live.avatar,
+        username: live.userName,
+        id: live.teacherId,
+        startTime:
+          `${dayjs(startTime).format('YYYY-MM-DD')} ${dayjs(startTime).format(
+            'HH:mm'
+          )}~${dayjs(endTime).format('HH:mm')}` || '',
+        lessonPrice: live.coursePrice,
+        buyNum: live.studentCount || 0,
+        lessonId: live.courseGroupId,
+        lessonNum: live.courseNum || 0, // 课时数
+        lessonDesc: live.courseIntroduce,
+        lessonCoverUrl: live.backgroundPic || live.backgroundPicTemplate,
+        lessonName: live.courseGroupName,
+        subjectName: live.subjectName,
+        courseStartTime: live.courseStartTime,
+        auditVersion:0
+      }
+    },
+    courseInfo() {
+      const tempArr = [] as IProps[]
+      const coursePlanList = this.live.planList || []
+      coursePlanList.forEach((item: any) => {
+        const startTime = item.startTime || new Date()
+        const endTime = item.endTime || new Date()
+        tempArr.push({
+          courseTime: `${dayjs(startTime).format('YYYY-MM-DD')} ${dayjs(
+            startTime
+          ).format('HH:mm')}~${dayjs(endTime).format('HH:mm')}`,
+          coursePlan: item.plan,
+          roomUid: item.roomUid,
+          liveState: item.liveState,
+          id: item.courseId
+        })
+      })
+      return tempArr || []
+    },
+    liveStatus() {
+      const coursePlanList = this.live.planList || []
+      const tempObj = {
+        status: false,
+        liveStatus: 0,
+        roomUid: ''
+      }
+      coursePlanList.forEach((item: any) => {
+        if (item.courseId === Number(this.courseId)) {
+          tempObj.status = true
+          tempObj.liveStatus = item.liveStatus
+          tempObj.roomUid = item.roomUid
+        }
+      })
+      return tempObj
+    },
+    studentList() {
+      const live = this.live as any
+      return live.studentList || []
+    },
+    courseOffStatus() {
+      const live = this.live as any
+      let status = false
+      if (
+        (live.status === 'APPLY' && live.studentList.length === 0) ||
+        live.status === 'NOT_SALE'
+      ) {
+        status = true
+      }
+      return status
+    }
+  },
+  async mounted() {
+    try {
+      const res = await request.get(
+        '/api-teacher/courseGroup/queryLiveCourseInfo',
+        {
+          params: {
+            groupId: this.groupId
+          }
+        }
+      )
+      this.live = res.data || {}
+
+      if (state.platformType === 'TEACHER') {
+        this.myself = !res.data.myself
+      }
+
+      this.shareUrl = `${location.origin}/teacher/#/shareLive?recomUserId=${state.user.data?.userId}&groupId=${this.groupId}`
+      // console.log(this.live)
+    } catch {
+      //
+    }
+  },
+  methods: {
+    async onJoinRoom() {
+      try {
+        const res = await request.get(
+          '/api-teacher/courseGroup/queryLiveCourseInfo',
+          {
+            params: {
+              groupId: this.groupId
+            }
+          }
+        )
+        const result = res.data || {}
+        const coursePlanList = result.planList || []
+        let tempObj: any = {}
+        coursePlanList.forEach((item: any) => {
+          if (item.courseId === Number(this.courseId)) {
+            tempObj = item
+          }
+        })
+        if (tempObj && tempObj.liveState === 1) {
+          postMessage({
+            api: 'joinLiveRoom',
+            content: {
+              roomId: tempObj.roomUid,
+              teacherId: this.live.teacherId
+            }
+          })
+        } else if (tempObj && tempObj.liveState === 2) {
+          setTimeout(() => {
+            Toast('课程已结束')
+          }, 100)
+        } else {
+          setTimeout(() => {
+            Toast('课程尚未开始，请耐心等候')
+          }, 100)
+        }
+      } catch {
+        //
+      }
+    },
+    async cancelCourseGroup() {
+      try {
+        await request.get('/api-teacher/courseGroup/cancelCourseGroup', {
+          params: {
+            groupId: this.groupId
+          }
+        })
+        Toast('下架成功')
+        setTimeout(() => {
+          postMessage({ api: 'back', content: {} })
+        }, 500)
+      } catch {
+        //
+      }
+    }
+  },
+  render() {
+    return (
+      <div class={[styles['live-detail'], 'mb12']}>
+        <UserDetail userInfo={this.userInfo} />
+        <SectionDetail border>
+          <p class={styles.introduction}>{this.userInfo.lessonDesc}</p>
+        </SectionDetail>
+
+        {this.myself ? (
+          <SectionDetail title="课程列表" icon="courseList" border={true}>
+            <CoursePlanStep
+              courseInfo={this.courseInfo}
+              courseId={Number(this.courseId) || 0}
+            />
+          </SectionDetail>
+        ) : (
+          <SectionDetail
+            title="课程列表"
+            icon="courseList"
+            titleShow={false}
+            contentStyle={{ paddingTop: '0' }}
+          >
+            <Tabs color="var(--van-primary)" lineWidth={20} sticky>
+              <Tab title="课程" titleClass="van-hairline--bottom">
+                <CoursePlanStep
+                  courseInfo={this.courseInfo}
+                  courseId={Number(this.courseId) || 0}
+                />
+              </Tab>
+              <Tab title="学员列表" titleClass="van-hairline--bottom">
+                {this.studentList.map((item: any) => (
+                  <UserList
+                    class="mb12"
+                    users={{
+                      avatar: item.avatar,
+                      studentId: item.studentId,
+                      studentName: item.userName,
+                      createTime: item.createTime
+                    }}
+                  />
+                ))}
+                {this.studentList.length === 0 && (
+                  <ColResult
+                    tips="暂无购买学员"
+                    classImgSize="SMALL"
+                    btnStatus={false}
+                  />
+                )}
+              </Tab>
+            </Tabs>
+          </SectionDetail>
+        )}
+
+        {this.live.status !== 'OUT_SALE' && (
+          <>
+            {this.courseOffStatus && (
+              <ColSticky position="bottom">
+                <div class={['btnGroup']} style={{ paddingTop: '12px' }}>
+                  <Button
+                    block
+                    round
+                    type="primary"
+                    onClick={this.cancelCourseGroup}
+                  >
+                    下架
+                  </Button>
+                </div>
+              </ColSticky>
+            )}
+
+            {this.joinRoom == '1' && this.liveStatus.liveStatus !== 2 && (
+              <ColSticky position="bottom">
+                <div class={['btnGroup']} style={{ paddingTop: '12px' }}>
+                  <Button block round type="primary" onClick={this.onJoinRoom}>
+                    进入直播间
+                  </Button>
+                </div>
+              </ColSticky>
+            )}
+
+            {this.share == '1' && this.courseInfo.length > 0 && (
+              <ColSticky position="bottom">
+                <div class={['btnGroup']} style={{ paddingTop: '12px' }}>
+                  <Button
+                    block
+                    round
+                    type="primary"
+                    onClick={() => {
+                      this.shareStatus = true
+                    }}
+                  >
+                    分享
+                  </Button>
+                </div>
+              </ColSticky>
+            )}
+          </>
+        )}
+
+        <Popup
+          v-model:show={this.shareStatus}
+          style={{ background: 'transparent' }}
+        >
+          <ColShare
+            teacherId={this.userInfo.id}
+            shareUrl={this.shareUrl}
+            shareType="live"
+          >
+            <LiveItem
+              class={styles.shareCourse}
+              liveInfo={{
+                backgroundPic: this.userInfo.lessonCoverUrl,
+                courseGroupId: this.userInfo.lessonId,
+                courseGroupName: this.userInfo.lessonName,
+                courseNum: this.userInfo.lessonNum,
+                coursePrice: this.userInfo.lessonPrice,
+                teacherName: this.userInfo.username,
+                teacherId: this.userInfo.id,
+                avatar: this.userInfo.avatar,
+                studentCount: this.userInfo.buyNum,
+                courseStartTime: this.userInfo.courseStartTime,
+                existBuy: 0,
+                subjectName: this.userInfo.subjectName
+              }}
+            />
+          </ColShare>
+        </Popup>
+      </div>
+    )
+  }
+})

src/teacher/share-page/share-live/index.tsx

@@ -55,7 +55,8 @@ export default defineComponent({
         lessonNum: live.courseNum || 0, // 课时数
         lessonDesc: live.courseIntroduce,
         lessonCoverUrl: live.backgroundPic || live.backgroundPicTemplate,
-        lessonName: live.courseGroupName
+        lessonName: live.courseGroupName,
+        auditVersion:0
       }
     },
     courseInfo() {

src/teacher/video-class/class-info.tsx

@@ -1,309 +1,311 @@
-import ColField from '@/components/col-field'
-import ColFieldGroup from '@/components/col-field-group'
-import ColPopup from '@/components/col-popup'
-import ColUpload from '@/components/col-upload'
-import request from '@/helpers/request'
-import { verifyNumberIntegerAndFloat } from '@/helpers/toolsValidate'
-import {
-  Button,
-  Col,
-  Field,
-  Form,
-  Icon,
-  Image,
-  Radio,
-  RadioGroup,
-  Row,
-  Sticky,
-  Tab,
-  Tabs
-} from 'vant'
-import { defineComponent } from 'vue'
-import SubjectModel from '../../business-components/subject-list'
-import styles from './class-info.module.less'
-import { createState } from './createState'
-
-import activeButtonIcon from '@common/images/icon_checkbox.png'
-import inactiveButtonIcon from '@common/images/icon_checkbox_default.png'
-
-export default defineComponent({
-  name: 'ClassInfo',
-  data() {
-    return {
-      subjectStatus: false
-    }
-  },
-  computed: {
-    choiceSubjectIds() {
-      // 选择的科目编号
-      const ids = createState.lessonGroup.lessonSubject
-        ? Number(createState.lessonGroup.lessonSubject)
-        : null
-      console.log(ids)
-      return ids ? [ids] : []
-    },
-    subjectList() {
-      // 学科列表
-      return createState.subjectList || []
-    },
-    lessonSubjectName() {
-      // 选择的科目
-      let tempStr = ''
-      this.subjectList.forEach((item: any) => {
-        if (this.choiceSubjectIds.includes(item.id)) {
-          tempStr = item.name
-        }
-      })
-      return tempStr
-    },
-    calcRatePrice() {
-      // 计算手续费
-      let rate = createState.rate || 0
-      let price = createState.lessonGroup.lessonPrice || 0
-      return (price - (rate / 100) * price).toFixed(2)
-    }
-  },
-  async mounted() {
-    try {
-      if (createState.subjectList.length <= 0) {
-        const res = await request.post('/api-teacher/teacher/querySubject')
-        createState.subjectList = res.data || []
-      }
-    } catch {
-      //
-    }
-  },
-  methods: {
-    onChoice(id: number) {
-      createState.lessonGroup.lessonSubject = id
-      this.subjectStatus = false
-    },
-    onFormatter(val: any) {
-      return verifyNumberIntegerAndFloat(val)
-    },
-    tabChange(name: number) {
-      ;(this as any).$refs.form.resetValidation('lessonCoverTemplateUrl')
-      ;(this as any).$refs.form.resetValidation('lessonCoverUrl')
-      createState.tabIndex = name
-    },
-    selectImg(val: string) {
-      createState.lessonGroup.lessonCoverUrl = ''
-      createState.lessonGroup.lessonCoverTemplateUrl = val
-    }
-  },
-  render() {
-    return createState.loadingStatus ? (
-      <div></div>
-    ) : (
-      <Form
-        class={styles.classInfo}
-        ref="form"
-        onSubmit={() => (createState.active = 2)}
-        onFailed={(e: any) => console.log(e)}
-        scrollToError
-      >
-        <ColFieldGroup>
-          <ColField title="课程名称" required>
-            <Field
-              v-model={createState.lessonGroup.lessonName}
-              name="lessonName"
-              maxlength={20}
-              placeholder="请输入您的课程名称"
-              rules={[{ required: true, message: '请输入您的课程名称' }]}
-            />
-          </ColField>
-          <ColField title="课程声部" required>
-            <Field
-              modelValue={this.lessonSubjectName}
-              name="lessonSubjectName"
-              readonly
-              isLink
-              onClick={() => {
-                this.subjectStatus = true
-              }}
-              rules={[{ required: true, message: '请选择课程声部' }]}
-              placeholder="请选择课程声部"
-            />
-          </ColField>
-        </ColFieldGroup>
-
-        <ColFieldGroup>
-          <ColField title="课程介绍" required border={false}>
-            <Field
-              v-model={createState.lessonGroup.lessonDesc}
-              name="lessonDesc"
-              placeholder="请输入课程介绍"
-              rows="3"
-              maxlength={200}
-              showWordLimit
-              autosize
-              rules={[{ required: true, message: '请输入课程介绍' }]}
-              type="textarea"
-            />
-          </ColField>
-        </ColFieldGroup>
-
-        <ColFieldGroup>
-          <ColField title="课程组售价" required>
-            <Field
-              v-model={createState.lessonGroup.lessonPrice}
-              name="lessonPrice"
-              placeholder="请输入您的课程组售价"
-              formatter={this.onFormatter}
-              type="number"
-              maxlength={8}
-              rules={[{ required: true, message: '请输入您的课程组售价' }]}
-              v-slots={{
-                button: () => <span>元</span>
-              }}
-            />
-          </ColField>
-        </ColFieldGroup>
-
-        <div class={styles['class-info-tip']}>
-          <p>扣除手续费后您的课程预计收入为：</p>
-          <p>
-            课程组总收入<span>{this.calcRatePrice}</span>元/人
-          </p>
-          <p>您的课程收入将在课程结束后结算到您的账户中</p>
-        </div>
-
-        <ColFieldGroup>
-          <ColField
-            required
-            border={false}
-            v-slots={{
-              title: () => (
-                <Tabs
-                  v-model:active={createState.tabIndex}
-                  class={styles.infoField}
-                  onChange={this.tabChange}
-                  shrink
-                  color="var(--van-primary)"
-                  lineWidth={20}
-                >
-                  <Tab title="图片模板" name={1}></Tab>
-                  <Tab title="自定义模板" name={2}></Tab>
-                </Tabs>
-              )
-            }}
-          >
-            <p class={styles.photoTip}>模板图片将作为该课程封面为学员展示</p>
-            {/* {createState.tabIndex === 1 && ( */}
-            <Field
-              name="lessonCoverTemplateUrl"
-              border={false}
-              v-show={createState.tabIndex === 1}
-              rules={[
-                {
-                  required:
-                    createState.tabIndex === 1 &&
-                    !createState.lessonGroup.lessonCoverUrl,
-                  message: '请选择图片模板'
-                }
-              ]}
-              v-slots={{
-                input: () => (
-                  <RadioGroup
-                    v-model={createState.lessonGroup.lessonCoverTemplateUrl}
-                  >
-                    <Row justify="space-between" style={{ width: '100%' }}>
-                      {createState.templateList.map((item: any) => (
-                        <Col
-                          span={12}
-                          class={styles.imgContainer}
-                          onClick={() => this.selectImg(item)}
-                        >
-                          <Image class={styles.imgContainer} src={item} />
-                          <Radio
-                            name={item}
-                            v-slots={{
-                              icon: (props: any) => (
-                                <Icon
-                                  class={styles.boxStyle}
-                                  name={
-                                    props.checked
-                                      ? activeButtonIcon
-                                      : inactiveButtonIcon
-                                  }
-                                  size="18"
-                                />
-                              )
-                            }}
-                          />
-                        </Col>
-                      ))}
-                    </Row>
-                  </RadioGroup>
-                )
-              }}
-            />
-            {/* )} */}
-            {/* {createState.tabIndex == 2 && ( */}
-            <Field
-              name="lessonCoverUrl"
-              v-show={createState.tabIndex == 2}
-              rules={[
-                {
-                  required: createState.tabIndex == 2,
-                  message: '请上传自定义模板'
-                }
-              ]}
-              v-slots={{
-                input: () => (
-                  <Row justify="space-between" style={{ width: '100%' }}>
-                    <Col span={12} class={styles.imgContainer}>
-                      <ColUpload
-                        cropper
-                        bucket="video-course"
-                        options={{
-                          fixedNumber: [1.77, 1],
-                          autoCropWidth: 750,
-                          autoCropHeight: 424
-                        }}
-                        onUploadChange={(val: any) => {
-                          if (val) {
-                            createState.lessonGroup.lessonCoverTemplateUrl = ''
-                          }
-                        }}
-                        v-model={createState.lessonGroup.lessonCoverUrl}
-                        class={styles.imgContainer}
-                      />
-                    </Col>
-                    <Col span={24}>
-                      <p
-                        class={styles.photoTip}
-                        style={{ color: '#ff4e19', padding: '0' }}
-                      >
-                        图片尺寸为750*424能达到最佳显示效果
-                      </p>
-                    </Col>
-                  </Row>
-                )
-              }}
-            />
-            {/* )} */}
-          </ColField>
-        </ColFieldGroup>
-
-        <Sticky offsetBottom={0} position="bottom">
-          <div class={['btnGroup']}>
-            <Button block round type="primary" native-type="submit">
-              下一步
-            </Button>
-          </div>
-        </Sticky>
-
-        <ColPopup v-model={this.subjectStatus} destroy>
-          <SubjectModel
-            selectType="Radio"
-            single
-            subjectList={createState.subjectList}
-            choiceSubjectIds={this.choiceSubjectIds}
-            onChoice={this.onChoice}
-          />
-        </ColPopup>
-      </Form>
-    )
-  }
-})
+import ColField from '@/components/col-field'
+import ColFieldGroup from '@/components/col-field-group'
+import ColPopup from '@/components/col-popup'
+import ColUpload from '@/components/col-upload'
+import request from '@/helpers/request'
+import { verifyNumberIntegerAndFloat } from '@/helpers/toolsValidate'
+import {
+  Button,
+  Col,
+  Field,
+  Form,
+  Icon,
+  Image,
+  Radio,
+  RadioGroup,
+  Row,
+  Sticky,
+  Tab,
+  Tabs
+} from 'vant'
+import { defineComponent } from 'vue'
+import SubjectModel from '../../business-components/subject-list'
+import styles from './class-info.module.less'
+import { createState } from './createState'
+
+import activeButtonIcon from '@common/images/icon_checkbox.png'
+import inactiveButtonIcon from '@common/images/icon_checkbox_default.png'
+
+export default defineComponent({
+  name: 'ClassInfo',
+  data() {
+    return {
+      subjectStatus: false
+    }
+  },
+  computed: {
+    choiceSubjectIds() {
+      // 选择的科目编号
+      const ids = createState.lessonGroup.lessonSubject
+        ? Number(createState.lessonGroup.lessonSubject)
+        : null
+      console.log(ids)
+      return ids ? [ids] : []
+    },
+    subjectList() {
+      // 学科列表
+      return createState.subjectList || []
+    },
+    lessonSubjectName() {
+      // 选择的科目
+      let tempStr = ''
+      this.subjectList.forEach((item: any) => {
+        if (this.choiceSubjectIds.includes(item.id)) {
+          tempStr = item.name
+        }
+      })
+      return tempStr
+    },
+    calcRatePrice() {
+      // 计算手续费
+      let rate = createState.rate || 0
+      let price = createState.lessonGroup.lessonPrice || 0
+      return (price - (rate / 100) * price).toFixed(2)
+    }
+  },
+  async mounted() {
+    try {
+      if (createState.subjectList.length <= 0) {
+        const res = await request.post('/api-teacher/teacher/querySubject')
+        createState.subjectList = res.data || []
+      }
+    } catch {
+      //
+    }
+  },
+  methods: {
+    onChoice(id: number) {
+      createState.lessonGroup.lessonSubject = id
+      this.subjectStatus = false
+    },
+    onFormatter(val: any) {
+      return verifyNumberIntegerAndFloat(val)
+    },
+    tabChange(name: number) {
+      ;(this as any).$refs.form.resetValidation('lessonCoverTemplateUrl')
+      ;(this as any).$refs.form.resetValidation('lessonCoverUrl')
+      createState.tabIndex = name
+    },
+    selectImg(val: string) {
+      createState.lessonGroup.lessonCoverUrl = ''
+      createState.lessonGroup.lessonCoverTemplateUrl = val
+    }
+  },
+  render() {
+    return createState.loadingStatus ? (
+      <div></div>
+    ) : (
+      <Form
+        class={styles.classInfo}
+        ref="form"
+        onSubmit={() => (createState.active = 2)}
+        onFailed={(e: any) => console.log(e)}
+        scrollToError
+      >
+        <ColFieldGroup>
+          <ColField title="课程名称" required>
+            <Field
+              v-model={createState.lessonGroup.lessonName}
+              name="lessonName"
+              maxlength={50}
+              placeholder="请输入您的课程名称"
+              rules={[{ required: true, message: '请输入您的课程名称' }]}
+            />
+          </ColField>
+          <ColField title="课程声部" required>
+            <Field
+              modelValue={this.lessonSubjectName}
+              name="lessonSubjectName"
+              readonly
+              isLink
+              onClick={() => {
+                this.subjectStatus = true
+              }}
+              rules={[{ required: true, message: '请选择课程声部' }]}
+              placeholder="请选择课程声部"
+            />
+          </ColField>
+        </ColFieldGroup>
+
+        <ColFieldGroup>
+          <ColField title="课程介绍" required border={false}>
+            <Field
+              v-model={createState.lessonGroup.lessonDesc}
+              name="lessonDesc"
+              placeholder="请输入课程介绍"
+              rows="3"
+              maxlength={200}
+              showWordLimit
+              autosize
+              rules={[{ required: true, message: '请输入课程介绍' }]}
+              type="textarea"
+            />
+          </ColField>
+        </ColFieldGroup>
+
+        <ColFieldGroup>
+          <ColField title="课程组售价" required>
+            <Field
+              v-model={createState.lessonGroup.lessonPrice}
+              name="lessonPrice"
+              placeholder="请输入您的课程组售价"
+              formatter={this.onFormatter}
+              type="number"
+              maxlength={8}
+              rules={[{ required: true, message: '请输入您的课程组售价' }]}
+              v-slots={{
+                button: () => <span>元</span>
+              }}
+            />
+          </ColField>
+        </ColFieldGroup>
+
+        <div class={styles['class-info-tip']}>
+          <p>扣除手续费后您的课程预计收入为：</p>
+          <p>
+            课程组总收入<span>{this.calcRatePrice}</span>元/人
+          </p>
+          <p>您的课程收入将在课程结束后结算到您的账户中</p>
+        </div>
+
+        <ColFieldGroup>
+          <ColField
+            required
+            border={false}
+            v-slots={{
+              title: () => (
+                // <Tabs
+                //   v-model:active={createState.tabIndex}
+                //   class={styles.infoField}
+                //   onChange={this.tabChange}
+                //   shrink
+                //   color="var(--van-primary)"
+                //   lineWidth={20}
+                // >
+                //   <Tab title="图片模板" name={1}></Tab>
+                //   <Tab title="自定义模板" name={2}></Tab>
+                // </Tabs>
+              <p>请上传自定义模板</p>
+              )
+            }}
+          >
+            <p class={styles.photoTip}>模板图片将作为该课程封面为学员展示</p>
+            {/* {createState.tabIndex === 1 && ( */}
+            {/* <Field
+              name="lessonCoverTemplateUrl"
+              border={false}
+              v-show={createState.tabIndex === 1}
+              rules={[
+                {
+                  required:
+                    createState.tabIndex === 1 &&
+                    !createState.lessonGroup.lessonCoverUrl,
+                  message: '请选择图片模板'
+                }
+              ]}
+              v-slots={{
+                input: () => (
+                  <RadioGroup
+                    v-model={createState.lessonGroup.lessonCoverTemplateUrl}
+                  >
+                    <Row justify="space-between" style={{ width: '100%' }}>
+                      {createState.templateList.map((item: any) => (
+                        <Col
+                          span={12}
+                          class={styles.imgContainer}
+                          onClick={() => this.selectImg(item)}
+                        >
+                          <Image class={styles.imgContainer} src={item} />
+                          <Radio
+                            name={item}
+                            v-slots={{
+                              icon: (props: any) => (
+                                <Icon
+                                  class={styles.boxStyle}
+                                  name={
+                                    props.checked
+                                      ? activeButtonIcon
+                                      : inactiveButtonIcon
+                                  }
+                                  size="18"
+                                />
+                              )
+                            }}
+                          />
+                        </Col>
+                      ))}
+                    </Row>
+                  </RadioGroup>
+                )
+              }}
+            /> */}
+            {/* )} */}
+            {/* {createState.tabIndex == 2 && ( */}
+            {/* v-show={createState.tabIndex == 2} createState.tabIndex == 2*/}
+            <Field
+              name="lessonCoverUrl"
+
+              rules={[
+                {
+                  required: true,
+                  message: '请上传自定义模板'
+                }
+              ]}
+              v-slots={{
+                input: () => (
+                  <Row justify="space-between" style={{ width: '100%' }}>
+                    <Col span={12} class={styles.imgContainer}>
+                      <ColUpload
+                        cropper
+                        bucket="video-course"
+                        options={{
+                          fixedNumber: [1.77, 1],
+                          autoCropWidth: 750,
+                          autoCropHeight: 424
+                        }}
+                        onUploadChange={(val: any) => {
+                          if (val) {
+                            createState.lessonGroup.lessonCoverTemplateUrl = ''
+                          }
+                        }}
+                        v-model={createState.lessonGroup.lessonCoverUrl}
+                        class={styles.imgContainer}
+                      />
+                    </Col>
+                    <Col span={24}>
+                      <p
+                        class={styles.photoTip}
+                        style={{ color: '#ff4e19', padding: '0' }}
+                      >
+                        图片尺寸为750*424能达到最佳显示效果
+                      </p>
+                    </Col>
+                  </Row>
+                )
+              }}
+            />
+            {/* )} */}
+          </ColField>
+        </ColFieldGroup>
+
+        <Sticky offsetBottom={0} position="bottom">
+          <div class={['btnGroup']}>
+            <Button block round type="primary" native-type="submit">
+              下一步
+            </Button>
+          </div>
+        </Sticky>
+
+        <ColPopup v-model={this.subjectStatus} destroy>
+          <SubjectModel
+            selectType="Radio"
+            single
+            subjectList={createState.subjectList}
+            choiceSubjectIds={this.choiceSubjectIds}
+            onChoice={this.onChoice}
+          />
+        </ColPopup>
+      </Form>
+    )
+  }
+})

src/teacher/video-class/create-submit.tsx

@@ -1,105 +1,106 @@
-import { defineComponent } from 'vue'
-import styles from './create-submit.module.less'
-import UserDetail from '@/business-components/user-detail'
-import SectionDetail from '@/business-components/section-detail'
-import CourseVideoItem from '@/business-components/course-video-item'
-import { Button, Sticky, Toast } from 'vant'
-import { createState } from './createState'
-import { state } from '@/state'
-import request from '@/helpers/request'
-import { postMessage } from '@/helpers/native-message'
-
-export default defineComponent({
-  name: 'CreateSubmit',
-  computed: {
-    userInfo() {
-      const videoDetail = createState.lessonGroup
-      const users = state.user.data || {}
-      return {
-        username: users.username || `游客${users.id || ''}`,
-        headUrl: users.headUrl,
-        lessonName: videoDetail.lessonName,
-        buyNum: 0,
-        lessonDesc: videoDetail.lessonDesc,
-        lessonPrice: videoDetail.lessonPrice,
-        lessonCoverUrl:
-          videoDetail.lessonCoverTemplateUrl || videoDetail.lessonCoverUrl,
-        lessonNum: createState.lessonList.length
-      }
-    },
-    lessonList() {
-      return createState.lessonList || []
-    }
-  },
-  methods: {
-    async onSubmit() {
-      try {
-        const videoDetail = createState.lessonGroup
-        let params = {
-          lessonList: this.lessonList,
-          lessonGroup: {
-            ...videoDetail,
-            lessonCoverUrl:
-              videoDetail.lessonCoverTemplateUrl || videoDetail.lessonCoverUrl
-          }
-        }
-        if (createState.groupId) {
-          await request.post('/api-teacher/videoLessonGroup/update', {
-            data: params
-          })
-          Toast.success('修改成功')
-        } else {
-          await request.post('/api-teacher/videoLessonGroup/add', {
-            data: params
-          })
-          Toast.success('创建成功')
-        }
-        setTimeout(() => {
-          postMessage({ api: 'back' })
-        }, 1000)
-      } catch {}
-    }
-  },
-  render() {
-    return (
-      <div class={[styles.createSubmit]}>
-        <UserDetail userInfo={this.userInfo} />
-        <SectionDetail>
-          <p class={styles.introduction}>{this.userInfo.lessonDesc}</p>
-        </SectionDetail>
-
-        <SectionDetail title="课程列表" icon="courseList" class="mb12">
-          {this.lessonList.map((item: any) => (
-            <CourseVideoItem
-              class={'mb12'}
-              detail={{
-                title: item.videoTitle,
-                content: item.videoContent,
-                imgUrl: item.coverUrl
-              }}
-            />
-          ))}
-        </SectionDetail>
-
-        <Sticky offsetBottom={0} position="bottom">
-          <div class={['btnGroup', 'btnMore']}>
-            <Button
-              block
-              round
-              type="primary"
-              plain
-              onClick={() => {
-                createState.active = 2
-              }}
-            >
-              返回编辑
-            </Button>
-            <Button block round type="primary" onClick={this.onSubmit}>
-              创建完成
-            </Button>
-          </div>
-        </Sticky>
-      </div>
-    )
-  }
-})
+import { defineComponent } from 'vue'
+import styles from './create-submit.module.less'
+import UserDetail from '@/business-components/user-detail'
+import SectionDetail from '@/business-components/section-detail'
+import CourseVideoItem from '@/business-components/course-video-item'
+import { Button, Sticky, Toast } from 'vant'
+import { createState } from './createState'
+import { state } from '@/state'
+import request from '@/helpers/request'
+import { postMessage } from '@/helpers/native-message'
+
+export default defineComponent({
+  name: 'CreateSubmit',
+  computed: {
+    userInfo() {
+      const videoDetail = createState.lessonGroup
+      const users = state.user.data || {}
+      return {
+        username: users.username || `游客${users.id || ''}`,
+        headUrl: users.headUrl,
+        lessonName: videoDetail.lessonName,
+        buyNum: 0,
+        lessonDesc: videoDetail.lessonDesc,
+        lessonPrice: videoDetail.lessonPrice,
+        lessonCoverUrl:
+          videoDetail.lessonCoverTemplateUrl || videoDetail.lessonCoverUrl,
+        lessonNum: createState.lessonList.length,
+        auditVersion:0
+      }
+    },
+    lessonList() {
+      return createState.lessonList || []
+    }
+  },
+  methods: {
+    async onSubmit() {
+      try {
+        const videoDetail = createState.lessonGroup
+        let params = {
+          lessonList: this.lessonList,
+          lessonGroup: {
+            ...videoDetail,
+            lessonCoverUrl:
+              videoDetail.lessonCoverTemplateUrl || videoDetail.lessonCoverUrl
+          }
+        }
+        if (createState.groupId) {
+          await request.post('/api-teacher/videoLessonGroup/update', {
+            data: params
+          })
+          Toast.success('修改成功')
+        } else {
+          await request.post('/api-teacher/videoLessonGroup/add', {
+            data: params
+          })
+          Toast.success('创建成功')
+        }
+        setTimeout(() => {
+          postMessage({ api: 'back' })
+        }, 1000)
+      } catch {}
+    }
+  },
+  render() {
+    return (
+      <div class={[styles.createSubmit]}>
+        <UserDetail userInfo={this.userInfo} />
+        <SectionDetail>
+          <p class={styles.introduction}>{this.userInfo.lessonDesc}</p>
+        </SectionDetail>
+
+        <SectionDetail title="课程列表" icon="courseList" class="mb12">
+          {this.lessonList.map((item: any) => (
+            <CourseVideoItem
+              class={'mb12'}
+              detail={{
+                title: item.videoTitle,
+                content: item.videoContent,
+                imgUrl: item.coverUrl
+              }}
+            />
+          ))}
+        </SectionDetail>
+
+        <Sticky offsetBottom={0} position="bottom">
+          <div class={['btnGroup', 'btnMore']}>
+            <Button
+              block
+              round
+              type="primary"
+              plain
+              onClick={() => {
+                createState.active = 2
+              }}
+            >
+              返回编辑
+            </Button>
+            <Button block round type="primary" onClick={this.onSubmit}>
+              创建完成
+            </Button>
+          </div>
+        </Sticky>
+      </div>
+    )
+  }
+})

src/teacher/video-class/video-detail.tsx

@@ -1,239 +1,240 @@
-import CourseVideoItem from '@/business-components/course-video-item'
-import SectionDetail from '@/business-components/section-detail'
-import UserDetail from '@/business-components/user-detail'
-import UserList from '@/business-components/user-list'
-import { Button, List, Popup, Sticky, Tab, Tabs, Toast } from 'vant'
-import { defineComponent } from 'vue'
-import styles from './video-detail.module.less'
-import request from '@/helpers/request'
-import ColResult from '@/components/col-result'
-import ColShare from '@/components/col-share'
-import ColSticky from '@/components/col-sticky'
-import LiveItem from '@/views/live-class/live-item'
-import { state } from '@/state'
-export default defineComponent({
-  name: 'VideoDetail',
-  data() {
-    const query = this.$route.query
-    return {
-      userInfo: {} as any,
-      detailList: [],
-      buyUserList: [], // 购买学生数
-      dataShow: true, // 判断是否有数据
-      loading: false,
-      finished: false,
-      share: query.share,
-      params: {
-        videoLessonGroupId: query.groupId,
-        page: 1,
-        rows: 20
-      },
-      shareStatus: false,
-      shareUrl: '',
-      shelvesFlag: 0,
-      myself: false
-    }
-  },
-  async mounted() {
-    try {
-      const res = await request.get(
-        '/api-teacher/videoLessonGroup/selectVideoLesson',
-        {
-          params: {
-            groupId: this.params.videoLessonGroupId
-          }
-        }
-      )
-      const result = res.data || {}
-      if (state.platformType === 'TEACHER') {
-        this.myself = !result.myself
-      }
-      this.userInfo = {
-        id: result.lessonGroup.teacherId,
-        username: result.lessonGroup.username,
-        headUrl: result.lessonGroup.avatar,
-        buyNum: result.lessonGroup.countStudent,
-        lessonId: result.lessonGroup.id,
-        lessonNum: result.lessonGroup.lessonCount,
-        lessonName: result.lessonGroup.lessonName,
-        lessonDesc: result.lessonGroup.lessonDesc,
-        lessonPrice: result.lessonGroup.lessonPrice,
-        lessonCoverUrl: result.lessonGroup.lessonCoverUrl,
-        lessonSubjectName: result.lessonGroup.lessonSubjectName
-      }
-
-      this.shelvesFlag = result.lessonGroup.shelvesFlag
-      this.detailList = result.detailList || []
-
-      // shareVideo?recomUserId=56&groupId=124
-      this.shareUrl = `${location.origin}/teacher#/shareVideo?recomUserId=${state.user.data?.userId}&groupId=${this.params.videoLessonGroupId}`
-
-      this.getList()
-    } catch (e) {
-      console.log(e)
-    }
-  },
-  methods: {
-    async getList() {
-      try {
-        const params = this.params
-        const res = await request.post('/api-teacher/videoLesson/pageStudent', {
-          data: {
-            ...params
-          }
-        })
-        this.loading = false
-        const result = res.data || {}
-        // 处理重复请求数据
-        if (this.buyUserList.length > 0 && result.pageNo === 1) {
-          return
-        }
-        this.buyUserList = this.buyUserList.concat(result.rows || [])
-        this.finished = result.pageNo >= result.totalPage
-        this.params.page = result.pageNo + 1
-        this.dataShow = this.buyUserList.length > 0
-      } catch {
-        this.dataShow = false
-        this.finished = true
-      }
-    },
-    onPlay(detail: any) {
-      this.$router.push({
-        path: '/videoClassDetail',
-        query: {
-          groupId: this.params.videoLessonGroupId,
-          classId: detail.id
-        }
-      })
-    }
-  },
-  render() {
-    return (
-      <div class={[styles['video-detail'], 'mb12']}>
-        {this.userInfo.id && <UserDetail userInfo={this.userInfo} />}
-        <SectionDetail border>
-          <p class={styles.introduction}>{this.userInfo.lessonDesc}</p>
-        </SectionDetail>
-
-        {this.myself ? (
-          <SectionDetail title="课程列表" icon="courseList" border={true}>
-            {this.detailList.map((item: any) => (
-              <CourseVideoItem
-                class={'mb12'}
-                detail={{
-                  id: item.id,
-                  title: item.videoTitle,
-                  content: item.videoContent,
-                  imgUrl: item.coverUrl
-                }}
-                onPlay={this.onPlay}
-              />
-            ))}
-          </SectionDetail>
-        ) : (
-          <SectionDetail
-            title="课程列表"
-            icon="courseList"
-            titleShow={false}
-            contentStyle={{ paddingTop: '0' }}
-          >
-            <Tabs color="var(--van-primary)" lineWidth={20} sticky>
-              <Tab title="课程" titleClass="van-hairline--bottom">
-                {this.detailList.map((item: any) => (
-                  <CourseVideoItem
-                    class={'mb12'}
-                    detail={{
-                      id: item.id,
-                      title: item.videoTitle,
-                      content: item.videoContent,
-                      imgUrl: item.coverUrl
-                    }}
-                    onPlay={this.onPlay}
-                  />
-                ))}
-              </Tab>
-              <Tab title="学员列表" titleClass="van-hairline--bottom">
-                {this.dataShow ? (
-                  <List
-                    v-model:loading={this.loading}
-                    finished={this.finished}
-                    finishedText="没有更多了"
-                    onLoad={this.getList}
-                  >
-                    {this.buyUserList.map((item: any) => (
-                      <UserList
-                        class="mb12"
-                        users={{
-                          avatar: item.avatar,
-                          studentId: item.userId,
-                          studentName: item.username,
-                          createTime: item.createTime
-                        }}
-                      />
-                    ))}
-                  </List>
-                ) : (
-                  <ColResult
-                    btnStatus={false}
-                    classImgSize="SMALL"
-                    tips="暂无学生购买"
-                  />
-                )}
-              </Tab>
-            </Tabs>
-          </SectionDetail>
-        )}
-
-        {this.shelvesFlag !== 1 && (
-          <>
-            {this.share == '1' && this.detailList.length > 0 && (
-              <ColSticky position="bottom">
-                <div class={['btnGroup']} style={{ paddingTop: '12px' }}>
-                  <Button
-                    block
-                    round
-                    type="primary"
-                    onClick={() => {
-                      this.shareStatus = true
-                    }}
-                  >
-                    分享课程
-                  </Button>
-                </div>
-              </ColSticky>
-            )}
-          </>
-        )}
-
-        <Popup
-          v-model:show={this.shareStatus}
-          style={{ background: 'transparent' }}
-        >
-          <ColShare
-            teacherId={this.userInfo.id}
-            shareUrl={this.shareUrl}
-            shareType="video"
-          >
-            <LiveItem
-              class={styles.shareCourse}
-              coverClass={styles.coverClass}
-              liveInfo={{
-                backgroundPic: this.userInfo.lessonCoverUrl,
-                courseGroupId: this.userInfo.lessonId,
-                courseGroupName: this.userInfo.lessonName,
-                courseNum: this.userInfo.lessonNum,
-                coursePrice: this.userInfo.lessonPrice,
-                teacherName: this.userInfo.username,
-                teacherId: this.userInfo.id,
-                avatar: this.userInfo.headUrl,
-                studentCount: this.userInfo.buyNum,
-                existBuy: 0,
-                subjectName: this.userInfo.lessonSubjectName
-              }}
-            />
-          </ColShare>
-        </Popup>
-      </div>
-    )
-  }
-})
+import CourseVideoItem from '@/business-components/course-video-item'
+import SectionDetail from '@/business-components/section-detail'
+import UserDetail from '@/business-components/user-detail'
+import UserList from '@/business-components/user-list'
+import { Button, List, Popup, Sticky, Tab, Tabs, Toast } from 'vant'
+import { defineComponent } from 'vue'
+import styles from './video-detail.module.less'
+import request from '@/helpers/request'
+import ColResult from '@/components/col-result'
+import ColShare from '@/components/col-share'
+import ColSticky from '@/components/col-sticky'
+import LiveItem from '@/views/live-class/live-item'
+import { state } from '@/state'
+export default defineComponent({
+  name: 'VideoDetail',
+  data() {
+    const query = this.$route.query
+    return {
+      userInfo: {} as any,
+      detailList: [],
+      buyUserList: [], // 购买学生数
+      dataShow: true, // 判断是否有数据
+      loading: false,
+      finished: false,
+      share: query.share,
+      params: {
+        videoLessonGroupId: query.groupId,
+        page: 1,
+        rows: 20
+      },
+      shareStatus: false,
+      shareUrl: '',
+      shelvesFlag: 0,
+      myself: false
+    }
+  },
+  async mounted() {
+    try {
+      const res = await request.get(
+        '/api-teacher/videoLessonGroup/selectVideoLesson',
+        {
+          params: {
+            groupId: this.params.videoLessonGroupId
+          }
+        }
+      )
+      const result = res.data || {}
+      if (state.platformType === 'TEACHER') {
+        this.myself = !result.myself
+      }
+      this.userInfo = {
+        id: result.lessonGroup.teacherId,
+        username: result.lessonGroup.username,
+        headUrl: result.lessonGroup.avatar,
+        buyNum: result.lessonGroup.countStudent,
+        lessonId: result.lessonGroup.id,
+        lessonNum: result.lessonGroup.lessonCount,
+        lessonName: result.lessonGroup.lessonName,
+        lessonDesc: result.lessonGroup.lessonDesc,
+        lessonPrice: result.lessonGroup.lessonPrice,
+        lessonCoverUrl: result.lessonGroup.lessonCoverUrl,
+        lessonSubjectName: result.lessonGroup.lessonSubjectName,
+        auditVersion:result.lessonGroup.auditVersion
+      }
+
+      this.shelvesFlag = result.lessonGroup.shelvesFlag
+      this.detailList = result.detailList || []
+
+      // shareVideo?recomUserId=56&groupId=124
+      this.shareUrl = `${location.origin}/teacher#/shareVideo?recomUserId=${state.user.data?.userId}&groupId=${this.params.videoLessonGroupId}`
+
+      this.getList()
+    } catch (e) {
+      console.log(e)
+    }
+  },
+  methods: {
+    async getList() {
+      try {
+        const params = this.params
+        const res = await request.post('/api-teacher/videoLesson/pageStudent', {
+          data: {
+            ...params
+          }
+        })
+        this.loading = false
+        const result = res.data || {}
+        // 处理重复请求数据
+        if (this.buyUserList.length > 0 && result.pageNo === 1) {
+          return
+        }
+        this.buyUserList = this.buyUserList.concat(result.rows || [])
+        this.finished = result.pageNo >= result.totalPage
+        this.params.page = result.pageNo + 1
+        this.dataShow = this.buyUserList.length > 0
+      } catch {
+        this.dataShow = false
+        this.finished = true
+      }
+    },
+    onPlay(detail: any) {
+      this.$router.push({
+        path: '/videoClassDetail',
+        query: {
+          groupId: this.params.videoLessonGroupId,
+          classId: detail.id
+        }
+      })
+    }
+  },
+  render() {
+    return (
+      <div class={[styles['video-detail'], 'mb12']}>
+        {this.userInfo.id && <UserDetail userInfo={this.userInfo} />}
+        <SectionDetail border>
+          <p class={styles.introduction}>{this.userInfo.lessonDesc}</p>
+        </SectionDetail>
+
+        {this.myself ? (
+          <SectionDetail title="课程列表" icon="courseList" border={true}>
+            {this.detailList.map((item: any) => (
+              <CourseVideoItem
+                class={'mb12'}
+                detail={{
+                  id: item.id,
+                  title: item.videoTitle,
+                  content: item.videoContent,
+                  imgUrl: item.coverUrl
+                }}
+                onPlay={this.onPlay}
+              />
+            ))}
+          </SectionDetail>
+        ) : (
+          <SectionDetail
+            title="课程列表"
+            icon="courseList"
+            titleShow={false}
+            contentStyle={{ paddingTop: '0' }}
+          >
+            <Tabs color="var(--van-primary)" lineWidth={20} sticky>
+              <Tab title="课程" titleClass="van-hairline--bottom">
+                {this.detailList.map((item: any) => (
+                  <CourseVideoItem
+                    class={'mb12'}
+                    detail={{
+                      id: item.id,
+                      title: item.videoTitle,
+                      content: item.videoContent,
+                      imgUrl: item.coverUrl
+                    }}
+                    onPlay={this.onPlay}
+                  />
+                ))}
+              </Tab>
+              <Tab title="学员列表" titleClass="van-hairline--bottom">
+                {this.dataShow ? (
+                  <List
+                    v-model:loading={this.loading}
+                    finished={this.finished}
+                    finishedText="没有更多了"
+                    onLoad={this.getList}
+                  >
+                    {this.buyUserList.map((item: any) => (
+                      <UserList
+                        class="mb12"
+                        users={{
+                          avatar: item.avatar,
+                          studentId: item.userId,
+                          studentName: item.username,
+                          createTime: item.createTime
+                        }}
+                      />
+                    ))}
+                  </List>
+                ) : (
+                  <ColResult
+                    btnStatus={false}
+                    classImgSize="SMALL"
+                    tips="暂无学生购买"
+                  />
+                )}
+              </Tab>
+            </Tabs>
+          </SectionDetail>
+        )}
+
+        {this.shelvesFlag !== 1 && (
+          <>
+            {this.share == '1' && this.detailList.length > 0 && (
+              <ColSticky position="bottom">
+                <div class={['btnGroup']} style={{ paddingTop: '12px' }}>
+                  <Button
+                    block
+                    round
+                    type="primary"
+                    onClick={() => {
+                      this.shareStatus = true
+                    }}
+                  >
+                    分享课程
+                  </Button>
+                </div>
+              </ColSticky>
+            )}
+          </>
+        )}
+
+        <Popup
+          v-model:show={this.shareStatus}
+          style={{ background: 'transparent' }}
+        >
+          <ColShare
+            teacherId={this.userInfo.id}
+            shareUrl={this.shareUrl}
+            shareType="video"
+          >
+            <LiveItem
+              class={styles.shareCourse}
+              coverClass={styles.coverClass}
+              liveInfo={{
+                backgroundPic: this.userInfo.lessonCoverUrl,
+                courseGroupId: this.userInfo.lessonId,
+                courseGroupName: this.userInfo.lessonName,
+                courseNum: this.userInfo.lessonNum,
+                coursePrice: this.userInfo.lessonPrice,
+                teacherName: this.userInfo.username,
+                teacherId: this.userInfo.id,
+                avatar: this.userInfo.headUrl,
+                studentCount: this.userInfo.buyNum,
+                existBuy: 0,
+                subjectName: this.userInfo.lessonSubjectName
+              }}
+            />
+          </ColShare>
+        </Popup>
+      </div>
+    )
+  }
+})

src/views/article-center/theory.tsx

@@ -1,146 +1,185 @@
-import request from '@/helpers/request'
-import {
-  Cell,
-  List,
-  Sticky,
-  Image,
-  CellGroup,
-  Collapse,
-  CollapseItem
-} from 'vant'
-import { defineComponent } from 'vue'
-import styles from './theory.module.less'
-import ColSearch from '@/components/col-search'
-import ColResult from '@/components/col-result'
-
-export default defineComponent({
-  name: 'special',
-  data() {
-    const query = this.$route.query
-    return {
-      activeNames: [] as any,
-      list: [],
-      dataShow: true, // 判断是否有数据
-      loading: false,
-      finished: false,
-      // 1热门资讯,2开屏广告，3闪页管理，4轮播图管理 5按钮管理 6 乐理章节
-      params: {
-        search: '',
-        page: 1,
-        rows: 20
-      }
-    }
-  },
-  mounted() {
-    this.getList()
-  },
-  methods: {
-    async getList() {
-      try {
-        let params = this.params
-        const res = await request.post('/api-cms/music/theory/app/page', {
-          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
-
-        const tempList: any = this.list
-        this.list.length > 0 && this.activeNames.push(tempList[0].id)
-      } catch {
-        this.dataShow = false
-        this.finished = true
-      }
-    },
-    onSearch(val: string) {
-      this.params.search = val
-      this.params.page = 1
-      this.list = []
-      this.dataShow = true // 判断是否有数据
-      this.loading = false
-      this.finished = false
-      this.getList()
-    },
-    onDetail(item: any) {
-      if (item.linkUrl) {
-        window.location.href = item.linkUrl
-      } else {
-        this.$router.push({
-          path: 'theoryDetail',
-          query: {
-            id: item.id
-          }
-        })
-      }
-    }
-  },
-  render() {
-    return (
-      <div class={styles['theory']}>
-        <Sticky offsetTop={0} position="top" class={'mb12'}>
-          <ColSearch onSearch={this.onSearch} />
-        </Sticky>
-        {this.dataShow ? (
-          <List
-            class={styles.videoList}
-            v-model:loading={this.loading}
-            finished={this.finished}
-            finishedText="没有更多了"
-            immediateCheck={false}
-            onLoad={this.getList}
-          >
-            {this.list.map((parent: any) => (
-              <Collapse v-model={this.activeNames} border={false}>
-                <CollapseItem
-                  title={parent.name}
-                  name={parent.id}
-                  center
-                  v-slots={{
-                    title: () => (
-                      <div class={[styles.groupTitle]}>
-                        {parent.url && (
-                          <Image
-                            src={parent.url}
-                            fit="cover"
-                            class={styles.groupImg}
-                          />
-                        )}
-
-                        <p class={['van-ellipsis', styles.musicTitle]}>
-                          {parent.name}
-                        </p>
-                      </div>
-                    )
-                  }}
-                >
-                  {parent.newsInformationList.map((item: any) => (
-                    <Cell
-                      title={item.title}
-                      class={styles.cell}
-                      border={false}
-                      onClick={() => {
-                        this.onDetail(item)
-                      }}
-                      titleClass={['van-ellipsis', styles.title]}
-                    />
-                  ))}
-                </CollapseItem>
-              </Collapse>
-            ))}
-          </List>
-        ) : (
-          <ColResult btnStatus={false} classImgSize="SMALL" tips="暂无内容" />
-        )}
-      </div>
-    )
-  }
-})
+import request from '@/helpers/request'
+import {
+  Cell,
+  List,
+  Sticky,
+  Image,
+  CellGroup,
+  Collapse,
+  CollapseItem
+} from 'vant'
+import { defineComponent } from 'vue'
+import styles from './theory.module.less'
+import ColSearch from '@/components/col-search'
+import ColResult from '@/components/col-result'
+import { postMessage, promisefiyPostMessage } from '@/helpers/native-message'
+import { state } from '@/state'
+
+export default defineComponent({
+  name: 'special',
+  data() {
+    const query = this.$route.query
+    return {
+      activeNames: [] as any,
+      list: [],
+      dataShow: true, // 判断是否有数据
+      loading: false,
+      finished: false,
+      // 1热门资讯,2开屏广告，3闪页管理，4轮播图管理 5按钮管理 6 乐理章节
+      params: {
+        search: '',
+        page: 1,
+        rows: 20
+      },
+      theory:null as null
+    }
+  },
+  mounted() {
+    let theoryStr = sessionStorage.getItem('theoryCache')
+    if (theoryStr) {
+      const theory = JSON.parse(theoryStr)
+      this.theory = theory
+      let activeNames = theory.activeNames.split(',').map(item => item * 1)
+      this.activeNames = activeNames
+      this.params.search = theory.search || ''
+
+    }
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      try {
+        let params = this.params
+        const res = await request.post('/api-cms/music/theory/app/page', {
+          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
+
+        const tempList: any = this.list
+        if (this.activeNames.length <= 0) {
+          this.list.length > 0 && this.activeNames.push(tempList[0].id)
+        }
+      } catch {
+        this.dataShow = false
+        this.finished = true
+      }
+      // if(this.theory&&this.theory.scrollTop as never){
+      //   this.$nextTick(()=>{
+      //     window.scrollTo(0, this.theory.scrollTop as never)
+      //   })
+      //   //
+      // }
+    },
+    onSearch(val: string) {
+      this.params.search = val
+      this.params.page = 1
+      this.list = []
+      this.dataShow = true // 判断是否有数据
+      this.loading = false
+      this.finished = false
+      this.getList()
+    },
+    onDetail(item: any) {
+      // let scrollTop  = document.documentElement.scrollTop || document.body.scrollTop;
+      // console.log(scrollTop)
+      // let obj = JSON.stringify({
+      //   search: this.params.search,
+      //   activeNames: this.activeNames.join(','),
+      //   scrollTop:scrollTop
+      // })
+
+      // sessionStorage.setItem('theoryCache', obj)
+
+      if (item.linkUrl) {
+        window.location.href = item.linkUrl
+      } else {
+        // this.$router.push({
+        //   path: 'theoryDetail',
+        //   query: {
+        //     id: item.id
+        //   }
+        // })
+        let client = state.platformType==='STUDENT'?'student':'teacher'
+        postMessage({
+          api: 'openWebView',
+          content: {
+            url: `${location.origin}/${client}/#/theoryDetail?id=${item.id}`,
+            orientation: 1,
+            isHideTitle: false
+          }
+        })
+      }
+    }
+  },
+  render() {
+    return (
+      <div class={[styles['theory'],'theory']}>
+        <Sticky offsetTop={0} position="top" class={'mb12'}>
+          <ColSearch onSearch={this.onSearch} modelValue={this.params.search} />
+        </Sticky>
+        {this.dataShow ? (
+          <List
+            class={styles.videoList}
+            v-model:loading={this.loading}
+            finished={this.finished}
+            finishedText="没有更多了"
+            immediateCheck={false}
+            onLoad={this.getList}
+          >
+            {this.list.map((parent: any) => (
+              <Collapse v-model={this.activeNames} border={false}>
+                <CollapseItem
+                  title={parent.name}
+                  name={parent.id}
+                  center
+                  v-slots={{
+                    title: () => (
+                      <div class={[styles.groupTitle]}>
+                        {parent.url && (
+                          <Image
+                            src={parent.url}
+                            fit="cover"
+                            class={styles.groupImg}
+                          />
+                        )}
+
+                        <p class={['van-ellipsis', styles.musicTitle]}>
+                          {parent.name}
+                        </p>
+                      </div>
+                    )
+                  }}
+                >
+                  {parent.newsInformationList.map((item: any) => (
+                    <Cell
+                      title={item.title}
+                      class={styles.cell}
+                      border={false}
+                      onClick={() => {
+                        this.onDetail(item)
+                      }}
+                      titleClass={['van-ellipsis', styles.title]}
+                    />
+                  ))}
+                </CollapseItem>
+              </Collapse>
+            ))}
+          </List>
+        ) : (
+          <ColResult btnStatus={false} classImgSize="SMALL" tips="暂无内容" />
+        )}
+      </div>
+    )
+  }
+})

src/views/video-class/video-item.tsx

@@ -1,69 +1,71 @@
-import { defineComponent, PropType } from 'vue'
-import { Image } from 'vant'
-import styles from './video-item.module.less'
-
-import iconTeacher from '@common/images/icon_teacher.png'
-
-interface VideoItemProps {
-  id?: number
-  teacherId?: number
-  lessonName: string
-  userName: string
-  avatar: string
-  lessonCoverUrl: string
-  lessonCount: number
-  lessonPrice: number
-  countStudent: number
-  lessonSubjectName: string
-}
-
-export default defineComponent({
-  name: 'VideoItem',
-  props: {
-    item: Object as PropType<VideoItemProps>,
-    onClick: {
-      type: Function as PropType<(item: any) => void>,
-      default: (item: any) => {}
-    }
-  },
-  render() {
-    const item: any = this.item
-    return (
-      <div
-        class={styles.videoItem}
-        onClick={() => {
-          this.onClick(item)
-        }}
-      >
-        <div style={{ position: 'relative' }}>
-          <Image
-            class={styles.viCover}
-            fit="cover"
-            src={item?.lessonCoverUrl}
-          />
-          <span class={styles.subjectName}>{item?.lessonSubjectName}</span>
-        </div>
-
-        <div class={styles.viSection}>
-          <div class={[styles.viTitle, 'van-ellipsis']}>{item?.lessonName}</div>
-          <div class={styles.viUserInfo}>
-            <Image
-              src={item?.avatar || iconTeacher}
-              class={styles.viUserLogo}
-            />
-            <span class={[styles.viUserName, 'van-hairline--right']}>
-              {item?.userName ||
-                item?.username ||
-                `游客${item?.teacherId || ''}`}
-            </span>
-            <span class={styles.viUserNum}>{item?.countStudent}人已购买</span>
-          </div>
-          <div class={styles.viPrice}>
-            {item?.lessonPrice > 0 && <>￥{item?.lessonPrice}/</>}
-            {item?.lessonCount}课时
-          </div>
-        </div>
-      </div>
-    )
-  }
-})
+import { defineComponent, PropType } from 'vue'
+import { Image } from 'vant'
+import styles from './video-item.module.less'
+
+import iconTeacher from '@common/images/icon_teacher.png'
+
+interface VideoItemProps {
+  id?: number
+  teacherId?: number
+  lessonName: string
+  userName: string
+  avatar: string
+  lessonCoverUrl: string
+  lessonCount: number
+  lessonPrice: number
+  countStudent: number
+  lessonSubjectName: string
+}
+
+export default defineComponent({
+  name: 'VideoItem',
+  props: {
+    item: Object as PropType<VideoItemProps>,
+    onClick: {
+      type: Function as PropType<(item: any) => void>,
+      default: (item: any) => {}
+    }
+  },
+  render() {
+    const item: any = this.item
+    return (
+      <div
+        class={styles.videoItem}
+        onClick={() => {
+          this.onClick(item)
+        }}
+      >
+        <div style={{ position: 'relative' }}>
+          <Image
+            class={styles.viCover}
+            fit="cover"
+            src={item?.lessonCoverUrl}
+          />
+          <span class={styles.subjectName}>{item?.lessonSubjectName}</span>
+        </div>
+
+        <div class={styles.viSection}>
+          <div class={[styles.viTitle, 'van-ellipsis']}>{item?.lessonName}</div>
+          <div class={styles.viUserInfo}>
+            <Image
+              src={item?.avatar || iconTeacher}
+              class={styles.viUserLogo}
+            />
+            <span class={[styles.viUserName, 'van-hairline--right']}>
+              {item?.userName ||
+                item?.username ||
+                `游客${item?.teacherId || ''}`}
+            </span>
+            <span class={styles.viUserNum}>{item?.countStudent}人已购买</span>
+          </div>
+          <div class={styles.viPrice}>
+            {item?.lessonPrice > 0 && <>￥{item?.lessonPrice}/</>}
+            {item?.lessonPrice <= 0 &&item?.auditVersion &&<>￥{0}/</>}
+            {item?.lessonPrice <= 0 &&!item?.auditVersion &&<>免费/</>}
+            {item?.lessonCount}课时
+          </div>
+        </div>
+      </div>
+    )
+  }
+})

yarn.lock

@@ -2200,9 +2200,9 @@
   "resolved" "https://registry.npmmirror.com/es-module-lexer/-/es-module-lexer-0.9.3.tgz"
   "version" "0.9.3"
 
-"esbuild-darwin-64@0.13.15":
-  "integrity" "sha512-ihOQRGs2yyp7t5bArCwnvn2Atr6X4axqPpEdCFPVp7iUj4cVSdisgvEKdNR7yH3JDjW6aQDw40iQFoTqejqxvQ=="
-  "resolved" "https://registry.npmmirror.com/esbuild-darwin-64/-/esbuild-darwin-64-0.13.15.tgz"
+"esbuild-windows-64@0.13.15":
+  "integrity" "sha512-9aMsPRGDWCd3bGjUIKG/ZOJPKsiztlxl/Q3C1XDswO6eNX/Jtwu4M+jb6YDH9hRSUflQWX0XKAfWzgy5Wk54JQ=="
+  "resolved" "https://registry.npmmirror.com/esbuild-windows-64/-/esbuild-windows-64-0.13.15.tgz"
   "version" "0.13.15"
 
 "esbuild@^0.13.12":
@@ -2591,11 +2591,6 @@
   "resolved" "https://registry.npmmirror.com/fs.realpath/-/fs.realpath-1.0.0.tgz"
   "version" "1.0.0"
 
-"fsevents@~2.3.2":
-  "integrity" "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA=="
-  "resolved" "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.2.tgz"
-  "version" "2.3.2"
-
 "function-bind@^1.1.1":
   "integrity" "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
   "resolved" "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.1.tgz"