更新

src/components/col-header/index.module.less

@@ -6,9 +6,6 @@
       .van-icon {
         color: #fff;
       }
-      .van-nav-bar__content {
-        height: inherit;
-      }
     }
   }
   &.transparent {

src/router/routes-student.ts

@@ -39,6 +39,30 @@ export default [
         meta: {
           title: '视频课'
         }
+      },
+      {
+        path: '/videoDetail',
+        name: 'videoDetail',
+        component: () => import('@/student/video-class/video-detail'),
+        meta: {
+          title: '视频课'
+        }
+      },
+      {
+        path: '/videoClassDetail',
+        name: 'videoClassDetail',
+        component: () => import('@/student/video-class/video-class-detail'),
+        meta: {
+          title: '视频课详情'
+        }
+      },
+      {
+        path: '/liveClass',
+        name: 'liveClass',
+        component: () => import('@/student/live-class/index'),
+        meta: {
+          title: '直播课'
+        }
       }
     ]
   },

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

@@ -0,0 +1,8 @@
+.classHeader {
+  // background: linear-gradient(180deg, #59e5d5 0%, #fff 100%);
+  background: linear-gradient(#59e5d5, 30%, #ffffff);
+}
+.banner {
+  background: #fff;
+  padding: 12px 14px;
+}

src/student/live-class/index.tsx

@@ -0,0 +1,32 @@
+import ColHeader from "@/components/col-header";
+import ColSearch from "@/components/col-search";
+import { Sticky, Image } from "vant";
+import { defineComponent } from "vue";
+import styles from './index.module.less'
+
+import banner from '../video-class/images/banner.png'
+import LiveItem from "./live-item";
+
+export default defineComponent({
+  name: 'liveClass',
+  render() {
+    return (
+      <div>
+        <Sticky offsetTop={0}>
+          <ColHeader class={styles.classHeader} border={false} background="transparent" isFixed={false} />
+          <ColSearch placeholder="请输入老师名称/课程名称" onSearch={this.onSearch} />
+        </Sticky>
+
+        <div class={styles.banner}>
+          <Image src={banner} />
+        </div>
+
+        <div class={styles.liveList}>
+          {[1, 2, 3].map(item => (
+            <LiveItem />
+          ))}
+        </div>
+      </div>
+    )
+  }
+})

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

@@ -0,0 +1,62 @@
+.liveItem {
+  margin: 10px 14px 0;
+  width: auto;
+  border-radius: 8px;
+
+  .liCover {
+    width: 130px;
+    height: 96px;
+    background: #c6c7cb;
+    border-radius: 8px;
+    overflow: hidden;
+    margin-right: 8px;
+  }
+
+  .liTitle {
+    padding-top: 4px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #333333;
+    line-height: 20px;
+  }
+
+  .liUserInfo {
+    padding-top: 4px;
+    padding-bottom: 9px;
+    font-size: 12px;
+    color: #6a6a6a;
+    line-height: 16px;
+  }
+
+  .liPrice {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .price {
+      color: #fa6400;
+      font-size: 14px;
+      margin-right: 10px;
+      font-weight: 600;
+      i {
+        font-style: normal;
+        font-size: 11px;
+      }
+    }
+
+    .classNum {
+      background: #fff1de;
+      border-radius: 4px;
+      font-size: 12px;
+      color: #ff9300;
+      line-height: 18px;
+      padding: 2px 4px;
+    }
+
+    .num {
+      font-size: 12px;
+      color: #ff802c;
+      line-height: 18px;
+    }
+  }
+}

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

@@ -0,0 +1,33 @@
+import { defineComponent } from "vue";
+import { Image, CellGroup, Cell } from "vant";
+import styles from './live-item.module.less';
+
+export default defineComponent({
+  name: "liveItem",
+  render() {
+    return (
+      <Cell
+        center
+        border={false}
+        class={styles.liveItem}
+        v-slots={{
+          icon: () => (<Image class={styles.liCover} fit="cover" src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg" />),
+          title: () => <div>
+            <div class={[styles.liTitle, 'van-ellipsis']}>竖笛基础入门练习</div>
+            <div class={styles.liUserInfo}>
+              <p>老师：李云磊</p>
+              <p>开课时间：2月28日 19:30</p>
+            </div>
+            <div class={styles.liPrice}>
+              <p>
+                <span class={styles.price}><i>¥</i>299</span>
+                <span class={styles.classNum}>12课时</span>
+              </p>
+              <span class={styles.num}>6人已购买</span>
+            </div>
+          </div>
+        }}
+      />
+    )
+  }
+})

src/student/practice-class/index.tsx

@@ -1,31 +1,32 @@
 import { defineComponent } from "vue";
 import styles from './index.module.less';
 import ColHeader from '@/components/col-header';
-import { Button, Sticky } from "vant";
-import ColCropper from "@/components/col-cropper";
-import ColUpload from "@/components/col-upload";
+import { Sticky } from "vant";
+import ColSearch from "@/components/col-search";
+import PracticeItem from "./practice-item";
 
 export default defineComponent({
   name: "practiceClass",
   methods: {
-    getFile(_file: any) {
+    onSearch(_file: any) {
       console.log(_file)
     }
   },
   render() {
     return (
       <>
-        {/* <Sticky>
-          <ColHeader title="陪练课" isFixed={false} isBack background="green">
-            显示
-          </ColHeader>
-        </Sticky> */}
-        <div class={styles.practiceClass}>
-          <div>
-            <Button>添加<ColCropper getFile={() => this.getFile} /></Button>
-          </div>
+        <Sticky style={{ background: 'var(--van-primary)' }}>
+          <ColHeader title="陪练课" isFixed={false} border={false} background="green" />
+          <ColSearch placeholder="请输入老师名称/课程名称" inputBackground="white" background="var(--van-primary)" onSearch={this.onSearch} />
+          {/* <div class={styles.filterSection}>
+            <div></div>
+          </div> */}
+        </Sticky>
 
-          <ColUpload cropper />
+        <div class={styles.practiceList}>
+          {[1, 2, 3].map(item => (
+            <PracticeItem />
+          ))}
         </div>
       </>
     )

src/student/practice-class/practice-item.module.less

@@ -0,0 +1,86 @@
+.practiceItem {
+  margin: 10px 14px 0;
+  padding: 15px 12px;
+  width: auto;
+  border-radius: 8px;
+
+  .piCoverContainer {
+    position: relative;
+    width: 70px;
+    height: 70px;
+    border-radius: 50%;
+    margin-right: 14px;
+
+    .tag {
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 54px;
+      height: 16px;
+    }
+  }
+
+  .piCover {
+    width: inherit;
+    height: inherit;
+    border-radius: 50%;
+    overflow: hidden;
+  }
+
+  .piTitle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .piName {
+      font-size: 16px;
+      font-weight: 600;
+      color: #333333;
+      line-height: 22px;
+    }
+    .subject {
+      margin-left: 5px;
+      background: #fff1de;
+      border-radius: 4px;
+      font-size: 12px;
+      color: #ff8c00;
+      line-height: 16px;
+      padding: 0px 4px;
+    }
+  }
+
+  .piNameSubject {
+    display: flex;
+    align-items: center;
+  }
+
+  .piContent {
+    padding-top: 6px;
+    line-height: 1.3;
+    i {
+      font-style: normal;
+    }
+    .edu {
+      display: flex;
+      font-size: 12px;
+      color: #6a6a6a;
+    }
+    .courseInfo {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 12px;
+      color: #999999;
+    }
+    .classNum i {
+      color: #ff8400;
+      padding: 0 3px;
+    }
+
+    .priceTime i {
+      color: #fa6400;
+      font-size: 14px;
+    }
+  }
+}

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

@@ -0,0 +1,52 @@
+import { Cell, Icon, Image, Rate } from "vant";
+import { defineComponent } from "vue";
+import styles from './practice-item.module.less';
+
+import iconEdu from './images/icon_edu.png';
+import iconMusicMan from './images/icon_music_man.png';
+import iconNew from './images/icon_new.png';
+
+export default defineComponent({
+  name: 'practiceItem',
+
+  render() {
+    return (
+      <Cell center border={false} class={styles.practiceItem}
+        v-slots={{
+          icon: () => (<div class={styles.piCoverContainer}>
+            <Image class={styles.piCover} fit="cover" src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
+            <Image src={iconMusicMan} class={styles.tag} />
+            {/* <Image src={iconNew} class={styles.tag} /> */}
+          </div>),
+          title: () => <div>
+            <div class={[styles.piTitle, 'van-ellipsis']}>
+              <p class={styles.piNameSubject}>
+                <span class={styles.piName}>陪练课</span>
+                <span class={styles.subject}>圆号</span>
+                <span class={styles.subject}>大号</span>
+              </p>
+              <Rate readonly modelValue={3} iconPrefix="iconfont" color="#FFC459" void-icon="star_default" icon="star_active" size={11} />
+            </div>
+
+            <div class={styles.piContent}>
+              <p class={styles.edu}>
+                <Icon size={14} name={iconEdu} style={{ paddingRight: '5px' }} />
+                <span>中国音乐学院</span>
+              </p>
+              <p class={styles.courseInfo}>
+                <span class={styles.classNum}>
+                  已上课程
+                  <i>99+</i>
+                  节
+                </span>
+                <span class={styles.priceTime}>
+                  <i>¥40</i>/25分钟
+                </span>
+              </p>
+            </div>
+
+          </div>
+        }} />
+    )
+  }
+})

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

@@ -6,3 +6,10 @@
   background: #fff;
   padding: 12px 14px;
 }
+
+.videoList {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  padding: 14px;
+}

src/student/video-class/index.tsx

@@ -3,9 +3,10 @@ import ColSearch from "@/components/col-search";
 import { Sticky, Image } from "vant";
 import { defineComponent } from "vue";
 import styles from './index.module.less'
-import banner from './images/banner.png'
 import VideoItem from "./video-item";
 
+import banner from './images/banner.png'
+
 export default defineComponent({
   name: "VideoClass",
   data() {
@@ -26,7 +27,7 @@ export default defineComponent({
       <div>
         <Sticky offsetTop={0}>
           <ColHeader class={styles.classHeader} border={false} background="transparent" isFixed={false} />
-          <ColSearch onSearch={this.onSearch} />
+          <ColSearch placeholder="请输入老师名称/课程名称" onSearch={this.onSearch} />
         </Sticky>
 
         <div class={styles.banner}>

src/student/video-class/video-class-detail.module.less

@@ -0,0 +1,115 @@
+.video-class-detail {
+  .cell {
+    margin-bottom: 6px;
+  }
+  .titleInfo {
+    padding-left: 8px;
+    font-size: 15px;
+    font-weight: 500;
+    color: #1a1a1a;
+    flex: 1 auto;
+  }
+  .label {
+    font-size: 14px;
+    span {
+      color: var(--van-primary);
+    }
+  }
+
+  :global {
+    .van-tab--active {
+      color: var(--van-primary);
+    }
+    .van-field__value {
+      background: #f7f7f7;
+      border-radius: 30px;
+      padding-left: 15px;
+    }
+  }
+
+  .open-teacher-info {
+    margin: 12px 14px 8px;
+    width: auto;
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 14px 15px;
+    .userLogo {
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      overflow: hidden;
+    }
+    :global {
+      .van-cell__value {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+    }
+
+    .teacher-info {
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      padding-left: 8px;
+      .users {
+        display: flex;
+        padding-top: 5px;
+      }
+      .teacher-name {
+        font-weight: 500;
+        color: #1a1a1a;
+        line-height: 1.2;
+        font-size: 16px;
+        padding-right: 8px;
+      }
+      .level {
+        padding-top: 5px;
+        line-height: 1.2;
+        font-size: 12px;
+        color: #999999;
+      }
+    }
+
+    .teacher-desc {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .message-list {
+    &.message-active {
+      .title,
+      .label {
+        color: var(--van-primary) !important;
+      }
+    }
+    .message-name {
+      flex-basis: 70%;
+      line-height: 1.2;
+    }
+    .message-time {
+      font-size: 12px;
+      color: #999;
+    }
+
+    .userLogo {
+      width: 34px;
+      height: 34px;
+      border-radius: 50%;
+      margin-right: 8px;
+    }
+    .title {
+      display: flex;
+      justify-content: space-between;
+      font-size: 14px;
+      color: #999;
+      font-weight: 500;
+    }
+    .label {
+      font-size: 14px;
+      color: #333333;
+      line-height: 20px;
+    }
+  }
+}

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

@@ -0,0 +1,139 @@
+import CourseVideoItem from "@/business-components/course-video-item";
+import SectionDetail from "@/business-components/section-detail";
+import ColHeader from "@/components/col-header";
+import ColVideo from "@/components/col-video";
+import request from "@/helpers/request";
+import { Cell, Icon, Rate, Tab, Tabs, Image, Button, Sticky, Field } from "vant";
+import { defineComponent } from "vue";
+import styles from './video-class-detail.module.less';
+import { state } from "@/state";
+
+import iconTeacher from '@common/images/icon_teacher.png';
+
+export default defineComponent({
+  name: 'VideoClassDetail',
+  data() {
+    const query = this.$route.query
+    return {
+      groupId: query.groupId,
+      classId: query.classId,
+      tabIndex: 1,
+      title: '',
+      detailList: [],
+      posterUrl: '',
+      srcUrl: '',
+      message: ''
+    }
+  },
+  computed: {
+    users() {
+      return state.user.data
+    }
+  },
+  async mounted() {
+    try {
+      const res = await request.get('/api-teacher/videoLessonGroup/selectVideoLesson', {
+        params: {
+          groupId: this.groupId
+        }
+      })
+      const result = res.data || {}
+      this.title = result.lessonGroup.lessonName
+      this.detailList = result.detailList || []
+      this.detailList.forEach((item: any) => {
+        if (item.id === Number(this.classId)) {
+          this.posterUrl = item.coverUrl
+          this.srcUrl = item.videoUrl
+        }
+      })
+    } catch { }
+  },
+  methods: {
+    onPlay(item: any) {
+      this.posterUrl = item.imgUrl
+      this.srcUrl = item.videoUrl
+    }
+  },
+  render() {
+    return (
+      <div class={styles['video-class-detail']}>
+        <ColHeader v-slots={{
+          content: () => (
+            <ColVideo src={this.srcUrl} poster={this.posterUrl} />
+          )
+        }} />
+        <Cell border={false} class={styles.cell} title={this.title} titleClass={styles.titleInfo} v-slots={{
+          icon: () => (<Icon name="video" size={18} style={{ display: 'flex', alignItems: 'center' }} />),
+          value: () => (<div class={styles.label}><span>1</span>/4课时</div>)
+        }}></Cell>
+
+        <Tabs v-model:active={this.tabIndex} class={styles.infoField} color="var(--van-primary)" lineWidth={20}>
+          <Tab title="目录" name={1}>
+            <div style={{ height: 'calc(100vh - 320px)', overflowY: 'auto' }}>
+              <SectionDetail title="课程列表" icon="courseList" >
+                {this.detailList.map((item: any) => (
+                  <CourseVideoItem class={'mb12'} detail={{
+                    id: item.id,
+                    title: item.videoTitle,
+                    content: item.videoContent,
+                    imgUrl: item.coverUrl,
+                    videoUrl: item.videoUrl
+                  }} onPlay={this.onPlay} />
+                ))}
+              </SectionDetail>
+            </div>
+
+          </Tab>
+          <Tab title="简介" name={2}>
+            <Cell class={styles['open-teacher-info']} border={false} v-slots={{
+              icon: () => (<Image class={styles.userLogo} src={this.users?.headUrl || iconTeacher} fit="cover" />)
+            }}>
+              <div class={styles['teacher-info']}>
+                <div class={styles['users']}>
+                  <div class={styles['teacher-name']}>
+                    {this.users?.username}
+                  </div>
+                  <Rate modelValue={this.users?.starGrade} iconPrefix="iconfont" color="#FFC459" void-icon="star_default" icon="star_active" size={15} />
+                </div>
+                <div class={styles.level}>
+                  粉丝{this.users?.fansNum}
+                </div>
+              </div>
+              <div class={styles['teacher-desc']}>
+                <Button type="primary" icon="plus" size="mini" style={{ borderRadius: '5px', padding: '0 8px' }}>关注</Button>
+              </div>
+            </Cell>
+            <SectionDetail>
+              <p class={styles.introduction}>课程介绍</p>
+            </SectionDetail>
+          </Tab>
+          <Tab title="讨论" name={3}>
+            <div style={{ height: 'calc(100vh - 365px)', overflowY: 'auto' }}>
+              {[1, 2, 3].map((item: any) => (
+                <Cell class={[styles['message-list'], styles['message-active']]} valueClass={styles['message-time']} v-slots={{
+                  icon: () => (<Image class={styles.userLogo} src={this.users?.headUrl || iconTeacher} fit="cover" />),
+                  title: () => (<div class={styles.title}>
+                    <div class={styles['message-name']}>讨论讨论讨</div>
+                    <div class={styles['message-time']}>2022年4月11日</div>
+                  </div>),
+                  label: () => (<div class={styles.label}>电光2323232323冷雾中</div>)
+                }} />
+              ))}
+            </div>
+
+            <Sticky offsetBottom={0} position='bottom'>
+              <Field
+                placeholder="快来讨论吧～"
+                v-model={this.message}
+                v-slots={{
+                  button: () => (
+                    <Button type="primary" disabled={!this.message} style={{ padding: '0 20px' }} size="small" round>发布</Button>
+                  )
+                }} />
+            </Sticky>
+          </Tab>
+        </Tabs>
+      </div>
+    );
+  }
+})

src/student/video-class/video-detail.module.less

@@ -0,0 +1,21 @@
+.video-detail {
+  .introduction {
+    color: #7a7a7a;
+    line-height: 23px;
+    padding-bottom: 8px;
+  }
+
+  .btnGroup {
+    padding: 0 14px;
+    padding-bottom: 15px;
+  }
+  .btnMore {
+    display: flex;
+    justify-content: space-around;
+    :global {
+      .van-button {
+        width: 48%;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,118 @@
+import CourseVideoItem from "@/business-components/course-video-item";
+import SectionDetail from "@/business-components/section-detail";
+import UserDetail from "@/business-components/user-detail";
+import { List, Sticky, Button } from "vant";
+import { defineComponent } from "vue";
+import { state } from "@/state";
+import styles from './video-detail.module.less';
+import request from "@/helpers/request";
+export default defineComponent({
+  name: 'VideoDetail',
+  data() {
+    const query = this.$route.query
+    return {
+      userInfo: {} as any,
+      detailList: [],
+      buyUserList: [], // 购买学生数
+      dataShow: true, // 判断是否有数据
+      loading: false,
+      finished: false,
+      params: {
+        groupId: query.groupId,
+        page: 1,
+        rows: 20
+      }
+    }
+  },
+  async mounted() {
+    try {
+      const res = await request.get('/api-teacher/videoLessonGroup/selectVideoLesson', {
+        params: {
+          groupId: this.params.groupId
+        }
+      })
+      const result = res.data || {}
+      const users = state.user.data || {};
+      this.userInfo = {
+        username: users.username,
+        headUrl: users.headUrl,
+        buyNum: 0,
+        lessonName: result.lessonGroup.lessonName,
+        lessonDesc: result.lessonGroup.lessonDesc,
+        lessonPrice: result.lessonGroup.lessonPrice,
+        lessonCoverUrl: result.lessonGroup.lessonCoverUrl
+      }
+      this.detailList = result.detailList || []
+
+      this.getList()
+    } catch { }
+  },
+  methods: {
+    async getList() {
+      try {
+        let params = this.params
+        const res = await request.post('/api-teacher/videoLesson/pageStudent', {
+          data: {
+            ...params
+          }
+        })
+        const result = res.data || {}
+        // 处理重复请求数据
+        if (this.buyUserList.length > 0 && result.pageNo === 1) {
+          return
+        }
+        this.buyUserList = this.buyUserList.concat(result.list || [])
+        this.finished = result.pageNo >= result.totalPage
+        this.params.page = result.pageNo + 1
+        this.dataShow = this.buyUserList.length > 0
+
+        this.userInfo.buyNum = result.totalCount || 0
+      } catch { }
+    },
+    onPlay(detail: any) {
+      this.$router.push({
+        path: '/videoClassDetail',
+        query: {
+          groupId: this.params.groupId,
+          classId: detail.id
+        }
+      })
+    },
+    onBuy() {
+      this.$router.push({
+        path: '/orderDetail',
+        query: {
+          type: 'VIDEO'
+        }
+      })
+    },
+  },
+  render() {
+    return (
+      <div class={[styles['video-detail'], 'mb12']}>
+        <UserDetail userInfo={this.userInfo} />
+        <SectionDetail>
+          <p class={styles.introduction}>{this.userInfo.lessonDesc}</p>
+        </SectionDetail>
+
+
+        <SectionDetail title="课程列表" icon="courseList" class='mb12'>
+          {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>
+
+        <Sticky offsetBottom={0} position="bottom">
+          <div class={[styles.btnGroup, styles.btnMore]}>
+            <Button block round type="primary" onClick={this.onBuy}>立即购买</Button>
+          </div>
+        </Sticky>
+      </div >
+    )
+  }
+})

src/student/video-class/video-item.module.less

@@ -0,0 +1,57 @@
+.videoItem {
+  border-radius: 4px 4px 0 0;
+  background-color: #fff;
+  overflow: hidden;
+  width: 168px;
+  margin-bottom: 12px;
+
+  .viCover {
+    height: 110px;
+    width: 100%;
+    vertical-align: middle;
+  }
+
+  .viSection {
+    padding: 8px;
+  }
+
+  .viTitle {
+    font-size: 14px;
+    color: #1a1a1a;
+    line-height: 20px;
+  }
+
+  .viUserInfo {
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    color: #999;
+    padding: 8px 0;
+
+    .viUserLogo {
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      margin-right: 5px;
+    }
+
+    .viUserName {
+      padding-right: 6px;
+      margin-right: 6px;
+      // &::after {
+      //   content: '|';
+      //   display: inline-block;
+      // }
+    }
+
+    .viUserNum {
+      color: #ff802c;
+    }
+  }
+
+  .viPrice {
+    font-size: 14px;
+    font-weight: 500;
+    color: #2dc7aa;
+  }
+}

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

@@ -9,13 +9,13 @@ export default defineComponent({
   render() {
     return (
       <div class={styles.videoItem}>
-        <Image src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
+        <Image class={styles.viCover} fit="cover" src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
 
         <div class={styles.viSection}>
-          <div class={styles.viTitle}>视频标题</div>
+          <div class={[styles.viTitle, 'van-ellipsis']}>视频标题</div>
           <div class={styles.viUserInfo}>
             <Image src={iconTeacher} class={styles.viUserLogo} />
-            <span class={styles.viUserName}>王老师</span>
+            <span class={[styles.viUserName, 'van-hairline--right']}>王老师</span>
             <span class={styles.viUserNum}>6人已购买</span>
           </div>
           <div class={styles.viPrice}>

src/styles/iconfont/iconfont.css

@@ -0,0 +1,27 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 3319600 */
+  src: url('iconfont.woff2?t=1649667195930') format('woff2'),
+       url('iconfont.woff?t=1649667195930') format('woff'),
+       url('iconfont.ttf?t=1649667195930') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.iconfont-star_active:before {
+  content: "\e614";
+}
+
+.iconfont-star_default:before {
+  content: "\e615";
+}
+
+.iconfont-down:before {
+  content: "\e613";
+}
+

src/styles/index.less

@@ -1,3 +1,5 @@
+@import url('./iconfont/iconfont.css');
+
 :root {
   // Color Palette
   // --van-black: #000;

src/teacher/open-live/index.tsx

@@ -77,7 +77,7 @@ export default defineComponent({
           <div class={styles['teacher-info']}>
             <div class={styles['teacher-name']}>{this.users?.username}</div>
             <div class={styles.level}>
-              <Rate modelValue={this.users?.starGrade} color="#FFC459" void-icon="star" voidColor="#D6D6D6" size={15} />
+              <Rate modelValue={this.users?.starGrade} iconPrefix="iconfont" color="#FFC459" void-icon="star_default" icon="star_active" size={15} />
             </div>
           </div>
           <div class={styles['teacher-desc']}>

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

@@ -93,7 +93,7 @@ export default defineComponent({
                   <div class={styles['teacher-name']}>
                     {this.users?.username}
                   </div>
-                  <Rate modelValue={this.users?.starGrade} color="#FFC459" void-icon="star" voidColor="#D6D6D6" size={15} />
+                  <Rate modelValue={this.users?.starGrade} iconPrefix="iconfont" color="#FFC459" void-icon="star_default" icon="star_active" size={15} />
                 </div>
                 <div class={styles.level}>
                   粉丝{this.users?.fansNum}

src/views/order-detail/index.tsx

@@ -3,6 +3,8 @@ import { Button, Sticky } from "vant";
 import { defineComponent } from "vue";
 import styles from './index.module.less'
 
+type orderType = 'VIDEO' | 'LIVE' | 'PRACTICE' | 'GOODS' | 'VIP' | 'MUSIC';
+
 export default defineComponent({
   name: "order-detail",
   data() {
@@ -25,7 +27,7 @@ export default defineComponent({
             支付金额：
             <div class={styles.price}>
               <span class={styles.priceUnit}>￥</span>
-              <span class={styles.priceNum}>{ (this as any).$filters.moneyFormat(99) }</span>
+              <span class={styles.priceNum}>{(this as any).$filters.moneyFormat(99)}</span>
             </div>
           </div>
           <Button type="primary" round class={styles.btn} onClick={this.onSubmit}>立即支付</Button>