Merge branch 'iteration-20241028-member' into dev

src/components/o-empty/index.tsx

@@ -73,7 +73,7 @@ export default defineComponent({
           image = getAssetsHomeFile('notFond.png');
           break;
         default:
-          image = getAssetsHomeFile('empty.png');
+          image = getAssetsHomeFile('empty1.png');
           break;
       }
       return image;

src/components/o-search/index.module.less

@@ -11,6 +11,7 @@
       -webkit-user-select: text !important;
       user-select: text !important;
       font-size: 13px;
+      font-weight: 400;
     }
 
     .van-search__field {
@@ -76,7 +77,7 @@
 
     :global {
       .van-button__text {
-        margin-top: 1px;
+        margin-top: 1.5px;
       }
     }
   }

src/views/courseList/index.module.less

@@ -1,9 +1,19 @@
 .courseList {
   min-height: 100vh;
-  background-color: #fff;
-  background-image: linear-gradient(180deg, #7DEFE6 0%, rgba(251, 233, 213, 0) 198px);
-  padding: 10px 0;
+  background-color: #F8F8F8;;
+  background-image: url('./image/list-top-bg.png'); // linear-gradient(180deg, #7DEFE6 0%, rgba(248, 248, 248, 0) 315px);
+  background-repeat: no-repeat;
+  background-size: 100%;
+  // padding: 0 0 10px;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  :global {
+    .o-result-container {
+      height: calc(100% - 60px);
+    }
+  }
 }
 
 .periodContent {
@@ -71,11 +81,18 @@
   }
 }
 
+.periodSection {
+  flex: 1;
+  background: #FFFFFF;
+  border-radius: 20px 20px 0px 0px;
+  // min-height: 40vh;
+}
+
 .periodHeader {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 20px 20px 0;
+  padding: 20px 20px 12px;
   .searchGroup {
     padding: 3px 10px 3px 7px;
     border-radius: 19px;
@@ -87,12 +104,17 @@
     align-items: center;
     cursor: pointer;
     .iconSearch {
-      width: 20px;
-      height: 20px;
-      /deep/.van-icon__image {
-        margin: auto;
-        vertical-align: middle;
-      }
+      // width: 20px;
+      flex-shrink: 0;
+      margin-right: 5px;
+      height: 12px;
+      // /deep/.van-icon__image {
+      //   margin: auto;
+      //   vertical-align: middle;
+      // }
+    }
+    span {
+      flex-shrink: 0;
     }
   }
 }

src/views/courseList/index.tsx

@@ -34,7 +34,7 @@ import { browser } from '@/helpers/utils';
 import OEmpty from '@/components/o-empty';
 import iconList from './image/icon-list.png';
 import OHeader from '@/components/o-header';
