提交修改

1

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

@@ -22,7 +22,7 @@ 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'
+import { useRoute, useRouter } from 'vue-router'
 import request from '@/helpers/request'
 import mitt from '@/helpers/mitt'
 export default defineComponent({
@@ -45,6 +45,7 @@ export default defineComponent({
       console.log('mittFn')
       setUser()
     })
+    const route = useRoute()
     const router = useRouter()
     onMounted(() => {
       nextTick(() => {
@@ -72,12 +73,22 @@ export default defineComponent({
       const token = getAuth()
       let userType = ''
       let str = ''
+      let nowPath = route.path;
+
       if (states.userType == 'TEACHER') {
         userType = 'STUDENT'
         str = '学生'
+        if(nowPath.indexOf('userInfo')!= -1){
+          nowPath = '/studentInfo'
+        }
+
       } else {
         userType = 'TEACHER'
         str = '老师'
+        if(nowPath.indexOf('studentInfo')!= -1){
+          nowPath = '/userInfo'
+        }
+
       }
       ElMessageBox.confirm(`是否确定切换到${str}？`, '提示', {
         type: 'warning'
@@ -88,8 +99,12 @@ export default defineComponent({
             loginUserType: userType
           })
         )
-        router.push({ path: '/' })
-        window.location.reload()
+        router.push({ path: nowPath })
+        setTimeout(()=>{
+           window.location.reload()
+        },500)
+
+
       })
     }
     const logout = async () => {

src/components/hotSearch/index.tsx

@@ -24,6 +24,14 @@ export default defineComponent({
     searchType: {
       type: String,
       default: 'MUSIC'
+    },
+    gotoPath: {
+      type: String,
+      default: '/searchdetail'
+    },
+    isChiose: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props, conent) {
@@ -145,10 +153,21 @@ export default defineComponent({
     }
 
     const clickHotTag = (key: string) => {
+      if (props.isChiose) {
+        state.hotList.forEach(element => {
+          element.isCheck = false as never
+        })
+        state.hotList.forEach(element => {
+          if (element.key == key) {
+            element.isCheck = true as never
+          }
+        })
+      }
+
       conent.emit('hotTag', key)
     }
     const gotoSearch = () => {
-      router.push({ path: '/searchdetail' })
+      router.push({ path: props.gotoPath })
     }
     onMounted(() => {
       getHotList()
@@ -168,6 +187,8 @@ export default defineComponent({
                     <tagItem
                       title={item.key}
                       onSearchTag={key => clickHotTag(key)}
+                      isChiose={true}
+                      item={item}
                     >
                       {item.key}
                     </tagItem>
@@ -205,7 +226,6 @@ export default defineComponent({
                       closable
                       onClose={() => closeChioseTag(item)}
                       class="chioseTag"
-
                     >
                       {item.name}
                     </ElTag>
@@ -213,7 +233,12 @@ export default defineComponent({
                 })}
               </div>
               <div class={classes.searchResultRight}>
-                <div class={classes.clearBtn} onClick={()=>{state.showDetail = true}}>
+                <div
+                  class={classes.clearBtn}
+                  onClick={() => {
+                    state.showDetail = true
+                  }}
+                >
                   <span>收起</span>
                   <img src={arrows} class={classes.clearIcon} alt="" />
                 </div>

src/components/searchInput/index.tsx

@@ -46,8 +46,11 @@ export default defineComponent({
     watch(
       () => props.searchVal,
       searchVal => {
+        // console.log(searchVal,'searchVal')
         state.search = searchVal.search?searchVal.search:''
         state.subject = Number(props.searchVal.subject)?Number(props.searchVal.subject):''
+      },{
+        deep:true
       }
     )
     const getSubjectList = async () => {

src/components/tagItem/index.module.less

@@ -1,8 +1,8 @@
 .tag {
   cursor: pointer;
-  color: #2dc7aa;
+  // color: #2dc7aa;
   line-height: 24px;
-  background: #e9f6f4;
+  // background: #e9f6f4;
   border-radius: 4px;
   border: 1px solid #2dc7aa;
   padding: 0 12px;

src/components/tagItem/index.tsx

@@ -1,5 +1,5 @@
 
-import { defineComponent , toRefs, reactive, onMounted, ref } from 'vue'
+import { defineComponent , toRefs, reactive, onMounted, ref,watch } from 'vue'
 import { ElTag } from 'element-plus'
 import classes from './index.module.less'
 
@@ -10,18 +10,43 @@ export default defineComponent({
     title: {
       type: String,
       default: ''
+    },
+    isChiose: {
+      type: Boolean,
+      default: false
+    },
+    item:{
+      type: Object,
+      default: {isCheck:false}
     }
   },
   setup(props, conent) {
     const state = reactive({
-      title:props.title
+      title:props.title,
+      isCheck:props.item.isCheck
     })
     const shioseTag =(key:string)=>{
       conent.emit('searchTag',key)
     }
+    watch(
+      () => props.item,
+      item => {
+        console.log(item)
+        state.isCheck = item.isCheck
+      },
+      {
+        deep:true
+      }
+    )
+    const checkDrak = ()=>{
+
+      if(props.isChiose){
+        state.isCheck = true
+      }
+    }
     return () => (
       <>
-        <ElTag  onClick={()=>shioseTag(state.title)} class={classes.tag}>{state.title}</ElTag>
+        <ElTag  effect={state.isCheck ? 'dark' : 'light'} onClick={()=>shioseTag(state.title)} class={classes.tag}>{state.title}</ElTag>
       </>
     )
   }

src/views/home/index.tsx

@@ -22,7 +22,7 @@ export default defineComponent({
     videoDetailItem,
     musicLIstItem,
     hotSearch,
-    banner,
+    banner
   },
   setup() {
     const state = reactive({
@@ -63,13 +63,12 @@ export default defineComponent({
         console.log(e)
       }
     }
-    const gotoSearch = (val:string)=>{
-      router.push({path:'/searchdetail',query:{search:val}})
+    const gotoSearch = (val: string) => {
+      router.push({ path: '/searchdetail', query: { search: val } })
     }
 
-
-    const gotoVideoList = ()=>{
-      router.push({path:'/videoDetailList'})
+    const gotoVideoList = (val: string) => {
+      router.push({ path: '/videoDetailList', query: { search: val } })
     }
     //
     onMounted(() => {
@@ -82,15 +81,20 @@ export default defineComponent({
         <div class="bg-white">
           <div class={styles.w1200}>
             <div class={styles.section}>
-              <div class={[styles.titleWrap,styles.mb48]}>
+              <div class={[styles.titleWrap, styles.mb48]}>
                 <img src={titleDot} class={styles.dotImg} alt="" />
                 <h4>热门专辑</h4>
                 <img src={titleDot} class={styles.dotImg} alt="" />
               </div>
-              <hotSearch searchType='MUSIC' onHotTag={(val:string)=>{gotoSearch(val)}}></hotSearch>
+              <hotSearch
+                searchType="MUSIC"
+                onHotTag={(val: string) => {
+                  gotoSearch(val)
+                }}
+              ></hotSearch>
               <div class={styles.albumList}>
                 {state.albumList.map(item => {
-                  return  <albumItem detail={item} ></albumItem>
+                  return <albumItem detail={item}></albumItem>
                 })}
               </div>
             </div>
@@ -99,18 +103,25 @@ export default defineComponent({
         <div>
           <div class={styles.w1200}>
             <div class={styles.section}>
-              <div class={[styles.titleWrap,styles.mb32]}>
+              <div class={[styles.titleWrap, styles.mb32]}>
                 <img src={titleDot} class={styles.dotImg} alt="" />
                 <h4>精品视频课</h4>
                 <img src={titleDot} class={styles.dotImg} alt="" />
               </div>
-              <div class={styles.videoNav}>
+              {/* <div class={styles.videoNav}>
                 <h5>精品视频课</h5>
                 <div class={styles.wrapRight} onClick={()=>gotoVideoList()}>
                   <span>更多</span>
                   <img class={styles.arrow} src={arrow} alt="" />
                 </div>
-              </div>
+              </div> */}
+              <hotSearch
+                searchType="COURSE"
+                onHotTag={(val: string) => {
+                  gotoVideoList(val)
+                }}
+                gotoPath='/videoDetailList'
+              ></hotSearch>
               <div class={styles.videoList}>
                 {state.videoList.map(item => {
                   return <videoDetailItem detail={item}></videoDetailItem>

src/views/musicLibrary/searchdetail.tsx

@@ -151,6 +151,7 @@ export default defineComponent({
                     this.searchs.search = val
                     this.search()
                   }}
+                  isChiose={true}
                 ></hotSearch>
               </div>
               <div class={styles.myTabWrap}>

src/views/videoDetailList/index.tsx

@@ -7,6 +7,8 @@ import searchInput from '@/components/searchInput'
 import videoDetailItem from '@/components/videoDetailItem'
 import request from '@/helpers/request'
 import pagination from '@/components/pagination'
+import { useRoute } from 'vue-router'
+import ColEmpty from '@/components/col-empty'
 export default defineComponent({
   name: 'videoDetailList',
   props: {
@@ -19,7 +21,8 @@ export default defineComponent({
     hotSearch,
     searchInput,
     videoDetailItem,
-    pagination
+    pagination,
+    ColEmpty
   },
   setup(props, conent) {
     const state = reactive({
@@ -33,9 +36,10 @@ export default defineComponent({
         page: 1, // 当前页
         total: 0, // 总条数
         page_size: [9, 20, 40, 50] // 选择限制显示条数
-      }
+      },
+      isshowData:false
     })
-
+    const route = useRoute()
     const getVideoList = async () => {
       console.log('请求接口')
       try {
@@ -52,6 +56,11 @@ export default defineComponent({
         )
         state.videoList = res.data.rows
         state.pageInfo.total = res.data.total
+        if (state.pageInfo.total == 0) {
+          state.isshowData = true
+        } else {
+          state.isshowData = false
+        }
       } catch (e) {
         console.log(e)
       }
@@ -64,7 +73,6 @@ export default defineComponent({
         lessonSubject: val.subject,
         search: val.search
       }
-      console.log(val, 'valstartSearch')
       getVideoList()
     }
     const gotoSearch = (val: string) => {
@@ -72,6 +80,12 @@ export default defineComponent({
       startSearch( state.searchs)
     }
     onMounted(() => {
+      if (route.query.search) {
+        state.searchs.search = route.query.search as string
+      }
+      if (route.query.subject) {
+        state.searchs.lessonSubject = route.query.subject as string
+      }
       getVideoList()
     })
     return () => (
@@ -103,6 +117,7 @@ export default defineComponent({
                 return <videoDetailItem detail={item}></videoDetailItem>
               })}
             </div>
+            {state.isshowData&&<ColEmpty></ColEmpty>}
             <pagination
               total={state.pageInfo.total}
               v-model:page={state.pageInfo.page}

src/views/videoDetailList/modals/videoCourseItem.module.less

@@ -4,7 +4,9 @@
   margin-bottom: 12px;
   .videoImgWrapImg {
     width: 240px;
+    height: 135px;
     margin-right: 10px;
+    max-width: 240px!important;
   }
   .videoImgWrap {
     cursor: pointer;