提交

1

babel.config.js

@@ -9,6 +9,7 @@ module.exports = {
       }
     ]
   ],
+  "plugins": ["transform-vue-jsx"],
   env: {
     development: {
       // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().

package.json

@@ -25,6 +25,10 @@
     "@vant/touch-emulator": "^1.3.2",
     "@vant/use": "^1.3.6",
     "@vueuse/core": "^8.4.1",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-vue-jsx": "^3.7.0",
+    "babel-preset-env": "^1.7.0",
     "browserslist": "^4.20.2",
     "classnames": "^2.3.1",
     "clean-deep": "^3.4.0",
@@ -37,6 +41,7 @@
     "normalize.css": "^8.0.1",
     "numeral": "^2.0.6",
     "plyr": "^3.7.2",
+    "print-js": "^1.6.0",
     "qrcode.vue": "^3.3.3",
     "query-string": "^7.1.1",
     "swiper": "^8.2.4",

src/components/albumItem/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
+import { defineComponent, toRefs, reactive, onMounted, ref,watch } from 'vue'
 
 import classes from './index.module.less'
 import hold from './images/hold.png'
@@ -36,6 +36,12 @@ export default defineComponent({
     const state = reactive({
       detail: props.detail
     })
+    watch(
+      () => props.detail,
+      detail => {
+        state.detail = detail
+      }
+    )
     const router = useRouter()
     const gotoAlbum = ()=>{
 

src/components/col-header/index.tsx

@@ -4,9 +4,13 @@ import './index.css'
 import logo from './images/logo.png'
 import { state } from '@/state'
 import { RouterLink } from 'vue-router'
-
+import { getAuth, getUserType } from '@/helpers/utils'
+import loganInfo from './modals/loganInfo'
 export default defineComponent({
   name: 'col-header',
+  components: {
+    loganInfo
+  },
   data() {
     return {
       navigator: [
@@ -19,10 +23,21 @@ export default defineComponent({
       ],
       navPath: ['', '/musicLibrary', '', '', '/downLoad'],
       isTop: false,
-      isdark:false
+      isdark: false,
+      token: '',
+      userType: '',
+      isLogin: false,
+      userInfo: {}
     }
   },
   mounted() {
+    this.token = getAuth()
+    this.userType = getUserType()
+    if (this.userType && this.token) {
+      this.isLogin = true
+
+      // this.userInfo =
+    }
     window.addEventListener('scroll', e => {
       //函数体
       let scrollTop =
@@ -39,7 +54,7 @@ export default defineComponent({
         if (item.href === res.meta.highlightPath) {
           item.current = true
           this.isdark = !!res.meta.isdark
-           console.log(this.isdark)
+          console.log(this.isdark)
         }
       })
     }
@@ -49,9 +64,12 @@ export default defineComponent({
       <>
         {/* <div class="wall h-[70px]"></div> */}
         <div
-          class={['headerSection backdrop-blur-sm', this.isTop ? '' : 'top',this.isdark?'isdark':'']}
+          class={[
+            'headerSection backdrop-blur-sm',
+            this.isTop ? '' : 'top',
+            this.isdark ? 'isdark' : ''
+          ]}
         >
-
           <div class="flex items-center h-full">
             <div class="logoWrap">
               <img class="w-full" src={logo} alt="" />
@@ -59,12 +77,12 @@ export default defineComponent({
             <div class="flex">
               {this.navigator.map((item: any) => (
                 <div
-                  // onClick={() => {
-                  //   this.navigator.forEach((item: any) => {
-                  //     item.current = false
-                  //   })
-                  //   item.current = true
-                  // }}
+                // onClick={() => {
+                //   this.navigator.forEach((item: any) => {
+                //     item.current = false
+                //   })
+                //   item.current = true
+                // }}
                 >
                   <RouterLink
                     to={item.href}
@@ -80,19 +98,26 @@ export default defineComponent({
             </div>
           </div>
           <div class={'rightWrap'}>
-            <ElButton
-              type="primary"
-              round
-              onClick={() => {
-                state.loginPopupStatus = true
-              }}
-            >
-              登录/注册
-            </ElButton>
+            {!this.isLogin ? (
+              <ElButton
+                type="primary"
+                round
+                onClick={() => {
+                  state.loginPopupStatus = true
+                }}
+              >
+                登录/注册
+              </ElButton>
+            ) : (
+              <>
+                <div>
+                  <loganInfo></loganInfo>
+                </div>
+              </>
+            )}
           </div>
         </div>
-        {this.isTop?<div class="wall"></div>:''}
-
+        {this.isTop ? <div class="wall"></div> : ''}
       </>
     )
   }

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

@@ -0,0 +1,83 @@
+.userInfoWrap {
+  min-height: 70px;
+  line-height: 70px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  .title {
+    font-size: 16px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #ffffff;
+  }
+  .userHeader {
+    width: 30px;
+    height: 30px;
+    margin-left: 12px;
+    border-radius: 50%;
+    overflow: hidden;
+  }
+}
+.dropdownWrap {
+  padding: 0 !important;
+  width: 250px;
+
+  overflow: hidden;
+  img {
+    width: 100%;
+    position: relative;
+    vertical-align: bottom;
+    border-radius: 10px 10px 0px 0px;
+  }
+  .dropdownInfo {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    text-align: center;
+    margin-top: 10px;
+    // margin-bottom: 10px;
+    .dropdownItemTitle {
+      font-size: 18px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #000000;
+      line-height: 25px;
+    }
+    .dropdownItemsubTitle {
+      width: 40px;
+      height: 28px;
+      font-size: 12px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #666666;
+      line-height: 28px;
+    }
+
+  }
+
+}
+:global {
+  .el-dropdown__popper.el-popper {
+    border: none !important;
+    border-radius: 10px 10px;
+  }
+  .el-dropdown-menu__item{
+    line-height: 42px!important;
+    img {
+      width: 16px;
+      height: 16px;
+      margin-right: 7px;
+    }
+  }
+
+  .backWrap {
+    width: 100%;
+    border-top: 1px solid #F2F2F2;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  .el-popper__arrow {
+    display: none;
+  }
+}

src/components/col-header/modals/loganInfo.tsx

@@ -0,0 +1,184 @@
+import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
+import {
+  ElTag,
+  ElDropdown,
+  ElDropdownItem,
+  ElDropdownMenu,
+  ElMessageBox
+} from 'element-plus'
+import classes from './index.module.less'
+import teacherHeader from '@/common/images/icon_teacher.png'
+import { state } from '@/state'
+import userBanner from '../images/userBanner.png'
+import changeIcon from '../images/changeIcon.png'
+import backIcon from '../images/backIcon.png'
+import peopleIcon from '../images/peopleIcon.png'
+import planIcon from '../images/planIcon.png'
+import { getUserInfo, getUserType, getAuth, setAuth } from '@/helpers/utils'
+import { useRouter } from 'vue-router'
+export default defineComponent({
+  name: 'loganInfo',
+
+  props: {
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  setup(props, conent) {
+    const states = reactive({
+      title: props.title,
+      user: {} as any,
+      userType: '',
+      showChange: false
+    })
+    const router = useRouter()
+    onMounted(() => {
+      states.user = getUserInfo()
+      states.userType = getUserType()
+
+      console.log(states.user.userType)
+      if (
+        states.user.userType.indexOf('TEACHER') != -1 &&
+        states.user.userType.indexOf('STUDENT') != -1
+      ) {
+        states.showChange = true
+      } else {
+        states.showChange = false
+      }
+    })
+    const gotoPage = (val: string) => {
+      router.push({ path: val })
+    }
+    const changeRoute = () => {
+      ElMessageBox.confirm('是否确定切换角色吗？', '提示', {
+        type: 'warning'
+      }).then(() => {
+        const token = getAuth()
+        let userType = ''
+        if (states.userType == 'TEACHER') {
+          userType = 'STUDENT'
+        } else {
+          userType = 'TEACHER'
+        }
+        setAuth(
+          JSON.stringify({
+            token,
+            loginUserType: userType
+          })
+        )
+        router.push({ path: '/' })
+        window.location.reload()
+      })
+    }
+    const logout = () => {}
+    const changeState = (val: string) => {
+      if (val == 'strudent') {
+        gotoPage('/studentInfo')
+      } else if (val == 'teacher') {
+        gotoPage('/userInfo')
+      } else if (val == 'change') {
+        changeRoute()
+      } else if (val == 'back') {
+        logout()
+      }
+    }
+    return {
+      ...toRefs(states),
+      gotoPage,
+      changeRoute,
+      logout,
+      changeState
+    }
+  },
+  render() {
+    return (
+      <>
+        <ElDropdown
+          onCommand={val => this.changeState(val)}
+          trigger="click"
+          v-slots={{
+            dropdown: () => (
+              <>
+                <div class={classes.dropdownWrap}>
+                  <img src={userBanner} alt="" />
+                  {this.userType == 'TEACHER' ? (
+                    <div class={classes.dropdownInfo}>
+                      <div class={classes.dropdownItem}>
+                        <p class={classes.dropdownItemTitle}>
+                          {this.user.fansNum || 0}
+                        </p>
+                        <p class={classes.dropdownItemsubTitle}>粉丝</p>
+                      </div>
+                      <div class={classes.dropdownItem}>
+                        <p class={classes.dropdownItemTitle}>134</p>
+                        <p class={classes.dropdownItemsubTitle}>乐谱</p>
+                      </div>
+                      {/* <div class={classes.dropdownItem}>
+                      <p class={classes.dropdownItemTitle}>134</p>
+                      <p class={classes.dropdownItemsubTitle}>帖子</p>
+                    </div> */}
+                    </div>
+                  ) : null}
+
+                  <ElDropdownMenu>
+                    {this.userType == 'TEACHER' ? (
+                      <ElDropdownItem command="teacher">
+                        <img
+                          class={classes.dropdownImg}
+                          src={peopleIcon}
+                          alt=""
+                        />{' '}
+                        个人中心
+                      </ElDropdownItem>
+                    ) : (
+                      <ElDropdownItem command="strudent">
+                        <img
+                          class={classes.dropdownImg}
+                          src={peopleIcon}
+                          alt=""
+                        />{' '}
+                        个人中心
+                      </ElDropdownItem>
+                    )}
+                    {/* <ElDropdownItem  onClick={gotoPage('')}><img class={classes.dropdownImg} src={planIcon} alt="" /> 创作中心</ElDropdownItem> */}
+                    {this.showChange ? (
+                      <ElDropdownItem command="change">
+                        <img
+                          class={classes.dropdownImg}
+                          src={changeIcon}
+                          alt=""
+                        />{' '}
+                        角色切换
+                      </ElDropdownItem>
+                    ) : null}
+
+                    <ElDropdownItem command="back" class="backItem">
+                      <div class="backWrap">
+                        <img
+                          class={classes.dropdownImg}
+                          src={backIcon}
+                          alt=""
+                        />{' '}
+                        退出登录
+                      </div>
+                    </ElDropdownItem>
+                  </ElDropdownMenu>
+                </div>
+              </>
+            )
+          }}
+        >
+          <div class={classes.userInfoWrap}>
+            <p class={classes.title}>{this.user.username}</p>
+            <img
+              src={this.user.heardUrl ? this.user.heardUrl : teacherHeader}
+              class={classes.userHeader}
+              alt=""
+            />
+          </div>
+        </ElDropdown>
+      </>
+    )
+  }
+})

src/components/musicLIstItem/index.tsx

@@ -1,9 +1,11 @@
-import { defineComponent, reactive } from 'vue'
+import { defineComponent, reactive, watch } from 'vue'
 import icon from '../videoDetailItem/images/icon.png'
 import classes from './index.module.less'
 import detaile from './images/detaile.png'
 import music from './images/music.png'
 import arrow from './images/arrow.png'
+import { goodsType } from '@/constant'
+import { useRouter } from 'vue-router'
 
 type Props = {
   id?: Number
@@ -32,33 +34,46 @@ export default defineComponent({
       default: (item: any) => {}
     }
   },
+
   setup(props: any) {
-    const item = props.item
+    const state = reactive({
+      item:props.item
+    })
+    const router = useRouter()
+    watch(
+      () => props.item,
+      item => {
+        state.item = item
+      }
+    )
+    const gotoMusicDetail = () => {
+      router.push({path:'/muiscDetial',query:{id:state.item.id}})
+    }
     return () => (
       <div
         onClick={() => {
-          props.onClick(item)
+          props.onClick(state.item)
         }}
       >
-        <div class={classes.itemWrap}>
+        <div class={classes.itemWrap}    onClick={() => gotoMusicDetail()}>
           <div class={classes.left}>
             <div class={classes.imgWrap}>
               <img src={music} alt="" />
             </div>
             <div class={classes.textWrap}>
               <p>
-                {item.musicSheetName}
-                <span>作曲: {item.composer}</span>
+                {state.item.musicSheetName}
+                <span>作曲: {state.item.composer}</span>
               </p>
               <div class={classes.authorInfo}>
                 <img
                   class={classes.icon}
-                  src={item.addUserAvatar || icon}
+                  src={state.item.addUserAvatar || icon}
                   alt=""
                 />
-                <span class={classes.authorName}>{item.addName}</span>
+                <span class={classes.authorName}>{state.item.addName}</span>
                 <div class={classes.tagList}>
-                  <div class={classes.tag}>{item.subjectNames}</div>
+                  <div class={classes.tag}>{state.item.subjectNames}</div>
                   {/* <div class={classes.tag}>圆号</div> */}
                 </div>
               </div>
@@ -68,10 +83,13 @@ export default defineComponent({
             <div
               class={[
                 classes.touchButton,
-                classes[item.chargeType?.toLocaleLowerCase()]
+                classes[state.item.chargeType?.toLocaleLowerCase()]
               ]}
+
             >
-              {chargeTypes[item.chargeType]?chargeTypes[item.chargeType]:'点播'}
+              {chargeTypes[state.item.chargeType]
+                ? chargeTypes[state.item.chargeType]
+                : '点播'}
             </div>
             <img class={classes.arrow} src={arrow} alt="" />
           </div>

src/components/searchInput/index.tsx

@@ -26,22 +26,24 @@ export default defineComponent({
       default: true
     },
     searchVal: {
-      type: String,
-      default: ''
+      type: Object,
+      default: {}
     }
   },
   emits: ['startSearch'],
   setup(props, conent) {
     const state = reactive({
       title: props.title,
-      search: props.searchVal,
-      subject: '',
+      search: props.searchVal.search,
+      subject: null as null | number | string,
       subjectList: []
     })
     watch(
       () => props.searchVal,
       searchVal => {
-        state.search = searchVal
+        // console.log(searchVal,'searchVal')
+        state.search = searchVal.search?searchVal.search:''
+        state.subject = Number(props.searchVal.subject)?Number(props.searchVal.subject):''
       }
     )
     const getSubjectList = async () => {

src/helpers/request.ts

@@ -42,8 +42,7 @@ request.interceptors.request.use(
         '/api-auth/usernameLogin',
         '/api-auth/smsLogin',
         '/api-auth/code/sendSms'
-      ].includes(url) &&
-      !/open/gi.test(url)
+      ].includes(url)
     ) {
       authHeaders.Authorization = Authorization
     }

src/helpers/utils.ts

@@ -32,12 +32,18 @@ export const getRandomKey = () => {
   const key = '' + new Date().getTime() + Math.floor(Math.random() * 1000000)
   return key
 }
-
+/**
+ * 设置用户信息
+ */
+export const setUserInfo = (userInfo:any)=>{
+  Cookies.set('userInfo', userInfo, { expires: 7 })
+}
 /**
  * 删除token
  */
 export const removeAuth = () => {
   Cookies.remove('token')
+  Cookies.remove('userInfo')
 }
 
 /**
@@ -51,6 +57,14 @@ export const setAuth = (token: any) => {
 }
 
 /**
+ * 获取用户信息
+ */
+ export const getUserInfo = () => {
+  let userInfo = Cookies.get('userInfo')
+  userInfo = userInfo ? JSON.parse(userInfo) : {}
+  return userInfo|| null
+}
+/**
  * 获取token
  */
 export const getAuth = () => {

src/router/routes-admin.ts

@@ -11,7 +11,7 @@ export default [
     meta: {
       title: '首页',
       highlightPath: '/home',
-      isdark:false
+      isdark: false
     }
   },
   {
@@ -21,7 +21,7 @@ export default [
     meta: {
       title: '首页',
       highlightPath: '/home',
-      isdark:false
+      isdark: false
     }
   },
   {
@@ -31,7 +31,7 @@ export default [
     meta: {
       title: '下载',
       highlightPath: '/downLoad',
-      isdark:true
+      isdark: true
     }
   },
   {
@@ -42,7 +42,7 @@ export default [
       title: '谱库',
       highlightPath: '/musicLibrary',
       index: 2,
-      isdark:false
+      isdark: false
     }
   },
   {
@@ -53,7 +53,7 @@ export default [
       title: '曲谱详情',
       highlightPath: '/musicLibrary',
       index: 2,
-      isdark:true
+      isdark: true
     }
   },
 
@@ -65,7 +65,7 @@ export default [
       title: '搜索',
       index: 3,
       highlightPath: '/musicLibrary',
-      isdark:true
+      isdark: true
     }
   },
   {
@@ -76,7 +76,7 @@ export default [
       title: '专辑详情',
       index: 3,
       highlightPath: '/musicLibrary',
-      isdark:true
+      isdark: true
     }
   },
   {
@@ -87,7 +87,7 @@ export default [
       title: '视频课',
       index: 3,
       highlightPath: '/videoDetailList',
-      isdark:true
+      isdark: true
     }
   },
   {
@@ -98,7 +98,7 @@ export default [
       title: '视频课详情',
       index: 3,
       highlightPath: '/videoDetailList',
-      isdark:true
+      isdark: true
     }
   },
   //
@@ -109,8 +109,7 @@ export default [
     component: () => import('@/views/role-auth/teacherAuth'),
     meta: {
       title: '老师认证',
-      isdark:true
-
+      isdark: true
     }
   },
   {
@@ -119,13 +118,13 @@ export default [
     component: () => import('@/views/role-auth/musicAuth'),
     meta: {
       title: '音乐人认证',
-      isdark:true
-
+      isdark: true
     }
   },
   {
     path: '/userInfo',
     name: 'userInfo',
+    meta: { title: '用户信息', index: 5, isdark: true },
     component: () => import('@/views/user-info/index'),
     redirect: '/userInfo/practiceSetting',
     children: [
@@ -133,15 +132,13 @@ export default [
         path: '/userInfo/practiceSetting',
         name: 'userInfoPracticeSetting',
         component: () => import('@/views/user-info/practice-setting'),
-        meta: { title: '陪练课', index: 2,       isdark:true
-      }
+        meta: { title: '陪练课', index: 2, isdark: true }
       },
       {
         path: '/userInfo/liveClass',
         name: 'userInfoLiveClass',
         component: () => import('@/views/user-info/live-class'),
-        meta: { title: '直播课', index: 3 ,       isdark:true
-      }
+        meta: { title: '直播课', index: 3, isdark: true }
       },
       {
         path: '/userInfo/liveOperation',
@@ -152,16 +149,14 @@ export default [
           index: 4,
           hidden: true,
           activeMenu: 'userInfoLiveClass',
-          isdark:true
-
+          isdark: true
         }
       },
       {
         path: '/userInfo/videoClass',
         name: 'userInfoVideoClass',
         component: () => import('@/views/user-info/video-class'),
-        meta: { title: '视频课', index: 4,       isdark:true
-      }
+        meta: { title: '视频课', index: 4, isdark: true }
       },
       {
         path: '/userInfo/videoOperation',
@@ -172,16 +167,14 @@ export default [
           index: 4,
           hidden: true,
           activeMenu: 'userInfoVideoClass',
-          isdark:true
-
+          isdark: true
         }
       },
       {
         path: '/userInfo/musicClass',
         name: 'userInfoMusicClass',
         component: () => import('@/views/user-info/music-class'),
-        meta: { title: '我的曲谱', index: 5,      isdark:true
-      }
+        meta: { title: '我的曲谱', index: 5, isdark: true }
       },
       {
         path: '/userInfo/musicOperation',
@@ -192,8 +185,7 @@ export default [
           index: 4,
           hidden: true,
           activeMenu: 'userInfoMusicClass',
-          isdark:true
-
+          isdark: true
         }
       }
     ]
@@ -202,21 +194,20 @@ export default [
     path: '/studentInfo',
     name: 'studentInfo',
     component: () => import('@/views/student-info'),
+    meta: { title: '用户信息', index: 5, isdark: true },
     redirect: '/studentInfo/myScore',
     children: [
       {
         path: '/studentInfo/myScore',
         name: 'studentInfoMyScore',
         component: () => import('@/views/student-info/my-score'),
-        meta: { title: '我的曲谱', index: 5,       isdark:true
-      }
+        meta: { title: '我的曲谱', index: 5, isdark: true }
       },
       {
         path: '/studentInfo/myFollow',
         name: 'studentInfoMyFollow',
         component: () => import('@/views/student-info/my-follow'),
-        meta: { title: '我关注的老师', index: 5, hidden: true,       isdark:true
-      }
+        meta: { title: '我关注的老师', index: 5, hidden: true, isdark: true }
       }
     ]
   }

src/state.ts

@@ -1,6 +1,6 @@
 import { reactive } from 'vue'
 import request from './helpers/request'
-import { getAuth, getUserType } from './helpers/utils'
+import { getAuth, getUserType,setUserInfo } from './helpers/utils'
 
 type status = 'init' | 'login' | 'logout' | 'error'
 export const state = reactive({
@@ -21,14 +21,14 @@ export const getUserInfo = async () => {
   }
 
   try {
-    console.log(userType)
     const url =
       userType === 'TEACHER'
         ? '/api-website/teacher/queryUserInfo'
         : '/api-website/student/queryUserInfo'
     const res = await request.get(url)
     state.user.data = res.data || {}
-
+    // 存储登录人信息
+    setUserInfo(JSON.stringify(state.user.data))
     // 登录状态
     state.user.status = 'login'
   } catch {

src/views/albumDetail/index.module.less

@@ -88,6 +88,7 @@
         }
         .itemBottomL,
         .itemBottomR {
+
           display: flex;
           flex-direction: row;
           justify-content: flex-start;
@@ -96,6 +97,7 @@
       }
       .albumInfoRight {
         .itemBottomR {
+          cursor: pointer;
           display: flex;
           flex-direction: row;
           justify-content: flex-start;

src/views/albumDetail/index.tsx

@@ -1,6 +1,8 @@
 import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
 import hold from '@/components/albumItem/images/hold.png'
 import start from '@/components/albumItem/images/start.png'
+import lineStart from '@/components/albumItem/images/lineStart.png'
+
 import smallPan from '@/components/albumItem/images/pan.png'
 import classes from './index.module.less'
 import arrow from '@/components/musicLIstItem/images/arrow.png'
@@ -12,6 +14,7 @@ import pagination from '@/components/pagination'
 import albumItem from './modals/albumItem'
 import request from '@/helpers/request'
 import musicLIstItem from '@/components/musicLIstItem'
+import { getUserInfo, getUserType, getAuth } from '@/helpers/utils'
 import { useRoute, useRouter } from 'vue-router'
 import { watch } from 'fs'
 export default defineComponent({
@@ -22,14 +25,14 @@ export default defineComponent({
       default: ''
     }
   },
-  components: { tagItem, pagination, albumItem,musicLIstItem },
+  components: { tagItem, pagination, albumItem, musicLIstItem },
   setup(props, conent) {
     const state = reactive({
       title: props.title,
       hotList: [],
-      hotTagList:[],
-      relatedMusicAlbum:[],
-      id:'',
+      hotTagList: [],
+      relatedMusicAlbum: [],
+      id: '',
       musicList: [],
       pageInfo: {
         // 分页规则
@@ -38,11 +41,12 @@ export default defineComponent({
         total: 0, // 总条数
         page_size: [10, 20, 40, 50] // 选择限制显示条数
       },
-      details:{} as any
+      details: {} as any,
+      userType: ''
     })
     const route = useRoute()
     const getList = async () => {
-      try{
+      try {
         const res = await request.post('/api-website/open/music/album/detail', {
           data: {
             id: state.id,
@@ -50,24 +54,35 @@ export default defineComponent({
             rows: state.pageInfo.limit
           }
         })
-          state.details = res.data;
-          state.pageInfo.total = res.data.musicSheetList.total;
-          state.musicList = res.data.musicSheetList.rows;
-          state.hotList = res.data.hotMusicAlbum;
-          state.hotTagList = res.data.musicTagNames.split(',')||[]
-          state.relatedMusicAlbum = res.data.relatedMusicAlbum;
-      }catch(e){
+        state.details = res.data
+        state.pageInfo.total = res.data.musicSheetList.total
+        state.musicList = res.data.musicSheetList.rows
+        state.hotList = res.data.hotMusicAlbum
+        state.hotTagList = res.data.musicTagNames.split(',') || []
+        state.relatedMusicAlbum = res.data.relatedMusicAlbum
+      } catch (e) {
+        console.log(e)
+      }
+    }
+
+    const favoriteAlbum = async () => {
+      try {
+        const res = await request.post(`/api-website/music/album/favorite/${state.id}`, {
+        })
+       getList()
+      } catch (e) {
         console.log(e)
       }
     }
-    onMounted(()=>{
-      if(route.query.id){
+    onMounted(() => {
+      if (route.query.id) {
         state.id = route.query.id as string
       }
+      state.userType = getUserType()
       getList()
     })
-    const getDetail = (id:number|string)=>{
-      state.id = id as string;
+    const getDetail = (id: number | string) => {
+      state.id = id as string
       getList()
     }
     return () => (
@@ -78,14 +93,20 @@ export default defineComponent({
             <div class={classes.albumInfo}>
               <div class={classes.albumInfoTop}>
                 <div class={classes.albumInfoTopImg}>
-                  <img src={state.details.albumCoverUrl?state.details.albumCoverUrl:hold} alt="" class={classes.albumCover} />
+                  <img
+                    src={
+                      state.details.albumCoverUrl
+                        ? state.details.albumCoverUrl
+                        : hold
+                    }
+                    alt=""
+                    class={classes.albumCover}
+                  />
                   <img src={pan} alt="" class={classes.pan} />
                 </div>
                 <div class={classes.albumInfoTopConent}>
                   <h2>{state.details.albumName}</h2>
-                  <p>
-                    {state.details.albumDesc}
-                  </p>
+                  <p>{state.details.albumDesc}</p>
                   <div class={classes.tagWrap}>
                     {state.hotTagList.map((item: any) => {
                       return <tagItem title={item}></tagItem>
@@ -104,12 +125,20 @@ export default defineComponent({
                     <span>{state.details.favorite}人收藏</span>
                   </div>
                 </div>
-                <div class={classes.albumInfoRight}>
-                  <div class={classes.itemBottomR}>
-                    <img src={start} alt="" />
-                    <span>已收藏</span>
+                {state.userType == 'STUDENT' ? (
+                  <div class={classes.albumInfoRight}>
+                    <div
+                      class={classes.itemBottomR}
+                      onClick={() => favoriteAlbum()}
+                    >
+                      <img
+                        src={state.details.favorite ? lineStart : start}
+                        alt=""
+                      />
+                      <span>{state.details.favorite ? '已收藏' : '收藏'}</span>
+                    </div>
                   </div>
-                </div>
+                ) : null}
               </div>
             </div>
             <div class={classes.musicWrap}>
@@ -145,8 +174,12 @@ export default defineComponent({
               </div>
 
               <div class={classes.someWrap}>
-                {state.relatedMusicAlbum.map(item=> <albumItem detail={item} onAlbumDetail={(id)=>getDetail(id)}></albumItem>)}
-
+                {state.relatedMusicAlbum.map(item => (
+                  <albumItem
+                    detail={item}
+                    onAlbumDetail={id => getDetail(id)}
+                  ></albumItem>
+                ))}
               </div>
             </div>
             <div class={classes.some}>
@@ -162,7 +195,12 @@ export default defineComponent({
               </div>
 
               <div class={classes.someWrap}>
-              {state.hotList.map(item=> <albumItem detail={item} onAlbumDetail={(id)=>getDetail(id)}></albumItem>)}
+                {state.hotList.map(item => (
+                  <albumItem
+                    detail={item}
+                    onAlbumDetail={id => getDetail(id)}
+                  ></albumItem>
+                ))}
               </div>
             </div>
           </div>

src/views/main.ts

@@ -8,6 +8,8 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 // 引入模块后自动生效
 import '@vant/touch-emulator' // 处理移动端点击事件 vant 支持桌面端
 
+
+
 // import { state } from '@/state'
 
 const app = createApp(App)
@@ -20,4 +22,5 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
 
 app.use(router)
 
+
 app.mount('#app')

src/views/muiscDetial/index.module.less

@@ -44,6 +44,7 @@
       }
     }
     .musicContent {
+      page-break-after: always;
       width: 575px;
       min-height: 749px;
       margin: 0 auto;
@@ -159,10 +160,11 @@
     }
     .btooom {
       background-color: #fff;
+      padding-top: 25px;
       .teacherInfo {
         padding: 20px;
         background-color: #fff;
-        margin-bottom: 25px;
+
         .teacherHeadWrap {
           display: flex;
           flex-direction: row;
@@ -211,17 +213,21 @@
           }
           .teacherHeadRight {
             width: 67px;
-            height: 30px;
             background: #2dc7aa;
             border-radius: 21px;
-            font-size: 18px;
+            font-size: 16px;
             font-family: PingFangSC-Semibold, PingFang SC;
-            font-weight: 600;
             color: #ffffff;
             line-height: 30px;
             text-align: center;
             cursor: pointer;
           }
+          .teacherHeadRight.isStart {
+            border: 1px solid #2dc7aa;
+            background: #fff;
+            color: #2dc7aa;
+
+          }
         }
         //
         .courseWrap {

src/views/muiscDetial/index.tsx

@@ -13,6 +13,9 @@ import tagItem from '@/components/tagItem'
 import code from './images/code.png'
 import musicItem from './modals/musicItem'
 import request from '@/helpers/request'
+import { useRoute } from 'vue-router'
+import { getUserType } from '@/helpers/utils'
+import printJS from 'print-js'
 export default defineComponent({
   name: 'muiscDetial',
   props: {
@@ -27,33 +30,75 @@ export default defineComponent({
     musicItem
   },
   setup(props, conent) {
+    const route = useRoute()
     const state = reactive({
       title: props.title,
+      id: route.query.id,
       subjectId: '',
       subjectList: [],
       tagList: [],
       teacherDetail: {} as any,
-      musicList:[]
+      musicDetail: {} as any,
+      musicList: [],
+      mp3Type: '',
+      activeRow: {} as any,
+      showCode: false,
+      userType: ''
     })
+    const print = ref()
     const getMusicList = async () => {
       try {
-        const res = await request.post('/api-website/open/music/sheet/list', {
-          data: {
-            albumStatus: 'PASS',
-            page: 1,
-            rows: 5,
-            state: 1
+        const res = await request.get(
+          `/api-website/open/music/sheet/detail/${state.id}`,
+          {}
+        )
+
+        state.musicDetail = res.data
+        state.musicList = res.data.teacher.musicSheetList
+        state.subjectList = res.data.background
+        state.mp3Type = res.data.audioType
+        state.activeRow = res.data.background[0]
+        state.subjectId = res.data.background[0].id
+        state.teacherDetail = res.data.teacher
+      } catch (e) {
+        console.log(e)
+      }
+    }
+    const followVideo = async () => {
+      try {
+        const res = await request.get('/api-website/student/starOrUnStar', {
+          params: {
+            userId: state.teacherDetail.userId,
+            starStatus: state.teacherDetail.star ? 0 : 1
           }
         })
-
-        state.musicList = res.data.rows
+        getMusicList()
+        // state.otherVideoList = res.data
       } catch (e) {
         console.log(e)
       }
     }
-    onMounted(()=>{
+    const getDetail = (val: string | number) => {
+      state.id = val as string
+      getMusicList()
+    }
+    onMounted(() => {
+      state.userType = getUserType()
+      state.showCode = state.userType == 'STUDENT' ? true : false
       getMusicList()
     })
+    const printHander = () => {
+      printJS({
+        printable: 'containerPrint', // 元素id,不支持多个
+        type: 'html',
+        targetStyle: ['* '],
+        targetStyles: ['*'],
+        maxWidth: '', // 最大宽度，默认800,仅支持数字
+        style:
+          '@page{size:auto; margin: 0;}' +
+          '@media print { @page {size: landscape } }' // landscape  默认横向打印
+      } as any)
+    }
     return () => (
       <>
         <div class={classes.wall}></div>
@@ -68,45 +113,63 @@ export default defineComponent({
                   placeholder="请选择声部"
                 >
                   {state.subjectList.map((item: any) => (
-                    <ElOption key={item.id} value={item.id} label={item.name} />
+                    <ElOption
+                      key={item.id}
+                      value={item.id}
+                      label={item.track}
+                    />
                   ))}
                 </ElSelect>
               </div>
-              <div class={classes.titleRight}>
+              <div class={classes.titleRight}  onClick={() => printHander()}>
                 <img src={printIcon} alt="" />
                 <p>打印乐谱</p>
               </div>
             </div>
-            <div class={classes.musicContent}></div>
-            <div class={classes.showCode}>
-              <div class={classes.showCodeWrap}>
-                <img class={classes.close} src={iconClose} alt="" />
-                <img class={classes.code} src={code} alt="" />
-                <h2 class={classes.title}>酷乐秀</h2>
-                <p class={classes.conent}>扫码下载酷乐秀APP</p>
-                <p class={classes.subConent}>
-                  使用小酷Ai即可智能练习本首曲目哦！
-                </p>
-                <img src={banner} alt="" />
-              </div>
+            <div class={classes.musicContent} id='containerPrint' ref="print">
+              123
             </div>
-            <colVideo
-              src=""
-              styleValue={{
-                height: '68px',
-                bacground: '#333'
-              }}
-              type={'audto'}
-              settings={['captions', 'quality', 'speed', 'loop']}
-              class={classes.audios}
-            ></colVideo>
+            {state.showCode ? (
+              <div class={classes.showCode}>
+                <div class={classes.showCodeWrap}>
+                  <img
+                    class={classes.close}
+                    src={iconClose}
+                    alt=""
+                    onClick={() => {
+                      state.showCode = false
+                    }}
+                  />
+                  <img class={classes.code} src={code} alt="" />
+                  <h2 class={classes.title}>酷乐秀</h2>
+                  <p class={classes.conent}>扫码下载酷乐秀APP</p>
+                  <p class={classes.subConent}>
+                    使用小酷Ai即可智能练习本首曲目哦！
+                  </p>
+                  <img src={banner} alt="" />
+                </div>
+              </div>
+            ) : null}
+
+            {state.mp3Type == 'MP3' ? (
+              <colVideo
+                src={state.activeRow.audioFileUrl}
+                styleValue={{
+                  height: '68px',
+                  bacground: '#333'
+                }}
+                type={'audto'}
+                settings={['captions', 'quality', 'speed', 'loop']}
+                class={classes.audios}
+              ></colVideo>
+            ) : null}
           </div>
           <div class={classes.right}>
             <div class={classes.musicInfo}>
-              <h2>曲目：红莲华</h2>
+              <h2>曲目：{state.musicDetail.musicSheetName}</h2>
               <div class={classes.collect}>
                 <img src={start} class={classes.start} alt="" />
-                <p>321人收藏</p>
+                <p>{state.musicDetail.favoriteNum}人收藏</p>
               </div>
               <div class={classes.tagList}>
                 {state.tagList.map((item: any) => {
@@ -114,66 +177,79 @@ export default defineComponent({
                 })}
               </div>
               <p class={classes.subTitle}>
-                作曲人：<span>草野华余子</span>
+                作曲人：<span>{state.musicDetail.composer}</span>
               </p>
               <p class={classes.subTitle}>
-                声部：<span>长笛、萨克斯、单簧管</span>
+                声部：<span>{state.musicDetail.subjectNames}</span>
               </p>
             </div>
             <div class={classes.btooom}>
-              <div class={classes.teacherInfo}>
-                <div class={classes.teacherHeadWrap}>
-                  <div class={classes.teacherHeadLeft}>
-                    <img
-                      src={
-                        state.teacherDetail.avatar
-                          ? state.teacherDetail.avatar
-                          : teacherHeader
-                      }
-                      alt=""
-                      class={classes.teacherHeader}
-                    />
-                    <div class={classes.teacherHeadInfo}>
-                      <div class={classes.teacherHeadName}>
-                        <span>{state.teacherDetail.username}</span>
-                        {state.teacherDetail.teacherType &&
-                        state.teacherDetail.teacherType.indexOf('ENTRY') ==
-                          -1 ? (
-                          ''
-                        ) : (
-                          <img
-                            src={teacher}
-                            class={classes.teacherIcon}
-                            alt=""
-                          />
-                        )}
-                        {state.teacherDetail.teacherType &&
-                        state.teacherDetail.teacherType.indexOf('MUSICIAN') ==
-                          -1 ? (
-                          ''
-                        ) : (
-                          <img
-                            src={musiceIcon}
-                            class={classes.teacherIcon}
-                            alt=""
-                          />
-                        )}
+              {state.teacherDetail.userId ? (
+                <div class={classes.teacherInfo}>
+                  <div class={classes.teacherHeadWrap}>
+                    <div class={classes.teacherHeadLeft}>
+                      <img
+                        src={
+                          state.teacherDetail.avatar
+                            ? state.teacherDetail.avatar
+                            : teacherHeader
+                        }
+                        alt=""
+                        class={classes.teacherHeader}
+                      />
+                      <div class={classes.teacherHeadInfo}>
+                        <div class={classes.teacherHeadName}>
+                          <span>{state.teacherDetail.userName}</span>
+                          {!state.teacherDetail.entryFlag ? (
+                            ''
+                          ) : (
+                            <img
+                              src={teacher}
+                              class={classes.teacherIcon}
+                              alt=""
+                            />
+                          )}
+                          {!state.teacherDetail.musicianFlag ? (
+                            ''
+                          ) : (
+                            <img
+                              src={musiceIcon}
+                              class={classes.teacherIcon}
+                              alt=""
+                            />
+                          )}
+                        </div>
+                        <p class={classes.fens}>
+                          粉丝 <span>{state.teacherDetail.fansNum}</span>
+                        </p>
                       </div>
-                      <p class={classes.fens}>
-                        粉丝 <span>{state.teacherDetail.fansNum}</span>
-                      </p>
                     </div>
+                    {state.userType == 'STUDENT' ? (
+                      <div
+                        class={[
+                          classes.teacherHeadRight,
+                          state.teacherDetail.star ? classes.isStart : ''
+                        ]}
+                        onClick={() => followVideo()}
+                      >
+                        {state.teacherDetail.star ? '已关注' : '关注'}
+                      </div>
+                    ) : null}
                   </div>
-                  <div class={classes.teacherHeadRight}>关注</div>
                 </div>
-              </div>
+              ) : null}
+
               <div class={classes.otherMusic}>
                 <h2>Ta的曲谱</h2>
                 <div class={classes.otherMusicList}>
-                  {state.musicList.map(item=>{
-                    return  <musicItem item={item}></musicItem>
+                  {state.musicList.map(item => {
+                    return (
+                      <musicItem
+                        item={item}
+                        onMusicDetail={val => getDetail(val)}
+                      ></musicItem>
+                    )
                   })}
-
                 </div>
               </div>
             </div>

src/views/muiscDetial/modals/musicItem.tsx

@@ -3,6 +3,7 @@ import icon from '../videoDetailItem/images/icon.png'
 import classes from './musicItem.module.less'
 import music from '@/components/musicLIstItem/images/music.png'
 import arrow from '@/components/musicLIstItem/images/arrow.png'
+import { useRouter } from 'vue-router'
 
 type Props = {
   id?: Number
@@ -21,6 +22,7 @@ const chargeTypes = {
 
 export default defineComponent({
   name: 'musicItem',
+  emits:['musicDetail'],
   props: {
     item: {
       type: Object as () => Props,
@@ -31,7 +33,8 @@ export default defineComponent({
       default: (item: any) => {}
     }
   },
-  setup(props: any) {
+  setup(props: any,conent) {
+    const router = useRouter()
     const state = reactive({
       item:props.item
     })
@@ -42,13 +45,19 @@ export default defineComponent({
         state.item = item
       }
     )
+
+
+    const gotoMusicDetail = () => {
+      conent.emit('musicDetail',state.item.id)
+      // router.push({path:'/muiscDetial',query:{id:state.item.id}})
+    }
     return () => (
       <div
         onClick={() => {
           props.onClick(state.item)
         }}
       >
-        <div class={classes.itemWrap}>
+        <div class={classes.itemWrap} onClick={() => gotoMusicDetail()}>
           <div class={classes.left}>
             <div class={classes.imgWrap}>
               <img src={music} alt="" />

src/views/musicLibrary/index.tsx

@@ -67,8 +67,13 @@ export default defineComponent({
         console.log(e)
       }
     }
-    const gotoSearch = (val:string)=>{
-      router.push({path:'/searchdetail',query:{search:val}})
+    const gotoSearch = (val:string|object)=>{
+      if(typeof val == 'string'){
+        router.push({path:'/searchdetail',query:{search:val}})
+      }else{
+        router.push({path:'/searchdetail',query:{...val}})
+      }
+
     }
     const gotoMusic=()=>{
       router.push({path:'/searchdetail',query:{type:'music'}})
@@ -88,7 +93,7 @@ export default defineComponent({
                 <h4>热门专辑</h4>
                 <img src={titleDot} class={styles.dotImg} alt="" />
               </div> */}
-              <searchInput isWhile={false}></searchInput>
+              <searchInput isWhile={false} onStartSearch={(val:any)=>gotoSearch(val)}></searchInput>
               <hotSearch onHotTag={(val:string)=>{gotoSearch(val)}} type={''}></hotSearch>
               <h5 class={styles.hotAlbum}>热门专辑</h5>
               <div class={styles.albumList}>

src/views/musicLibrary/modals/searchAlbum.tsx

@@ -61,7 +61,7 @@ export default defineComponent({
       getAlbumList()
     }
     onMounted(() => {
-      // getAlbumList()
+      getAlbumList()
       // getMusicList()
     })
     return {

src/views/musicLibrary/modals/searchMusic.tsx

@@ -81,7 +81,7 @@ export default defineComponent({
     }
     onMounted(() => {
       // getAlbumList()
-      // getList(state.search)
+      getList(state.search)
     })
     return {
       ...toRefs(state),

src/views/musicLibrary/searchdetail.tsx

@@ -90,6 +90,9 @@ export default defineComponent({
       if(route.query.search){
         state.searchs.search = route.query.search as string
       }
+      if(route.query.subject){
+        state.searchs.subject = route.query.subject as string
+      }
       if(route.query.type){
         state.chiose = route.query.type as string
       }
@@ -116,8 +119,8 @@ export default defineComponent({
           <div class="wall" style={{ height: '70px' }}></div>
           <div class={styles.w1200}>
             <div class={styles.section}>
-              <searchInput isWhile={true} searchVal={this.searchs.search} onStartSearch={(val:any)=>{this.startSearch(val)}}></searchInput>
-              <hotSearch type={'search'} onSearchRust={(val:any)=>this.searchRust(val)} onHotTag={(val:string)=>{this.searchs.search = val}}></hotSearch>
+              <searchInput isWhile={true} searchVal={{...this.searchs}} onStartSearch={(val:any)=>{this.startSearch(val)}}></searchInput>
+              <hotSearch type={'search'} onSearchRust={(val:any)=>this.searchRust(val)} onHotTag={(val:string)=>{this.searchs.search = val}} ></hotSearch>
               <ElTabs class={styles.myTab} v-model={this.chiose}>
                 <ElTabPane label="专辑" name="album">
                   {this.chiose == 'album' ? <searchAlbum ref='searchAlbumRef'/> : null}

src/views/videoDetailList/index.module.less

@@ -140,17 +140,21 @@
       }
       .teacherHeadRight {
         width: 67px;
-        height: 30px;
         background: #2dc7aa;
         border-radius: 21px;
-        font-size: 18px;
+        font-size: 16px;
         font-family: PingFangSC-Semibold, PingFang SC;
-        font-weight: 600;
         color: #ffffff;
         line-height: 30px;
         text-align: center;
         cursor: pointer;
       }
+      .teacherHeadRight.isStart {
+        border: 1px solid #2dc7aa;
+        background: #fff;
+        color: #2dc7aa;
+
+      }
     }
     //
     .courseWrap {

src/views/videoDetailList/index.tsx

@@ -73,7 +73,7 @@ export default defineComponent({
           <div class="wall" style={{ height: '70px' }}></div>
           <div class={styles.w1200}>
             <div class={styles.section}>
-              <searchInput isWhile={true} searchVal={state.searchs.search} onStartSearch={(val:any)=>{startSearch(val)}}></searchInput>
+              <searchInput isWhile={true} searchVal={state.searchs} onStartSearch={(val:any)=>{startSearch(val)}}></searchInput>
               <hotSearch   onHotTag={(val:string)=>{gotoSearch(val)}} type={''}></hotSearch>
             </div>
             <div class={styles.videoList}>

src/views/videoDetailList/videoDetail.tsx

@@ -1,4 +1,11 @@
-import { defineComponent, toRefs, reactive, onMounted, ref,nextTick } from 'vue'
+import {
+  defineComponent,
+  toRefs,
+  reactive,
+  onMounted,
+  ref,
+  nextTick
+} from 'vue'
 
 // import classes from './index.module.less'
 import detaile from '@/components/videoDetailItem/images/detaile.png'
@@ -17,6 +24,7 @@ import colVideo from '@/components/col-video/index'
 import request from '@/helpers/request'
 import pagination from '@/components/pagination'
 import { useRoute } from 'vue-router'
+import { getUserInfo, getUserType, getAuth } from '@/helpers/utils'
 export default defineComponent({
   name: 'videoDetailList',
   props: {
@@ -60,7 +68,7 @@ export default defineComponent({
         updateTime: '',
         username: ''
       },
-      otherVideoList:[],
+      otherVideoList: [],
       teacherDetail: {} as any,
       id: '',
       pageInfo: {
@@ -69,12 +77,12 @@ export default defineComponent({
         page: 1, // 当前页
         total: 0, // 总条数
         page_size: [5, 20, 40, 50] // 选择限制显示条数
-      }
+      },
+      userType: ''
     })
 
     const route = useRoute()
     const getVideoList = async () => {
-      console.log('getVideoList',state.id)
       try {
         const res = await request.post(
           '/api-website/open/videoLessonGroup/info/page',
@@ -111,13 +119,13 @@ export default defineComponent({
       } catch (e) {}
     }
 
-    const getOther = async ()=>{
+    const getOther = async () => {
       try {
         const res = await request.post(
           '/api-website/open/videoLessonGroup/otherLesson',
           {
             data: {
-              videoLessonGroupId: state.id,
+              videoLessonGroupId: state.id
             }
           }
         )
@@ -127,15 +135,13 @@ export default defineComponent({
       }
     }
 
-    const getDetail = (val:string)=>{
-      state.id = val;
-      console.log(state.id,'getDetail')
-     nextTick(()=>{
-      _init()
-     })
-
+    const getDetail = (val: string) => {
+      state.id = val
+      nextTick(() => {
+        _init()
+      })
     }
-    const _init = ()=>{
+    const _init = () => {
       getVideoList()
       setTimeout(() => {
         getVideoDetail()
@@ -144,10 +150,28 @@ export default defineComponent({
         getOther()
       }, 150)
     }
+    const followVideo = async () => {
+      try {
+        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) {
+        console.log(e)
+      }
+    }
     onMounted(() => {
       if (route.query.id) {
         state.id = route.query.id as string
       }
+      state.userType = getUserType()
       _init()
     })
     return () => (
@@ -241,7 +265,14 @@ export default defineComponent({
                       </p>
                     </div>
                   </div>
-                  <div class={styles.teacherHeadRight}>关注</div>
+                  {state.userType == 'STUDENT' ? (
+                    <div
+                      class={[styles.teacherHeadRight,state.teacherDetail.isStar?styles.isStart:'']}
+                      onClick={() => followVideo()}
+                    >
+                      {state.teacherDetail.isStar?'已关注':'关注'}
+                    </div>
+                  ) : null}
                 </div>
                 <div class={styles.titleWrap}>
                   <img src={peopleIcon} alt="" />
@@ -255,20 +286,21 @@ export default defineComponent({
                   <span>老师风采</span>
                 </div>
                 <div class={styles.teacherVideoList}>
-                  {state.teacherDetail.styleVideo&&state.teacherDetail.styleVideo.map((item: any) => {
-                    return (
-                      <div class={styles.videoItem}>
-                        <colVideo
-                        styleValue={ {with:'218px',height:'145px'}}
-                          controls={true}
-                          src={item.videoUrl}
-                          class={styles.videoItemVideo}
-                        />
+                  {state.teacherDetail.styleVideo &&
+                    state.teacherDetail.styleVideo.map((item: any) => {
+                      return (
+                        <div class={styles.videoItem}>
+                          <colVideo
+                            styleValue={{ with: '218px', height: '145px' }}
+                            controls={true}
+                            src={item.videoUrl}
+                            class={styles.videoItemVideo}
+                          />
 
-                        {/* <img src={player} alt="" class={styles.player} /> */}
-                      </div>
-                    )
-                  })}
+                          {/* <img src={player} alt="" class={styles.player} /> */}
+                        </div>
+                      )
+                    })}
 
                   {/* <div class={styles.videoItem}>
                     <img src={detaile} alt="" class={styles.Styles} />
@@ -279,9 +311,17 @@ export default defineComponent({
               <div class={styles.otherCourse}>
                 <h2>其他课程</h2>
                 <div>
-                 {state.otherVideoList.map(item=>{
-                  return <videoDetailItem detail={item} isFull={true} onGetDetail={(val)=>{getDetail(val)}}></videoDetailItem>
-                 })}
+                  {state.otherVideoList.map(item => {
+                    return (
+                      <videoDetailItem
+                        detail={item}
+                        isFull={true}
+                        onGetDetail={val => {
+                          getDetail(val)
+                        }}
+                      ></videoDetailItem>
+                    )
+                  })}
 
                   {/* videoDetailItem */}
                 </div>