Merge branch 'dev' of http://git.dayaedu.com/huangqiyong/classroom into staging

src/views/cloudPractice/cloudPractice.tsx

@@ -96,6 +96,7 @@ export default defineComponent({
                xmlUrl: item?.xmlUrl,
                musicSheetType: item?.musicSheetType,
                audioFileUrl,
+               // titleImg: list?.titleImg,
                isComberRender: false
             }
          } else if (userStoreHook.roles === "GYT") {
@@ -106,7 +107,8 @@ export default defineComponent({
                xmlUrl: list?.xmlFileUrl,
                musicSheetType: list?.musicSheetType,
                audioFileUrl: list?.audioFileUrl,
-               isComberRender: list?.musicSubject === "1"
+               titleImg: list?.titleImg,
+               isComberRender: list?.musicSubjectId === "1"
             }
          } else if (userStoreHook.roles === "KLX") {
             const item: any = list.background?.[0]
@@ -117,6 +119,7 @@ export default defineComponent({
                xmlUrl: list?.xmlFileUrl,
                musicSheetType: list?.musicSheetType,
                audioFileUrl: item?.audioFileUrl,
+               titleImg: list?.titleImg,
                isComberRender: false
             }
          }
@@ -158,7 +161,7 @@ export default defineComponent({
       const handleGetSubject_gym = async () => {
          loading.value = true
          // , { categoriesId: state.categoryId || state.firstTreeId }
-         await httpAjaxErrMsg(querySubjectIds_gym).then(res => {
+         await httpAjaxErrMsg(querySubjectIds_gym, { categoriesId: state.firstTreeId }).then(res => {
             loading.value = false
             if (res.code === 200) {
                const result = res.data || []
@@ -518,7 +521,7 @@ export default defineComponent({
       /** 初始化数据 */
       const setDefaultData = async (type?: "first" | "category" | "level" | "type") => {
          if (userStoreHook.roles === "GYM") {
-            initCategories_gym(type)
+            await initCategories_gym(type)
          } else if (userStoreHook.roles === "GYT") {
             initCategories_gyt(type)
          } else if (userStoreHook.roles === "KLX") {
@@ -526,7 +529,7 @@ export default defineComponent({
          }
       }
 
-      const initCategories_gym = (type?: "first" | "category" | "level" | "type") => {
+      const initCategories_gym = async (type?: "first" | "category" | "level" | "type") => {
          if (storeData.value.length > 0 && !["category", "level", "type"].includes(type as any)) {
             let result: any = []
             if (type === "first" && state.firstTreeId) {
@@ -542,6 +545,8 @@ export default defineComponent({
                   sysMusicScoreCategoriesList: item.sysMusicScoreCategoriesList || []
                }
             })
+
+            await handleGetSubject_gym()
          }
          if (state.categoryList.length > 0 && !["level", "type"].includes(type as any)) {
             let result: any = []
@@ -819,260 +824,262 @@ export default defineComponent({
       })
       return () => (
          <NavContainer navs={navs}>
-            <ElScrollbar class="elScrollbar">
-               <div class={styles.cloudPractice}>
-                  <div class={styles.leftContainer}>
-                     <div class={styles.details}>
-                        {storeData.value.length > 0 && (
-                           <ElScrollbar class={styles.leftSection}>
-                              {/* 基 础 云 练 */}
-                              {storeData.value.map((item: any) => (
-                                 <div
-                                    class={[styles.leftSection_item, item.id === state.firstTreeId && styles.leftSection_item__active]}
-                                    onClick={async () => {
-                                       if (loading.value) return
-                                       state.firstTreeId = item.id
-                                       await setDefaultData("first")
-                                       await handleGetList()
-                                       await toDetail()
+            {/* <ElScrollbar class="elScrollbar"> */}
+            <div class={styles.cloudPractice}>
+               <div class={styles.leftContainer}>
+                  <div class={styles.details}>
+                     {storeData.value.length > 0 && (
+                        <ElScrollbar class={styles.leftSection}>
+                           {/* 基 础 云 练 */}
+                           {storeData.value.map((item: any) => (
+                              <div
+                                 class={[styles.leftSection_item, item.id === state.firstTreeId && styles.leftSection_item__active]}
+                                 onClick={async () => {
+                                    if (loading.value) return
+                                    state.firstTreeId = item.id
+                                    await setDefaultData("first")
+                                    await handleGetList()
+                                    await toDetail()
+                                 }}
+                              >
+                                 {item.name}
+                              </div>
+                           ))}
+                        </ElScrollbar>
+                     )}
+
+                     <div class={[styles.musicList, "musicList-container"]}>
+                        <div class={styles.searchHeader}>
+                           {state.categoryList.length > 1 && (
+                              <div class={[styles.categorySection]}>
+                                 <NPopselect
+                                    placement="bottom-start"
+                                    disabled={loading.value}
+                                    options={state.categoryList}
+                                    v-model:value={state.categoryId}
+                                    onUpdate:value={async (val: any) => {
+                                       const item = state.categoryList.find((item: any) => item.value === val)
+                                       if (item) {
+                                          state.categoryName = item.label
+                                          state.categoryId = item.value
+                                          await setDefaultData("category")
+                                          await handleGetList()
+                                          await toDetail()
+                                       }
                                     }}
+                                    onUpdate:show={(value: any) => {
+                                       state.categoryShow = value
+                                    }}
+                                    trigger="click"
+                                    class={"PopSelect"}
                                  >
-                                    {item.name}
-                                 </div>
-                              ))}
-                           </ElScrollbar>
-                        )}
+                                    <span class={[styles.iconTagName, state.categoryShow && styles.show]}>
+                                       <span>{state.categoryName}</span>
+                                    </span>
+                                 </NPopselect>
+                              </div>
+                           )}
 
-                        <div class={[styles.musicList, "musicList-container"]}>
-                           <div class={styles.searchHeader}>
-                              {state.categoryList.length > 1 && (
-                                 <div class={[styles.categorySection]}>
-                                    <NPopselect
-                                       placement="bottom-start"
-                                       disabled={loading.value}
-                                       options={state.categoryList}
-                                       v-model:value={state.categoryId}
-                                       onUpdate:value={async (val: any) => {
-                                          const item = state.categoryList.find((item: any) => item.value === val)
-                                          if (item) {
-                                             state.categoryName = item.label
-                                             state.categoryId = item.value
-                                             await setDefaultData("category")
-                                             await handleGetList()
-                                             await toDetail()
-                                          }
-                                       }}
-                                       onUpdate:show={(value: any) => {
-                                          state.categoryShow = value
+                           <div class={styles.searchMore}>
+                              <div class={styles.searchSection}>
+                                 <Dictionary
+                                    popperClass="classTypePopper"
+                                    v-model={state.subjectId}
+                                    height={42}
+                                    // disabled={loading.value}
+                                    options={state.subjectList}
+                                    placeholder="全部声部"
+                                    onChange={handleGetList}
+                                 />
+                                 {state.levelList.length ? (
+                                    <Dictionary
+                                       popperClass="classTypePopper"
+                                       v-model={state.levelId}
+                                       height={42}
+                                       // disabled={loading.value}
+                                       options={state.levelList}
+                                       placeholder="级别"
+                                       onChange={() => {
+                                          setDefaultData("level")
+                                          handleGetList()
                                        }}
-                                       trigger="click"
-                                       class={"PopSelect"}
-                                    >
-                                       <span class={[styles.iconTagName, state.categoryShow && styles.show]}>{state.categoryName}</span>
-                                    </NPopselect>
-                                 </div>
-                              )}
-
-                              <div class={styles.searchMore}>
-                                 <div class={styles.searchSection}>
+                                    />
+                                 ) : null}
+                                 {state.typeList.length > 0 ? (
                                     <Dictionary
                                        popperClass="classTypePopper"
-                                       v-model={state.subjectId}
+                                       v-model={state.typeId}
                                        height={42}
                                        // disabled={loading.value}
-                                       options={state.subjectList}
-                                       placeholder="全部声部"
+                                       options={state.typeList}
+                                       propsOpt={{
+                                          labelField: "name",
+                                          valueField: "id"
+                                       }}
+                                       placeholder="分类"
                                        onChange={handleGetList}
                                     />
-                                    {state.levelList.length ? (
-                                       <Dictionary
-                                          popperClass="classTypePopper"
-                                          v-model={state.levelId}
-                                          height={42}
-                                          // disabled={loading.value}
-                                          options={state.levelList}
-                                          placeholder="级别"
-                                          onChange={() => {
-                                             setDefaultData("level")
-                                             handleGetList()
-                                          }}
-                                       />
-                                    ) : null}
-                                    {state.typeList.length > 0 ? (
-                                       <Dictionary
-                                          popperClass="classTypePopper"
-                                          v-model={state.typeId}
-                                          height={42}
-                                          // disabled={loading.value}
-                                          options={state.typeList}
-                                          propsOpt={{
-                                             labelField: "name",
-                                             valueField: "id"
-                                          }}
-                                          placeholder="分类"
-                                          onChange={handleGetList}
-                                       />
-                                    ) : null}
-                                 </div>
-                                 <div
-                                    class={[styles.btnSearch, state.searchStatus && styles.btnSearchActive]}
-                                    onClick={() => (state.searchStatus = !state.searchStatus)}
-                                 ></div>
+                                 ) : null}
                               </div>
-                              {state.searchStatus && (
-                                 <MyInput
-                                    class="queryCp"
-                                    v-model={state.queryStr}
-                                    height={42}
-                                    placeholder="请输入曲目关键词"
-                                    onKeyup={(e: any) => {
-                                       if (e.code === "Enter" || e.key === "Enter") {
-                                          handleGetList()
-                                       }
-                                    }}
-                                    onHandleQuery={handleGetList}
-                                    clearable
-                                 />
-                              )}
+                              <div
+                                 class={[styles.btnSearch, state.searchStatus && styles.btnSearchActive]}
+                                 onClick={() => (state.searchStatus = !state.searchStatus)}
+                              ></div>
                            </div>
+                           {state.searchStatus && (
+                              <MyInput
+                                 class="queryCp"
+                                 v-model={state.queryStr}
+                                 height={42}
+                                 placeholder="请输入曲目关键词"
+                                 onKeyup={(e: any) => {
+                                    if (e.code === "Enter" || e.key === "Enter") {
+                                       handleGetList()
+                                    }
+                                 }}
+                                 onHandleQuery={handleGetList}
+                                 clearable
+                              />
+                           )}
+                        </div>
 
-                           <div class={[styles.wrapList, !state.list.length && !loading.value && styles.wrapListEmpty]}>
-                              {state.list.map((item: any, index: number) => (
-                                 <div
-                                    class={[styles.item, index === state.listActive && styles.active]}
-                                    onClick={async () => {
-                                       state.listActive = index
-                                       await toDetail()
-                                       resetRender()
-                                    }}
-                                 >
-                                    <div class={styles.itemInfo}>
-                                       <div class={styles.img}>
-                                          <NImage
-                                             lazy
-                                             objectFit="cover"
-                                             previewDisabled={true}
-                                             src={icon_default}
-                                             onLoad={(e: any) => {
-                                                ;(e.target as any).dataset.loaded = "true"
-                                             }}
-                                          />
-                                          <PlayLoading
-                                             class={[state.listActive === index && state.playState === "play" ? "" : styles.showPlayLoading]}
-                                          />
-                                       </div>
-                                       <div class={styles.title}>
-                                          <div class={styles.titleName}>
-                                             <ellipsisScroll title={item.name} />
-                                          </div>
-                                       </div>
-                                    </div>
-                                    <div class={styles.btnSection}>
-                                       <div
-                                          class={styles.btn}
-                                          onClick={(e: any) => {
-                                             e.stopPropagation()
-                                             handlePlay(item)
-                                             if (state.listActive !== index) {
-                                                resetRender()
-                                             }
+                        <div class={[styles.wrapList, !state.list.length && !loading.value && styles.wrapListEmpty]}>
+                           {state.list.map((item: any, index: number) => (
+                              <div
+                                 class={[styles.item, index === state.listActive && styles.active]}
+                                 onClick={async () => {
+                                    state.listActive = index
+                                    await toDetail()
+                                    resetRender()
+                                 }}
+                              >
+                                 <div class={styles.itemInfo}>
+                                    <div class={styles.img}>
+                                       <NImage
+                                          lazy
+                                          objectFit="cover"
+                                          previewDisabled={true}
+                                          src={item.titleImg || icon_default}
+                                          onLoad={(e: any) => {
+                                             ;(e.target as any).dataset.loaded = "true"
                                           }}
-                                       >
-                                          {state.listActive === index && (
-                                             <>
-                                                {state.playState === "pause" ? "播放" : "暂停"}
-                                                <img src={state.playState === "pause" ? iconBtnPlay : (iconBtnPause as any)} />
-                                             </>
-                                          )}
-                                          {state.listActive !== index && (
-                                             <>
-                                                播放
-                                                <img src={iconBtnPlay as any} />
-                                             </>
-                                          )}
+                                       />
+                                       <PlayLoading
+                                          class={[state.listActive === index && state.playState === "play" ? "" : styles.showPlayLoading]}
+                                       />
+                                    </div>
+                                    <div class={styles.title}>
+                                       <div class={styles.titleName}>
+                                          <ellipsisScroll title={item.name} />
                                        </div>
                                     </div>
                                  </div>
-                              ))}
+                                 <div class={styles.btnSection}>
+                                    <div
+                                       class={styles.btn}
+                                       onClick={(e: any) => {
+                                          e.stopPropagation()
+                                          handlePlay(item)
+                                          if (state.listActive !== index) {
+                                             resetRender()
+                                          }
+                                       }}
+                                    >
+                                       {state.listActive === index && (
+                                          <>
+                                             {state.playState === "pause" ? "播放" : "暂停"}
+                                             <img src={state.playState === "pause" ? iconBtnPlay : (iconBtnPause as any)} />
+                                          </>
+                                       )}
+                                       {state.listActive !== index && (
+                                          <>
+                                             播放
+                                             <img src={iconBtnPlay as any} />
+                                          </>
+                                       )}
+                                    </div>
+                                 </div>
+                              </div>
+                           ))}
 
-                              {!state.list.length && !loading.value && (
-                                 <ElEmpty class={styles.empty} image={require("@/img/layout/empty.png")} description="暂无结果" />
-                              )}
+                           {!state.list.length && !loading.value && (
+                              <ElEmpty class={styles.empty} image={require("@/img/layout/empty.png")} description="暂无结果" />
+                           )}
 
-                              <div ref={spinRef} class={[styles.loadingWrap, state.finshed && styles.showLoading]}>
-                                 <NSpin show={true} stroke="#FF531C"></NSpin>
-                              </div>
+                           <div ref={spinRef} class={[styles.loadingWrap, state.finshed && styles.showLoading]}>
+                              <NSpin show={true} stroke="#FF531C"></NSpin>
                            </div>
                         </div>
                      </div>
                   </div>
-                  <div class={styles.rightContainer}>
-                     {/* <i class={styles.leftArrow}></i> */}
-
-                     <NSpin show={staffLoading.value} stroke="#FF531C">
-                        <div class={styles.musicName}>
-                           {activeItem.value.name}
-                           {activeItem.value.musicSheetType === "CONCERT" && state.selectedPartName ? `(${state.selectedPartName})` : ""}
-                        </div>
-                        <div class={[styles.staffImgs, !loading.value && !activeItem.value?.id && styles.staffImgsEmpty]}>
-                           {state.iframeSrc && activeItem.value?.id && (
-                              <iframe
-                                 id="staffIframeRef"
-                                 style={{
-                                    // opacity: loading.value ? 0 : 1,
-                                    width: "100%",
-                                    height: "100%"
-                                 }}
-                                 src={state.iframeSrc}
-                                 onLoad={musicIframeLoad}
-                              ></iframe>
-                           )}
+               </div>
+               <div class={styles.rightContainer}>
+                  {/* <i class={styles.leftArrow}></i> */}
 
-                           {!loading.value && !activeItem.value?.id && (
-                              <ElEmpty class={styles.empty} image={require("@/img/layout/empty.png")} description="暂无结果" />
-                           )}
-                        </div>
-                     </NSpin>
+                  <NSpin show={staffLoading.value} stroke="#FF531C">
+                     <div class={styles.musicName}>
+                        {activeItem.value.name}
+                        {activeItem.value.musicSheetType === "CONCERT" && state.selectedPartName ? `(${state.selectedPartName})` : ""}
+                     </div>
+                     <div class={[styles.staffImgs, !loading.value && !activeItem.value?.id && styles.staffImgsEmpty]}>
+                        {state.iframeSrc && activeItem.value?.id && (
+                           <iframe
+                              id="staffIframeRef"
+                              style={{
+                                 // opacity: loading.value ? 0 : 1,
+                                 width: "100%",
+                                 height: "100%"
+                              }}
+                              src={state.iframeSrc}
+                              onLoad={musicIframeLoad}
+                           ></iframe>
+                        )}
 
-                     <img
-                        style={{
-                           display: activeItem.value?.id ? "" : "none"
-                        }}
-                        class={[styles.goBtn]}
-                        src={btnSubmit as any}
-                        onClick={() => {
-                           handleChangeAudio("pause")
-                           goToCloud(activeItem.value.id, state.partXmlIndex)
+                        {!loading.value && !activeItem.value?.id && (
+                           <ElEmpty class={styles.empty} image={require("@/img/layout/empty.png")} description="暂无结果" />
+                        )}
+                     </div>
+                  </NSpin>
+
+                  <img
+                     style={{
+                        display: activeItem.value?.id ? "" : "none"
+                     }}
+                     class={[styles.goBtn]}
+                     src={btnSubmit as any}
+                     onClick={() => {
+                        handleChangeAudio("pause")
+                        goToCloud(activeItem.value.id, state.partXmlIndex)
+                     }}
+                  />
+
+                  <div
+                     class={styles.rightBtns}
+                     style={{ display: activeItem.value.id && activeItem.value.musicSheetType === "CONCERT" ? "" : "none" }}
+                  >
+                     <NPopselect
+                        options={partColumns.value}
+                        trigger="click"
+                        v-model:value={state.selectedPartIndex}
+                        scrollable
+                        onUpdate:value={async (value: any) => {
+                           console.log(value, "value")
+                           const item = partColumns.value.find((item: any) => item.value === value)
+                           state.selectedPartIndex = value
+                           state.selectedPartName = item.instrumentName
+                           state.partXmlIndex = item.xmlIndex
+                           nextTick(() => {
+                              resetRender()
+                           })
                         }}
-                     />
-
-                     <div
-                        class={styles.rightBtns}
-                        style={{ display: activeItem.value.id && activeItem.value.musicSheetType === "CONCERT" ? "" : "none" }}
+                        class={"PopSelect"}
                      >
-                        <NPopselect
-                           options={partColumns.value}
-                           trigger="click"
-                           v-model:value={state.selectedPartIndex}
-                           scrollable
-                           onUpdate:value={async (value: any) => {
-                              console.log(value, "value")
-                              const item = partColumns.value.find((item: any) => item.value === value)
-                              state.selectedPartIndex = value
-                              state.selectedPartName = item.instrumentName
-                              state.partXmlIndex = item.xmlIndex
-                              nextTick(() => {
-                                 resetRender()
-                              })
-                           }}
-                           class={"PopSelect"}
-                        >
-                           <img class={styles.transBtn} src={iconTransfer as any} />
-                        </NPopselect>
-                     </div>
+                        <img class={styles.transBtn} src={iconTransfer as any} />
+                     </NPopselect>
                   </div>
                </div>
-            </ElScrollbar>
+            </div>
+            {/* </ElScrollbar> */}
 
             {state.list.length !== 0 && activeItem.value.audioFileUrl && (
                <PlayItem

src/views/cloudPractice/index.module.scss

@@ -56,7 +56,8 @@
    margin-left: 60px;
    margin-top: 47px;
    width: 600px;
-   height: 729px;
+   // min-height: 729px;
+   height: calc(100% - 47px - 50px);
    position: relative;
    background: linear-gradient(270deg, #fede94 0%, #ffe3a3 48%, #fede94 100%);
    border-radius: 36px;
@@ -79,7 +80,7 @@
       position: relative;
       margin: 0 32px 32px;
       width: 536px;
-      height: 650px;
+      height: calc(100% - 36px);
       background: #ffffff;
       border-radius: 30px;
    }
@@ -87,7 +88,7 @@
       position: absolute;
       left: -49px;
       top: 21px;
-      height: 608px;
+      height: calc(100% - 42px);
       overflow-x: hidden;
       overflow-y: auto;
 
@@ -164,13 +165,15 @@
             height: 22px;
             background: url("../../img/cloudPractice/icon-tag.png") no-repeat center;
             background-size: contain;
-            vertical-align: text-bottom;
+            // vertical-align: text-bottom;
          }
          font-weight: 600;
          font-size: 18px;
          color: #333333;
          line-height: 22px;
          height: 22px;
+         display: flex;
+         align-items: center;
 
          &::after {
             content: "";
@@ -187,6 +190,14 @@
                transform: rotate(180deg);
             }
          }
+
+         span {
+            max-width: 440px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: inline-block;
+         }
       }
    }
 
@@ -203,7 +214,7 @@
 
       :global {
          .el-cascader .el-input .el-input__inner {
-            color: #994D1C;
+            color: #994d1c;
          }
       }
    }
@@ -219,7 +230,7 @@
          font-size: 16px;
          .el-input__icon {
             margin-left: 0;
-            color: #994D1C;
+            color: #994d1c;
          }
       }
       .el-cascader:not(.is-disabled):hover .el-input__wrapper {
@@ -255,6 +266,8 @@
       // min-width: 294px;
       min-height: 100%;
       padding: 0 20px;
+      min-height: auto;
+      flex: 1;
       // background: #fff;
       // border-radius: 16px;
       &.wrapListEmpty {
@@ -385,6 +398,7 @@
    margin-left: 32px;
    margin-top: 47px;
    margin-right: 60px;
+   margin-bottom: 50px;
    position: relative;
    display: flex;
    flex-direction: column;