|
@@ -1,7 +1,14 @@
|
|
|
-import { computed, defineComponent, onMounted, reactive, ref } from 'vue';
|
|
|
+import {
|
|
|
+ computed,
|
|
|
+ defineComponent,
|
|
|
+ onMounted,
|
|
|
+ reactive,
|
|
|
+ ref,
|
|
|
+ watch
|
|
|
+} from 'vue';
|
|
|
import styles from './baseIndex.module.less';
|
|
|
import icon_back from './image/icon_back.svg';
|
|
|
-import { Button, Tab, Tabs, showConfirmDialog } from 'vant';
|
|
|
+import { Button, Space, Tab, Tabs, showConfirmDialog } from 'vant';
|
|
|
import {
|
|
|
api_lessonCoursewareFavoriteRemove,
|
|
|
api_lessonCoursewareFavoriteSave
|
|
@@ -15,6 +22,8 @@ import MEmpty from '@/components/m-empty';
|
|
|
import MSearch from '@/components/m-search';
|
|
|
import { api_musicSheetCategoriesPage, api_musicTagTree } from './api';
|
|
|
import queryString from 'query-string';
|
|
|
+import { useRect } from '@vant/use';
|
|
|
+import { nextTick } from 'process';
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: 'baseIndex-list',
|
|
@@ -45,6 +54,9 @@ export default defineComponent({
|
|
|
book: {} as DOMRect
|
|
|
});
|
|
|
|
|
|
+ const wrapRef = ref();
|
|
|
+ const wrapItemRef = ref([] as any);
|
|
|
+
|
|
|
const getTanentList = async () => {
|
|
|
try {
|
|
|
const { data } = await api_musicTagTree();
|
|
@@ -75,12 +87,27 @@ export default defineComponent({
|
|
|
}
|
|
|
data.loading = false;
|
|
|
isShowGuide.value = true;
|
|
|
+
|
|
|
+ nextTick(() => {
|
|
|
+ // 设置样式
|
|
|
+ const wrap = useRect(wrapRef);
|
|
|
+ const wrapItem = useRect(wrapItemRef.value[0]);
|
|
|
+ if (wrapItem.width > 0) {
|
|
|
+ wrapRef.value.style.width =
|
|
|
+ Math.floor(wrap.width / wrapItem.width) * wrapItem.width + 'px';
|
|
|
+ wrapRef.value.style.margin = '0 auto';
|
|
|
+ }
|
|
|
+ });
|
|
|
};
|
|
|
onMounted(async () => {
|
|
|
data.loading = true;
|
|
|
await getTanentList();
|
|
|
await getList();
|
|
|
data.loading = false;
|
|
|
+
|
|
|
+ // if (wrapItemRef.value && wrapItemRef.length > 0) {
|
|
|
+ // console.log(wrapItemRef[0], '121');
|
|
|
+ // }
|
|
|
});
|
|
|
|
|
|
const handleFavorite = async (item: any) => {
|
|
@@ -199,36 +226,39 @@ export default defineComponent({
|
|
|
class={[
|
|
|
styles.wrap,
|
|
|
data.list.length <= 0 && !data.loading ? styles.emtpyWrap : ''
|
|
|
- ]}>
|
|
|
+ ]}
|
|
|
+ ref={wrapRef}>
|
|
|
{data.list.map((item, index) => {
|
|
|
return (
|
|
|
- <div
|
|
|
- class={[
|
|
|
- styles.wrapItem,
|
|
|
- data.bookData.id === item.id && data.showBook
|
|
|
- ? styles.wrapItemHide
|
|
|
- : ''
|
|
|
- ]}
|
|
|
- key={item.key}
|
|
|
- onClick={() => onDetail(item)}>
|
|
|
- <div class={styles.item}>
|
|
|
- <NImage
|
|
|
- data-id={item.id}
|
|
|
- {...{ id: index == 0 ? 'courseware-0' : '' }}
|
|
|
- class={[styles.cover, item.load ? styles.loaded : '']}
|
|
|
- objectFit="cover"
|
|
|
- src={item.coverImg}
|
|
|
- onLoad={() => {
|
|
|
- item.load = true;
|
|
|
- }}
|
|
|
- onError={() => {
|
|
|
- item.load = true;
|
|
|
- }}
|
|
|
- />
|
|
|
- </div>
|
|
|
+ <div class={styles.wrapfirstI}>
|
|
|
+ <div
|
|
|
+ ref={(el: any) => (wrapItemRef.value[index] = el)}
|
|
|
+ class={[
|
|
|
+ styles.wrapItem,
|
|
|
+ data.bookData.id === item.id && data.showBook
|
|
|
+ ? styles.wrapItemHide
|
|
|
+ : ''
|
|
|
+ ]}
|
|
|
+ key={item.key}
|
|
|
+ onClick={() => onDetail(item)}>
|
|
|
+ <div class={styles.item}>
|
|
|
+ <NImage
|
|
|
+ data-id={item.id}
|
|
|
+ {...{ id: index == 0 ? 'courseware-0' : '' }}
|
|
|
+ class={[styles.cover, item.load ? styles.loaded : '']}
|
|
|
+ objectFit="cover"
|
|
|
+ src={item.coverImg}
|
|
|
+ onLoad={() => {
|
|
|
+ item.load = true;
|
|
|
+ }}
|
|
|
+ onError={() => {
|
|
|
+ item.load = true;
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
|
|
|
- <div class={styles.name}>{item.name}</div>
|
|
|
- {/* <div
|
|
|
+ <div class={styles.name}>{item.name}</div>
|
|
|
+ {/* <div
|
|
|
id={index === 0 ? 'courseware-1' : ''}
|
|
|
class={styles.favoriteBtn}
|
|
|
onClick={(e: Event) => {
|
|
@@ -238,6 +268,7 @@ export default defineComponent({
|
|
|
}}>
|
|
|
<TheFavorite isFavorite={item.favoriteFlag} />
|
|
|
</div> */}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
);
|
|
|
})}
|