添加知识库基础页面

src/helpers/request.ts

@@ -1,7 +1,7 @@
 import { extend } from 'umi-request';
 import cleanDeep from 'clean-deep';
 import { browser } from '@/helpers/utils';
-import { setLogout, setLoginError, state } from '@/state';
+import { setLogout, setLoginError } from '@/state';
 import { postMessage } from './native-message';
 import { showLoadingToast, showToast, closeToast } from 'vant';
 import { storage } from '@/helpers/storage';

src/main.ts

@@ -12,6 +12,7 @@ import { state } from './state';
 import { storage } from '@/helpers/storage';
 import { ACCESS_TOKEN } from '@/store/mutation-types';
 import { setupStore } from './store';
+import { Lazyload } from 'vant';
 
 // 获取token
 promisefiyPostMessage({ api: 'getToken' }).then((res: any) => {
@@ -37,6 +38,8 @@ postMessage({ api: 'getNavHeight' }, (res: any) => {
 
 const app = createApp(App);
 
+app.use(Lazyload);
+
 // store plugin: pinia
 setupStore(app);
 

src/router/router-root.ts

@@ -45,13 +45,6 @@ export default [
     }
   },
   {
-    path: '/knowledge-library',
-    component: () => import('@/views/knowledge-library/index'),
-    meta: {
-      title: '知识库'
-    }
-  },
-  {
     path: '/payment-result',
     name: 'payment-result',
     component: () => import('@/views/payment-result/index'),

src/router/routes-common.ts

@@ -49,6 +49,30 @@ export default [
         meta: {
           title: '会员中心'
         }
+      },
+      {
+        path: '/knowledge-library',
+        name: 'knowledge-library',
+        component: () => import('@/views/knowledge-library/index'),
+        meta: {
+          title: '知识库'
+        }
+      },
+      {
+        path: '/unit-detail',
+        name: 'unit-detail',
+        component: () => import('@/views/knowledge-library/unit-detail'),
+        meta: {
+          title: '知识库'
+        }
+      },
+      {
+        path: '/wroing-book',
+        name: 'wroing-book',
+        component: () => import('@/views/knowledge-library/wroing-book/index'),
+        meta: {
+          title: '错题本'
+        }
       }
     ]
   },

src/views/knowledge-library/index.module.less

@@ -1,4 +1,114 @@
 .knowledgeLibrary {
+  min-height: 100vh;
   background: url('./images/bg.png') no-repeat top center;
   background-size: contain;
+
+  .wroingBtn {
+    display: flex;
+    align-items: center;
+    height: 24px;
+    background: #FFFFFF;
+    border-radius: 12px;
+    font-size: 14px;
+    color: #0E71BC;
+    padding: 0 8px;
+
+    .iconWroing {
+      width: 14px;
+      height: 14px;
+      background: url('./images/icon-wroing-question.png') no-repeat center;
+      background-size: contain;
+      display: inline-block;
+    }
+  }
 }
+
+.btnGroup {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 0 20px;
+
+  .btnPractice,
+  .btnTest {
+    display: inline-block;
+    width: 139px;
+    height: 49px;
+    border: none
+  }
+
+  .btnPractice {
+    background: url('./images/btn-practice.png') no-repeat center;
+    background-size: contain;
+  }
+
+  .btnTest {
+    margin-left: 17px;
+    background: url('./images/btn-test.png') no-repeat center;
+    background-size: contain;
+  }
+}
+
+.containerSection {
+  background: #87D1F0;
+  border-radius: 20px 20px 0px 0px;
+  padding: 15px;
+
+  &.librarySection {
+    min-height: calc(100vh - var(--header-height) - 129px);
+  }
+
+  &.woringSection {
+    min-height: calc(100vh - var(--header-height) - 60px);
+    margin-top: 60px;
+
+    .woringContent {
+      border-radius: 20px;
+      overflow: hidden;
+      background-color: #fff;
+      padding: 15px;
+    }
+  }
+
+  :global {
+    .van-collapse {
+      border-radius: 20px;
+      overflow: hidden;
+    }
+
+    .van-cell {
+      padding: 16px 15px;
+    }
+
+    .van-collapse-item__content {
+      padding: 0 15px 12px;
+    }
+
+    .van-cell__title {
+      display: flex;
+      align-items: center;
+      font-size: 17px;
+      font-weight: 600;
+      color: #333333;
+
+      &::before {
+        content: ' ';
+        display: inline-block;
+        width: 4px;
+        height: 14px;
+        border-radius: 2px;
+        margin-right: 6px;
+        background: linear-gradient(to bottom, #259CFE, #3FC2FF);
+      }
+    }
+  }
+
+  .unitImg {
+    width: 100%;
+    max-height: 154px;
+
+    &+.unitImg {
+      margin-top: 12px;
+    }
+  }
+}

src/views/knowledge-library/index.tsx

@@ -1,41 +1,19 @@
 import OEmpty from '@/components/m-empty';
 import MHeader from '@/components/m-header';
 import MSticky from '@/components/m-sticky';
-import { Button, List } from 'vant';
 import { defineComponent, reactive } from 'vue';
 import styles from './index.module.less';
 import { useRouter } from 'vue-router';
-import MFullRefresh from '@/components/m-full-refresh';
+import { Button, Collapse, CollapseItem, Image } from 'vant';
 
 export default defineComponent({
   name: 'knowledge-ligrary',
   setup() {
     const router = useRouter();
 
-    const form = reactive({
-      oPopover: false,
-      searchList: [] as any,
+    const forms = reactive({
       list: [] as any,
-      listState: {
-        dataShow: true, // 判断是否有数据
-        loading: false,
-        finished: false,
-        refreshing: false,
-        height: 0 // 页面头部高度，为了处理下拉刷新用的
-      },
-      statusText: '全部测验',
-      params: {
-        keyword: null,
-        status: null,
-        page: 1,
-        rows: 20
-      },
-      isClick: false,
-      visiableNotice: false,
-      unitExam: {} as any, // 测验详情
-      selectUnitExam: {} as any,
-      dialogMessage: '',
-      dialogStatus: false
+      activeNames: 1
     });
 
     const getList = () => {
@@ -48,35 +26,64 @@ export default defineComponent({
           <MHeader border={false} background="transparent">
             {{
               right: () => (
-                <Button round size="small">
-                  错题本
-                </Button>
+                <div
+                  class={styles.wroingBtn}
+                  onClick={() => router.push('/wroing-book')}>
+                  <i class={styles.iconWroing}></i>错题本
+                </div>
               )
             }}
           </MHeader>
         </MSticky>
 
-        <MFullRefresh
-          v-model:modelValue={form.listState.refreshing}
-          style={{
-            minHeight: `calc(100vh - ${form.listState.height}px)`
-          }}>
-          <List
-            finished={form.listState.finished}
-            finishedText=" "
-            class={[styles.liveList]}
-            style={{
-              paddingTop: '12px'
-            }}
-            onLoad={getList}
-            immediateCheck={false}>
-            {form.listState.dataShow ? (
-              <>121212</>
-            ) : (
-              <OEmpty description="暂无阶段自测" />
-            )}
-          </List>
-        </MFullRefresh>
+        <div class={styles.btnGroup}>
+          <Button class={styles.btnPractice}></Button>
+          <Button class={styles.btnTest}></Button>
+        </div>
+
+        <div class={[styles.containerSection, styles.librarySection]}>
+          <Collapse v-model={forms.activeNames} accordion>
+            <CollapseItem
+              title={'第一单元'}
+              name={1}
+              value={forms.activeNames === 1 ? '收起' : '展开'}
+              border={false}>
+              <Image
+                class={styles.unitImg}
+                onClick={() => router.push('/unit-detail')}
+                lazyLoad
+                src={
+                  'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/a0c89db386a44702acf8ae61fe74c201_mergeImage.png'
+                }
+              />
+
+              <Image
+                class={styles.unitImg}
+                onClick={() => router.push('/unit-detail')}
+                lazyLoad
+                src={
+                  'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/a0c89db386a44702acf8ae61fe74c201_mergeImage.png'
+                }
+              />
+            </CollapseItem>
+
+            <CollapseItem
+              title={'第二单元'}
+              name={2}
+              value={forms.activeNames === 2 ? '收起' : '展开'}
+              border={false}>
+              <Image
+                class={styles.unitImg}
+                onClick={() => router.push('/unit-detail')}
+                lazyLoad
+                src={
+                  'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/a0c89db386a44702acf8ae61fe74c201_mergeImage.png'
+                }
+              />
+            </CollapseItem>
+          </Collapse>
+        </div>
+        {/* <OEmpty description="暂无阶段自测" /> */}
       </div>
     );
   }

src/views/knowledge-library/unit-detail.tsx

@@ -0,0 +1,43 @@
+import MHeader from '@/components/m-header';
+import MSticky from '@/components/m-sticky';
+import { defineComponent } from 'vue';
+import styles from './index.module.less';
+import { useRouter } from 'vue-router';
+import { Image } from 'vant';
+
+export default defineComponent({
+  name: 'wroing-book',
+  setup() {
+    const router = useRouter();
+    return () => (
+      <div class={styles.knowledgeLibrary}>
+        <MSticky position="top">
+          <MHeader border={false} background="transparent">
+            {{
+              right: () => (
+                <div
+                  class={styles.wroingBtn}
+                  onClick={() => router.push('/wroing-book')}>
+                  <i class={styles.iconWroing}></i>错题本
+                </div>
+              )
+            }}
+          </MHeader>
+        </MSticky>
+
+        <div class={[styles.containerSection, styles.woringSection]}>
+          <div class={styles.woringContent}>
+            <Image
+              class={styles.unitImg}
+              lazyLoad
+              src={
+                'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/a0c89db386a44702acf8ae61fe74c201_mergeImage.png'
+              }
+            />
+            这里是内容
+          </div>
+        </div>
+      </div>
+    );
+  }
+});

src/views/knowledge-library/wroing-book/index.module.less

@@ -0,0 +1,55 @@
+.woringBook {
+  min-height: 100vh;
+  background: url('./images/woring-bg.png') no-repeat top center;
+  background-size: contain;
+}
+
+.woringHeader {
+  display: flex;
+  align-items: center;
+  height: var(--van-nav-bar-height);
+
+  .leftArrow {
+    padding: 0 var(--k-padding-md);
+  }
+
+  .title {
+    position: relative;
+
+    z-index: 1;
+
+    i {
+      width: 60px;
+      height: 20px;
+      display: inline-block;
+      background: url('./images/woring-title.png') no-repeat center;
+      background-size: contain;
+    }
+
+    &::after {
+      content: ' ';
+      display: inline-block;
+      position: absolute;
+      left: 0;
+      bottom: -2px;
+      width: 48px;
+      height: 6px;
+      background: linear-gradient(270deg, rgba(119, 255, 239, 0.59) 0%, #42CDFF 100%);
+      // opacity: 0.5;
+      z-index: -1;
+    }
+  }
+}
+
+.woringSecgtion {
+  min-height: calc(100vh - var(--header-height) - 120px);
+  margin-top: 120px;
+  background: #FFFFFF;
+  border-radius: 16px 16px 0 0;
+  padding: 20px 14px;
+
+  .woringImg {
+    margin-bottom: 16px;
+    width: 100%;
+  }
+}

src/views/knowledge-library/wroing-book/index.tsx

@@ -0,0 +1,45 @@
+import MHeader from '@/components/m-header';
+import MSticky from '@/components/m-sticky';
+import { defineComponent } from 'vue';
+import styles from './index.module.less';
+import { useRouter } from 'vue-router';
+import { Image } from 'vant';
+import AiExam from './images/ai-exam.png';
+import WoringPractice from './images/woring-practice.png';
+import WoringStat from './images/woring-stat.png';
+
+export default defineComponent({
+  name: 'wroing-book',
+  setup() {
+    const router = useRouter();
+    return () => (
+      <div class={styles.woringBook}>
+        <MSticky position="top">
+          <MHeader border={false} background="transparent">
+            {{
+              content: () => (
+                <div class={styles.woringHeader}>
+                  <i
+                    onClick={() => router.back()}
+                    class={[
+                      'van-badge__wrapper van-icon van-icon-arrow-left van-nav-bar__arrow',
+                      styles.leftArrow
+                    ]}></i>
+                  <span class={styles.title}>
+                    <i></i>
+                  </span>
+                </div>
+              )
+            }}
+          </MHeader>
+        </MSticky>
+
+        <div class={styles.woringSecgtion}>
+          <Image lazyLoad src={WoringStat} class={styles.woringImg} />
+          <Image lazyLoad src={WoringPractice} class={styles.woringImg} />
+          <Image lazyLoad src={AiExam} class={styles.woringImg} />
+        </div>
+      </div>
+    );
+  }
+});

src/views/layout/login.tsx

@@ -119,6 +119,7 @@ export default defineComponent({
             type="tel"
             class={styles['input-group']}
             maxlength={11}
+            autocomplete="off"
           />
 
           {this.loginType === 'PWD' ? (
@@ -128,6 +129,7 @@ export default defineComponent({
               name="密码"
               class={styles['input-group']}
               placeholder="请输入密码"
+              autocomplete="off"
             />
           ) : (
             <Field
@@ -137,6 +139,7 @@ export default defineComponent({
               type="tel"
               class={styles['input-group']}
               maxlength={6}
+              autocomplete="off"
               v-slots={{
                 button: () =>
                   this.countDownStatus ? (