fix

package.json

@@ -34,7 +34,7 @@
     "html2canvas": "^1.4.1",
     "naive-ui": "^2.34.4",
     "numeral": "^2.0.6",
-    "pinia": "^2.1.4",
+    "pinia": "^2.0.36",
     "plyr": "^3.7.8",
     "qrcode": "^1.5.3",
     "query-string": "^8.1.0",

src/router/routes-common.ts

@@ -74,7 +74,15 @@ export default [
         meta: {
           title: '错题本'
         }
-      }
+      },
+      {
+        path: '/courseware-list',
+        name: 'courseware-list',
+        component: () => import('@/views/courseware-list/index'),
+        meta: {
+          title: '教材列表'
+        }
+      },
     ]
   },
   ...rootRouter

src/views/courseware-list/api.ts

@@ -0,0 +1,8 @@
+import request from '@/helpers/request';
+
+/** 获取音乐教材列表 */
+export const api_lessonCoursewarePage = (params: any): Promise<any> => {
+  return request.post('/edu-app/lessonCourseware/page', {
+    data: params
+  });
+};

src/views/courseware-list/image/icon_arrow.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="9px" height="5px" viewBox="0 0 9 5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>三角形</title>
+    <g id="演示用" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="全部教材-筛选" transform="translate(-769.000000, -35.000000)" fill="#AAAAAA">
+            <g id="编组-3" transform="translate(696.000000, 20.000000)">
+                <g id="筛选目录备份-2" transform="translate(13.000000, 7.000000)">
+                    <path d="M64.8716471,8.41294119 L68.2489659,12.1655176 C68.4336954,12.3707726 68.4170562,12.6869176 68.2118012,12.8716471 C68.1199888,12.9542782 68.0008397,13 67.8773188,13 L61.1226812,13 C60.8465388,13 60.6226812,12.7761424 60.6226812,12.5 C60.6226812,12.3764791 60.668403,12.25733 60.7510341,12.1655176 L64.1283529,8.41294119 C64.3130824,8.20768618 64.6292274,8.19104698 64.8344824,8.37577649 C64.8475136,8.38750459 64.859919,8.39990996 64.8716471,8.41294119 Z" id="三角形" transform="translate(64.500000, 10.500000) rotate(-180.000000) translate(-64.500000, -10.500000) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/courseware-list/image/icon_back.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="38px" height="38px" viewBox="0 0 38 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>返回</title>
+    <defs>
+        <linearGradient x1="-67.2865798%" y1="100%" x2="100%" y2="50%" id="linearGradient-1">
+            <stop stop-color="#5BECFF" offset="0%"></stop>
+            <stop stop-color="#259CFE" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="-1.46584134e-14%" y1="2.42861287e-14%" x2="100%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#19F1E1" offset="0%"></stop>
+            <stop stop-color="#0094FF" offset="100%"></stop>
+        </linearGradient>
+        <path d="M9.14012318,15.1713216 L15.0855207,8.77987308 C15.8974668,8.13316936 17.1353518,8.67908809 17.1353518,9.68273868 L17.1353518,13.2186123 L24.82,13.2186123 L24.82,20.1013877 L17.1397887,20.1013877 L17.1397887,23.6372613 C17.1397887,24.6409119 15.8974668,25.1868306 15.0899576,24.5401269 L9.17118123,18.4090396 C8.28824532,17.4935759 8.27493473,16.0993835 9.14012318,15.1713216 Z" id="path-3"></path>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="小酷Ai-" transform="translate(-14.000000, -16.000000)">
+            <g id="编组-7" transform="translate(16.000000, 18.000000)">
+                <path d="M17,0 C26.3736175,0 34,7.62638252 34,17 C34,26.3736175 26.3736175,34 17,34 C7.62638252,34 0,26.3736175 0,17 C0,7.62638252 7.62638252,0 17,0" id="路径" stroke-opacity="0.363481855" stroke="#7BCBF8" stroke-width="3" fill="#FFFFFF" fill-rule="nonzero"></path>
+                <g id="路径">
+                    <use fill="#EFEFEF" xlink:href="#path-3"></use>
+                    <use fill="url(#linearGradient-1)" xlink:href="#path-3"></use>
+                    <use fill="url(#linearGradient-2)" xlink:href="#path-3"></use>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/courseware-list/index.module.less

