提交

1

src/views/natural-resources/components/share-resources/index.module.less

@@ -118,9 +118,40 @@
 }
 
 .spaceSection {
-  width: 76%;
+  width: 75%;
+  transition: 1s all ease-in;
 
   &>div {
     line-height: var(--n-blank-height);
   }
+}
+
+
+
+
+.collapseWrap {
+  width: 98%;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+
+}
+
+.collaoseBtn {
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+}
+
+.collaoseBtn.isStart {
+  transform: rotate(-180deg);
+}
+
+.collapsSection {
+  padding-top: 10px;
+}
+
+.isHidden {
+  overflow: hidden;
+  transition: 1s all ease-in;
 }

src/views/natural-resources/components/share-resources/index.tsx

@@ -9,6 +9,7 @@ import TheEmpty from '/src/components/TheEmpty';
 import CardPreview from '/src/components/card-preview';
 import AddTeaching from '../../model/add-teaching';
 import ShareResourcesGuide from '@/custom-plugins/guide-page/shareResources-guide'
+
 export default defineComponent({
   name: 'share-resources',
   setup() {

src/views/natural-resources/components/share-resources/search-group-resources.tsx

@@ -1,11 +1,11 @@
-import { defineComponent, onMounted, reactive } from 'vue';
+import { defineComponent, onMounted, reactive, ref } from 'vue';
 import styles from './index.module.less';
-import { NButton, NForm, NFormItem, NSpace } from 'naive-ui';
+import { NButton, NForm, NFormItem, NImage, NSpace } from 'naive-ui';
 import iconAdd from '../../images/icon-add.svg';
 import TheSearch from '/src/components/TheSearch';
 import { resourceTypeArray } from '/src/utils/searchArray';
 import { useCatchStore } from '/src/store/modules/catchData';
-
+import isCollaose from '../../images/isCollaose.png';
 export default defineComponent({
   name: 'search-group',
   emits: ['search', 'add'],
@@ -21,16 +21,72 @@ export default defineComponent({
     const onSearch = () => {
       emit('search', forms);
     };
+    const collapseWrapRef = ref();
+    const divDomList = ref([] as any);
+    const orginHeight = ref(0);
+    const hiddenHeight = ref(0);
+    const line = ref(0);
+    const isCollapse = ref(false);
+    const musicCateRef = (el: any) => {
+      if (el?.selfElRef) {
+        divDomList.value.push(el.selfElRef.parentNode);
+      }
+    };
+    const setCollapse = (flag: boolean) => {
+      isCollapse.value = flag;
+      getLive()
+    };
+    const getLive = () => {
+      divDomList.value = [...new Set(divDomList.value)];
+      let offsetLeft = -1;
+      divDomList.value.forEach((item: any, index: number) => {
+        console.log(item.offsetLeft)
+        if (index === 0) {
+          line.value = 1;
+          offsetLeft = item.offsetLeft;
+        } else if (item.offsetLeft === offsetLeft && index != 0) {
+          // 如果某个标签的offsetLeft和第一个标签的offsetLeft相等  说明增加了一行
+          line.value++;
+        }
+        if (!isCollapse.value) {
+          if (line.value > 1) {
+            //从第3行开始 隐藏标签
+            item.style.display = 'none'
+
+            // 显示展开按钮  class名chu是在前面动态添加的
+          } else {
+            item.style.display = 'block'
+
+          }
+        } else {
+          item.style.display = 'block'
+        }
+
+
+      });
 
+    };
     onMounted(async () => {
       // 获取教材分类列表
       await catchStore.getMusicSheetCategory();
       // 获取声部列表
       await catchStore.getSubjects();
+
+      // 这里开始
+      // musicCateRef
+
+      orginHeight.value = collapseWrapRef.value.offsetHeight;
+      hiddenHeight.value = collapseWrapRef.value.offsetHeight / line.value;
+      // 默认隐藏
+      getLive();
+      console.log(
+        divDomList.value[1].offsetHeight,
+        collapseWrapRef.value.offsetHeight / 3
+      );
     });
     return () => (
       <div class={styles.searchGroup}>
-        <div class={styles.searchCatatory}>
+        <div class={[styles.searchCatatory]}>
           <NSpace size="small" class={styles.btnType}>
             {resourceTypeArray.map((item: any) => (
               <NButton
@@ -60,26 +116,50 @@ export default defineComponent({
         </div>
         <NForm labelAlign="left" labelPlacement="left">
           {forms.type === 'MUSIC' && (
-            <NFormItem label="教材：">
-              <NSpace class={styles.spaceSection}>
-                {catchStore.getAllMusicCategories.map((music: any) => (
-                  <NButton
-                    secondary={forms.bookVersionId === music.id}
-                    quaternary={forms.bookVersionId !== music.id}
-                    strong
-                    focusable={false}
-                    type={
-                      forms.bookVersionId === music.id ? 'primary' : 'default'
-                    }
-                    onClick={() => {
-                      forms.bookVersionId = music.id;
-                      onSearch();
+            <div class={styles.collapsSection}>
+              <NFormItem label="教材：">
+                <div
+                  class={[
+                    styles.collapseWrap,
+                    isCollapse.value ? '' : styles.isHidden
+                  ]}
+
+                  ref={collapseWrapRef}>
+                  <NSpace class={[styles.spaceSection]}>
+                    {catchStore.getAllMusicCategories.map((music: any) => (
+                      <NButton
+                        ref={musicCateRef}
+                        secondary={forms.bookVersionId === music.id}
+                        quaternary={forms.bookVersionId !== music.id}
+                        strong
+                        focusable={false}
+                        type={
+                          forms.bookVersionId === music.id
+                            ? 'primary'
+                            : 'default'
+                        }
+                        onClick={() => {
+                          forms.bookVersionId = music.id;
+                          onSearch();
+                        }}>
+                        {music.name}
+                      </NButton>
+                    ))}
+                    <div onClick={() => {
+                      setCollapse(!isCollapse.value)
                     }}>
-                    {music.name}
-                  </NButton>
-                ))}
-              </NSpace>
-            </NFormItem>
+                      <NImage
+                        previewDisabled
+                        src={isCollaose}
+                        class={[styles.collaoseBtn, isCollapse.value ? styles.isStart : ""]}
+                      ></NImage>
+
+                    </div>
+
+                  </NSpace>
+                </div>
+              </NFormItem>
+            </div>
           )}
 
           <NFormItem label="乐器：">

src/views/xiaoku-music/index.tsx

@@ -369,7 +369,7 @@ export default defineComponent({
                     const origin = /(localhost|192)/.test(location.host)
                       ? 'https://test.lexiaoya.cn'
                       : location.origin;
-                    const src = `${origin}/instrument?platform=pc&id=${activeItem.value.id}&Authorization=${user.getToken}`;
+                    const src = `${origin}/instrument?platform=pc&showGuide=true&id=${activeItem.value.id}&Authorization=${user.getToken}`;
                     window.open(src);
                   }}
                 />