-import { useEventListener, usePageVisibility } from '@vant/use';
+import { usePageVisibility } from '@vant/use';
 import OLoading from '@/components/o-loading';
 import OSticky from '@/components/o-sticky';
 export default defineComponent({
@@ -295,147 +295,153 @@ export default defineComponent({
         }
       }
     };
-    useEventListener('scroll', () => {
-      const height =
-        window.scrollY ||
-        window.pageYOffset ||
-        document.documentElement.scrollTop;
-      data.titleOpacity = height > 100 ? 1 : height / 100;
-    });
+    // useEventListener('scroll', () => {
+    //   const height =
+    //     window.scrollY ||
+    //     window.pageYOffset ||
+    //     document.documentElement.scrollTop;
+    //   data.titleOpacity = height > 50 ? 1 : 0;
+    // });
     return () => (
       <div class={styles.courseList}>
-        <OHeader
-          border={false}
-          background={`rgba(255,255,255, ${data.titleOpacity})`}
-          title="教材详情"
-        />
-        <div class={styles.periodContent}>
-          <div class={styles.cover}>
-            <img
-              src={data.detail.cover}
-              onLoad={(e: Event) => {
-                if (e.target) {
-                  (e.target as any).style.opacity = 1;
-                }
-              }}
-            />
-          </div>
-          <div>
-            <div class={styles.contentTitle}>{data.detail.name}</div>
-            <div class={styles.contentLabel}>教学目标：{data.detail.des}</div>
+        <OSticky position='top'>
+          <OHeader
+            border={false}
+            background={`rgba(255,255,255, ${data.titleOpacity})`}
+            title="教材详情"
+          />
+        </OSticky>
+        <div style="height: calc(100vh - var(--header-height, 0px) - var(--bottom-height, 0px)); overflow-x: hidden; overflow-y: auto;display:flex; flex-direction: column;">
+          <div class={styles.periodContent}>
+            <div class={styles.cover}>
+              <img
+                src={data.detail.cover}
+                onLoad={(e: Event) => {
+                  if (e.target) {
+                    (e.target as any).style.opacity = 1;
+                  }
+                }}
+              />
+            </div>
+            <div>
+              <div class={styles.contentTitle}>{data.detail.name}</div>
+              <div class={styles.contentLabel}>教学目标：{data.detail.des}</div>
+            </div>
           </div>
-        </div>
 
-        <TransitionGroup name="van-fade">
-          {!data.loading && (
-            <>
-              <div class={styles.periodHeader}>
-                <div key="periodTitle" class={styles.periodTitle}>
-                  <img class={styles.pIcon} src={iconList} />
-                  <div class={styles.pTitle}>课程列表</div>
-                  <div class={styles.pNum}>共{data.list.length}课</div>
-                </div>
-                <div class={styles.searchGroup} onClick={() => {
-                  router.push({
-                    path: '/courseListSearch',
-                    query: {
-                      id: route.query.id
-                    }
-                  })
-                }}>
-                  <img src={iconSearch} class={styles.iconSearch} />
-                  <span class={styles.searchContent}>搜索素材</span>
-                </div>
-              </div>
+          <div class={styles.periodSection}>
+            <TransitionGroup name="van-fade">
+              {!data.loading && (
+                <>
+                  <div class={styles.periodHeader}>
+                    <div key="periodTitle" class={styles.periodTitle}>
+                      <img class={styles.pIcon} src={iconList} />
+                      <div class={styles.pTitle}>课程列表</div>
+                      <div class={styles.pNum}>共{data.list.length}课</div>
+                    </div>
+                    <div class={styles.searchGroup} onClick={() => {
+                      router.push({
+                        path: '/courseListSearch',
+                        query: {
+                          id: route.query.id
+                        }
+                      })
+                    }}>
+                      <img src={iconSearch} class={styles.iconSearch} />
+                      <span class={styles.searchContent}>搜索素材</span>
+                    </div>
+                  </div>
 
-              <div key="list" class={styles.periodList}>
-                <CellGroup inset>
-                  {data.list.map((item: any) => {
-                    return (
-                      <Cell
-                        border
-                        center
-                        title={item.coursewareDetailName}
-                        // label={
-                        //   !browserInfo.isStudent
-                        //     ? `已使用${item.useNum || 0}次`
-                        //     : ''
-                        // }
-                        onClick={() => handleClick(item)}>
-                        {{
-                          icon: () => (
-                            <div class={styles.periodItem}>
-                              <div class={styles.periodItemModel}>
-                                <img src={isLock.value ? iconCourseLock : iconCourse} />
-                                {item.hasCache ? (
-                                  <img
-                                    class={styles.iconCachePoint}
-                                    src={iconCachePoint}
-                                  />
-                                ) : (
-                                  ''
-                                )}
-                                {item.downloadStatus === 1 && (
-                                  <div class={styles.downloading}>{`${
-                                    item.progress || 0
-                                  }%`}</div>
-                                )}
-                              </div>
-                            </div>
-                          ),
-                          value: () => (
-                            <>
-                              {item.knowledgePointList ? (
+                  <div key="list" class={styles.periodList}>
+                    <CellGroup inset>
+                      {data.list.map((item: any) => {
+                        return (
+                          <Cell
+                            border
+                            center
+                            title={item.coursewareDetailName}
+                            // label={
+                            //   !browserInfo.isStudent
+                            //     ? `已使用${item.useNum || 0}次`
+                            //     : ''
+                            // }
+                            onClick={() => handleClick(item)}>
+                            {{
+                              icon: () => (
+                                <div class={styles.periodItem}>
+                                  <div class={styles.periodItemModel}>
+                                    <img src={isLock.value ? iconCourseLock : iconCourse} />
+                                    {item.hasCache ? (
+                                      <img
+                                        class={styles.iconCachePoint}
+                                        src={iconCachePoint}
+                                      />
+                                    ) : (
+                                      ''
+                                    )}
+                                    {item.downloadStatus === 1 && (
+                                      <div class={styles.downloading}>{`${
+                                        item.progress || 0
+                                      }%`}</div>
+                                    )}
+                                  </div>
+                                </div>
+                              ),
+                              value: () => (
                                 <>
-                                  { isLock.value ? <Button
-                                      class={[
-                                        styles.baseBtn,
-                                        styles.look,
-                                        styles.disable
-                                      ]}>
-                                      未解锁
-                                    </Button> : item.hasCache ? (
-                                    <Button
-                                      class={[
-                                        styles.baseBtn,
-                                        styles.look
-                                      ]}>
-                                      查看
-                                    </Button>
+                                  {item.knowledgePointList ? (
+                                    <>
+                                      { isLock.value ? <Button
+                                          class={[
+                                            styles.baseBtn,
+                                            styles.look,
+                                            styles.disable
+                                          ]}>
+                                          未解锁
+                                        </Button> : item.hasCache ? (
+                                        <Button
+                                          class={[
+                                            styles.baseBtn,
+                                            styles.look
+                                          ]}>
+                                          查看
+                                        </Button>
+                                      ) : (
+                                        <Button
+                                          class={[
+                                            styles.baseBtn,
+                                            styles.down,
+                                            item.downloadStatus == 1
+                                              ? styles.downing
+                                              : ''
+                                          ]}>
+                                          {item.downloadStatus === 1
+                                            ? `取消下载`
+                                            : '查看'}
+                                        </Button>
+                                      )}
+                                    </>
                                   ) : (
-                                    <Button
-                                      class={[
-                                        styles.baseBtn,
-                                        styles.down,
-                                        item.downloadStatus == 1
-                                          ? styles.downing
-                                          : ''
-                                      ]}>
-                                      {item.downloadStatus === 1
-                                        ? `取消下载`
-                                        : '查看'}
-                                    </Button>
+                                    ''
                                   )}
                                 </>
-                              ) : (
-                                ''
-                              )}
-                            </>
-                          )
-                        }}
-                      </Cell>
-                    );
-                  })}
-                </CellGroup>
-              </div>
-            </>
-          )}
-        </TransitionGroup>
-        {data.loading && <OLoading />}
-        {!data.loading && !data.list.length && <OEmpty tips="暂无内容" />}
+                              )
+                            }}
+                          </Cell>
+                        );
+                      })}
+                    </CellGroup>
+                  </div>
+                </>
+              )}
+            </TransitionGroup>
+            {data.loading && <OLoading />}
+            {!data.loading && !data.list.length && <OEmpty tips="暂无内容" />}
+          </div>
+        </div>
 
         {isLock.value && (
-          <OSticky position="bottom">
+          <OSticky position="bottom" varName='--bottom-height'>
             <div class={styles.btnGroup}>
               <Button round block type="primary" onClick={() => {
                 handleShowVip(route.query.id as string, "LESSON")

src/views/courseListSearch/child-node.tsx

@@ -60,7 +60,7 @@ const ChildNode = defineComponent({
         postMessage({
           api: 'openWebView',
           content: {
-            url: `${location.origin}${location.pathname}#/coursewarePlay?lessonId=${props.id}&source=search&kId=${item.id}&search=${props.search}`,
+            url: `${location.origin}${location.pathname}#/coursewarePlay?lessonId=${props.id}&source=search&kId=${item.id}&search=${encodeURIComponent(props.search)}`,
             orientation: 0,
             isHideTitle: true,
             statusBarTextColor: false,
@@ -86,6 +86,8 @@ const ChildNode = defineComponent({
       const search: any = props.search
       return name.replace(search, `<span style="color: #01C1B5;">${search}</span>`)
     }
+
+    console.log(props.collapse, "collapse")
     return () => (
       <Collapse
         modelValue={props.collapse}
@@ -115,7 +117,7 @@ const ChildNode = defineComponent({
                 <>
                   {Array.isArray(point?.materialList) &&
                     point.materialList.map((n: any) => (
-                      <Cell center isLink clickable={false} onClick={() => toDetail(n)}>
+                      <Cell center isLink border={false} clickable={false} onClick={() => toDetail(n)}>
                         {{
                           title: () => <div class={styles.materialSection}>
                             <img src={getImage(n)} class={styles.iconMaterial} />

src/views/courseListSearch/index.module.less

@@ -1,6 +1,6 @@
 .courseListSearch {
   min-height: 100vh;
-  background-color: #fff;
+  background-color: #F8F8F8;
   background: linear-gradient(180deg, #7defe6 0%, rgba(255, 255, 255, 0) 170px);
   box-sizing: border-box;
 
@@ -30,6 +30,9 @@
   :global {
     .parentCollapse__item {
       margin: 0 14px 12px;
+      &::after {
+        display: none;
+      }
   
       & >  .van-collapse-item__wrapper {
         margin: 0 14px 12px;

src/views/courseListSearch/index.tsx

@@ -1,4 +1,10 @@
-import { computed, defineComponent, reactive, TransitionGroup, watch } from 'vue';
+import {
+  computed,
+  defineComponent,
+  reactive,
+  TransitionGroup,
+  watch
+} from 'vue';
 import styles from './index.module.less';
 import OHeader from '@/components/o-header';
 import OSearch from '@/components/o-search';
@@ -9,8 +15,9 @@ import OLoading from '@/components/o-loading';
 import OEmpty from '@/components/o-empty';
 import { Cell, Collapse, CollapseItem } from 'vant';
 import ChildNode, { getImage } from './child-node';
-import { useEventListener, usePageVisibility } from '@vant/use';
+import { usePageVisibility } from '@vant/use';
 import iconMenu from './image/icon-menu.png';
+import OSticky from '@/components/o-sticky';
 
 export default defineComponent({
   name: 'course-list-search',
@@ -24,7 +31,7 @@ export default defineComponent({
         // cover: '',
         // name: '',
         // des: '',
-        useStatus: '',
+        useStatus: ''
       },
       list: [] as any,
       search: '' as string | undefined,
@@ -34,8 +41,11 @@ export default defineComponent({
     const pageVisibility = usePageVisibility();
     /** 是否锁定 */
     const isLock = computed(() => {
-      return  (data.detail.useStatus === 'LOCK' && state.platformType === 'STUDENT') ? true : false;
-    })
+      return data.detail.useStatus === 'LOCK' &&
+        state.platformType === 'STUDENT'
+        ? true
+        : false;
+    });
     const formatDataList = (list: any = []) => {
       const tempList: any = [];
       list.forEach((item: any) => {
@@ -51,6 +61,72 @@ export default defineComponent({
       });
       return tempList;
     };
+
+    const formatSelectFirstChild = (list: any = []): any => {
+      for (let i = 0; i < list.length; i++) {
+        if (
+          Array.isArray(list[i].materialList) &&
+          list[i].materialList.length > 0
+        ) {
+          const materialItem = list[i].materialList[0] || {};
+          if (materialItem) {
+            return materialItem;
+          }
+        } else {
+          return formatSelectFirstChild(list[i].children || []);
+        }
+      }
+    };
+
+    //
+    function selectFirstChild(pointList: any[], ids: any[]): any[] {
+      return pointList.map(point => {
+        if (point.children) {
+          let id = '';
+          point.children.map((item: any) => {
+            if (!id) {
+              id = ids.includes(item.id) ? item.id : '';
+            }
+          });
+          point.collapse = id;
+          return Object.assign(point, {
+            children: selectFirstChild(point.children, ids)
+          });
+        } else {
+          return Object.assign(point, {
+            materialList: point.materialList
+          });
+        }
+      });
+    }
+
+    function filterPointList(
+      pointList: any[],
+      parentData?: { ids: string[]; name: string }
+    ): any[] {
+      // 设置父级及以上id数组和父级name
+      return pointList.map(point => {
+        if (point.children) {
+          return Object.assign(point, {
+            children: filterPointList(point.children, {
+              ids: [...(parentData?.ids || []), point.id],
+              name: point.name
+            })
+          });
+        } else {
+          return Object.assign(point, {
+            materialList: point.materialList.map((item: any) => {
+              item.parentData = {
+                ids: [...(parentData?.ids || []), point.id],
+                name: point.name
+              };
+              return item;
+            })
+          });
+        }
+      });
+    }
+
     /** 获取课件详情 */
     const getDetail = async () => {
       const res: any = await request.get(
@@ -70,28 +146,36 @@ export default defineComponent({
         const res: any = await request.get(
           state.platformApi +
             '/lessonCourseware/getLessonCoursewareCourseList/' +
-            route.query.id, {
-              requestType: 'form',
-              params: {
-                search
-              }
+            route.query.id,
+          {
+            requestType: 'form',
+            params: {
+              search
             }
+          }
         );
         if (Array.isArray(res?.data)) {
-          data.search = search
+          data.search = search;
           res.data.forEach((item: any) => {
             item.children = item.knowledgePointList || [];
             item.id = item.coursewareDetailId;
             item.name = item.coursewareDetailName;
             formatDataList(item.children);
           });
+          const firstItem = formatSelectFirstChild(res.data);
+          let list = filterPointList(res.data);
+          list = selectFirstChild(list, firstItem?.parentData?.ids || []);
+          data.list = list;
 
-          data.list = res.data;
-
-          data.parentCollapse = data.list[0].id
+          list.forEach((item: any) => {
+            if (item.id === firstItem.parentData?.ids[0]) {
+              data.parentCollapse = item.id;
+            }
+          });
         }
       } catch (error) {
         //
+        console.log(error, 'error');
       }
       data.loading = false;
     };
@@ -102,114 +186,118 @@ export default defineComponent({
     watch(
       () => pageVisibility.value,
       value => {
-        if(value === "visible") {
-          getDetail()
+        if (value === 'visible') {
+          getDetail();
         }
       }
     );
 
-    useEventListener('scroll', () => {
-      const height =
-        window.scrollY ||
-        window.pageYOffset ||
-        document.documentElement.scrollTop;
-      data.titleOpacity = height > 100 ? 1 : height / 100;
-    });
+    // useEventListener('scroll', () => {
+    //   const height =
+    //     window.scrollY ||
+    //     window.pageYOffset ||
+    //     document.documentElement.scrollTop;
+    //   data.titleOpacity = height > 30 ? 1 : 0;
+    // });
     return () => (
       <div class={styles.courseListSearch}>
-        <OHeader
-          isBack
-          background={`rgba(255,255,255, ${data.titleOpacity})`}
-          border={false}>
-          {{
-            title: () => (
-              <div class={styles.title}>
-                <OSearch
-                  background="transparent"
-                  placeholder="请输入素材关键词"
-                  onSearch={(val: string) => {
-                    getList(val)
-                  }}
-                />
-              </div>
-            )
-          }}
-        </OHeader>
+        <OSticky position="top">
+          <OHeader
+            background={`rgba(255,255,255, ${data.titleOpacity})`}
+            border={false}>
+            {{
+              title: () => (
+                <div class={styles.title}>
+                  <OSearch
+                    background="transparent"
+                    placeholder="请输入素材关键词"
+                    onSearch={(val: string) => {
+                      getList(val);
+                    }}
+                  />
+                </div>
+              )
+            }}
+          </OHeader>
+        </OSticky>
 
-        <TransitionGroup name="van-fade">
-          {!data.loading && (
-            <Collapse
-              key="courseListSearch"
-              modelValue={data.parentCollapse}
-              onUpdate:modelValue={(val: any) => {
-                data.parentCollapse = val;
-                // data.childrenCollapse = ''; // 重置子项选择
-              }}
-              class={styles.collapseParent}
-              border={false}
-              accordion>
-              {data.list.map((item: any) => (
-                <CollapseItem
-                  center
-                  name={item.coursewareDetailId}
-                  clickable={false}
-                  class={['parentCollapse__item']}>
-                  {{
-                    title: () => (
-                      <div class={[styles.itemTitle]}>
-                        <img src={iconMenu} class={styles.iconMenu} />
-                        {item.coursewareDetailName}
-                      </div>
-                    ),
-                    default: () => (
-                      <>
-                        {Array.isArray(item?.materialList) &&
-                          item.materialList.map((n: any) => (
-                            <Cell center isLink clickable={false}>
-                              {{
-                                title: () => (
-                                  <div class={styles.materialSection}>
-                                    <img
-                                      src={getImage(n)}
-                                      class={styles.iconMaterial}
-                                    />
-                                    {n.name}
-                                  </div>
-                                )
+        <div style="height: calc(100vh - var(--header-height)); overflow-x: hidden; overflow-y: auto;">
+          <TransitionGroup name="van-fade">
+            {!data.loading && (
+              <Collapse
+                key="courseListSearch"
+                modelValue={data.parentCollapse}
+                onUpdate:modelValue={(val: any) => {
+                  data.parentCollapse = val;
+                  // data.childrenCollapse = ''; // 重置子项选择
+                }}
+                class={styles.collapseParent}
+                border={false}
+                accordion>
+                {data.list.map((item: any) => (
+                  <CollapseItem
+                    center
+                    border={true}
+                    name={item.coursewareDetailId}
+                    clickable={false}
+                    class={['parentCollapse__item']}>
+                    {{
+                      title: () => (
+                        <div class={[styles.itemTitle]}>
+                          <img src={iconMenu} class={styles.iconMenu} />
+                          {item.coursewareDetailName}
+                        </div>
+                      ),
+                      default: () => (
+                        <>
+                          {Array.isArray(item?.materialList) &&
+                            item.materialList.map((n: any) => (
+                              <Cell center isLink clickable={false}>
+                                {{
+                                  title: () => (
+                                    <div class={styles.materialSection}>
+                                      <img
+                                        src={getImage(n)}
+                                        class={styles.iconMaterial}
+                                      />
+                                      {n.name}
+                                    </div>
+                                  )
+                                }}
+                              </Cell>
+                            ))}
+                          {Array.isArray(item?.children) && (
+                            <ChildNode
+                              id={route.query.id as any}
+                              search={data.search}
+                              isLock={isLock.value}
+                              list={item.children}
+                              collapse={item.collapse}
+                              onUpdate:collapse={(val: any) => {
+                                item.collapse = val;
                               }}
-                            </Cell>
-                          ))}
-                        {Array.isArray(item?.children) && (
-                          <ChildNode
-                            id={route.query.id as any}
-                            search={data.search}
-                            isLock={isLock.value}
-                            list={item.children}
-                            collapse={item.collapse}
-                            onUpdate:collapse={(val: any) => {
-                              item.collapse = val;
-                            }}
-                          />
-                        )}
-                      </>
-                    ),
-                    'right-icon': () => (
-                      <i
-                        class={[
-                          styles.arrow,
-                          data.parentCollapse === item.coursewareDetailId
-                            ? styles.arrowActive
-                            : ''
-                        ]}></i>
-                    )
-                  }}
-                </CollapseItem>
-              ))}
-            </Collapse>
-          )}
-        </TransitionGroup>
-        {data.loading && <OLoading />}
-        {!data.loading && !data.list.length && <OEmpty tips="暂无搜索结果" />}
+                            />
+                          )}
+                        </>
+                      ),
+                      'right-icon': () => (
+                        <i
+                          class={[
+                            styles.arrow,
+                            data.parentCollapse === item.coursewareDetailId
+                              ? styles.arrowActive
+                              : ''
+                          ]}></i>
+                      )
+                    }}
+                  </CollapseItem>
+                ))}
+              </Collapse>
+            )}
+          </TransitionGroup>
+          {data.loading && <OLoading />}
+          {!data.loading && !data.list.length && <OEmpty tips="暂无搜索结果" />}
+        </div>
       </div>
     );
   }

src/views/coursewarePlay/component/point.module.less

@@ -32,7 +32,7 @@
       padding-right: 20px;
 
       input {
-        color: rgba(255,255,255,0.9);
+        color: rgba(255,255,255, 1);
       }
     }
   }
@@ -42,6 +42,17 @@
   flex: 1;
   overflow-y: auto;
   padding: 0 20px;
+
+  .lading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    .loadingText {
+      padding-left: 8px;
+      color: rgba(255, 255, 255, 0.8);
+    }
+  }
 }
 
 .collapse {

src/views/coursewarePlay/component/points-search.tsx

@@ -9,10 +9,10 @@ import {
   iconSong,
   iconSongActive
 } from '../image/icons.json';
-import { Collapse, CollapseItem, Icon, Image } from 'vant';
+import { Collapse, CollapseItem, Image, Loading } from 'vant';
 import PlayLoading from './play-loading';
 import OSearch from '@/components/o-search';
-import OLoading from '@/components/o-loading';
+// import OLoading from '@/components/o-loading';
 import OEmpty from '@/components/o-empty';
 export default defineComponent({
   name: 'points-list',
@@ -76,6 +76,12 @@ export default defineComponent({
         return props.itemActive == item.id ? iconVideoActive : iconVideo;
       }
     };
+
+    function formatName(name: string) {
+      if (!name || !pointData.search) return name
+      const search: any = pointData.search
+      return name.replace(search, `<span style="color: #01C1B5;">${search}</span>`)
+   }
     return () => (
       <div class={styles.container}>
         <div class={styles.pointHeadSearch}>
@@ -90,9 +96,13 @@ export default defineComponent({
           }} />
         </div>
         <div class={styles.content}>
-          {props.loading && <OLoading />}
+        {props.loading && <div class={styles.lading}>
+            <Loading size={24} color='rgba(255, 255, 255, 0.8)' /> <span class={styles.loadingText}>加载中...</span>
+          </div>}
+          
+          {/* {props.loading && <OLoading />} */}
           {!props.loading && !props.data.length && <OEmpty tips="暂无搜索结果" />}
-          <Collapse
+          {props.data.length > 0 ? <Collapse
             class={styles.collapse}
             modelValue={pointData.active}
             onUpdate:modelValue={(val: any) => {
@@ -197,8 +207,8 @@ export default defineComponent({
                                                 />
                                                 <span
                                                   style={{ width: '73%' }}
-                                                  class="van-ellipsis">
-                                                  {n.name}
+                                                  class="van-ellipsis" v-html={formatName(n.name)}>
+                                                  {/* {n.name} */}
                                                 </span>
                                                 {/* <Icon name={iconZhibo} /> */}
                                                 <div class={styles.playLoading}>
@@ -258,8 +268,8 @@ export default defineComponent({
                                                                   />
                                                                   <span
                                                                     style={{ width: '73%' }}
-                                                                    class="van-ellipsis">
-                                                                    {n.name}
+                                                                    class="van-ellipsis" v-html={formatName(n.name)}>
+                                                                    {/* {n.name} */}
                                                                   </span>
                                                                   {/* <Icon name={iconZhibo} /> */}
                                                                   <div class={styles.playLoading}>
@@ -303,7 +313,7 @@ export default defineComponent({
                 </CollapseItem>
               );
             })}
-          </Collapse>
+          </Collapse>: ""}
         </div>
       </div>
     );

src/views/coursewarePlay/index.tsx

@@ -1,4 +1,4 @@
-import { closeToast, Icon, Popup, showDialog, showToast } from 'vant';
+import { closeToast, Icon, Popup, showDialog, showToast, Tab } from 'vant';
 import {
   defineComponent,
   onMounted,
@@ -430,41 +430,6 @@ export default defineComponent({
     };
 
 
-    /** 搜索页面 获取当前播放元素 */
-    const checkRecursionCoursewareId = (list: [], id: string) => {
-      list.forEach((parent: any) => {
-        if(Array.isArray(parent.materialList)) {
-          const parentMaterial = parent.materialList || []
-          parentMaterial.forEach((item: any) => {
-            console.log(item.materialId, id, '------------------------------')
-            if(item.materialId == id) {
-              console.log(item, '---------------')
-              return true
-            }
-          })
-        }
-        if(Array.isArray(parent.child)) {
-          const parentItem = parent.child || []
-          checkRecursionCoursewareId(parentItem, id)
-        }
-      })
-    }
-    const getSearchParentCoursewareId = (list: [], id: string) => {
-      if(!id || list.length <= 0) return
-
-      // list.knowledgePointList.forEach(element => {
-        
-      // });
-      // let coursewareDetailId = ''
-      console.log(list, '12121--------')
-      list.forEach((parent: any) => {
-        if(Array.isArray(parent.knowledgePointList)) {
-          const parentItem = parent.knowledgePointList || []
-          console.log(checkRecursionCoursewareId(parentItem, id))
-        }
-      })
-    }
-
     /** 从搜索页面来的 */
     const getSearchDetail = async (params: { type?: string, id?: any, search?: string }) => {
       try {
@@ -474,6 +439,7 @@ export default defineComponent({
           {
             hideLoading: true,
             params: {
+              detailFlag: "1",
               search: params.search
             }
           }
@@ -553,13 +519,16 @@ export default defineComponent({
         }
         if(params.type === 'pointSearch') {
           detailTempSearchList.value = result
+
+          // 初始化选中的数据 临时
+          popupData.tempTabActive = allList.length > 0 ? allList[0].knowledgePointId : []
+          popupData.tempItemActive = "-1"
+          data.searchTemp = params.search
           return
         }
         detailList.value = result
         detailTempSearchList.value = result
 
-        // getSearchParentCoursewareId(result, route.query.kId as any)  
-
         if(!params.type) {
           let _firstIndex = allList.findIndex(
             (n: any) =>
@@ -568,7 +537,7 @@ export default defineComponent({
           );
           _firstIndex = _firstIndex > -1 ? _firstIndex : 0;
           const item = allList[_firstIndex];
-          console.log(item, 'item')
+          // console.log(item, 'item')
           // console.log(_firstIndex, '_firstIndex', route.query.kId, 'route.query.kId', item)
           // 是否自动播放
           if (activeData.isAutoPlay) {
@@ -726,6 +695,14 @@ export default defineComponent({
     }
 
     onMounted(async () => {
+      // 键盘唤起  0是顶起 1是覆盖 
+      postMessage({
+        api: 'setSoftInputMode',
+        content: {
+          type: 1
+        }
+      });
+
       isHidden.value = true;
       await sysParamConfig();
       if(data.source === 'search') {
@@ -755,14 +732,15 @@ export default defineComponent({
       }
     });
 
-    const playRef = ref();
+    // const playRef = ref();
     // 返回
     const goBack = () => {
-      try {
-        playRef.value?.handleOut();
-      } catch (error) {
-        console.log(error);
-      }
+      // console.log('back -----');
+      // try {
+      //   playRef.value?.handleOut();
+      // } catch (error) {
+      //   console.log(error);
+      // }
       postMessage({ api: 'back' });
     };
 
@@ -775,6 +753,8 @@ export default defineComponent({
       activeIndex: 0,
       playIndex: 0,
       tabActive: '',
+      tempTabActive: '', // 临时选中
+      tempItemActive: "", // 临时编号
       tabName: '',
       itemActive: '',
       itemName: '',
@@ -910,8 +890,8 @@ export default defineComponent({
     // 轮播切换
     const handleSwipeChange = async (index: number) => {
       if(data.source === 'search') {
-        // const item = data.itemList[index];
-        // data.detail = detailList.value?.find((child: any) => child.coursewareDetailId === item.coursewareDetailId)
+        const item = data.itemList[index];
+        data.detail = detailList.value?.find((child: any) => child.coursewareDetailId === item.coursewareDetailId)
       }
       // 如果是当前正在播放 或者是视频最后一个
       if (popupData.activeIndex == index) return;
@@ -1342,6 +1322,9 @@ export default defineComponent({
                     <div class={styles.fullBtn} onClick={() => {
                       handleStop()
                       detailTempSearchList.value = detailList.value
+                      popupData.tempItemActive = ""
+                      popupData.tempTabActive = ""
+                      data.searchTemp = ""
                       // data.searchTemp = JSON.parse(JSON.stringify(data.search))
                       popupData.open = true
                     }}>
@@ -1431,10 +1414,10 @@ export default defineComponent({
             {data.source === 'search' ? 
               <PointsSearch
                 data={detailTempSearchList.value}
-                search={data.search}
+                search={data.searchTemp || data.search}
                 loading={data.searchLoading}
-                tabActive={popupData.tabActive}
-                itemActive={popupData.itemActive}
+                tabActive={popupData.tempTabActive || popupData.tabActive}
+                itemActive={popupData.tempItemActive || popupData.itemActive}
                 open={popupData.open}
                 onHandleSelect={(res: any) => {
                   popupData.open = false;

vite.config.ts

@@ -14,7 +14,7 @@ function resolve(dir: string) {
 }
 // https://vitejs.dev/config/
 // https://github.com/vitejs/vite/issues/1930 .env
-const proxyUrl = 'https://dev.gym.lexiaoya.cn';
+const proxyUrl = 'https://test.gym.lexiaoya.cn';
 export default defineConfig({
   base: './',
   plugins: [