修改头部

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

@@ -1,257 +1,269 @@
-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 ColUploadVideo from '@/components/col-upload-video'
-import {
-  Button,
-  Col,
-  Dialog,
-  Field,
-  Form,
-  Icon,
-  Row,
-  Sticky,
-  Switch
-} from 'vant'
-import { defineComponent } from 'vue'
-import styles from './class-content.module.less'
-import { createState } from './createState'
-import MusicAlbum from './model/music-album'
-
-export default defineComponent({
-  name: 'ClassContent',
-  data() {
-    return {
-      url: '',
-      checked: null,
-      musicStatus: false,
-      selectItem: {} as any // 选中的课程
-    }
-  },
-  methods: {
-    onSubmit(values: any) {
-      createState.active = 3
-    },
-    addItem() {
-      createState.lessonList.push({
-        videoTitle: '',
-        videoContent: '',
-        videoUrl: '',
-        coverUrl: '',
-        relationList: [],
-        posterUrl: '' // 视频封面图
-      })
-    },
-    removeItem(index: number) {
-      // 最少一节课
-      if (createState.lessonList.length <= 1) return
-      Dialog.confirm({
-        title: '操作',
-        message: `确定删除该条数据吗？`,
-        confirmButtonColor: '#2DC7AA'
-      }).then(() => {
-        createState.lessonList.splice(index, 1)
-      })
-    },
-    getName(item: any) {
-      const relation =
-        item.relationList.length > 0 ? item.relationList[0] : null
-      return relation
-        ? (relation.relationMusicAlbum === 'ALBUM' ? '专辑：' : '曲目：') +
-            relation.musicAlbumName
-        : ''
-    }
-  },
-  render() {
-    return (
-      <Form
-        class={styles['class-content']}
-        onSubmit={this.onSubmit}
-        scrollToError
-      >
-        <div class={styles.createVideoTips}>
-          您可为每个视频关联曲目或专辑作为本课程教学内容推荐
-        </div>
-        {createState.lessonList.map((item: any, index: number) => (
-          <>
-            <div class={styles.titleSection}>
-              <span class={styles.title}>第{index + 1}课</span>
-              <Icon
-                name="delete-o"
-                style={{ fontWeight: 600 }}
-                class={
-                  createState.lessonList.length <= 1 ? styles.disabled : null
-                }
-                onClick={() => this.removeItem(index)}
-                size={20}
-              />
-            </div>
-            <ColFieldGroup>
-              <ColField title="课程标题" required>
-                <Field
-                  v-model={item.videoTitle}
-                  maxlength={50}
-                  rules={[{ required: true, message: '请输入课程标题' }]}
-                  name="videoTitle"
-                  placeholder="请输入您的课程标题"
-                />
-              </ColField>
-              <ColField title="课程内容" required>
-                <Field
-                  v-model={item.videoContent}
-                  type="textarea"
-                  rows="2"
-                  autosize
-                  showWordLimit
-                  maxlength={200}
-                  rules={[{ required: true, message: '请输入课程内容' }]}
-                  name="videoContent"
-                  placeholder="请输入您的课程内容"
-                />
-              </ColField>
-              <ColField title="课程视频及视频封面" required border={false}>
-                <Row
-                  justify="space-between"
-                  style={{ width: '100%', paddingTop: '12px' }}
-                >
-                  <Col span={12}>
-                    <Field
-                      style={{ padding: 0 }}
-                      name="videoUrl"
-                      rules={[{ required: true, message: '请上传课程视频' }]}
-                      v-slots={{
-                        input: () => (
-                          <ColUploadVideo
-                            bucket="video-course"
-                            v-model={item.videoUrl}
-                            v-model:posterUrl={item.posterUrl}
-                            class={styles.upload}
-                            tips="点击上传视频"
-                          />
-                        )
-                      }}
-                    />
-                  </Col>
-                  <Col span={12}>
-                    <Field
-                      style={{ padding: 0 }}
-                      name="coverUrl"
-                      rules={[{ required: true, message: '请上传课程封面' }]}
-                      error
-                      v-slots={{
-                        input: () => (
-                          <ColUpload
-                            class={styles.upload}
-                            cropper
-                            bucket="video-course"
-                            options={{
-                              fixedNumber: [1.77, 1],
-                              autoCropWidth: 750,
-                              autoCropHeight: 424
-                            }}
-                            v-model={item.coverUrl}
-                            tips="点击上传视频封面"
-                          />
-                        )
-                      }}
-                    />
-                  </Col>
-                </Row>
-              </ColField>
-              {/* <van-icon name="clear" /> */}
-              <ColField title="关联曲目或专辑">
-                <Field
-                  modelValue={
-                    item.relationList.length > 0 &&
-                    item.relationList[0].musicAlbumId
-                      ? this.getName(item)
-                      : ''
-                  }
-                  readonly
-                  isLink
-                  clickable={false}
-                  clearable
-                  rightIcon={
-                    item.relationList.length > 0 &&
-                    item.relationList[0].musicAlbumId
-                      ? 'clear'
-                      : ''
-                  }
-                  onClick-right-icon={(e: MouseEvent) => {
-                    e.stopPropagation()
-                    item.relationList[0].musicAlbumId = 0
-                    item.relationList[0].musicAlbumName = ''
-                  }}
-                  onClick={() => {
-                    this.selectItem = item
-                    this.musicStatus = true
-                  }}
-                  placeholder="请选择关联曲目或专辑"
-                />
-              </ColField>
-            </ColFieldGroup>
-          </>
-        ))}
-
-        <Button
-          class={styles['add-item']}
-          block
-          icon="add-o"
-          onClick={this.addItem}
-        >
-          添加课程
-        </Button>
-
-        <Sticky offsetBottom={0} position="bottom" zIndex={999999}>
-          <div class={['btnGroup', 'btnMore']}>
-            <Button
-              block
-              round
-              type="primary"
-              plain
-              onClick={() => {
-                createState.active = 1
-              }}
-            >
-              上一步
-            </Button>
-            <Button block round type="primary" native-type="submit">
-              提交
-            </Button>
-          </div>
-        </Sticky>
-
-        <ColPopup v-model={this.musicStatus} zIndex={999999}>
-          <MusicAlbum
-            subjectId={createState.lessonGroup.lessonSubject}
-            onSelect={(item: any) => {
-              this.musicStatus = false
-              if (this.selectItem.relationList.length > 0) {
-                this.selectItem.relationList[0].musicAlbumId = item.id
-                this.selectItem.relationList[0].musicAlbumName =
-                  item.selectType === 'ALBUM'
-                    ? item.albumName
-                    : item.musicSheetName
-                this.selectItem.relationList[0].relationMusicAlbum =
-                  item.selectType
-              } else {
-                this.selectItem.relationList = [
-                  {
-                    musicAlbumId: item.id,
-                    musicAlbumName:
-                      item.selectType === 'ALBUM'
-                        ? item.albumName
-                        : item.musicSheetName,
-                    relationMusicAlbum: item.selectType,
-                    useRelationType: 'RECOMMEND'
-                  }
-                ]
-              }
-            }}
-          />
-        </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 ColUploadVideo from '@/components/col-upload-video'
+import {
+  Button,
+  Col,
+  Dialog,
+  Field,
+  Form,
+  Icon,
+  Row,
+  Sticky,
+  Switch
+} from 'vant'
+import { defineComponent } from 'vue'
+import styles from './class-content.module.less'
+import { createState } from './createState'
+import MusicAlbum from './model/music-album'
+import ColHeader from '@/components/col-header'
+import TheSticky from '@/components/the-sticky'
+
+export default defineComponent({
+  name: 'ClassContent',
+  data() {
+    return {
+      url: '',
+      checked: null,
+      musicStatus: false,
+      selectItem: {} as any, // 选中的课程
+      heightV: 0
+    }
+  },
+  methods: {
+    onSubmit(values: any) {
+      createState.active = 3
+    },
+    addItem() {
+      createState.lessonList.push({
+        videoTitle: '',
+        videoContent: '',
+        videoUrl: '',
+        coverUrl: '',
+        relationList: [],
+        posterUrl: '' // 视频封面图
+      })
+    },
+    removeItem(index: number) {
+      // 最少一节课
+      if (createState.lessonList.length <= 1) return
+      Dialog.confirm({
+        title: '操作',
+        message: `确定删除该条数据吗？`,
+        confirmButtonColor: '#2DC7AA'
+      }).then(() => {
+        createState.lessonList.splice(index, 1)
+      })
+    },
+    getName(item: any) {
+      const relation =
+        item.relationList.length > 0 ? item.relationList[0] : null
+      return relation
+        ? (relation.relationMusicAlbum === 'ALBUM' ? '专辑：' : '曲目：') +
+            relation.musicAlbumName
+        : ''
+    }
+  },
+  render() {
+    return (
+      <Form
+        class={styles['class-content']}
+        onSubmit={this.onSubmit}
+        scrollToError
+      >
+        <div class={styles.createVideoTips}>
+          您可为每个视频关联曲目或专辑作为本课程教学内容推荐
+        </div>
+        {createState.lessonList.map((item: any, index: number) => (
+          <>
+            <div class={styles.titleSection}>
+              <span class={styles.title}>第{index + 1}课</span>
+              <Icon
+                name="delete-o"
+                style={{ fontWeight: 600 }}
+                class={
+                  createState.lessonList.length <= 1 ? styles.disabled : null
+                }
+                onClick={() => this.removeItem(index)}
+                size={20}
+              />
+            </div>
+            <ColFieldGroup>
+              <ColField title="课程标题" required>
+                <Field
+                  v-model={item.videoTitle}
+                  maxlength={50}
+                  rules={[{ required: true, message: '请输入课程标题' }]}
+                  name="videoTitle"
+                  placeholder="请输入您的课程标题"
+                />
+              </ColField>
+              <ColField title="课程内容" required>
+                <Field
+                  v-model={item.videoContent}
+                  type="textarea"
+                  rows="2"
+                  autosize
+                  showWordLimit
+                  maxlength={200}
+                  rules={[{ required: true, message: '请输入课程内容' }]}
+                  name="videoContent"
+                  placeholder="请输入您的课程内容"
+                />
+              </ColField>
+              <ColField title="课程视频及视频封面" required border={false}>
+                <Row
+                  justify="space-between"
+                  style={{ width: '100%', paddingTop: '12px' }}
+                >
+                  <Col span={12}>
+                    <Field
+                      style={{ padding: 0 }}
+                      name="videoUrl"
+                      rules={[{ required: true, message: '请上传课程视频' }]}
+                      v-slots={{
+                        input: () => (
+                          <ColUploadVideo
+                            bucket="video-course"
+                            v-model={item.videoUrl}
+                            v-model:posterUrl={item.posterUrl}
+                            class={styles.upload}
+                            tips="点击上传视频"
+                          />
+                        )
+                      }}
+                    />
+                  </Col>
+                  <Col span={12}>
+                    <Field
+                      style={{ padding: 0 }}
+                      name="coverUrl"
+                      rules={[{ required: true, message: '请上传课程封面' }]}
+                      error
+                      v-slots={{
+                        input: () => (
+                          <ColUpload
+                            class={styles.upload}
+                            cropper
+                            bucket="video-course"
+                            options={{
+                              fixedNumber: [1.77, 1],
+                              autoCropWidth: 750,
+                              autoCropHeight: 424
+                            }}
+                            v-model={item.coverUrl}
+                            tips="点击上传视频封面"
+                          />
+                        )
+                      }}
+                    />
+                  </Col>
+                </Row>
+              </ColField>
+              {/* <van-icon name="clear" /> */}
+              <ColField title="关联曲目或专辑">
+                <Field
+                  modelValue={
+                    item.relationList.length > 0 &&
+                    item.relationList[0].musicAlbumId
+                      ? this.getName(item)
+                      : ''
+                  }
+                  readonly
+                  isLink
+                  clickable={false}
+                  clearable
+                  rightIcon={
+                    item.relationList.length > 0 &&
+                    item.relationList[0].musicAlbumId
+                      ? 'clear'
+                      : ''
+                  }
+                  onClick-right-icon={(e: MouseEvent) => {
+                    e.stopPropagation()
+                    item.relationList[0].musicAlbumId = 0
+                    item.relationList[0].musicAlbumName = ''
+                  }}
+                  onClick={() => {
+                    this.selectItem = item
+                    this.musicStatus = true
+                  }}
+                  placeholder="请选择关联曲目或专辑"
+                />
+              </ColField>
+            </ColFieldGroup>
+          </>
+        ))}
+
+        <Button
+          class={styles['add-item']}
+          block
+          icon="add-o"
+          onClick={this.addItem}
+        >
+          添加课程
+        </Button>
+
+        <Sticky offsetBottom={0} position="bottom" zIndex={999999}>
+          <div class={['btnGroup', 'btnMore']}>
+            <Button
+              block
+              round
+              type="primary"
+              plain
+              onClick={() => {
+                createState.active = 1
+              }}
+            >
+              上一步
+            </Button>
+            <Button block round type="primary" native-type="submit">
+              提交
+            </Button>
+          </div>
+        </Sticky>
+
+        <ColPopup v-model={this.musicStatus} zIndex={999999}>
+          <TheSticky
+            position="top"
+            onBarHeight={(h: any) => {
+              this.heightV = h
+            }}
+          >
+            <ColHeader />
+          </TheSticky>
+          <MusicAlbum
+            offsetTop={this.heightV}
+            subjectId={createState.lessonGroup.lessonSubject}
+            onSelect={(item: any) => {
+              this.musicStatus = false
+              if (this.selectItem.relationList.length > 0) {
+                this.selectItem.relationList[0].musicAlbumId = item.id
+                this.selectItem.relationList[0].musicAlbumName =
+                  item.selectType === 'ALBUM'
+                    ? item.albumName
+                    : item.musicSheetName
+                this.selectItem.relationList[0].relationMusicAlbum =
+                  item.selectType
+              } else {
+                this.selectItem.relationList = [
+                  {
+                    musicAlbumId: item.id,
+                    musicAlbumName:
+                      item.selectType === 'ALBUM'
+                        ? item.albumName
+                        : item.musicSheetName,
+                    relationMusicAlbum: item.selectType,
+                    useRelationType: 'RECOMMEND'
+                  }
+                ]
+              }
+            }}
+          />
+        </ColPopup>
+      </Form>
+    )
+  }
+})

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

@@ -26,6 +26,7 @@ import { createState } from './createState'
 import activeButtonIcon from '@common/images/icon_checkbox.png'
 import inactiveButtonIcon from '@common/images/icon_checkbox_default.png'
 import { state } from '@/state'
+import ColHeader from '@/components/col-header'
 
 export default defineComponent({
   name: 'ClassInfo',
@@ -60,8 +61,8 @@ export default defineComponent({
     },
     calcRatePrice() {
       // 计算手续费
-      let rate = createState.rate || 0
-      let price = createState.lessonGroup.lessonPrice || 0
+      const rate = createState.rate || 0
+      const price = createState.lessonGroup.lessonPrice || 0
       return (price - (rate / 100) * price).toFixed(2)
     }
   },
@@ -322,6 +323,7 @@ export default defineComponent({
         </Sticky>
 
         <ColPopup v-model={this.subjectStatus} destroy>
+          <ColHeader />
           <SubjectModel
             selectType="Radio"
             single

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

@@ -8,6 +8,7 @@ import { createState } from './createState'
 import { state } from '@/state'
 import request from '@/helpers/request'
 import { postMessage } from '@/helpers/native-message'
+import ColHeader from '@/components/col-header'
 
 export default defineComponent({
   name: 'CreateSubmit',
@@ -80,6 +81,7 @@ export default defineComponent({
   render() {
     return (
       <div class={[styles.createSubmit]}>
+        <ColHeader />
         <UserDetail userInfo={this.userInfo} />
         <SectionDetail>
           <p class={styles.introduction}>{this.userInfo.lessonDesc}</p>

src/teacher/video-class/create.module.less

@@ -1,46 +1,50 @@
-.video-create {
-  .gridName {
-    font-size: 14px;
-    font-weight: 500;
-    color: #b4b4b4;
-    line-height: 20px;
-    padding-left: 8px;
-    &.active {
-      color: var(--van-primary);
-    }
-  }
-  :global {
-    // .van-grid {
-    // }
-
-    .van-sticky--fixed {
-      box-shadow: 10px 10px 10px var(--box-shadow-color);
-    }
-  }
-}
-
-.gridColumn {
-  padding-left: 14px;
-  padding-bottom: 12px;
-  background-color: #f6f8f9;
-
-  :global {
-    .van-grid-item {
-      padding-right: 14px;
-
-      &:first-child {
-        padding-right: 10px;
-      }
-    }
-    .van-grid-item__content {
-      padding-top: 7px;
-      padding-bottom: 7px;
-      border-radius: 10px;
-      overflow: hidden;
-    }
-    .van-badge__wrapper {
-      display: flex;
-      align-items: center;
-    }
-  }
-}
+.video-create {
+  .gridName {
+    font-size: 14px;
+    font-weight: 500;
+    color: #b4b4b4;
+    line-height: 20px;
+    padding-left: 8px;
+
+    &.active {
+      color: var(--van-primary);
+    }
+  }
+
+  :global {
+    // .van-grid {
+    // }
+
+    .van-sticky--fixed {
+      // box-shadow: 10px 10px 10px var(--box-shadow-color);
+    }
+  }
+}
+
+.gridColumn {
+  padding-left: 14px;
+  padding-bottom: 12px;
+  background-color: #f6f8f9;
+
+  :global {
+    .van-grid-item {
+      padding-right: 14px;
+
+      &:first-child {
+        padding-right: 10px;
+      }
+    }
+
+    .van-grid-item__content {
+      padding-top: 7px;
+      padding-bottom: 7px;
+      border-radius: 10px;
+      overflow: hidden;
+    }
+
+    .van-badge__wrapper {
+      display: flex;
+      align-items: center;
+    }
+  }
+}

src/teacher/video-class/model/music-album/index.tsx

@@ -11,6 +11,10 @@ import styles from './index.module.less'
 export default defineComponent({
   name: 'music-album',
   props: {
+    offsetTop: {
+      type: Number,
+      default: 0
+    },
     subjectId: {
       type: Number,
       required: true
@@ -124,7 +128,7 @@ export default defineComponent({
   render() {
     return (
       <div class={styles.musicAlbum}>
-        <Sticky position="top" offsetTop={0}>
+        <Sticky position="top" offsetTop={this.offsetTop || 0}>
           <ColSearch
             onSearch={this.onSearch}
             placeholder="请输入曲目或专辑名称"