添加知识点

src/router/routes-common.ts

@@ -76,6 +76,14 @@ export default [
         }
       },
       {
+        path: '/select-points',
+        name: 'select-points',
+        component: () => import('@/views/knowledge-library/select-points'),
+        meta: {
+          title: '选择知识点'
+        }
+      },
+      {
         path: '/wroing-book',
         name: 'wroing-book',
         component: () => import('@/views/knowledge-library/wroing-book/index'),

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

@@ -0,0 +1,128 @@
+.woringBook {
+  position: relative;
+  min-height: 100vh;
+  background: url('./images/wroing-bg.png') no-repeat top center;
+  background-size: contain;
+  overflow: hidden;
+  background-color: #fff;
+}
+
+.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: 100px;
+      height: 20px;
+      display: inline-block;
+      background: url('./images/wroing-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 {
+  height: calc(100vh - var(--header-height) - var(--bottom-height) - 36px);
+  overflow-y: auto;
+  margin-top: 36px;
+  background: #FFFFFF;
+  border-radius: 16px 16px 0 0;
+  padding: 0 15px 12px;
+
+  .emptyContainer {
+    height: calc(100vh - var(--header-height) - var(--bottom-height) - 92px);
+  }
+
+  .title {
+    display: flex;
+    align-items: center;
+    font-size: 17px;
+    font-weight: 600;
+    color: #333333;
+    line-height: 24px;
+    position: sticky;
+    top: 0;
+    left: 0;
+    z-index: 99;
+    padding-top: 12px;
+    padding-bottom: 8px;
+    background-color: #fff;
+
+    &::before {
+      content: ' ';
+      display: inline-block;
+      margin-right: 6px;
+      width: 4px;
+      height: 14px;
+      border-radius: 4px;
+      background: linear-gradient(128deg, #259CFE 0%, #5BECFF 100%);
+    }
+  }
+
+  .cell {
+    padding: 18px 0;
+
+    .iconImg {
+      width: 39px;
+      height: 39px;
+      margin-right: 14px;
+    }
+
+    .cellTitle {
+      font-size: 17px;
+      font-weight: 600;
+      color: #333333;
+      line-height: 24px;
+      max-width: 220px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .cellContent {
+      font-size: 14px;
+      color: #777777;
+      line-height: 20px;
+
+      span {
+        color: #FF5A56;
+        padding-right: 5px;
+      }
+    }
+
+    :global {
+      .van-cell__label {
+        margin-top: 0;
+      }
+    }
+  }
+}
+
+// .groupButtom {
+//   position: fixed;
+//   bottom: 0;
+//   left: 0;
+//   width: 100%;
+// }

src/views/knowledge-library/select-points/index.tsx

@@ -0,0 +1,191 @@
+import MHeader from '@/components/m-header';
+import MSticky from '@/components/m-sticky';
+import { defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from './index.module.less';
+import { useRoute, useRouter } from 'vue-router';
+import {
+  Button,
+  Cell,
+  CellGroup,
+  Checkbox,
+  CheckboxGroup,
+  Image,
+  List,
+  showToast
+} from 'vant';
+import iconBook from './images/icon-book.png';
+import request from '@/helpers/request';
+import MEmpty from '@/components/m-empty';
+import { browser } from '@/helpers/utils';
+import { postMessage } from '@/helpers/native-message';
+
+export default defineComponent({
+  name: 'wroing-book',
+  setup() {
+    const route = useRoute();
+    const router = useRouter();
+    const checkboxRefs = ref([] as any);
+    const forms = reactive({
+      type: route.query.type,
+      list: [] as any,
+      checked: [] as any,
+      isClick: false,
+      listState: {
+        dataShow: true, // 判断是否有数据
+        loading: false,
+        finished: false
+      },
+      params: {
+        page: 1,
+        rows: 20
+      }
+    });
+
+    const getList = async () => {
+      try {
+        if (forms.isClick) return;
+        forms.isClick = true;
+        const res = await request.post('/edu-app/knowledgePoint/page', {
+          data: {
+            ...forms.params
+          }
+        });
+        forms.listState.loading = false;
+        const result = res.data || {};
+        // 处理重复请求数据
+        if (forms.list.length > 0 && result.current === 1) {
+          return;
+        }
+        forms.list = forms.list.concat(result.rows || []);
+        forms.listState.finished = result.current >= result.pages;
+        forms.params.page = result.current + 1;
+        forms.listState.dataShow = forms.list.length > 0;
+        forms.isClick = false;
+      } catch {
+        forms.listState.dataShow = false;
+        forms.listState.finished = true;
+        forms.isClick = false;
+      }
+    };
+
+    const checkboxToggle = (index: number) => {
+      checkboxRefs.value[index].toggle();
+    };
+
+    const onSubmit = () => {
+      try {
+        if (forms.checked.length <= 0) {
+          showToast('请选择知识点');
+          return;
+        }
+        if (forms.type === 'TEST') {
+          // 模拟测试
+          router.push({
+            path: '/examination-mode',
+            query: { knowledgePointIds: forms.checked.join(',') }
+          });
+        } else {
+          router.push({
+            path: '/practice-mode',
+            query: { knowledgePointIds: forms.checked.join(',') }
+          });
+        }
+      } catch {
+        //
+      }
+    };
+    onMounted(() => {
+      getList();
+    });
+    return () => (
+      <div class={styles.woringBook}>
+        <MSticky position="top">
+          <MHeader border={false} background="transparent">
+            {{
+              content: () => (
+                <div class={styles.woringHeader}>
+                  <i
+                    onClick={() => {
+                      if (browser().isApp) {
+                        postMessage({
+                          api: 'goBack'
+                        });
+                      } else {
+                        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}>
+          <div class={styles.title}>请选择知识点</div>
+          {forms.listState.dataShow ? (
+            <List
+              finished={forms.listState.finished}
+              finishedText=" "
+              class={[styles.container, styles.containerInformation]}
+              onLoad={getList}
+              immediateCheck={false}>
+              <CellGroup border={false}>
+                <CheckboxGroup v-model={forms.checked}>
+                  {forms.list.map((item: any, index: number) => (
+                    <Cell
+                      center
+                      onClick={() => checkboxToggle(index)}
+                      class={styles.cell}>
+                      {{
+                        icon: () => (
+                          <Image src={iconBook} class={styles.iconImg} />
+                        ),
+                        title: () => (
+                          <div class={styles.cellTitle}>{item.name}</div>
+                        ),
+                        label: () => (
+                          <p class={styles.cellContent}>
+                            <span>{item.questionNum}</span>道错题
+                          </p>
+                        ),
+                        'right-icon': () => (
+                          <Checkbox
+                            name={item.id}
+                            ref={el => (checkboxRefs.value[index] = el)}
+                            onClick={(e: MouseEvent) => e.stopPropagation()}
+                          />
+                        )
+                      }}
+                    </Cell>
+                  ))}
+                </CheckboxGroup>
+              </CellGroup>
+            </List>
+          ) : (
+            <MEmpty description="暂无知识点" />
+          )}
+        </div>
+
+        {/* {forms.list.length <= 0 && !forms.loading && (
+                    <div class={styles.emptyContainer}>
+                      <MEmpty description="暂无知识点" />
+                    </div>
+                  )} */}
+        <MSticky position="bottom" varName="--bottom-height">
+          <div class={'btnGroup'}>
+            <Button round block type="primary" onClick={onSubmit}>
+              确认
+            </Button>
+          </div>
+        </MSticky>
+      </div>
+    );
+  }
+});