添加演奏演唱搜索条件

src/common/images/icon-search.svg

@@ -1,13 +1,15 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="16px" height="17px" viewBox="0 0 16 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>切片</title>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
-        <g id="小酷Ai-2备份-2" transform="translate(-198.000000, -66.000000)" stroke="#1CACF1" stroke-width="1.5">
-            <g id="编组-3" transform="translate(175.000000, 50.000000)">
-                <g id="编组-3" transform="translate(10.000000, 7.000000)">
-                    <g id="搜索" transform="translate(13.000000, 9.000000)">
-                        <path d="M7.31169456,13.6233891 C10.7969053,13.6233891 13.6233891,10.7976421 13.6233891,7.31169456 C13.6233891,3.82574698 10.7969053,1 7.31169456,1 C3.82648381,1 1,3.82574698 1,7.31169456 C1,10.7976421 3.82648381,13.6233891 7.31169456,13.6233891 Z" id="Stroke-1"></path>
-                        <line x1="11.8492474" y1="11.8489526" x2="14.9992" y2="14.9996421" id="Stroke-5" stroke-linecap="round"></line>
+    <g id="改动页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+        <g id="4、小酷Ai--选择歌曲备份-6" transform="translate(-117.000000, -83.000000)" stroke="#1CACF1" stroke-width="1.5">
+            <g id="编组-3" transform="translate(41.000000, 67.000000)">
+                <g id="编组-44" transform="translate(10.000000, 7.000000)">
+                    <g id="编组-43" transform="translate(66.000000, 8.500000)">
+                        <g id="搜索" transform="translate(0.000000, 1.000000)">
+                            <path d="M7.31169456,13.6233891 C10.7969053,13.6233891 13.6233891,10.7976421 13.6233891,7.31169456 C13.6233891,3.82574698 10.7969053,1 7.31169456,1 C3.82648381,1 1,3.82574698 1,7.31169456 C1,10.7976421 3.82648381,13.6233891 7.31169456,13.6233891 Z" id="Stroke-1"></path>
+                            <line x1="11.8492474" y1="11.8489526" x2="14.9992" y2="14.9996421" id="Stroke-5" stroke-linecap="round"></line>
+                        </g>
                     </g>
                 </g>
             </g>

src/helpers/constant.ts

@@ -31,3 +31,12 @@ export const schoolType = {
   JUNIOR: '初中',
   PRIMARY_JUNIOR: '小初一体'
 };
+
+/**
+ * 场景
+ */
+export const audioPlayType = {
+  PLAY: "演奏",
+  SING: "演唱",
+  PLAY_SING: "演奏+演唱"
+} as any;

src/views/co-ai/index.module.less

@@ -31,12 +31,29 @@
 
 .subjectListContainer {
   // font-size: 20px;
+  --van-popover-action-width: 112px;
+
 
   :global {
+    .van-hairline--bottom::after {
+      display: none;
+    }
+
+    .van-popover__action {
+      padding: 0;
+      --van-line-height-md: 32px;
+      margin-bottom: 6px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
     .van-popover__content {
-      max-height: 50vh;
+      max-height: 55vh;
       overflow-x: hidden;
       overflow-y: auto;
+      padding: 8px;
     }
   }
 }
@@ -103,7 +120,7 @@
 .leftContent {
   position: relative;
   display: flex;
-  width: 37%;
+  width: 45%;
 }
 
 .leftBg {
@@ -190,12 +207,14 @@
   .van-popover__action {
     height: 38px;
     font-size: 14px;
-    color: #999999;
+    color: #323233;
   }
 
   .selected {
     font-weight: 600;
     color: #1CACF1;
+    background: #EEF8FF;
+    border-radius: 4px;
   }
 }
 
@@ -217,7 +236,7 @@
       display: flex;
       align-items: center;
       padding-left: 10px;
-      padding-right: 9px;
+      padding-right: 8px;
 
       &.active {
         span {
@@ -237,7 +256,7 @@
         // color: #1CACF1;
         color: #333333;
         line-height: 20px;
-        max-width: 40px;
+        max-width: 80px;
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
@@ -290,7 +309,7 @@
 
         .van-search__content {
           background: #f8f9fc !important;
-          padding-left: 9px;
+          padding-left: 7px;
         }
       }
     }
@@ -384,7 +403,8 @@
     &.VIP {
       background: url('./image/icon-music-vip.png') no-repeat center;
       background-size: contain;
-      border-top-right-radius: 9px;;
+      border-top-right-radius: 9px;
+      ;
     }
   }
 
