更新

src/components/col-calendar/index.tsx

@@ -69,7 +69,7 @@ export default defineComponent({
     return {
       minDate: new Date(),
       maxDate: new Date(),
-      currentDate: new Date(), // 当前日历日期
+      currentDate: dayjs().add(1, 'day').toDate(), // 当前日历日期
       subtitle: '',
       show: false,
       dayList: [],
@@ -79,7 +79,7 @@ export default defineComponent({
   computed: {
     arrowStatus() {
       // 上月箭头状态
-      return !dayjs().isBefore(dayjs(this.currentDate), 'month')
+      return !dayjs().add(1, 'day').isBefore(dayjs(this.currentDate), 'month')
     },
     selectDayTitle() {
       // 选中日期标题
@@ -100,8 +100,8 @@ export default defineComponent({
   },
   mounted() {
     // 初始化标题和最大显示日期
-    this.subtitle = dayjs().format('YYYY年MM月')
-    this.maxDate = dayjs().endOf('month').toDate()
+    this.subtitle = dayjs().add(1, 'day').format('YYYY年MM月')
+    this.maxDate = dayjs().add(1, 'day').endOf('month').toDate()
     this.minDate = dayjs().add(1, 'day').toDate()
 
     // 初始化日历

src/components/course-plan-step/index.module.less

@@ -0,0 +1,96 @@
+.col-steps {
+  padding: 0 0 0 28px;
+  overflow: hidden;
+  background-color: #fff;
+
+  .col-step {
+    display: block;
+    float: none;
+    padding: 10px 0;
+    line-height: 18px;
+    position: relative;
+    flex: 1;
+    color: #7a7a7a;
+    font-size: 13px;
+
+    &:last-child .col-step__line {
+      border: 0;
+    }
+  }
+
+  .col-step_circle {
+    position: absolute;
+    top: 19px;
+    left: -18px;
+    z-index: 1;
+    width: 18px;
+    height: 18px;
+    font-size: 12px;
+    border-radius: 50%;
+    background: var(--el-color-primary);
+    transform: translate(-50%, -50%);
+    text-align: center;
+    line-height: 18px;
+    color: #fff;
+  }
+
+  .col-step__line {
+    top: 16px;
+    left: -19px;
+    width: 0px;
+    border-left: 1px dashed var(--el-color-primary);
+    height: 100%;
+    position: absolute;
+    transform: background-color 0.3s;
+  }
+
+  .stepSection {
+    .stepTitle {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 13px;
+      color: #999;
+
+      .stepTitleNum {
+        font-size: 14px;
+        font-weight: 500;
+      }
+      .active {
+        color: var(--van-primary);
+      }
+    }
+    .stepContent {
+      padding-top: 10px;
+      font-size: 13px;
+      color: #7a7a7a;
+      line-height: 20px;
+    }
+  }
+
+  .videoImg {
+    margin-top: 10px;
+    width: 150px;
+    height: 100px;
+    position: relative;
+    border-radius: 4px;
+    overflow: hidden;
+    :global {
+      .van-image {
+        width: inherit;
+        height: inherit;
+      }
+    }
+
+    .videoStop {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      bottom: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}

src/components/course-plan-step/index.tsx

@@ -0,0 +1,78 @@
+import { defineComponent, PropType } from 'vue'
+import styles from './index.module.less'
+import { Icon, Image } from 'vant'
+import videoStop from '@common/images/icon_video_stop.png'
+
+interface IProps {
+  courseTime: string
+  coursePlan: string
+  videoPosterUrl?: string
+  id?: number | string
+}
+
+export default defineComponent({
+  name: 'CoursePlanStep',
+  props: {
+    courseId: {
+      // 用于判断当前选择哪一节课程
+      type: Number,
+      default: 0
+    },
+    courseInfo: {
+      type: Array as PropType<IProps[]>,
+      default: []
+    }
+  },
+  mounted() {
+    console.log(this.courseId, 'courseId 121212')
+  },
+  render() {
+    return (
+      <div class={styles['col-steps']}>
+        <div class={styles['col-steps__items']}>
+          {this.courseInfo.map((item: any, index: number) => (
+            <div class={styles['col-step']}>
+              <div class={styles['col-step__title']}>
+                {this.$slots.content ? (
+                  this.$slots.content()
+                ) : (
+                  <div class={styles.stepSection}>
+                    <div class={styles.stepTitle}>
+                      <span
+                        class={[
+                          styles.stepTitleNum,
+                          (this.courseId === 0 || this.courseId === item.id) &&
+                            styles.active
+                        ]}
+                      >
+                        第 {index + 1} 课时
+                      </span>
+                      <span class={styles.stepTitleText}>
+                        {item.courseTime}
+                      </span>
+                    </div>
+                    <div class={styles.stepContent}>
+                      <p>{item.coursePlan}</p>
+                      {item.videoPosterUrl && (
+                        <div class={styles.videoImg}>
+                          <Image src={item.videoPosterUrl} fit="cover" />
+                          <Icon
+                            class={styles.videoStop}
+                            name={videoStop}
+                            size={32}
+                          />
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </div>
+              <div class={styles['col-step_circle']}>{index + 1}</div>
+              <div class={styles['col-step__line']}></div>
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  }
+})

src/components/pagination/index.module.less

@@ -5,6 +5,29 @@
   display: flex;
   flex-direction: row;
   justify-content: center;
+
+  :global {
+    .el-pagination.is-background .btn-next,
+    .el-pagination.is-background .btn-prev,
+    .el-pagination.is-background .el-pager li {
+      border-radius: 4px;
+      box-sizing: border-box;
+      border: 1px solid #d9d9d9;
+      background-color: #fff;
+    }
+
+    .el-pagination.is-background .el-pager li:not(.is-disabled).is-active {
+      border-color: var(--el-color-primary);
+    }
+
+    .el-input__wrapper {
+      border: 1px solid #d9d9d9 !important;
+      background-color: #fff !important;
+    }
+    .el-input__inner {
+      background-color: #fff !important;
+    }
+  }
 }
 .pagination-container.hidden {
   display: none;

src/components/pagination/index.tsx

@@ -1,3 +1,4 @@
+import { scrollAnimation } from '@/util/scroll'
 import { ElPagination } from 'element-plus'
 import { defineComponent } from 'vue'
 import styles from './index.module.less'
@@ -21,9 +22,14 @@ export default defineComponent({
       type: Array,
       default: [5, 10, 20, 30, 50]
     },
+    // , jumper
     layout: {
       type: String,
-      default: 'total, sizes, prev, pager, next, jumper'
+      default: 'total, sizes, prev, pager, next'
+    },
+    hideOnSinglePage: {
+      type: Boolean,
+      default: true
     },
     background: {
       type: Boolean,
@@ -52,40 +58,44 @@ export default defineComponent({
   },
   methods: {
     handleSizeChange(val: number) {
-      console.log(val, 'headleSizeChange')
       this.$emit('update:page', 1)
       this.$emit('update:limit', val)
       this.pagination()
       if (this.autoScroll) {
-        scrollTo(0, 800)
+        const currentY =
+          document.documentElement.scrollTop || document.body.scrollTop
+        scrollAnimation(currentY, 0)
       }
     },
     handleCurrentChange(val: number) {
-      console.log(val, 'val')
-      // this.$emit('pagination', { page: val, limit: this.limit })
+      this.$emit('update:page', val)
+      this.$emit('update:limit', this.limit)
+      this.pagination()
       if (this.autoScroll) {
-        scrollTo(0, 800)
+        const currentY =
+          document.documentElement.scrollTop || document.body.scrollTop
+        scrollAnimation(currentY, 0)
       }
     }
   },
   render() {
-    // console.log(this.pageSizes)
     return (
       <div
         class={[styles['pagination-container'], this.hidden && styles.hidden]}
       >
         <ElPagination
-          v-model:currentPage={this.page}
+          currentPage={this.page}
           pageSize={this.limit}
           // @ts-ignore
+          onUpdate:currentPage={(val: number) => {}}
           onUpdate:pageSize={(val: number) => {
             this.handleSizeChange(val)
           }}
           pageSizes={this.pageSizes as number[]}
           total={this.total}
-          hideOnSinglePage={true}
-          background
-          layout="total, sizes, prev, pager, next, jumper"
+          hideOnSinglePage={this.hideOnSinglePage}
+          background={this.background}
+          layout={this.layout}
           onSise-change={this.handleSizeChange}
           onCurrent-change={this.handleCurrentChange}
         />

src/views/albumDetail/index.tsx

@@ -36,7 +36,7 @@ export default defineComponent({
       musicList: [],
       pageInfo: {
         // 分页规则
-        limit: 10, // 限制显示条数
+        limit: 12, // 限制显示条数
         page: 1, // 当前页
         total: 0, // 总条数
         page_size: [10, 20, 40, 50] // 选择限制显示条数
@@ -67,9 +67,11 @@ export default defineComponent({
 
     const favoriteAlbum = async () => {
       try {
-        const res = await request.post(`/api-website/music/album/favorite/${state.id}`, {
-        })
-       getList()
+        const res = await request.post(
+          `/api-website/music/album/favorite/${state.id}`,
+          {}
+        )
+        getList()
       } catch (e) {
         console.log(e)
       }
@@ -155,7 +157,7 @@ export default defineComponent({
             <pagination
               total={state.pageInfo.total}
               v-model:page={state.pageInfo.page}
-              limit={state.pageInfo.limit}
+              v-model:limit={state.pageInfo.limit}
               pageSizes={state.pageInfo.page_size}
               pagination={getList}
             ></pagination>

src/views/musicLibrary/modals/searchAlbum.tsx

@@ -87,7 +87,7 @@ export default defineComponent({
         <pagination
           total={this.pageInfo.total}
           v-model:page={this.pageInfo.page}
-          limit={this.pageInfo.limit}
+          v-model:limit={this.pageInfo.limit}
           pageSizes={this.pageInfo.page_size}
           pagination={this.getAlbumList}
         />

src/views/musicLibrary/modals/searchMusic.tsx

@@ -28,13 +28,13 @@ export default defineComponent({
   setup() {
     const state = reactive({
       musicList: [],
-      search:{},
+      search: {},
       pageInfo: {
         // 分页规则
-        limit:5, // 限制显示条数
+        limit: 5, // 限制显示条数
         page: 1, // 当前页
         total: 0, // 总条数
-        page_size: [5,10, 20, 40, 50] // 选择限制显示条数
+        page_size: [5, 10, 20, 40, 50] // 选择限制显示条数
       }
     })
 
@@ -73,9 +73,11 @@ export default defineComponent({
     }
     const getList = (val: any) => {
       console.log(val)
-      state.search = {subjectIds:val.subject,
-        musicTagIds:val.albumTagIds,
-        idAndName:val.search }
+      state.search = {
+        subjectIds: val.subject,
+        musicTagIds: val.albumTagIds,
+        idAndName: val.search
+      }
       state.pageInfo.page = 1
       getMusicList()
     }
@@ -86,11 +88,11 @@ export default defineComponent({
     return {
       ...toRefs(state),
       getList,
-      getMusicList,
-
-    }},
-    render() {
-     return(
+      getMusicList
+    }
+  },
+  render() {
+    return (
       <div>
         <div>
           <div class={styles.w1200}>
@@ -106,11 +108,11 @@ export default defineComponent({
         <pagination
           total={this.pageInfo.total}
           v-model:page={this.pageInfo.page}
-          limit={this.pageInfo.limit}
+          v-model:limit={this.pageInfo.limit}
           pageSizes={this.pageInfo.page_size}
           pagination={this.getMusicList}
         />
       </div>
     )
-              }
+  }
 })

src/views/student-info/my-follow/list.tsx

@@ -96,7 +96,7 @@ export default defineComponent({
         <Pagination
           total={this.pageInfo.total}
           v-model:page={this.pageInfo.page}
-          limit={this.pageInfo.limit}
+          v-model:limit={this.pageInfo.limit}
           pageSizes={this.pageInfo.page_size}
           pagination={this.getList}
         />

src/views/student-info/my-score/album-list.tsx

@@ -101,7 +101,7 @@ export default defineComponent({
         <Pagination
           total={this.pageInfo.total}
           v-model:page={this.pageInfo.page}
-          limit={this.pageInfo.limit}
+          v-model:limit={this.pageInfo.limit}
           pageSizes={this.pageInfo.page_size}
           pagination={this.getList}
         />

src/views/student-info/my-score/list.tsx

@@ -131,7 +131,7 @@ export default defineComponent({
         <Pagination
           total={this.pageInfo.total}
           v-model:page={this.pageInfo.page}
-          limit={this.pageInfo.limit}
+          v-model:limit={this.pageInfo.limit}
           pageSizes={this.pageInfo.page_size}
           pagination={this.getList}
         />

src/views/user-info/live-class/list.tsx

@@ -17,10 +17,10 @@ export default defineComponent({
     return {
       pageInfo: {
         // 分页规则
-        limit: 10, // 限制显示条数
+        limit: 9, // 限制显示条数
         page: 1, // 当前页
         total: 0, // 总条数
-        page_size: [10, 20, 40, 50] // 选择限制显示条数
+        page_size: [9, 18, 36, 45] // 选择限制显示条数
       },
       list: [] as any[],
       loading: false,
@@ -123,7 +123,7 @@ export default defineComponent({
         <Pagination
           total={this.pageInfo.total}
           v-model:page={this.pageInfo.page}
-          limit={this.pageInfo.limit}
+          v-model:limit={this.pageInfo.limit}
           pageSizes={this.pageInfo.page_size}
           pagination={this.getList}
         />

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

@@ -2,6 +2,7 @@ import ColCropper from '@/components/col-cropper'
 import request from '@/helpers/request'
 import { verifiyNumberInteger } from '@/helpers/toolsValidate'
 import { state } from '@/state'
+import { scrollAnimation } from '@/util/scroll'
 import {
   dayjs,
   ElButton,
@@ -30,7 +31,6 @@ export default defineComponent({
   data() {
     return {
       typeDateTime: 'start',
-      dateStatus: false,
       currentDate: new Date(),
       minDate: dayjs().toDate(),
       maxDate: new Date(),
@@ -50,6 +50,8 @@ export default defineComponent({
   },
   methods: {
     tabChange(name: number) {
+      ;(this as any).$refs.form.clearValidate('lessonCoverTemplateUrl')
+      ;(this as any).$refs.form.clearValidate('lessonCoverUrl')
       createState.tabIndex = name
     },
     selectImg(val: string) {
@@ -73,7 +75,6 @@ export default defineComponent({
       } else if (this.typeDateTime === 'end') {
         createState.live.salesEndDate = dayjs(val).format('YYYY-MM-DD')
       }
-      this.dateStatus = false
     },
     async onSubmit() {
       try {
@@ -96,7 +97,7 @@ export default defineComponent({
         ElMessageBox.confirm(message, '提示', {
           type: 'warning'
         }).then(() => {
-          createState.active = 3
+          createState.active = 2
           createState.selectCourseList = []
           createState.live.salesStartDate = ''
           createState.live.salesEndDate = ''
@@ -104,6 +105,10 @@ export default defineComponent({
           createState.live.backgroundPic = ''
           createState.live.backgroundPicTemplate = ''
           createState.coursePlanStatus = false
+
+          const currentY =
+            document.documentElement.scrollTop || document.body.scrollTop
+          scrollAnimation(currentY, 0)
         })
       }
     }
@@ -132,6 +137,18 @@ export default defineComponent({
             <ElDatePicker
               class="!w-full"
               v-model={createState.live.salesStartDate}
+              disabledDate={(time: Date) => {
+                const now = dayjs().format('YYYY-MM-DD')
+                return (
+                  time.getTime() < dayjs(now).valueOf() ||
+                  time.getTime() > this.maxDate.getTime()
+                )
+              }}
+              // @ts-ignore
+              onChange={(val: any) => {
+                this.typeDateTime = 'start'
+                this.onConfirm(val)
+              }}
               placeholder="请输入开售日期"
               type="date"
             />
@@ -149,6 +166,19 @@ export default defineComponent({
             <ElDatePicker
               class="!w-full"
               v-model={createState.live.salesEndDate}
+              disabledDate={(time: Date) => {
+                const now = dayjs().format('YYYY-MM-DD')
+                return (
+                  time.getTime() <
+                    dayjs(createState.live.salesStartDate).valueOf() ||
+                  time.getTime() > this.maxDate.getTime()
+                )
+              }}
+              // @ts-ignore
+              onChange={(val: any) => {
+                this.typeDateTime = 'end'
+                this.onConfirm(val)
+              }}
               placeholder="请输入停售日期"
               type="date"
             />
@@ -262,7 +292,14 @@ export default defineComponent({
             type="primary"
             class="!w-40 !h-[38px]"
             onClick={() => {
-              this.show = true
+              // this.show = true
+              ;(this as any).$refs.form.validate(_ => {
+                console.log(_)
+                if (_) {
+                  this.show = true
+                } else {
+                }
+              })
             }}
           >
             下一步

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

@@ -8,6 +8,7 @@ import { state } from '@/state'
 import { getWeekCh } from '@/helpers/utils'
 import ColCalendar from '@/components/col-calendar'
 import { ElButton, ElDialog, ElMessageBox, ElTag } from 'element-plus'
+import { scrollAnimation } from '@/util/scroll'
 
 export default defineComponent({
   name: 'arrange',
@@ -106,10 +107,8 @@ export default defineComponent({
       createState.selectCourseList = [...tempList]
     },
     onCloseTag(item: any) {
-      Dialog.confirm({
-        title: '提示',
-        message: '您是否要删除该选择的课程？',
-        confirmButtonColor: 'var(--van-primary)'
+      ElMessageBox.confirm('请确认是否删除？', '提示', {
+        type: 'warning'
       }).then(() => {
         const index = createState.selectCourseList.findIndex(
           (course: any) => course.startTime === item.startTime
@@ -166,10 +165,8 @@ export default defineComponent({
       } catch (e: any) {
         // 报错时需要重置日历表的数据
         const message = e.message
-        Dialog.alert({
-          title: '提示',
-          confirmButtonColor: 'var(--van-primary)',
-          message
+        ElMessageBox.confirm(message, '提示', {
+          type: 'warning'
         }).then(() => {
           this.getList(this.calendarDate || new Date())
           createState.selectCourseList = []
@@ -223,14 +220,20 @@ export default defineComponent({
       })
       if (this.selectType === 'enough' || courseLength > 0) {
         this.selectStatus = false
-        createState.active = 4
+        createState.active = 3
+        const currentY =
+          document.documentElement.scrollTop || document.body.scrollTop
+        scrollAnimation(currentY, 0)
         return
       }
       const status = createState.coursePlanStatus
       await this._lookCourse(() => {
         if (status) {
           this.selectStatus = false
-          createState.active = 4
+          createState.active = 3
+          const currentY =
+            document.documentElement.scrollTop || document.body.scrollTop
+          scrollAnimation(currentY, 0)
         }
       })
     }
@@ -283,6 +286,9 @@ export default defineComponent({
               createState.active = 2
               // 重置选择的课次
               createState.selectCourseList = []
+              const currentY =
+                document.documentElement.scrollTop || document.body.scrollTop
+              scrollAnimation(currentY, 0)
             }}
           >
             上一步

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

@@ -101,15 +101,6 @@ export default defineComponent({
       this.calcSingleRatePrice = nums
         ? ((price / nums) * (1 - rate / 100)).toFixed(2)
         : 0
-    },
-    tabChange(name: number) {
-      ;(this as any).$refs.form.clearValidate('lessonCoverTemplateUrl')
-      ;(this as any).$refs.form.clearValidate('lessonCoverUrl')
-      createState.tabIndex = name
-    },
-    selectImg(val: string) {
-      // createState.live.lessonCoverUrl = ''
-      // createState.live.lessonCoverTemplateUrl = val
     }
   },
   render() {

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

@@ -1,3 +1,4 @@
+import { scrollAnimation } from '@/util/scroll'
 import { ElButton, ElForm, ElFormItem, ElInput } from 'element-plus'
 import { defineComponent } from 'vue'
 import { basePlan, createState } from '../createState'
@@ -37,6 +38,10 @@ export default defineComponent({
       ;(this as any).$refs.form.validate(async (valid: boolean) => {
         if (valid) {
           createState.active = 2
+
+          const currentY =
+            document.documentElement.scrollTop || document.body.scrollTop
+          scrollAnimation(currentY, 0)
         } else {
           this.$nextTick(() => {
             let isError = document.getElementsByClassName('is-error')

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

@@ -7,13 +7,21 @@ 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 iconTimer from '@common/images/icon_timer2.png'
 import request from '@/helpers/request'
+import CoursePlanStep from '@/components/course-plan-step'
 
-interface IProps {
-  courseTime: string
-  coursePlan: string
-  videoPosterUrl?: string
-  id?: number | string
+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: 'course-preview',
@@ -37,10 +45,10 @@ export default defineComponent({
           createState.live.backgroundPic ||
           createState.live.backgroundPicTemplate,
         lessonName: createState.live.name
-      }
+      } as UserType
     },
     courseInfo() {
-      let tempArr = [] as IProps[]
+      let tempArr = [] as any
       const coursePlanList = createState.live.coursePlanList || []
       coursePlanList.forEach((item: any) => {
         tempArr.push({
@@ -65,7 +73,16 @@ export default defineComponent({
 
           <div class="bg-white">
             <div class="p-[14px] text-lg text-[#1a1a1a] font-medium leading-none">
-              标题
+              <div class="overflow-hidden whitespace-nowrap text-ellipsis">
+                {this.userInfo.lessonName}
+              </div>
+              <span class="flex items-center text-[13px] pt-2">
+                <ElIcon size={16} style={{ marginRight: '5px' }}>
+                  <img src={iconTimer} />
+                </ElIcon>
+                开课时间：
+                {this.userInfo.startTime}
+              </span>
             </div>
             <div class={[styles.userInfo, 'mx-[14px] py-[14px]']}>
               <div class="flex">
@@ -75,7 +92,7 @@ export default defineComponent({
                   fit=""
                 />
                 <div class={styles.name}>
-                  {this.userInfo.username || `游客${this.userInfo.id || ''}`}
+                  {this.userInfo.username || `游客${this.userInfo?.id || ''}`}
 
                   <div class={styles.buyNum}>
                     {this.userInfo.buyNum}人已购买
@@ -118,36 +135,11 @@ export default defineComponent({
             <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>
-            ))}
+            <CoursePlanStep courseInfo={this.courseInfo} />
           </div>
         </div>
       </div>

src/views/user-info/live-operation/createState.ts

@@ -10,7 +10,7 @@ export const basePlan = {
 const original = () => {
   return {
     subjectList: [], // 声部列表
-    active: 3,
+    active: 0,
     rate: 0,
     minutes: [] as any,
     tabIndex: 1,

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

@@ -24,7 +24,7 @@ export default defineComponent({
 
         <div class="pt-12">
           <ColSteps
-            class="px-[200px]"
+            class="px-[190px]"
             type="small"
             active={createState.active}
           />

src/views/user-info/music-class/list.tsx

@@ -22,7 +22,7 @@ export default defineComponent({
     return {
       pageInfo: {
         // 分页规则
-        limit: 10, // 限制显示条数
+        limit: 9, // 限制显示条数
         page: 1, // 当前页
         total: 0, // 总条数
         page_size: [10, 20, 40, 50] // 选择限制显示条数
@@ -137,7 +137,7 @@ export default defineComponent({
         <Pagination
           total={this.pageInfo.total}
           v-model:page={this.pageInfo.page}
-          limit={this.pageInfo.limit}
+          v-model:limit={this.pageInfo.limit}
           pageSizes={this.pageInfo.page_size}
           pagination={this.getList}
         />

src/views/user-info/video-class/list.tsx

@@ -18,7 +18,7 @@ export default defineComponent({
     return {
       pageInfo: {
         // 分页规则
-        limit: 3, // 限制显示条数
+        limit: 9, // 限制显示条数
         page: 1, // 当前页
         total: 0, // 总条数
         page_size: [10, 20, 40, 50] // 选择限制显示条数
@@ -148,8 +148,8 @@ export default defineComponent({
 
         <Pagination
           total={this.pageInfo.total}
-          page={this.pageInfo.page}
-          limit={this.pageInfo.limit}
+          v-model:page={this.pageInfo.page}
+          v-model:limit={this.pageInfo.limit}
           pageSizes={this.pageInfo.page_size}
           pagination={this.getList}
         />

src/views/videoDetailList/index.tsx

@@ -97,8 +97,8 @@ export default defineComponent({
             </div>
             <pagination
               total={state.pageInfo.total}
-              page={state.pageInfo.page}
-              limit={state.pageInfo.limit}
+              v-model:page={state.pageInfo.page}
+              v-model:limit={state.pageInfo.limit}
               pageSizes={state.pageInfo.page_size}
               pagination={getVideoList}
             />

src/views/videoDetailList/videoDetail.tsx

@@ -152,15 +152,12 @@ export default defineComponent({
     }
     const followVideo = async () => {
       try {
-        const res = await request.get(
-          '/api-website/student/starOrUnStar',
-          {
-            params: {
-              userId:state.teacherDetail.userId,
-              starStatus: state.teacherDetail.isStar?0:1
-            }
+        const res = await request.get('/api-website/student/starOrUnStar', {
+          params: {
+            userId: state.teacherDetail.userId,
+            starStatus: state.teacherDetail.isStar ? 0 : 1
           }
-        )
+        })
         _init()
         // state.otherVideoList = res.data
       } catch (e) {
@@ -216,7 +213,7 @@ export default defineComponent({
               <pagination
                 total={state.pageInfo.total}
                 v-model:page={state.pageInfo.page}
-                limit={state.pageInfo.limit}
+                v-model:limit={state.pageInfo.limit}
                 pageSizes={state.pageInfo.page_size}
                 pagination={getVideoList}
               />
@@ -267,10 +264,13 @@ export default defineComponent({
                   </div>
                   {state.userType == 'STUDENT' ? (
                     <div
-                      class={[styles.teacherHeadRight,state.teacherDetail.isStar?styles.isStart:'']}
+                      class={[
+                        styles.teacherHeadRight,
+                        state.teacherDetail.isStar ? styles.isStart : ''
+                      ]}
                       onClick={() => followVideo()}
                     >
-                      {state.teacherDetail.isStar?'已关注':'关注'}
+                      {state.teacherDetail.isStar ? '已关注' : '关注'}
                     </div>
                   ) : null}
                 </div>