修改声部选择

src/views/co-ai/api.ts

@@ -22,3 +22,10 @@ export const api_musicSheetPage = (params: any) => {
 export const api_musicTagTree = () => {
   return request.get('/edu-app/musicTag/tree');
 };
+
+/**
+ * 分类
+ */
+export const api_subjectList = (params: any) => {
+  return request.post('/edu-app/subject/list', { data: params });
+};

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

@@ -162,6 +162,19 @@
   }
 }
 
+:global {
+  .van-popover__action {
+    height: 38px;
+    font-size: 14px;
+    color: #999999;
+  }
+
+  .selected {
+    font-weight: 600;
+    color: #1CACF1;
+  }
+}
+
 .center {
   flex: 1;
   position: relative;
@@ -173,6 +186,68 @@
     padding: 6px 9px;
   }
 
+  .subjects {
+
+    .subjectName {
+      position: relative;
+      display: flex;
+      align-items: center;
+      padding-left: 10px;
+      padding-right: 9px;
+
+      &.active {
+        span {
+          color: #1CACF1;
+        }
+
+        i {
+          margin-top: -5px;
+          border-bottom: 5px solid #1CACF1;
+          transform: rotate(0deg);
+
+        }
+      }
+
+      span {
+        font-size: 14px;
+        // color: #1CACF1;
+        color: #333333;
+        line-height: 20px;
+        max-width: 40px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+
+      i {
+        display: inline-block;
+        width: 0;
+        height: 0;
+        border-top: 5px solid transparent;
+        border-left: 5px solid transparent;
+        border-right: 5px solid transparent;
+        border-bottom: 5px solid #AAAAAA;
+        margin-top: 6px;
+        margin-left: 5px;
+        transform: rotate(180deg);
+      }
+
+      // border-right: 1px solid #CCCCCC;
+      &::after {
+        position: absolute;
+        right: 0;
+        content: '';
+        display: inline-block;
+        width: 1px;
+        height: 17px;
+        background-color: #CCCCCC;
+      }
+    }
+
+
+
+  }
+
   :global {
     #coai-0 {
       .van-search {
@@ -184,6 +259,16 @@
       .van-field__control::-webkit-input-placeholder {
         font-size: 12px;
       }
+
+      .searchNotice {
+        background-color: #f8f9fc !important;
+        border-radius: 40px;
+
+        .van-search__content {
+          background: #f8f9fc !important;
+          padding-left: 9px;
+        }
+      }
     }
   }
 }
@@ -214,6 +299,7 @@
   }
 }
 
