官网提交

1

src/components/banner/index.tsx

@@ -41,6 +41,9 @@ export default defineComponent({
         console.log(e)
       }
     }
+    const gotoBannerInfo = (item:any)=>{
+      window.open(item.linkUrl)
+    }
       onMounted(()=>{
         getBannerList()
       })
@@ -62,7 +65,7 @@ export default defineComponent({
         >
           {
           state.bannerList.map((item:any)=>{
-            return <swiper-slide><img src={item.coverImage} alt="" /></swiper-slide>
+            return < ><swiper-slide><img src={item.coverImage} alt=""  onClick={()=>{gotoBannerInfo(item)}} /></swiper-slide></>
           })
         }
 

src/views/home/index.tsx

@@ -8,6 +8,7 @@ import musicLIstItem from '@/components/musicLIstItem'
 import titleDot from './images/titleDot.png'
 import hotSearch from '@/components/hotSearch'
 import banner from '@/components/banner'
+
 import request from '@/helpers/request'
 import 'swiper/css'
 import 'swiper/css/navigation'
@@ -21,7 +22,7 @@ export default defineComponent({
     videoDetailItem,
     musicLIstItem,
     hotSearch,
-    banner
+    banner,
   },
   setup() {
     const state = reactive({

src/views/muiscDetial/index.module.less

@@ -331,6 +331,13 @@
       border: none !important;
       box-shadow: none !important;
     }
+    .el-input.is-focus{
+      .el-input__wrapper {
+        background-color: #f1f1f1;
+        border: none;
+        box-shadow: none !important;
+      }
+    }
   }
   audio::-webkit-media-controls-pane {
     background-color: #333;

src/views/muiscDetial/index.tsx

@@ -21,7 +21,7 @@ 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 { useRoute, useRouter } from 'vue-router'
 import { getUserType, vaildTeachingUrl } from '@/helpers/utils'
 import { imgToCanvas, addWatermark, convasToImg } from '@/helpers/imageFunction'
 import printJS from 'print-js'
@@ -41,6 +41,7 @@ export default defineComponent({
   },
   setup(props, conent) {
     const route = useRoute()
+    const router = useRouter()
     const state = reactive({
       title: props.title,
       id: route.query.id,
@@ -56,7 +57,7 @@ export default defineComponent({
       userType: '',
       accompanyUrl: '',
       imgData: '',
-      imgUrl:''
+      imgUrl: ''
     })
     const print = ref()
     const getMusicList = async () => {
@@ -69,11 +70,16 @@ export default defineComponent({
         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
+        if (state.subjectList && state.subjectList.length > 0) {
+          state.activeRow = res.data.background[0]
+          state.subjectId = res.data.background[0].id
+        }
+
         state.teacherDetail = res.data.teacher
         setAccompanyUrl()
+        console.log('调用')
       } catch (e) {
         console.log(e)
       }
@@ -94,6 +100,9 @@ export default defineComponent({
     }
     const getDetail = (val: string | number) => {
       state.id = val as string
+      router.push({
+        query: { ...route.query, id: state.id }
+      })
       getMusicList()
     }
     watch(
@@ -104,10 +113,10 @@ export default defineComponent({
     )
     const setAccompanyUrl = () => {
       let url = vaildTeachingUrl()
-      // state.accompanyUrl =
-      //   url +
-      //   `/accompany/colxiu-website.html?id=${state.id}&part-index=${state.subjectId}`
-      state.accompanyUrl = `http://192.168.3.8:3000/colxiu-website.html?id=${state.id}&part-index=${state.subjectId}`
+      state.accompanyUrl =
+        url +
+        `/accompany/colxiu-website.html?id=${state.id}&part-index=${state.subjectId}`
+      // state.accompanyUrl = `http://192.168.3.8:3000/colxiu-website.html?id=${state.id}&part-index=${state.subjectId}`
 
       // var iframe = document.getElementById('containerPrint') as any //获取id为svgframe的iframe对象
       // if (iframe.attachEvent) {
@@ -156,7 +165,7 @@ export default defineComponent({
       const canvas = addWatermark(tempCanvas, '酷乐秀')
       const imgUrl = convasToImg(canvas)
       const link = document.createElement('a')
-      link.setAttribute('download', state.musicDetail.musicSheetName)
+      link.setAttribute('download', state.musicDetail.musicSheetName + '.png')
 
       // 添加时间戳，防止浏览器缓存图片
       state.imgUrl = imgUrl
@@ -208,6 +217,7 @@ export default defineComponent({
             <div class={classes.musicContent}>
               {/*        id="iframe"       ref="iframe"*/}
               <iframe
+
                 id="containerPrint"
                 ref="print"
                 style="width: 100%;height:750px;page-break-after:always;"

src/views/musicLibrary/modals/searchAlbum.tsx

@@ -15,6 +15,7 @@ import 'swiper/css/pagination'
 import 'swiper/css/scrollbar'
 import { ElTabPane, ElTabs } from 'element-plus'
 import pagination from '@/components/pagination'
+import ColEmpty from '@/components/col-empty'
 export default defineComponent({
   name: 'searchdetail',
   components: {
@@ -22,19 +23,21 @@ export default defineComponent({
     silder,
     searchInput,
     albumItem,
-    pagination
+    pagination,
+    ColEmpty
   },
   setup() {
     const state = reactive({
       albumList: [],
       musicList: [],
       search: {},
+      isshowData: false,
       pageInfo: {
         // 分页规则
         limit: 5, // 限制显示条数
         page: 1, // 当前页
         total: 0, // 总条数
-        page_size: [10, 20, 40, 50] // 选择限制显示条数
+        page_size: [5,10, 20, 40, 50] // 选择限制显示条数
       }
     })
 
@@ -51,12 +54,17 @@ export default defineComponent({
 
         state.albumList = 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)
       }
     }
     const getList = (val: any) => {
-      state.search = { ...val }
+      state.search = { ...val,idAndName:val.search }
       state.pageInfo.page = 1
       getAlbumList()
     }
@@ -81,6 +89,7 @@ export default defineComponent({
                   return <albumItem detail={item}></albumItem>
                 })}
               </div>
+              {this.isshowData&&<ColEmpty></ColEmpty>}
             </div>
           </div>
         </div>
@@ -91,6 +100,7 @@ export default defineComponent({
           pageSizes={this.pageInfo.page_size}
           pagination={this.getAlbumList}
         />
+
       </div>
     )
   }

src/views/musicLibrary/modals/searchMusic.tsx

@@ -14,6 +14,7 @@ import 'swiper/css'
 import 'swiper/css/navigation'
 import 'swiper/css/pagination'
 import 'swiper/css/scrollbar'
+import ColEmpty from '@/components/col-empty'
 import { ElTabPane, ElTabs } from 'element-plus'
 export default defineComponent({
   name: 'searchMusic',
@@ -23,12 +24,14 @@ export default defineComponent({
     searchInput,
     albumItem,
     musicListItem,
-    pagination
+    pagination,
+    ColEmpty
   },
   setup() {
     const state = reactive({
       musicList: [],
       search: {},
+      isshowData:false,
       pageInfo: {
         // 分页规则
         limit: 5, // 限制显示条数
@@ -67,12 +70,16 @@ export default defineComponent({
 
         state.musicList = 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)
       }
     }
     const getList = (val: any) => {
-      console.log(val)
       state.search = {
         subjectIds: val.subject,
         musicTagIds: val.albumTagIds,
@@ -104,6 +111,8 @@ export default defineComponent({
               </div>
             </div>
           </div>
+          {this.isshowData&&<ColEmpty></ColEmpty> }
+
         </div>
         <pagination
           total={this.pageInfo.total}

src/views/videoDetailList/index.tsx

@@ -57,9 +57,11 @@ export default defineComponent({
     }
 
     const gotoSearch = (val: string) => {
+      console.log(val)
       state.searchs.search = val
     }
     const startSearch = (val: any) => {
+      console.log(val,'valstartSearch')
       state.searchs = {
         ...state.searchs,
         lessonSubject: val.subject,
@@ -78,7 +80,7 @@ export default defineComponent({
             <div class={styles.section}>
               <searchInput
                 isWhile={true}
-                searchVal={state.searchs.search}
+                // searchVal={state.searchs.search}
                 onStartSearch={(val: any) => {
                   startSearch(val)
                 }}