|
|
@@ -823,262 +823,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]}>
|
|
|
- <span>{state.categoryName}</span>
|
|
|
- </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={item.titleImg || 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
|