+
 .searchNoticeShow {
   :global {
     .van-field__control {

src/views/co-ai/index.tsx

@@ -10,7 +10,7 @@ import {
 } from 'vue';
 import styles from './index.module.less';
 import MSearch from '@/components/m-search';
-import icon_play from '@/common/images/icon_play.svg';
+// import icon_play from '@/common/images/icon_play.svg';
 import {
   Empty,
   Icon,
@@ -24,7 +24,7 @@ import {
 } from 'vant';
 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_jianpu from '@/common/images/icon_jianpu.svg';
 import icon_jianpuActive from '@/common/images/icon_jianpuActive.svg';
 import icons from '@/common/images/index.json';
 import {
@@ -33,16 +33,18 @@ import {
   promisefiyPostMessage
 } from '@/helpers/native-message';
 import html2canvas from 'html2canvas';
-import { api_musicSheetCategoriesPage, api_musicSheetPage } from './api';
+import {
+  api_musicSheetCategoriesPage,
+  api_musicSheetPage,
+  api_subjectList
+} from './api';
 import { state } from '@/state';
 import MEmpty from '@/components/m-empty';
 import Coaiguide from '@/custom-plugins/guide-page/coai-guide';
-import { usePageVisibility } from '@vant/use';
 import TheVip from '@/components/the-vip';
 import request from '@/helpers/request';
 import { useRoute } from 'vue-router';
 import { addWatermark, convasToImg, imgToCanvas } from './imageFunction';
-import { browser } from '@/helpers/utils';
 import ChangeVoice from './change-voice';
 import { storage } from '@/helpers/storage';
 import { ACCESS_TOKEN } from '@/store/mutation-types';
@@ -61,7 +63,8 @@ export default defineComponent({
       rows: 20,
       status: 1,
       keyword: '', // 关键词
-      musicSheetCategoriesId: route.query.id as any
+      musicSheetCategoriesId: route.query.id as any,
+      musicalInstrumentId: ''
     });
     const data = reactive({
       musicSheetCategoriesName: route.query.name as any,
@@ -92,7 +95,10 @@ export default defineComponent({
         height: ''
       },
       showVip: false,
-      vipMember: state.user.data?.vipMember
+      vipMember: state.user.data?.vipMember,
+      subjectStatus: false,
+      subjectList: [],
+      subjectItem: {} as any // 当前乐器
     });
     const downRef = ref();
     const showGuide = ref(false);
@@ -232,7 +238,8 @@ export default defineComponent({
       data.loading = true;
       try {
         const res = await api_musicSheetPage({
-          ...musicForms
+          ...musicForms,
+          musicalInstrumentId: data.subjectItem.value || null
         });
         if (res.code === 200 && Array.isArray(res?.data?.rows)) {
           data.musics = [...data.musics, ...res.data.rows];
@@ -286,6 +293,45 @@ export default defineComponent({
       }
     });
 
+    const getSubjecList = async () => {
+      try {
+        let subjectIds = state.user.data?.subjectId || '';
+        subjectIds = subjectIds.split(',');
+        const subjectId = subjectIds[0] || '';
+        const res = await api_subjectList({
+          enableFlag: true,
+          delFlag: 0,
+          page: 1,
+          subjectId: subjectId || '',
+          rows: 999
+        });
+
+        if (subjectId) {
+          const result = res.data || [];
+          let tempSubjects: any = [];
+          result.forEach((item: any) => {
+            const instruments = item.instruments || [];
+            if (Number(subjectId) === item.id && instruments.length > 0) {
+              instruments.forEach((child: any, index: number) => {
+                tempSubjects.push({
+                  text: child.name,
+                  value: child.id,
+                  className: index === 0 ? 'selected' : ''
+                });
+              });
+            }
+          });
+
+          data.subjectList = tempSubjects;
+          if (tempSubjects.length > 0) {
+            data.subjectItem = tempSubjects[0];
+          }
+        }
+      } catch {
+        //
+      }
+    };
+
     onMounted(async () => {
       // 安卓的状态栏
       postMessage({
@@ -294,7 +340,7 @@ export default defineComponent({
           isVisibility: 0
         }
       });
-
+      await getSubjecList();
       await getMusicSheetCategories();
       await getMusicList();
 
@@ -304,7 +350,7 @@ export default defineComponent({
         }
       });
       nextTick(() => {
-        obv.observe(spinRef.value);
+        spinRef.value && obv.observe(spinRef.value);
       });
 
       const getUserInfo = async () => {
@@ -364,34 +410,6 @@ export default defineComponent({
         <div class={styles.content}>
           <div class={[styles.leftContent]}>
             <div class={styles.leftBg2}></div>
-            {/* <div class={styles.leftBg}></div> */}
-            {/* <div class={styles.types}>
-              {data.types.map((item, index) => {
-                return (
-                  <div
-                    class={[
-                      styles.type,
-                      musicForms.musicSheetCategoriesId === item.id &&
-                        styles.typeActive
-                    ]}
-                    onClick={() => {
-                      musicForms.musicSheetCategoriesId = item.id;
-                      handleReset();
-                    }}>
-                    <div class={styles.typeImg}>
-                      <img
-                        class={styles.typeIcon}
-                        src={item.coverImg}
-                        onLoad={(e: Event) => {
-                          const el = e.target as HTMLImageElement;
-                          el.setAttribute('loaded', 'true');
-                        }}
-                      />
-                    </div>
-                  </div>
-                );
-              })}
-            </div> */}
             <div class={styles.center}>
               <div class={styles.centerSearch}>
                 <div id="coai-0">
@@ -401,7 +419,7 @@ export default defineComponent({
                       data.searchNoticeShow ? styles.searchNoticeShow : ''
                     ]}
                     shape="round"
-                    background="transparent"
+                    // background="transparent"
                     clearable={false}
                     placeholder="请输入关键字"
                     modelValue={musicForms.keyword}
@@ -419,8 +437,43 @@ export default defineComponent({
                     onSearch={val => {
                       musicForms.keyword = val;
                       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"
+                              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>
+                        )
                     }}
-                  />
+                  </MSearch>
                 </div>
               </div>
               <div class={styles.musicContent}>