老师端--小酷Ai-切换曲谱分类问题

src/views/xiaoku-music/index.tsx

@@ -39,7 +39,7 @@ import {
   api_subjectList
 } from '../xiaoku-ai/api';
 import { useUserStore } from '/src/store/modules/users';
-import Musicguide from '@/custom-plugins/guide-page/music-guide'
+import Musicguide from '@/custom-plugins/guide-page/music-guide';
 export default defineComponent({
   name: 'XiaokuMusic',
   setup() {
@@ -64,7 +64,7 @@ export default defineComponent({
       playState: 'pause' as 'play' | 'pause',
       showPlayer: false
     });
-    const showGuide = ref(false)
+    const showGuide = ref(false);
     const getSubjects = async () => {
       const res = await api_subjectList();
       if (Array.isArray(res?.data)) {
@@ -96,11 +96,14 @@ export default defineComponent({
       }
       data.loading = false;
       setTimeout(() => {
-        showGuide.value = true
-      }, 500)
+        showGuide.value = true;
+      }, 500);
     };
 
     const handleGetList = () => {
+      data.listActive = 0;
+      data.showPlayer = false;
+      data.playState = 'pause'
       forms.page = 1;
       data.finshed = false;
       getList();
@@ -204,7 +207,7 @@ export default defineComponent({
           <NBreadcrumb separator="">
             <NBreadcrumbItem
               onClick={() => router.push({ path: '/xiaoku-ai' })}>
-              曲谱列表
+              全部列表
             </NBreadcrumbItem>
             <img class={styles.separator} src={icon_separator} />
             <NBreadcrumbItem>{route.query.name}</NBreadcrumbItem>
@@ -216,21 +219,18 @@ export default defineComponent({
           <div class={styles.content}>
             <div class={styles.tools}>
               <NSpace
-
                 style={{ width: '100%' }}
                 size={[24, 12]}
                 wrapItem={false}>
-                <div  {...{
-                  id
-                    : 'music-0'
-                }}>
+                <div
+                  {...{
+                    id: 'music-0'
+                  }}>
                   <NSpace
-
                     style={{ width: '100%' }}
                     size={[24, 12]}
                     wrapItem={false}>
                     {data.tags.map(item => (
-
                       <NButton
                         round
                         textColor={data.tagIndex === item.id ? '#fff' : '#000'}
@@ -242,7 +242,6 @@ export default defineComponent({
                         }}>
                         {item.name}
                       </NButton>
-
                     ))}
                   </NSpace>
                 </div>
@@ -284,7 +283,7 @@ export default defineComponent({
                             <PlayLoading
                               class={[
                                 data.listActive === index &&
-                                  data.playState === 'play'
+                                data.playState === 'play'
                                   ? ''
                                   : styles.showPlayLoading
                               ]}
@@ -296,46 +295,50 @@ export default defineComponent({
                             </div>
                             <div class={styles.titleDes}>{item.composer}</div>
                           </div>
-                          {index == 0 ? <NButton
-                            color="#259CFE"
-                            textColor="#fff"
-                            {...{ id: 'music-1' }}
-                            round
-                            class={styles.btn}
-                            type="primary"
-                            onClick={(e: Event) => {
-                              e.stopPropagation();
-                              handlePlay(item);
-                            }}>
-                            试听
-                            <img
-                              src={
-                                data.listActive === index &&
+                          {index == 0 ? (
+                            <NButton
+                              color="#259CFE"
+                              textColor="#fff"
+                              {...{ id: 'music-1' }}
+                              round
+                              class={styles.btn}
+                              type="primary"
+                              onClick={(e: Event) => {
+                                e.stopPropagation();
+                                handlePlay(item);
+                              }}>
+                              试听
+                              <img
+                                src={
+                                  data.listActive === index &&
                                   data.playState === 'play'
-                                  ? icon_pause
-                                  : icon_play
-                              }
-                            />
-                          </NButton> : <NButton
-                            color="#259CFE"
-                            textColor="#fff"
-                            round
-                            class={styles.btn}
-                            type="primary"
-                            onClick={(e: Event) => {
-                              e.stopPropagation();
-                              handlePlay(item);
-                            }}>
-                            试听
-                            <img
-                              src={
-                                data.listActive === index &&
+                                    ? icon_pause
+                                    : icon_play
+                                }
+                              />
+                            </NButton>
+                          ) : (
+                            <NButton
+                              color="#259CFE"
+                              textColor="#fff"
+                              round
+                              class={styles.btn}
+                              type="primary"
+                              onClick={(e: Event) => {
+                                e.stopPropagation();
+                                handlePlay(item);
+                              }}>
+                              试听
+                              <img
+                                src={
+                                  data.listActive === index &&
                                   data.playState === 'play'
-                                  ? icon_pause
-                                  : icon_play
-                              }
-                            />
-                          </NButton>}
+                                    ? icon_pause
+                                    : icon_play
+                                }
+                              />
+                            </NButton>
+                          )}
 
                           <img class={styles.arrow} src={icon_arrow} />
                         </div>
@@ -360,7 +363,7 @@ export default defineComponent({
                   {activeItem.value.musicSheetName}
                 </div>
                 <img
-                  id='music-2'
+                  id="music-2"
                   style={{ display: activeItem.value.id ? '' : 'none' }}
                   class={styles.goBtn}
                   src={icon_goXiaoku}
@@ -406,8 +409,7 @@ export default defineComponent({
             onChange={value => handleChangeAudio(value)}
           />
         )}
-        {showGuide.value ? <Musicguide ></Musicguide> : null}
-
+        {showGuide.value ? <Musicguide></Musicguide> : null}
       </div>
     );
   }