修改

src/components/the-vip/index.module.less

@@ -1,8 +1,8 @@
 .container {
   position: relative;
   width: 278px;
-  height: 256px;
-  background: url('./icon_bg.png') no-repeat;
+  height: 213px;
+  background: url('./icon_bg2.png') no-repeat;
   background-size: 100%;
   display: flex;
   flex-direction: column;
@@ -25,7 +25,7 @@
 
 .content {
   position: relative;
-  padding: 75px 13px 25px 13px;
+  padding: 40px 20px 20px 20px;
   font-size: 14px;
   font-weight: 400;
   color: #333333;
@@ -34,10 +34,7 @@
 }
 
 .btns {
-  width: 159px;
-  margin: 0 auto;
   display: flex;
-  flex-direction: column;
   justify-content: center;
   font-size: 16px;
   color: #777;
@@ -46,6 +43,11 @@
 
   img {
     width: 100%;
-    margin-bottom: 9px;
+    height: 38px;
+    width: 111px;
+  }
+
+  .btn:last-child {
+    margin-left: 9px;
   }
 }

src/components/the-vip/index.tsx

@@ -1,8 +1,9 @@
 import { defineComponent } from 'vue';
 import icon_bg from './icon_bg.png';
 import icon_title from './icon_title.png';
-import icon_btn from './icon_btn.png';
-import icon_close from './icon_close.png';
+import icon_btn from './icon-sure.png';
+// import icon_close from './icon_close.png';
+import icon_cancel from './icon-cancel.png'
 import styles from './index.module.less';
 
 export default defineComponent({
@@ -11,17 +12,22 @@ export default defineComponent({
   setup(props, { emit }) {
     return () => (
       <div class={styles.container}>
-        <img
+        {/* <img
           class={styles.close}
           src={icon_close}
           onClick={() => emit('close')}
-        />
+        /> */}
         {/* <img class={styles.title} src={icon_title} /> */}
         <div class={styles.content}>
           立即开通<span style={{ color: '#FF5A56' }}>"乐器AI学练工具"</span>
           服务，解锁更多专属权益，享受全新学习体验！
         </div>
         <div class={styles.btns}>
+        <img
+            class={styles.btn}
+            src={icon_cancel}
+            onClick={() => emit('close')}
+          />
           <img
             class={styles.btn}
             src={icon_btn}

src/styles/index.less

@@ -293,4 +293,32 @@ body {
 
 .fontBlod {
   font-weight: bold;
+}
+
+.transferStaff {
+  .van-popover__content {
+    padding: 5px 0;
+  }
+  .van-popover__action  {
+    border-radius: 4px;
+    height: auto;
+    margin: 3px 8px;
+    padding: 6px 7px;
+    --van-border-width: 0;
+    text-align: left;
+    &.fontBlod {
+      background: #EEF8FF;
+    }
+  }
+}
+.transferStaffSection {
+  --van-popover-action-width: 142px;
+
+  .van-popover__action-text {
+    white-space: nowrap;
+    overflow: hidden;
+    display: block;
+    text-overflow: ellipsis;
+
+  }
 }

src/views/hot-music-more/index.module.less

@@ -273,7 +273,7 @@
   max-height: 367px;
   overflow-x: hidden;
   overflow-y: auto;
-  padding: 0 15px 30px;
+  padding: 0 15px 18px;
 
 
   &::-webkit-scrollbar {
@@ -328,20 +328,29 @@
   color: #333333;
   height: 55px;
   line-height: 55px;
-  border-bottom: 1px solid #F2F2F2;
-  margin: 0 15px;
+  border-top: 1px solid #F2F2F2;
+  padding: 18px 13px;
+  background-color: #fff;
+  box-sizing: content-box;
 
   .cancel,
   .confirm {
-    font-size: 14px;
     font-weight: 400;
-    line-height: 20px;
-    color: #777777;
-    padding: 0 7px;
+    font-size: 16px;
+    color: #333333;
+    line-height: 44px;
+    text-align: center;
+    flex: 1;
+    background: #FFFFFF;
+    border-radius: 22px;
+    border: 1px solid #DBDBDB;
   }
 
   .confirm {
-    color: #1CACF1;
+    color: #fff;
+    border: none;
+    background: linear-gradient( 90deg, #44C9FF 0%, #259CFE 100%);
+    margin-left: 15px;
   }
 
 }
@@ -453,10 +462,16 @@
   z-index: 999;
   overflow: hidden;
   top: var(--header-height);
+  pointer-events: none;
+
+  &.searchNo {
+    height: 0 !important;
+  }
 
   :global {
     .van-overlay, .van-popup {
-      position: absolute
+      position: absolute;
+      pointer-events: auto;
     }
   }
 }

src/views/hot-music-more/index.tsx

@@ -14,11 +14,11 @@ import MSticky from '@/components/m-sticky';
 import MHeader from '@/components/m-header';
 import { useRoute, useRouter } from 'vue-router';
 import MSearch from '@/components/m-search';
-import { Cell, DropdownItem, DropdownMenu, Icon, Image, List, Popup, Tab, Tabs } from 'vant';
+import { Cell, Icon, Image, List, Popup, Tab, Tabs } from 'vant';
 import iconPlayer from './images/icon-player.png';
 import iconFire from './images/icon-fire.png';
 import iconTitleArrow from './images/icon-title-arrow.png';
-import { api_musicSheetCategoriesPage, api_musicSheetPage } from '../co-ai/api';
+import { api_musicSheetPage } from '../co-ai/api';
 import { state as baseState } from '@/state';
 import request from '@/helpers/request';
 import MEmpty from '@/components/m-empty';
@@ -113,7 +113,7 @@ export default defineComponent({
   name: 'hot-music-more',
   setup() {
     const router = useRouter();
-    const route = useRoute()
+    const route = useRoute();
     const state = reactive({
       background: 'transparent',
       loading: false,
@@ -140,13 +140,13 @@ export default defineComponent({
         musicalInstrumentId: ''
       },
       hotSearch: {
-        name: '',
+        name: ''
       },
       newSearch: {
-        name: '',
+        name: ''
       },
       recommendSearch: {
-        name: '',
+        name: ''
       }
     });
 
@@ -155,7 +155,7 @@ export default defineComponent({
       rows: 20,
       status: 1,
       sortType: 2, // 默认热度排序
-      keyword: '', // 关键词
+      keyword: '' // 关键词
     });
 
     const data = reactive({
@@ -167,16 +167,16 @@ export default defineComponent({
     });
 
     const searchValue = computed(() => {
-      if(state.tabActive === 'RECOMMEND') {
-        return state.recommendSearch.name
-      } else if(state.tabActive === 'HOT') {
-        return state.hotSearch.name
-      } else if(state.tabActive === 'NEW') {
-        return state.newSearch.name
+      if (state.tabActive === 'RECOMMEND') {
+        return state.recommendSearch.name;
+      } else if (state.tabActive === 'HOT') {
+        return state.hotSearch.name;
+      } else if (state.tabActive === 'NEW') {
+        return state.newSearch.name;
       } else {
-        return state.allSearch.name
+        return state.allSearch.name;
       }
-    })
+    });
 
     let isClick = false;
     const getMusicList = async () => {
@@ -188,15 +188,15 @@ export default defineComponent({
         let params = {
           ...result,
           searchType: state.tabActive
-        } as any
-        if(state.tabActive === 'RECOMMEND') {
+        } as any;
+        if (state.tabActive === 'RECOMMEND') {
           params = Object.assign(params, state.recommendSearch);
-        } else if(state.tabActive === 'HOT') {
+        } else if (state.tabActive === 'HOT') {
           params = Object.assign(params, state.hotSearch);
-        } else if(state.tabActive === 'NEW') {
+        } else if (state.tabActive === 'NEW') {
           params = Object.assign(params, state.newSearch);
         } else {
-          params.name = state.allSearch.name
+          params.name = state.allSearch.name;
           params = Object.assign(params, state.allSearch);
         }
         const res = await api_musicSheetPage(params);
@@ -248,24 +248,9 @@ export default defineComponent({
       state.musics = [];
       state.finished = false;
       getMusicList();
-    }
+    };
 
     const onDetail = (item: any) => {
-      // const src = `${vaildMusicScoreUrl()}/instrument/?id=${
-      //   item?.id
-      // }&showGuide=true&modelType=practise`;
-
-      // postMessage({
-      //   api: 'openAccompanyWebView',
-      //   content: {
-      //     url: src,
-      //     orientation: 0,
-      //     isHideTitle: true,
-      //     statusBarTextColor: false,
-      //     isOpenLight: true,
-      //     c_orientation: 0 // 0 横屏 1 竖屏
-      //   }
-      // });
       state.item = item;
       state.musicDetailPopup = true;
     };
@@ -292,7 +277,6 @@ export default defineComponent({
       data.childSelectId = null;
       let children: any;
       let columnName = '';
-      console.log(item, 'item');
       if (item.children) {
         children = [
           {
@@ -312,8 +296,6 @@ export default defineComponent({
       } else {
         data.selectParents = {};
       }
-
-      // onSearch();
     };
 
     const formatUsedNum = (num: number) => {
@@ -326,9 +308,9 @@ export default defineComponent({
     };
 
     // 判断是否有数据
-    const isSearch = computed(() => {
-      return data.tags.length > 0 ? true : false;
-    });
+    // const isSearch = computed(() => {
+    //   return data.tags.length > 0 ? true : false;
+    // });
 
     const handleGoto = (
       item: any,
@@ -366,9 +348,9 @@ export default defineComponent({
     };
 
     onMounted(async () => {
-      if(route.query.type) {
-        state.tabActive = route.query.type
-        state.isAllStatus = false
+      if (route.query.type) {
+        state.tabActive = route.query.type;
+        state.isAllStatus = false;
       }
       // 场景
       const tempAudio = Object.keys(audioPlayType).map(key => {
@@ -382,15 +364,11 @@ export default defineComponent({
       state.loading = true;
 
       await getTags();
-      // await getSubjecList();
-      // await getMusicSheetCategories();
       await getMusicTagTree();
       getMusicList();
     });
     return () => (
-      // sortType： 2
       <div
-        id="hotMusicMore"
         class={[
           styles.hotMusicMore,
           browser().isTablet ? styles.hotMusicMoreTablet : ''
@@ -420,18 +398,19 @@ export default defineComponent({
                     shrink
                     onClickTab={() => {
                       if (state.tabActive === '') {
-                        if(state.isAllStatus) {
-                          state.searchPopup = !state.searchPopup
+                        if (state.isAllStatus) {
+                          state.searchPopup = !state.searchPopup;
+
+                          if (state.searchPopup) {
+                          }
                         } else {
                           state.isAllStatus = true;
-                          onSearch()
+                          onSearch();
                         }
                       } else {
                         state.isAllStatus = false;
-                        onSearch()
+                        onSearch();
                       }
-
-                      
                     }}>
                     <Tab name="">
                       {{
@@ -459,21 +438,19 @@ export default defineComponent({
           </MHeader>
 
           <MSearch
-            // background={state.background}
             v-model:modelValue={searchValue.value}
             background={'transparent'}
             onSearch={(val: any) => {
-              // musicForms.keyword = val;
-              if(state.tabActive === 'RECOMMEND') {
-                state.recommendSearch.name = val
-              } else if(state.tabActive === 'HOT') {
-                state.hotSearch.name = val
-              } else if(state.tabActive === 'NEW') {
-                state.newSearch.name = val
+              if (state.tabActive === 'RECOMMEND') {
+                state.recommendSearch.name = val;
+              } else if (state.tabActive === 'HOT') {
+                state.hotSearch.name = val;
+              } else if (state.tabActive === 'NEW') {
+                state.newSearch.name = val;
               } else {
-                state.allSearch.name = val
+                state.allSearch.name = val;
               }
-              onSearch()
+              onSearch();
             }}></MSearch>
         </MSticky>
         <List
@@ -545,132 +522,134 @@ export default defineComponent({
         )}
 
         <Teleport to={'body'}>
-          <div class={styles.searchBodySection}>
-          <Popup position="top" round v-model:show={state.searchPopup}>
-          <div class={styles.searchContainer}>
-            <div class={styles.searchHead}>
-              <span
-                class={styles.cancel}
-                onClick={() => (state.searchPopup = false)}>
-                取消
-              </span>
-              <span>筛选</span>
-              <span
-                class={styles.confirm}
-                onClick={() => {
-                  state.allSearch.bookVersionId =
-                    data.childSelectId || data.tagActiveId;
-                  state.allSearch.audioPlayTypes = state.sAPT
-                    ? state.sAPT === 'PLAY_SING'
-                      ? ['SING', 'PLAY']
-                      : [state.sAPT]
-                    : [];
-                  state.allSearch.musicTagIds = state.sNt;
-                  state.searchPopup = false;
-                  onSearch()
-                }}>
-                确定
-              </span>
-            </div>
-
-            <div class={styles.changeSubjectContainer}>
-              {state.newTags.length > 0 && (
-                <>
-                  <div class={styles.title}>标签</div>
-                  <div class={styles.subjectContainer}>
-                    {state.newTags.map((subject: any) => (
-                      <div
-                        class={[
-                          styles.subjectItem,
-                          styles.subjectItem4,
-                          subject.id === state.sNt && styles.active
-                        ]}
-                        onClick={() => {
-                          state.sNt = subject.id;
-                        }}>
-                        {subject.name}
-                      </div>
-                    ))}
-                  </div>
-                </>
-              )}
-
-              {state.audioPlayTypeList.length > 0 && (
-                <>
-                  <div class={styles.title}>场景</div>
-                  <div class={styles.subjectContainer}>
-                    {state.audioPlayTypeList.map((subject: any) => (
-                      <div
-                        class={[
-                          styles.subjectItem,
-                          styles.subjectItem4,
-                          subject.id === state.sAPT && styles.active
-                        ]}
-                        onClick={() => {
-                          state.sAPT = subject.id;
-                        }}>
-                        {subject.name}
+          <div class={[styles.searchBodySection]}>
+            <Popup position="top" round v-model:show={state.searchPopup}>
+              <div class={styles.searchContainer}>
+                <div class={styles.changeSubjectContainer}>
+                  {state.newTags.length > 0 && (
+                    <>
+                      <div class={styles.title}>标签</div>
+                      <div class={styles.subjectContainer}>
+                        {state.newTags.map((subject: any) => (
+                          <div
+                            class={[
+                              styles.subjectItem,
+                              styles.subjectItem4,
+                              subject.id === state.sNt && styles.active
+                            ]}
+                            onClick={() => {
+                              state.sNt = subject.id;
+                            }}>
+                            {subject.name}
+                          </div>
+                        ))}
                       </div>
-                    ))}
-                  </div>
-                </>
-              )}
-
-              {data.tags.length > 0 && (
-                <>
-                  <div class={styles.title}>
-                    {data.tags[0]?.columnName}
-
-                    {state.isTagExpand && (
-                      <span onClick={() => (state.isTagExpand = false)}>
-                        收起
-                        <Icon name="arrow-up" />
-                      </span>
-                    )}
-                  </div>
-                  <div class={styles.subjectContainer}>
-                    {data.tags.map(
-                      (subject: any, index: number) =>
-                        ((!state.isTagExpand && index <= 4) ||
-                          state.isTagExpand) && (
+                    </>
+                  )}
+
+                  {state.audioPlayTypeList.length > 0 && (
+                    <>
+                      <div class={styles.title}>场景</div>
+                      <div class={styles.subjectContainer}>
+                        {state.audioPlayTypeList.map((subject: any) => (
                           <div
                             class={[
                               styles.subjectItem,
-                              // !state.isTagExpand && index > 4 && styles.subjectItemHide,
-                              (subject.id || '') === (data.tagActiveId || '') &&
-                                styles.active
+                              styles.subjectItem4,
+                              subject.id === state.sAPT && styles.active
                             ]}
                             onClick={() => {
-                              changeTag(subject);
+                              state.sAPT = subject.id;
                             }}>
                             {subject.name}
                           </div>
-                        )
-                    )}
-
-                    {!state.isTagExpand && (
+                        ))}
+                      </div>
+                    </>
+                  )}
+
+                  {data.tags.length > 0 && (
+                    <>
+                      <div class={styles.title}>
+                        {data.tags[0]?.columnName}
+
+                        {state.isTagExpand && (
+                          <span onClick={() => (state.isTagExpand = false)}>
+                            收起
+                            <Icon name="arrow-up" />
+                          </span>
+                        )}
+                      </div>
                       <div
-                        class={[styles.subjectItem]}
-                        onClick={() => {
-                          // changeTag(subject);
-                          state.isTagExpand = true;
-                        }}>
-                        更多 <Icon name="arrow-down" />
+                        class={[
+                          styles.subjectContainer,
+                          styles.subjectContainerTwo
+                        ]}>
+                        {data.tags.map(
+                          (subject: any, index: number) =>
+                            ((!state.isTagExpand && index <= 4) ||
+                              state.isTagExpand) && (
+                              <div
+                                class={[
+                                  styles.subjectItem,
+                                  (subject.id || '') ===
+                                    (data.tagActiveId || '') && styles.active
+                                ]}
+                                onClick={() => {
+                                  changeTag(subject);
+                                }}>
+                                {subject.name}
+                              </div>
+                            )
+                        )}
+
+                        {!state.isTagExpand && (
+                          <div
+                            class={[styles.subjectItem]}
+                            onClick={() => {
+                              state.isTagExpand = true;
+                            }}>
+                            更多 <Icon name="arrow-down" />
+                          </div>
+                        )}
                       </div>
-                    )}
-                  </div>
-                  <ChildNodeSearch
-                    activeRow={data.selectParents}
-                    onSelectChildTag={(val: any) => {
-                      data.childSelectId = val;
-                      // onSearch();
-                    }}
-                  />
-                </>
-              )}
-            </div>
-          </div>
-        </Popup>
+                      <ChildNodeSearch
+                        activeRow={data.selectParents}
+                        onSelectChildTag={(val: any) => {
+                          data.childSelectId = val;
+                          // onSearch();
+                        }}
+                      />
+                    </>
+                  )}
+                </div>
+
+                <div class={styles.searchHead}>
+                  <span
+                    class={styles.cancel}
+                    onClick={() => (state.searchPopup = false)}>
+                    取消
+                  </span>
+                  {/* <span>筛选</span> */}
+                  <span
+                    class={styles.confirm}
+                    onClick={() => {
+                      state.allSearch.bookVersionId =
+                        data.childSelectId || data.tagActiveId;
+                      state.allSearch.audioPlayTypes = state.sAPT
+                        ? state.sAPT === 'PLAY_SING'
+                          ? ['SING', 'PLAY']
+                          : [state.sAPT]
+                        : [];
+                      state.allSearch.musicTagIds = state.sNt;
+                      state.searchPopup = false;
+                      onSearch();
+                    }}>
+                    确定
+                  </span>
+                </div>
+              </div>
+            </Popup>
           </div>
         </Teleport>
 
@@ -691,13 +670,14 @@ export default defineComponent({
           <TheVip
             onClose={val => {
               if (val) {
-                postMessage({
-                  api: 'openWebView',
-                  content: {
-                    url: `${location.origin}${location.pathname}#/member-center`,
-                    orientation: 1
-                  }
-                });
+                // postMessage({
+                //   api: 'openWebView',
+                //   content: {
+                //     url: `${location.origin}${location.pathname}#/member-center`,
+                //     orientation: 1
+                //   }
+                // });
+                router.push('/member-center');
               }
               state.showVip = false;
             }}

src/views/hot-music-more/music-detail/index.tsx

@@ -114,6 +114,17 @@ export default defineComponent({
       });
     });
 
+    const trackList = computed(() => {
+      return data.trackList.map((item: any) => {
+        return {
+          ...item,
+          color:
+            data.selectMusicInstrumentIndex === item.value ? 'var(--van-primary-color)' : '',
+          className: data.selectMusicInstrumentIndex === item.value ? 'fontBlod' : ''
+        };
+      });
+    })
+
     /** 保存图片 */
     const handleSave = async () => {
       if (data.musicPdfUrl) {
@@ -139,7 +150,7 @@ export default defineComponent({
             const waterCanvasImg = await addWatermark(canvas);
             // canvas转图片
             const dataURL = await convasToImg(waterCanvasImg);
-            console.log(dataURL, 'dataURL');
+            // console.log(dataURL, 'dataURL');
             setTimeout(() => {
               showToast('已保存到相册');
             }, 500);
@@ -209,7 +220,7 @@ export default defineComponent({
     // 解析xml，获取分轨信息
     const analyzeXml = async () => {
       const details = item.value;
-      console.log(details?.musicSheetType, 'details?.musicSheetType');
+      // console.log(details?.musicSheetType, 'details?.musicSheetType');
       if (details?.musicSheetType === 'CONCERT') {
         if (details.xmlFileUrl) {
           const res = await fetch(details.xmlFileUrl).then(response =>
@@ -286,7 +297,7 @@ export default defineComponent({
       const tempCode = getInstrumentNameCode(codeMapKeys, code);
       if (codeIdMap.has(tempCode)) {
         const result = codeIdMap.get(tempCode);
-        console.log('result:', result);
+        // console.log('result:', result);
         return result[0] || '';
       }
       return '';
@@ -394,6 +405,7 @@ export default defineComponent({
     const musicIframeLoad = () => {
       const token = storage.get(ACCESS_TOKEN);
       const details = item.value;
+
       if (!details?.id) {
         data.iframeSrc = '';
         return;
@@ -463,7 +475,7 @@ export default defineComponent({
         }&musicRenderType=${musicRenderType}&zoom=0.6`;
       }
 
-      console.log('地址', data.iframeSrc);
+      // console.log('地址', data.iframeSrc);
     };
 
     const __init = async () => {
@@ -578,18 +590,18 @@ export default defineComponent({
             {isEnsemble.value && (
               <Popover
                 v-model:show={data.showChangeVoice}
-                class={styles.popover}
-                actions={data.trackList}
+                class={'transferStaff transferStaffSection'}
+                actions={trackList.value}
                 placement="top-start"
                 onSelect={(item: any) => {
-                  console.log(item, 'item')
-                  // data.showMusicImg = item.value;
+                  // console.log(item, 'item')
+                  data.selectMusicInstrumentIndex = item.value
                   data.showChangeVoice = false;
-                  // musicIframeLoad();
+                  musicIframeLoad();
                 }}>
                 {{
                   reference: () => (
-                    <div class={styles.item}>
+                    <div class={[styles.item, styles.itemPopover]}>
                       <img src={iconChange} class={styles.icon} />
                       <span>声部</span>
                     </div>
@@ -600,7 +612,7 @@ export default defineComponent({
             {data.showTransBtn && (
               <Popover
                 v-model:show={data.popoverShow}
-                class={styles.popover}
+                class={'transferStaff'}
                 actions={_actions.value}
                 placement="top-start"
                 onSelect={(item: any) => {
@@ -610,7 +622,7 @@ export default defineComponent({
                 }}>
                 {{
                   reference: () => (
-                    <div class={styles.item}>
+                    <div class={[styles.item, styles.itemPopover]}>
                       <img src={iconStaff} class={styles.icon} />
                       <span>转谱</span>
                     </div>

src/views/pre-register-active/compontent-show/register-show.module.less

@@ -188,26 +188,7 @@
   overflow: initial;
 }
 
-.wxPopupDialog::before {
-  position: absolute;
-  content: ' ';
-  top: -73px;
-  left: 50%;
-  margin-left: -86px;
-  display: inline-block;
-  background: url('../images/initiation/wx-no-top.png') no-repeat top center;
-  background-size: contain;
-  width: 172px;
-  height: 154px;
-}
-
-.popupContainer {
-  background: url('../images/initiation/wx-no-bg.png') no-repeat top center;
-  background-size: cover;
-  border-radius: 20px;
-  overflow: hidden;
 
-}
 
 .popupContainer .title1 {
   padding-top: 57px;