@@ -432,17 +452,56 @@
       align-items: center;
     }
 
-    .musicFavitor {
-      border: 1px solid #ffc5c5;
-      color: #ff6a6a;
-      padding: 1px 3px 1px 14px;
-      border-radius: 4px;
-      background-color: #fff8f7;
-      background-image: url('./image/icon_hot.svg');
-      background-repeat: no-repeat;
-      background-size: auto 70%;
-      background-position: 2px center;
-      margin-right: 4px;
+    // .musicFavitor {
+    //   border: 1px solid #ffc5c5;
+    //   color: #ff6a6a;
+    //   padding: 2px 3px 1px 14px;
+    //   border-radius: 4px;
+    //   background-color: #fff8f7;
+    //   background-image: url('./image/icon_hot.png');
+    //   background-repeat: no-repeat;
+    //   background-size: auto 75%;
+    //   background-position: 3px;
+    //   margin-right: 4px;
+    //   line-height: 1;
+    // }
+    .hotNum {
+      color: #FF6A6A;
+      font-size: 12px;
+      padding: 2px 3px 1px;
+      background: #FFF8F7;
+      border-radius: 3px;
+      border: 1px solid #FFC5C5;
+      line-height: 1;
+      margin-right: 3px;
+      transform: scale(0.9);
+
+      .iconFire {
+        display: inline-block;
+        width: 8px;
+        height: 10px;
+        margin-right: 3px;
+      }
+    }
+
+    .iconPlayType {
+      font-size: 12px;
+      padding: 2px 3px 1px;
+      background: #FFFFFF;
+      border-radius: 3px;
+      line-height: 1;
+      margin-right: 3px;
+      transform: scale(0.9);
+    }
+
+    .iconPlay {
+      border: 1px solid #15B2FD;
+      color: #15B2FD;
+    }
+
+    .iconSing {
+      border: 1px solid #CD8613;
+      color: #CD8613;
     }
 
     .musicAuthor {

src/views/co-ai/index.tsx

@@ -26,6 +26,7 @@ import icon_back from './image/icon_back.svg';
 import icon_down from '@/common/images/icon_down.svg';
 // import icon_jianpu from '@/common/images/icon_jianpu.svg';
 import icon_jianpuActive from '@/common/images/icon_jianpuActive.svg';
+import iconFire from './image/icon_hot.png';
 import icons from '@/common/images/index.json';
 import {
   listenerMessage,
@@ -54,6 +55,7 @@ import {
   vaildMusicScoreUrl,
   trackToCode
 } from '@/helpers/utils';
+import { audioPlayType } from '@/helpers/constant';
 
 export default defineComponent({
   name: 'co-ai',
@@ -71,11 +73,13 @@ export default defineComponent({
       rows: 20,
       status: 1,
       keyword: '', // 关键词
+      audioPlayTypes: [],
       musicSheetCategoriesId: route.query.id as any
       // musicalInstrumentId: ''
     });
     const data = reactive({
       musicSheetCategoriesName: route.query.name as any,
+      audioPlayTypeItem: {} as any,
       /** 教材Index */
       typeIndex: 0,
       /** 音乐Index */
@@ -105,6 +109,7 @@ export default defineComponent({
       showVip: false,
       vipMember: state.user.data?.vipMember,
       subjectStatus: false,
+      audioPlayTypeList: [] as any, // 场景
       subjectList: [],
       subjectItem: {} as any, // 当前乐器,
       trackList: [] as any, // 可筛选的分轨信息
@@ -269,7 +274,12 @@ export default defineComponent({
 
       try {
         const res = await api_musicSheetPage({
-          ...musicForms
+          ...musicForms,
+          audioPlayTypes: data.audioPlayTypeItem.value
+            ? data.audioPlayTypeItem.value === 'PLAY_SING'
+              ? ['PLAY', 'SING']
+              : [data.audioPlayTypeItem.value]
+            : []
           // musicalInstrumentId: data.subjectItem.value || null
         });
         if (res.code === 200) {
@@ -515,7 +525,27 @@ export default defineComponent({
         analyzeXml();
       }
     );
+    const formatUsedNum = (num: number) => {
+      if (num < 10000) {
+        return num;
+      } else {
+        const n = num / 10000;
+        return Number(n.toFixed(1)) + '万';
+      }
+    };
     onMounted(async () => {
+      // 场景
+      const tempAudio = Object.keys(audioPlayType).map(key => {
+        return {
+          value: key,
+          text: audioPlayType[key]
+        };
+      });
+      data.audioPlayTypeList = [
+        { text: '全部', value: '', className: 'selected' },
+        ...tempAudio
+      ];
+      data.audioPlayTypeItem = data.audioPlayTypeList[0];
       // 安卓的状态栏
       postMessage({
         api: 'setStatusBarVisibility',
@@ -626,42 +656,45 @@ export default defineComponent({
                         handleReset();
                       }
                     }}>
-                    {/* {{
-                      left: () =>
-                        data.subjectItem.value &&
-                        data.subjectList.length > 1 && (
-                          <div class={styles.subjects}>
-                            <Popover
-                              v-model:show={data.subjectStatus}
-                              offset={[0, 18]}
-                              actions={data.subjectList}
-                              placement="bottom-start"
-                              class={styles.subjectListContainer}
-                              onSelect={(item: any) => {
-                                data.subjectList.forEach((c: any) => {
-                                  c.className = '';
-                                });
-                                data.subjectItem = {
-                                  ...item,
-                                  className: 'selected'
-                                };
-                                handleReset();
-                              }}>
-                              {{
-                                reference: () => (
-                                  <div
-                                    class={[
-                                      styles.subjectName,
-                                      data.subjectStatus && styles.active
-                                    ]}>
-                                    <span>{data.subjectItem.text}</span> <i></i>
-                                  </div>
-                                )
-                              }}
-                            </Popover>
-                          </div>
-                        )
-                    }} */}
+                    {{
+                      left: () => (
+                        <div class={styles.subjects}>
+                          <Popover
+                            v-model:show={data.subjectStatus}
+                            offset={[0, 8]}
+                            actions={data.audioPlayTypeList}
+                            placement="bottom-start"
+                            showArrow={false}
+                            class={styles.subjectListContainer}
+                            onSelect={(item: any) => {
+                              data.audioPlayTypeList.forEach((c: any) => {
+                                c.className = '';
+                                if (c.value === item.value) {
+                                  c.className = 'selected';
+                                }
+                              });
+                              data.audioPlayTypeItem = {
+                                ...item,
+                                className: 'selected'
+                              };
+                              handleReset();
+                            }}>
+                            {{
+                              reference: () => (
+                                <div
+                                  class={[
+                                    styles.subjectName,
+                                    data.subjectStatus && styles.active
+                                  ]}>
+                                  <span>{data.audioPlayTypeItem.text}</span>
+                                  <i></i>
+                                </div>
+                              )
+                            }}
+                          </Popover>
+                        </div>
+                      )
+                    }}
                   </MSearch>
                 </div>
               </div>
@@ -703,7 +736,25 @@ export default defineComponent({
                           />
                         </div>
                         <div class={styles.musicDes}>
-                          <div class={styles.musicFavitor}>{item.usedNum}</div>
+                          {/* <div class={styles.musicFavitor}>{item.usedNum}</div> */}
+                          <span class={styles.hotNum}>
+                            <img src={iconFire} class={styles.iconFire} />
+                            {formatUsedNum(item.usedNum)}
+                          </span>
+                          {item.audioPlayTypes.includes('PLAY') && (
+                            <span
+                              class={[styles.iconPlayType, styles.iconPlay]}>
+                              演奏
+                            </span>
+                          )}
+
+                          {item.audioPlayTypes.includes('SING') && (
+                            <span
+                              class={[styles.iconPlayType, styles.iconSing]}>
+                              演唱
+                            </span>
+                          )}
+
                           <div class={[styles.musicAuthor, 'van-ellipsis']}>
                             {item.composer || '佚名'}
                           </div>

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

@@ -144,8 +144,52 @@
       text-overflow: ellipsis;
     }
 
-    p {
+    .allStatus {
+      display: flex;
+      align-items: center;
       padding-top: 8px;
+    }
+
+    .hotNum {
+      color: #FF6A6A;
+      font-size: 12px;
+      padding: 2px 3px 1px;
+      background: #FFF8F7;
+      border-radius: 3px;
+      border: 1px solid #FFC5C5;
+      line-height: 1;
+      margin-right: 3px;
+      transform: scale(0.9);
+
+      .iconFire {
+        display: inline-block;
+        width: 8px;
+        height: 10px;
+        margin-right: 3px;
+      }
+    }
+
+    .iconPlayType {
+      font-size: 12px;
+      padding: 2px 3px 1px;
+      background: #FFFFFF;
+      border-radius: 3px;
+      line-height: 1;
+      margin-right: 3px;
+      transform: scale(0.9);
+    }
+
+    .iconPlay {
+      border: 1px solid #15B2FD;
+      color: #15B2FD;
+    }
+
+    .iconSing {
+      border: 1px solid #CD8613;
+      color: #CD8613;
+    }
+
+    p {
       font-size: 13px;
       color: #777777;
       line-height: 1;
@@ -287,4 +331,4 @@
       }
     }
   }
-}
+}

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

@@ -15,13 +15,13 @@ import { useRouter } from 'vue-router';
 import MSearch from '@/components/m-search';
 import { Cell, Image, List, Popup } from 'vant';
 import iconPlayer from './images/icon-player.png';
+import iconFire from './images/icon-fire.png';
 import { api_musicSheetCategoriesPage, api_musicSheetPage } from '../co-ai/api';
 import { state as baseState } from '@/state';
-import { useEventListener, useWindowScroll } from '@vueuse/core';
 import request from '@/helpers/request';
 import MEmpty from '@/components/m-empty';
 import { postMessage } from '@/helpers/native-message';
-import dayjs from 'dayjs';
+import { audioPlayType } from '@/helpers/constant';
 
 const ChildNodeSearch = defineComponent({
   name: 'ChildNodeSearch',
@@ -119,6 +119,8 @@ export default defineComponent({
       musics: [] as any,
       types: [] as any,
       subjectList: [] as any,
+      audioPlayTypeList: [] as any, // 场景
+      sAPT: '', // 场景
       sMSCI: '',
       sMII: '',
       sBookId: '' as any,
@@ -131,6 +133,7 @@ export default defineComponent({
       status: 1,
       keyword: '', // 关键词
       grade: '',
+      audioPlayTypes: [] as any,
       bookVersionId: null as any,
       musicSheetCategoriesId: '',
       musicalInstrumentId: ''
@@ -151,6 +154,12 @@ export default defineComponent({
           ...musicForms
         });
         if (res.code === 200 && Array.isArray(res?.data?.rows)) {
+          const result = res.data.rows || [];
+          result.forEach((item: any) => {
+            item.audioPlayTypeArray = item.audioPlayTypes
+              ? item.audioPlayTypes.split(',')
+              : [];
+          });
           state.musics = [...state.musics, ...res.data.rows];
           state.finished = !res.data.next;
           musicForms.page = res.data.current + 1;
@@ -311,20 +320,29 @@ export default defineComponent({
       // onSearch();
     };
 
+    const formatUsedNum = (num: number) => {
+      if (num < 10000) {
+        return num;
+      } else {
+        const n = num / 10000;
+        return Number(n.toFixed(1)) + '万';
+      }
+    };
+
     // 判断是否有数据
     const isSearch = computed(() => {
       return data.tags.length > 0 ? true : false;
     });
 
     onMounted(async () => {
-      // useEventListener(document, 'scroll', () => {
-      //   const { y } = useWindowScroll();
-      //   if (y.value > 32) {
-      //     state.background = '#fff';
-      //   } else {
-      //     state.background = 'transparent';
-      //   }
-      // });
+      // 场景
+      const tempAudio = Object.keys(audioPlayType).map(key => {
+        return {
+          id: key,
+          name: audioPlayType[key]
+        };
+      });
+      state.audioPlayTypeList = [{ name: '全部', id: '' }, ...tempAudio];
 
       state.loading = true;
       // await getSubjecList();
@@ -377,24 +395,27 @@ export default defineComponent({
               getMusicList();
             }}>
             {{
-              left: () =>
-                isSearch.value && (
-                  <div
-                    class={[
-                      styles.searchContent,
-                      state.searchPopup && styles.active
-                    ]}
-                    onClick={() => {
-                      // state.sMSCI = musicForms.musicSheetCategoriesId;
-                      state.sBookId = musicForms.bookVersionId;
-                      // state.sGrade = musicForms.grade;
-                      // state.sMII = musicForms.musicalInstrumentId;
-                      state.searchPopup = true;
-                    }}>
-                    <span>筛选</span>
-                    <i></i>
-                  </div>
-                )
+              left: () => (
+                // 由于添加了场景，必然有搜索条件
+                // isSearch.value && (
+                <div
+                  class={[
+                    styles.searchContent,
+                    state.searchPopup && styles.active
+                  ]}
+                  onClick={() => {
+                    state.sBookId = musicForms.bookVersionId;
+                    state.sAPT =
+                      musicForms.audioPlayTypes.length > 1
+                        ? 'PLAY_SING'
+                        : musicForms.audioPlayTypes.join('');
+                    state.searchPopup = true;
+                  }}>
+                  <span>筛选</span>
+                  <i></i>
+                </div>
+              )
+              // )
             }}
           </MSearch>
         </MSticky>
@@ -427,7 +448,27 @@ export default defineComponent({
                     title: () => (
                       <div class={styles.musicContnet}>
                         <h2>{item.musicSheetName}</h2>
-                        {item.composer && <p>{item.composer}</p>}
+                        <div class={styles.allStatus}>
+                          <span class={styles.hotNum}>
+                            <img src={iconFire} class={styles.iconFire} />
+                            {formatUsedNum(item.usedNum)}
+                          </span>
+                          {item.audioPlayTypes.includes('PLAY') && (
+                            <span
+                              class={[styles.iconPlayType, styles.iconPlay]}>
+                              演奏
+                            </span>
+                          )}
+
+                          {item.audioPlayTypes.includes('SING') && (
+                            <span
+                              class={[styles.iconPlayType, styles.iconSing]}>
+                              演唱
+                            </span>
+                          )}
+
+                          {item.composer && <p>{item.composer}</p>}
+                        </div>
                       </div>
                     ),
                     'right-icon': () => (
@@ -463,6 +504,11 @@ export default defineComponent({
                   musicForms.bookVersionId =
                     data.childSelectId || data.tagActiveId;
                   // musicForms.grade = state.sGrade;
+                  musicForms.audioPlayTypes = state.sAPT
+                    ? state.sAPT === 'PLAY_SING'
+                      ? ['PLAY', 'SING']
+                      : [state.sAPT]
+                    : [];
                   state.searchPopup = false;
                   musicForms.page = 1;
                   state.musics = [];
@@ -474,6 +520,26 @@ export default defineComponent({
             </div>
 
             <div class={styles.changeSubjectContainer}>
+              {state.audioPlayTypeList.length > 0 && (
+                <>
+                  <div class={styles.title}>场景</div>
+                  <div class={styles.subjectContainer}>
+                    {state.audioPlayTypeList.map((subject: any) => (
+                      <div
+                        class={[
+                          styles.subjectItem,
+                          subject.id === state.sAPT && styles.active
+                        ]}
+                        onClick={() => {
+                          state.sAPT = subject.id;
+                        }}>
+                        {subject.name}
+                      </div>
+                    ))}
+                  </div>
+                </>
+              )}
+
               {data.tags.length > 0 && (
                 <>
                   <div class={styles.title}>{data.tags[0]?.columnName}</div>

vite.config.ts

@@ -16,7 +16,7 @@ function resolve(dir: string) {
 // const proxyUrl = 'https://test.lexiaoya.cn/';
 // const proxyUrl = 'https://kt.colexiu.com/';
 // const proxyUrl = 'http://192.168.3.143:7093/';
-const proxyUrl = 'https://test.kt.colexiu.com/';
+const proxyUrl = 'https://dev.kt.colexiu.com/';
 export default defineConfig({
   base: './',
   plugins: [