@@ -0,0 +1,134 @@
+.container {
+    position: relative;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    background: url('../../common/images/icon_bg.png') no-repeat center center / cover;
+    display: flex;
+    flex-direction: column;
+}
+
+.head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 19px 23px 8px 41px;
+
+    .tabs {
+        :global {
+            .van-tab {
+                color: rgba(255, 255, 255, .9);
+                font-size: 15px;
+                padding: 0 16px;
+
+                &.van-tab--active {
+                    color: #fff;
+                }
+            }
+
+            .van-tabs__nav.van-tabs__nav--line {
+                background: transparent;
+            }
+
+            .van-tabs__line {
+                background: #fff;
+                width: 18px;
+                height: 4px;
+            }
+        }
+    }
+}
+
+.downBtn {
+    width: 84px;
+    height: 32px;
+    background: #F8F9FC;
+    border-radius: 16px;
+    border: none;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    :global {
+        .van-button__content {
+            width: 100%;
+        }
+
+        .van-button__text {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 13px;
+            color: #333;
+            font-weight: 400;
+        }
+    }
+
+    .icon {
+        width: 8px;
+        height: 5px;
+        margin-left: 4px;
+    }
+}
+
+.popover {
+    width: 83px;
+    border: none;
+
+    :global {
+        .van-popover__action {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 0;
+            width: 100%;
+            height: 40px;
+            color: #777;
+        }
+
+        .van-popover__content {
+            max-height: 70vh;
+            overflow-x: hidden;
+            overflow-y: auto;
+        }
+    }
+}
+
+
+.content {
+    flex: 1;
+    overflow-y: hidden;
+    overflow-x: auto;
+
+    .wrap {
+        display: flex;
+        height: 100%;
+        padding: 40px 63px 0;
+    }
+}
+
+.wrapItem {
+    width: 120px;
+    display: flex;
+    flex-direction: column;
+    margin: 0 17px;
+
+    .cover {
+        display: block;
+        width: 100%;
+        height: 170px;
+        object-fit: cover;
+        margin-bottom: 15px;
+    }
+
+    .name {
+        font-size: 11px;
+        font-weight: 400;
+        color: #FFFFFF;
+        line-height: 16px;
+        text-align: center;
+    }
+}

src/views/courseware-list/index.tsx

@@ -0,0 +1,115 @@
+import { computed, defineComponent, onBeforeMount, reactive } from 'vue';
+import styles from './index.module.less';
+import icon_back from './image/icon_back.svg';
+import icon_arrow from './image/icon_arrow.svg';
+import { Button, Popover, Tab, Tabs, showToast } from 'vant';
+import { api_lessonCoursewarePage } from './api';
+
+export const BOOK_DATA = {
+  grades: [
+    { text: '全部年级', value: '' },
+    { text: '一年级', value: 1 },
+    { text: '二年级', value: 2 },
+    { text: '三年级', value: 3 },
+    { text: '四年级', value: 4 },
+    { text: '五年级', value: 5 },
+    { text: '六年级', value: 6 },
+    { text: '七年级', value: 7 },
+    { text: '八年级', value: 8 },
+    { text: '九年级', value: 9 }
+  ],
+  bookTypes: {
+    LAST: '上册',
+    NEXT: '下册'
+  } as { [key: string]: string }
+};
+
+export default defineComponent({
+  name: 'courseware-list',
+  setup() {
+    // 返回
+    const goback = () => {
+      postMessage({ api: 'goBack' });
+    };
+    const forms = reactive({
+      currentGradeNum: 0,
+      page: 1,
+      rows: 10,
+      type: 'COURSEWARE'
+    });
+    const _actions = computed(() => {
+      return BOOK_DATA.grades.map((item, index) => {
+        return {
+          ...item,
+          color:
+            forms.currentGradeNum === index ? 'var(--van-primary-color)' : ''
+        };
+      });
+    });
+    const onSelect = (action: any, index: number) => {
+      forms.currentGradeNum = index;
+      forms.page = 1;
+      getList();
+    };
+
+    const data = reactive({
+      list: [] as any[]
+    });
+
+    const getList = async () => {
+      const res = await api_lessonCoursewarePage({
+        ...forms,
+        currentGradeNum: forms.currentGradeNum ? forms.currentGradeNum : ''
+      });
+      if (res?.code === 200 && Array.isArray(res?.data?.rows)) {
+        data.list = [...res.data.rows,...res.data.rows,...res.data.rows,...res.data.rows,...res.data.rows,...res.data.rows].map((item: any) => {
+          const type = BOOK_DATA.bookTypes[item.bookType];
+          item.name = `${item.name}(${type})`;
+          return item;
+        });
+      }
+    };
+    onBeforeMount(() => {
+      getList();
+    });
+    return () => (
+      <div class={styles.container}>
+        <div class={styles.head}>
+          <div class={styles.back} onClick={goback}>
+            <img src={icon_back} />
+          </div>
+          <Tabs class={styles.tabs}>
+            <Tab title="全部教材" name="全部教材"></Tab>
+            <Tab title="我的收藏" name="我的收藏"></Tab>
+          </Tabs>
+          <Popover
+            class={styles.popover}
+            actions={_actions.value}
+            onSelect={onSelect}>
+            {{
+              reference: () => (
+                <Button class={styles.downBtn} round size="small">
+                  全部年级 <img class={styles.icon} src={icon_arrow} />
+                </Button>
+              )
+            }}
+          </Popover>
+        </div>
+
+        <div class={styles.content}>
+          <div class={styles.wrap}>
+            {data.list.map((item, index) => {
+              return (
+                <div class={styles.wrapItem}>
+                  <img class={styles.cover} src={item.coverImg} />
+                  <div class={styles.name}>{item.name}</div>
+                </div>
+              );
+            })}
+            
+          </div>
+        </div>
+      </div>
+    );
+  }
+});

vite.config.ts

@@ -13,7 +13,8 @@ function resolve(dir: string) {
 }
 // https://vitejs.dev/config/
 // https://github.com/vitejs/vite/issues/1930 .env
-const proxyUrl = 'https://test.lexiaoya.cn/';
+// const proxyUrl = 'https://test.lexiaoya.cn/';
+const proxyUrl = 'https://dev.kt.colexiu.com/';
 // const proxyUrl = 'http://192.168.3.143:7989/';
 export default defineConfig({
   base: './',