更新

src/components/pagination/index.tsx

@@ -19,7 +19,7 @@ export default defineComponent({
     },
     pageSizes: {
       type: Array,
-      default: [5,10, 20, 30, 50]
+      default: [5, 10, 20, 30, 50]
     },
     layout: {
       type: String,

src/views/user-info/live-operation/course-class/index.tsx

@@ -1,14 +1,19 @@
 import ColCropper from '@/components/col-cropper'
+import request from '@/helpers/request'
 import { verifiyNumberInteger } from '@/helpers/toolsValidate'
+import { state } from '@/state'
 import {
   dayjs,
   ElButton,
   ElCol,
   ElDatePicker,
+  ElDialog,
   ElForm,
   ElFormItem,
   ElImage,
   ElInput,
+  ElMessage,
+  ElMessageBox,
   ElRadio,
   ElRadioGroup,
   ElRow,
@@ -16,6 +21,7 @@ import {
   ElTabs
 } from 'element-plus'
 import { defineComponent } from 'vue'
+import CoursePreview from '../course-preview'
 import { createState } from '../createState'
 import styles from './index.module.less'
 
@@ -27,20 +33,20 @@ export default defineComponent({
       dateStatus: false,
       currentDate: new Date(),
       minDate: dayjs().toDate(),
-      maxDate: new Date()
+      maxDate: new Date(),
+      show: false
     }
   },
   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')
-    console.log(createState.templateList, '1212')
+    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')
+    // console.log(createState.templateList, '1212')
   },
   methods: {
     tabChange(name: number) {
@@ -68,6 +74,38 @@ export default defineComponent({
         createState.live.salesEndDate = dayjs(val).format('YYYY-MM-DD')
       }
       this.dateStatus = false
+    },
+    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-website/courseGroup/addLiveCourse', {
+          data: params
+        })
+        ElMessage.success('创建成功')
+        this.$router.back()
+      } catch (e: any) {
+        // 报错时需要重置日历表的数据
+        const message = e.message
+        ElMessageBox.confirm(message, '提示', {
+          type: 'warning'
+        }).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() {
@@ -220,10 +258,47 @@ export default defineComponent({
           >
             上一步
           </ElButton>
-          <ElButton type="primary" class="!w-40 !h-[38px]" onClick={() => {}}>
+          <ElButton
+            type="primary"
+            class="!w-40 !h-[38px]"
+            onClick={() => {
+              this.show = true
+            }}
+          >
             下一步
           </ElButton>
         </div>
+
+        {/*  @ts-ignore */}
+        <ElDialog
+          v-model={this.show}
+          title="预览"
+          v-slots={{
+            footer: () => (
+              <span class="dialog-footer !text-center block ">
+                <ElButton
+                  size="large"
+                  round
+                  onClick={() => {
+                    this.show = false
+                  }}
+                >
+                  返回编辑
+                </ElButton>
+                <ElButton
+                  size="large"
+                  round
+                  type="primary"
+                  onClick={this.onSubmit}
+                >
+                  创建完成
+                </ElButton>
+              </span>
+            )
+          }}
+        >
+          <CoursePreview />
+        </ElDialog>
       </div>
     )
   }

src/views/user-info/live-operation/course-preview/index.module.less

@@ -0,0 +1,134 @@
+.course-preview {
+  // padding: 0 14px;
+  background-color: #f6f8f9;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.createSubmit {
+  // margin-bottom: 12px;
+
+  .introduction {
+    color: #7a7a7a;
+    line-height: 23px;
+    padding-bottom: 8px;
+  }
+}
+
+.userDetail {
+  .banner {
+    width: 100%;
+    height: 210px;
+    overflow: hidden;
+    vertical-align: middle;
+  }
+
+  .userInfo {
+    overflow: hidden;
+    border-top: 1px solid #ebebeb;
+    display: flex;
+    justify-content: space-between;
+
+    .avatar {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      overflow: hidden;
+    }
+
+    .name {
+      padding-left: 8px;
+      font-size: 16px;
+      font-weight: 500;
+      color: #333333;
+      line-height: 22px;
+      display: flex;
+      align-items: center;
+    }
+
+    .buyNum {
+      color: #ff802c;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      &::before {
+        content: ' ';
+        display: inline-block;
+        width: 1px;
+        height: 12px;
+        margin: 0 8px;
+        background: #d3d3d3;
+      }
+    }
+
+    .buyNumInfo {
+      font-size: 12px;
+      color: #6a6a6a;
+      display: flex;
+      align-items: center;
+      .iconBuy {
+        margin-right: 5px;
+      }
+    }
+
+    .info {
+      font-size: 16px;
+      font-weight: 400;
+      color: var(--van-primary);
+      line-height: 17px;
+    }
+
+    .userTitle {
+      font-size: 18px;
+      color: #1a1a1a;
+      font-weight: 500;
+      display: block !important;
+    }
+  }
+}
+
+.videoImg {
+  width: 100px;
+  height: 70px;
+  position: relative;
+  border-radius: 4px;
+  overflow: hidden;
+
+  .videoStop {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    left: 50%;
+    bottom: 0;
+    margin-top: -13px;
+    margin-left: -13px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.videoTitle {
+  padding-left: 8px;
+  font-size: 13px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: space-around;
+  .videoTitleText {
+    font-size: 15px;
+    color: #000;
+    max-width: 210px;
+  }
+  .videoTitleContent {
+    color: #7a7a7a;
+    line-height: 18px;
+
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+}

src/views/user-info/live-operation/course-preview/index.tsx

@@ -0,0 +1,156 @@
+import { state } from '@/state'
+import { dayjs, ElIcon, ElImage } from 'element-plus'
+import { defineComponent } from 'vue'
+import { createState } from '../createState'
+import styles from './index.module.less'
+import defaultIcon from '@common/images/icon_teacher.png'
+import iconIn from '../../video-operation/images/icon_course_introduction.png'
+import iconList from '../../video-operation/images/icon_course_list.png'
+import videoStop from '../../video-operation/images/icon_video_stop.png'
+import request from '@/helpers/request'
+
+interface IProps {
+  courseTime: string
+  coursePlan: string
+  videoPosterUrl?: string
+  id?: number | string
+}
+export default defineComponent({
+  name: 'course-preview',
+  computed: {
+    userInfo() {
+      const startTime = createState.live.coursePlanList[0].startTime
+      const endTime = createState.live.coursePlanList[0].endTime
+      return {
+        headUrl: state.user.data?.headUrl,
+        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() {
+      let 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')}`,
+          coursePlan: item.plan
+        })
+      })
+      return tempArr || []
+    }
+  },
+  render() {
+    return (
+      <div class={[styles['course-preview'], 'pb-3']}>
+        <div class={styles.userDetail}>
+          <ElImage
+            class={[styles.banner]}
+            src={this.userInfo.lessonCoverUrl}
+            fit="cover"
+          />
+
+          <div class="bg-white">
+            <div class="p-[14px] text-lg text-[#1a1a1a] font-medium leading-none">
+              标题
+            </div>
+            <div class={[styles.userInfo, 'mx-[14px] py-[14px]']}>
+              <div class="flex">
+                <ElImage
+                  class={styles.avatar}
+                  src={this.userInfo.headUrl || defaultIcon}
+                  fit=""
+                />
+                <div class={styles.name}>
+                  {this.userInfo.username || `游客${this.userInfo.id || ''}`}
+
+                  <div class={styles.buyNum}>
+                    {this.userInfo.buyNum}人已购买
+                  </div>
+                </div>
+              </div>
+              <div class={styles.info}>
+                ￥{this.userInfo.lessonPrice}/{this.userInfo.lessonNum}
+                课时
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div
+          class={[
+            styles['section-detail'],
+            'mt-[10px] mx-[14px] rounded-lg bg-white'
+          ]}
+        >
+          <div class="flex items-center py-3 px-[10px] text-[#333333] text-base">
+            <ElIcon size={18} class="mr-2">
+              <img src={iconIn} />
+            </ElIcon>
+            课程介绍
+          </div>
+
+          <div class="mx-[10px] pt-[10px] pb-4 text-sm text-[#7A7A7A] border-t border-t-[#EBEBEB]">
+            {this.userInfo.lessonDesc}
+          </div>
+        </div>
+
+        <div
+          class={[
+            styles['section-detail'],
+            'mt-[10px] mx-[14px] rounded-lg bg-white'
+          ]}
+        >
+          <div class="flex items-center py-3 px-[10px] text-[#333333] text-base">
+            <ElIcon size={18} class="mr-2">
+              <img src={iconList} />
+            </ElIcon>
+            课程列表
+          </div>
+
+          <div class="mx-[10px] pt-[10px] pb-4 text-sm text-[#7A7A7A] border-t border-t-[#EBEBEB] flex flex-col">
+            {createState.lessonList.map((item: any) => (
+              <div class="flex mb-3">
+                <div class={styles.videoImg}>
+                  <ElImage
+                    class="align-middle h-[70px] w-[100px]"
+                    src={item.coverUrl}
+                    fit="cover"
+                  />
+                  <ElIcon class={styles.videoStop} size={26}>
+                    <img src={videoStop} />
+                  </ElIcon>
+                </div>
+
+                <div class={[styles.videoTitle, '!h-[70px]']}>
+                  <p
+                    class={[
+                      styles.videoTitleText,
+                      'whitespace-nowrap overflow-hidden text-ellipsis'
+                    ]}
+                  >
+                    {item.videoTitle}
+                  </p>
+                  <p class={[styles.videoTitleContent]}>{item.videoContent}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    )
+  }
+})

src/views/user-info/music-operation/index.tsx

@@ -43,6 +43,7 @@ export default defineComponent({
         composer: '',
         musicSubject: null as any,
         tags: [] as string[],
+        notation: 0,
         canEvaluate: 1,
         showFingering: 1,
         chargeType: 0,
@@ -89,6 +90,7 @@ export default defineComponent({
         )
         this.form.chargeType = res.data.chargeType === 'FREE' ? 0 : 2
         this.form.showFingering = res.data.showFingering
+        this.form.notation = res.data.notation
         this.form.canEvaluate = res.data.canEvaluate
         if (this.form.chargeType) {
           this.form.musicPrice = res.data.musicPrice
@@ -146,6 +148,7 @@ export default defineComponent({
         url: form.hasBeat ? '' : form.mp3Url,
         metronomeUrl: form.hasBeat ? form.mp3Url : '',
         showFingering: Number(form.showFingering),
+        notation: Number(form.notation),
         musicTag: form.tags.join(','),
         musicSubject: form.musicSubject || undefined,
         musicSheetName: form.musicSheetName,
@@ -212,7 +215,7 @@ export default defineComponent({
         <ElForm
           size="large"
           labelPosition="left"
-          labelWidth={'120px'}
+          labelWidth={'130px'}
           model={this.form}
           ref="form"
           class="px-52 py-5"
@@ -345,6 +348,20 @@ export default defineComponent({
             </div>
           </ElFormItem>
           <ElFormItem
+            label="是否可以转简谱"
+            prop="notation"
+            rules={[{ required: true, message: '请选择是否可以转简谱' }]}
+          >
+            <ElRadioGroup v-model={this.form.notation}>
+              <ElRadioButton label={0} class="mr-3 w-24">
+                否
+              </ElRadioButton>
+              <ElRadioButton label={1} class="w-24">
+                是
+              </ElRadioButton>
+            </ElRadioGroup>
+          </ElFormItem>
+          <ElFormItem
             label="是否评测"
             prop="canEvaluate"
             rules={[{ required: true, message: '请选择是否评测' }]}

src/views/videoDetailList/index.tsx

@@ -25,7 +25,7 @@ export default defineComponent({
     const state = reactive({
       title: props.title,
       videoList: [],
-      searchs:{search:'',lessonSubject:''},
+      searchs: { search: '', lessonSubject: '' },
 
       pageInfo: {
         // 分页规则
@@ -50,18 +50,21 @@ export default defineComponent({
           }
         )
         state.videoList = res.data.rows
-        state.pageInfo.total = res.data.total;
+        state.pageInfo.total = res.data.total
       } catch (e) {
         console.log(e)
       }
     }
 
-    const gotoSearch = (val:string)=>{
-      state.searchs.search = val;
+    const gotoSearch = (val: string) => {
+      state.searchs.search = val
     }
-    const startSearch = (val:any)=>{
-
-      state.searchs = {...state.searchs,lessonSubject:val.subject,search:val.search}
+    const startSearch = (val: any) => {
+      state.searchs = {
+        ...state.searchs,
+        lessonSubject: val.subject,
+        search: val.search
+      }
       getVideoList()
     }
     onMounted(() => {
@@ -73,8 +76,19 @@ export default defineComponent({
           <div class="wall" style={{ height: '70px' }}></div>
           <div class={styles.w1200}>
             <div class={styles.section}>
-              <searchInput isWhile={true} searchVal={state.searchs} onStartSearch={(val:any)=>{startSearch(val)}}></searchInput>
-              <hotSearch   onHotTag={(val:string)=>{gotoSearch(val)}} type={''}></hotSearch>
+              <searchInput
+                isWhile={true}
+                searchVal={state.searchs.search}
+                onStartSearch={(val: any) => {
+                  startSearch(val)
+                }}
+              ></searchInput>
+              <hotSearch
+                onHotTag={(val: string) => {
+                  gotoSearch(val)
+                }}
+                type={''}
+              ></hotSearch>
             </div>
             <div class={styles.videoList}>
               {state.videoList.map(item => {
@@ -83,7 +97,7 @@ export default defineComponent({
             </div>
             <pagination
               total={state.pageInfo.total}
-              v-model:page={state.pageInfo.page}
+              page={state.pageInfo.page}
               limit={state.pageInfo.limit}
               pageSizes={state.pageInfo.page_size}
               pagination={getVideoList}