其他曲目&最近练习

src/page-instrument/component/the-music-list/index.module.less

@@ -1,91 +1,142 @@
-.fixedBtn {
-    position: fixed;
-    top: 50%;
-    right: 0;
-    transform: translateY(-50%);
-    width: 22px;
-    height: 42px;
-    background: rgba(0, 0, 0, 0.24);
-    border-radius: 9px 0px 0px 9px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    &:active {
-        opacity: .8;
-    }
-
-    &>img {
-        width: 12px;
-        height: 14px;
-    }
+.popup{
+    background:initial;
 }
-
 .tabs {
     height: 100vh;
-    width: 50vw;
-
+    width: 320px;
+    padding: 10px 0;
     :global {
-        .van-tabs {
+        .van-tabs{
             height: 100%;
-        }
-
-        .van-tabs__wrap {
-            height: 44px;
-            --van-tab-text-color: #777;
-
-            .van-tab {
-                z-index: 2;
+            .van-tabs__wrap{
+                display: flex;
+                justify-content: right;
+                height: 30px;
+                .van-tabs__nav--line{
+                    padding-bottom: 0;
+                    background-color: initial;
+                    .van-tab{
+                        flex: initial;
+                        .van-tab__text{
+                            display: none;
+                        }
+                        &:nth-child(1){
+                            width: 100px;
+                            height: 30px;
+                            background: url("./imgs/qtqm.png") no-repeat;
+                            background-size: 100% 100%;
+                            &.van-tab--active{
+                                background: url("./imgs/qtqmAct.png") no-repeat;
+                                background-size: 100% 100%;
+                            }
+                        }                   
+                        &:nth-child(2){
+                            margin-left: 24px;
+                            margin-right: 34px;
+                            width: 100px;
+                            height: 30px;
+                            background: url("./imgs/zjlx.png") no-repeat;
+                            background-size: 100% 100%;
+                            &.van-tab--active{
+                                background: url("./imgs/zjlxAct.png") no-repeat;
+                                background-size: 100% 100%;
+                            }
+                        }
+                    }
+                }
+                .van-tabs__line{
+                    display: none;
+                }
+            }
+            .van-tabs__content{
+                height: calc(100% - 30px);
+                background: url("./imgs/bg.png") no-repeat;
+                background-size: 100% 100%;
+                .van-tab__panel{
+                    height: 100%;
+                }
             }
         }
+    }
+}
 
-        .van-tabs__content {
-            height: calc(100% - 44px);
-            overflow: hidden;
+.wrap {
+    height: 100%;
+    padding: 18px 16px 12px 46px;
+    .searchBox{
+        display: flex;
+        align-items: center;
+        height: 34px;
+        background: #F8F9FC;
+        border-radius: 18px;
+        padding: 0 4px 0 12px;
+        border: 1px solid transparent;
+        &.isFocus{
+            border-color: #1CACF1;
         }
-
-        .van-tab__panel {
-            height: 100%;
-            overflow-x: hidden;
-            overflow-y: auto;
+        >img{
+            flex-shrink: 0;
+            width: 14px;
+            height: 14px;
         }
-
-        .van-tab--active::after {
-            content: '';
-            position: absolute;
-            bottom: 0;
-            left: 50%;
-            transform: translateX(-50%);
-            width: var(--van-tabs-bottom-bar-width);
-            height: var(--van-tabs-bottom-bar-height);
-            background: var(--van-tabs-bottom-bar-color);
-            border-radius: var(--van-tabs-bottom-bar-height);
+        :global{
+            .van-field{
+                margin: 0 6px;
+                flex-grow: 1;
+                padding: 0;
+                line-height: initial;
+                background: initial;
+                .van-field__control{
+                    font-weight: 400;
+                    font-size: 13px;
+                    color: #131415;
+                    &::placeholder{
+                        color: #AAAAAA;
+                    }
+                }
+            }
         }
-
-        .van-tabs__line {
-            transition-duration: 0s !important;
-            display: none;
+        .searchBtn{
+            flex-shrink: 0;
+            width: 54px;
+            height: 26px; 
+            line-height: 26px;
+            text-align: center;
+            background: linear-gradient(to right,#5BECFF,#259CFE);
+            border-radius: 18px;
+            font-weight: 500;
+            font-size: 13px;
+            color: #FFFFFF;
+            cursor: pointer;
+            &:active{
+                opacity: 0.8;
+            }
+        }
+    }
+    :global{
+        .van-list{
+            margin-top: 10px;
+            height: calc(100% - 44px);
+            overflow-y: auto;
         }
     }
-}
-
-.wrap {
-    padding: 4px 12px;
 }
 
 .item {
     display: flex;
     align-items: center;
-    // height: 41px;
-    // border-radius: 7px;
-    font-size: 13px;
-    font-family: PingFangSC-Regular, PingFang SC;
-    font-weight: 400;
-    color: #333333;
-    line-height: 18px;
-    padding: 12px 12px;
-    // margin: 10px 0;
-
+    background: #FFFFFF;
+    border-radius: 16px;
+    padding: 6px;
+    margin-bottom: 8px;
+    &.itemActive {
+        background: linear-gradient( 180deg, #FFFFFF 0%, #BFE1FF 100%);
+        box-shadow: 0px 2px 4px 0px #499FE4;
+        border: 3px solid #FFFFFF;
+        .content .name{
+            color: #2EAAFE;
+        }
+    }
     .titleImg {
         width: 51px;
         height: 51px;
@@ -94,40 +145,58 @@
         overflow: hidden;
         position: relative;
         flex-shrink: 0;
-    }
-
-    .iconType {
-        position: absolute;
-        width: 28px;
-        height: 14px;
-        right: 0;
-        top: 0;
-        z-index: 9;
-        border-top-right-radius: 8px !important;
-
-        // &.FREE {
-        //   background: url('../co-ai/image/icon-music-default.png') no-repeat center;
-        //   background-size: contain;
-        // }
-
-        &.VIP {
-            background: url('./icon-music-vip.png') no-repeat center;
-            background-size: contain;
+        .iconType {
+            position: absolute;
+            width: 28px;
+            height: 14px;
+            right: 0;
+            top: 0;
+            z-index: 9;
+            border-top-right-radius: 8px !important;
+            &.VIP {
+                background: url('./imgs/icon-music-vip.png') no-repeat center;
+                background-size: contain;
+            }
         }
     }
-
-    .author {
-        padding-top: 8px;
-        font-size: 13px;
-        color: #777777;
-        line-height: 1;
+    .content{
+        .name{
+            font-weight: 600;
+            font-size: 16px;
+            color: #333333;
+        }
+        .detail{
+            display: flex;
+            align-items: center;
+            margin-top: 8px;
+            .usedNum{
+                display: flex;
+                align-items: center;
+                padding: 3px 5px;
+                height: 17px;
+                background: #FFF8F7;
+                border-radius: 4px;
+                border: 1px solid #FFC5C5;
+                >img{
+                    width: 8px;
+                    height: 11px;
+                }
+                >div{
+                    margin-left: 3px;
+                    font-weight: 400;
+                    font-size: 12px;
+                    color: #FF6A6A
+                }
+            }
+            .author {
+                margin-left: 6px;
+                font-weight: 400;
+                font-size: 13px;
+                color: rgba(0,0,0,0.5);
+            }
+        }
     }
 }
-
-.itemActive {
-    background: #ECF9FF;
-}
-
 .noData {
     display: flex;
     justify-content: center;
@@ -135,5 +204,4 @@
     height: 100%;
     font-size: 14px;
     color: #999999;
-    height: 70vh;
 }

src/page-instrument/component/the-music-list/index.tsx

@@ -1,21 +1,23 @@
-import { defineComponent, reactive } from "vue";
+import { computed, defineComponent, ref } from "vue";
 import styles from "./index.module.less";
-import icon_menu from "./icon_menu.png";
 import { Popup, Tab, Tabs } from "vant";
 import List from "./list";
+import { followData } from "/src/view/follow-practice";
+import state, {IPlatform} from "/src/state";
+import { evaluatingData } from "/src/view/evaluating";
+import { getQuery } from "/src/utils/queryString";
 
+const query: any = getQuery();
+export const isMusicList = computed(()=>{
+	return !(state.playState == "play" || followData.start || evaluatingData.startBegin || query.workRecord || query.modelType || state.platform === IPlatform.PC || query.isCbs)
+})
+export const musicListShow = ref(false)
 export default defineComponent({
 	name: "TheMusicList",
 	setup() {
-		const data = reactive({
-			show: false,
-		});
 		return () => (
 			<>
-				<div class={styles.fixedBtn} onClick={() => (data.show = true)}>
-					<img src={icon_menu} />
-				</div>
-				<Popup position="right" v-model:show={data.show} round>
+				<Popup class={styles.popup} position="left" v-model:show={musicListShow.value} round overlay-style={{background:'rgba(0, 0, 0, 0.3)'}}>
 					<div class={styles.tabs}>
 						<Tabs>
 							<Tab title="其他曲谱">

src/page-instrument/component/the-music-list/list.tsx

@@ -2,9 +2,11 @@ import { defineComponent, onMounted, reactive, watch } from "vue";
 import styles from "./index.module.less";
 import { api_musicSheetPage } from "../../api";
 import state, { togglePlay } from "/src/state";
-import { List, Image } from "vant";
+import { List, Image, Field } from "vant";
 import { postMessage } from "/src/utils/native-message";
 import qs from "query-string";
+import searImg from "./imgs/searImg.png"
+import huoimg from "./imgs/huo.png"
 
 export default defineComponent({
   name: "TheMusicList-list",
@@ -16,6 +18,7 @@ export default defineComponent({
   },
   setup(props) {
     const forms = reactive({
+      name: "",
       page: 1,
       rows: 20,
       musicSheetCategoriesId: state.bizMusicCategoryId,
@@ -23,6 +26,7 @@ export default defineComponent({
       excludeMusicId: props.recentFlag ? null : state.examSongId,
     });
     const data = reactive({
+      isFocus: false,
       list: [] as any[],
       finished: false,
       loading: false,
@@ -46,6 +50,15 @@ export default defineComponent({
 
       data.loading = false;
     };
+    function handleQuery(){
+      forms.page = 1
+      forms.rows = 20
+      data.list = []
+      data.finished =false
+      data.loading = false
+      data.hasNext = true
+      getList()
+    }
     watch(
       () => props.recentFlag,
       () => {
@@ -78,6 +91,11 @@ export default defineComponent({
     };
     return () => (
       <div class={styles.wrap}>
+        <div class={[styles.searchBox,data.isFocus && styles.isFocus]}>
+          <img src={searImg} />
+          <Field placeholder="请输入曲目名称" v-model={forms.name} autocomplete="off" onFocus={()=>{ data.isFocus = true }} onBlur={()=>{ data.isFocus = false }} />
+          <div class={styles.searchBtn} onClick={handleQuery}>搜索</div>
+        </div>
         <List
           loading={data.loading}
           finished={data.finished}
@@ -96,7 +114,10 @@ export default defineComponent({
                 </div>
                 <div class={styles.content}>
                   <p class={styles.name}>{item.musicSheetName}</p>
-                  {item.composer && <p class={styles.author}>{item.composer}</p>}
+                  <div class={styles.detail}>
+                    {item.usedNum && <div class={styles.usedNum}><img src={huoimg}/><div>{item.usedNum}</div></div>}
+                    {item.composer && <p class={styles.author}>{item.composer}</p>}
+                  </div>
                 </div>
               </div>
             );

src/page-instrument/header-top/index.tsx

@@ -30,6 +30,7 @@ import Dragbom from "/src/view/plugins/useDrag/dragbom";
 import { getGuidance, setGuidance } from "../custom-plugins/guide-page/api";
 import ModeView from "./modeView"
 import { smoothAnimationState } from "../view-detail/smoothAnimation"
+import { isMusicList, musicListShow } from "../component/the-music-list";
 
 /** 头部数据和方法 */
 export const headTopData = reactive({
@@ -504,13 +505,17 @@ export default defineComponent({
             <img src={iconBack} class={['headTopBackBtn', styles.img, !headTopData.showBack && styles.hidenBack]} onClick={handleBack} />
             {
               state.modeType === "practise" && smoothAnimationState.isShow.value ? 
-                <div class={styles.title}>
+                <div class={styles.title} onClick={()=>{
+                  isMusicList.value && (musicListShow.value = true)
+                }}>
                   <NoticeBar
                     text={state.examSongName}
                     background="none"
                   />
               </div> :
-              <img src={listImg} class={[styles.img]} />
+              <img src={listImg} class={[styles.img]} onClick={()=>{
+                  isMusicList.value && (musicListShow.value = true)
+              }} />
             }
           </div>
           {/* 模式切换 */}

src/page-instrument/view-detail/index.tsx

@@ -23,7 +23,7 @@ import FollowPractice, { followData } from "/src/view/follow-practice";
 import FollowModel from "../follow-model";
 import RecordingTime from "../custom-plugins/recording-time";
 import WorkIndex from "../custom-plugins/work-index";
-import TheMusicList from "../component/the-music-list";
+import TheMusicList, { isMusicList } from "../component/the-music-list";
 import { storeData } from "/src/store";
 import ViewFigner from "../view-figner";
 import { recalculateNoteData } from "/src/view/selection";
@@ -522,7 +522,7 @@ export default defineComponent({
             {/* 作业 */}
             {query.workRecord && <WorkIndex />}
             {/* 曲谱列表 */}
-            {state.playState == "play" || followData.start || evaluatingData.startBegin || query.workRecord || query.modelType || state.platform === IPlatform.PC || query.isCbs ? null : <TheMusicList />}
+            {isMusicList.value && <TheMusicList />}
           </>
         )}
         <Popup