选择课件

package-lock.json

@@ -24,7 +24,7 @@
         "mitt": "^3.0.0",
         "normalize.css": "^8.0.1",
         "numeral": "^2.0.6",
-        "plyr": "^3.6.12",
+        "plyr": "^3.7.3",
         "qrcode": "^1.5.1",
         "qrcode.vue": "^3.3.3",
         "query-string": "^7.1.1",
@@ -3511,11 +3511,10 @@
       }
     },
     "node_modules/core-js": {
-      "version": "3.23.3",
-      "resolved": "https://registry.npmmirror.com/core-js/-/core-js-3.23.3.tgz",
-      "integrity": "sha512-oAKwkj9xcWNBAvGbT//WiCdOMpb9XQG92/Fe3ABFM/R16BsHgePG00mFOgKf7IsCtfj8tA1kHtf/VwErhriz5Q==",
+      "version": "3.27.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.27.0.tgz",
+      "integrity": "sha512-wY6cKosevs430KRkHUIsvepDXHGjlXOZO3hYXNyqpD6JvB0X28aXyv0t1Y1vZMwE7SoKmtfa6IASHCPN52FwBQ==",
       "hasInstallScript": true,
-      "license": "MIT",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/core-js"
@@ -7686,12 +7685,11 @@
       }
     },
     "node_modules/plyr": {
-      "version": "3.7.2",
-      "resolved": "https://registry.npmmirror.com/plyr/-/plyr-3.7.2.tgz",
-      "integrity": "sha512-I0ZC/OI4oJ0iWG9s2rrnO0YFO6aLyrPiQBq9kum0FqITYljwTPBbYL3TZZu8UJQJUq7tUWN18Q7ACwNCkGKABQ==",
-      "license": "MIT",
+      "version": "3.7.3",
+      "resolved": "https://registry.npmjs.org/plyr/-/plyr-3.7.3.tgz",
+      "integrity": "sha512-ORULENBvEvvzMYXRQBALDmEi8P+wZt1Hr/NvHqchu/t7E2xJKNkRYWx0qCA1HETIGZ6zobrOVgqeAUqWimS7fQ==",
       "dependencies": {
-        "core-js": "^3.22.0",
+        "core-js": "^3.26.1",
         "custom-event-polyfill": "^1.0.7",
         "loadjs": "^4.2.0",
         "rangetouch": "^2.0.1",
@@ -11495,7 +11493,8 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-2.0.1.tgz",
       "integrity": "sha512-wtdMnGVvys9K8tg+DxowU1ytTrdVveXr3LzdhaKakysgGXyrsfaeds2cDywtvujEASjWOwWL/OgWM+qoeM8Plg==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vitejs/plugin-vue-jsx": {
       "version": "1.3.8",
@@ -11779,7 +11778,8 @@
       "version": "5.3.1",
       "resolved": "https://registry.npmmirror.com/acorn-jsx/-/acorn-jsx-5.3.1.tgz",
       "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "aggregate-error": {
       "version": "3.1.0",
@@ -12301,9 +12301,9 @@
       "integrity": "sha512-rvVsHrpFcL4F2P8ihsoLdFHmd404+CMg71S756oRSeQgqk51U3kicGdnvfkrxva0xXH92SjGS62B0XIJsbh+9Q=="
     },
     "core-js": {
-      "version": "3.23.3",
-      "resolved": "https://registry.npmmirror.com/core-js/-/core-js-3.23.3.tgz",
-      "integrity": "sha512-oAKwkj9xcWNBAvGbT//WiCdOMpb9XQG92/Fe3ABFM/R16BsHgePG00mFOgKf7IsCtfj8tA1kHtf/VwErhriz5Q=="
+      "version": "3.27.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.27.0.tgz",
+      "integrity": "sha512-wY6cKosevs430KRkHUIsvepDXHGjlXOZO3hYXNyqpD6JvB0X28aXyv0t1Y1vZMwE7SoKmtfa6IASHCPN52FwBQ=="
     },
     "core-js-compat": {
       "version": "3.19.1",
@@ -15063,11 +15063,11 @@
       }
     },
     "plyr": {
-      "version": "3.7.2",
-      "resolved": "https://registry.npmmirror.com/plyr/-/plyr-3.7.2.tgz",
-      "integrity": "sha512-I0ZC/OI4oJ0iWG9s2rrnO0YFO6aLyrPiQBq9kum0FqITYljwTPBbYL3TZZu8UJQJUq7tUWN18Q7ACwNCkGKABQ==",
+      "version": "3.7.3",
+      "resolved": "https://registry.npmjs.org/plyr/-/plyr-3.7.3.tgz",
+      "integrity": "sha512-ORULENBvEvvzMYXRQBALDmEi8P+wZt1Hr/NvHqchu/t7E2xJKNkRYWx0qCA1HETIGZ6zobrOVgqeAUqWimS7fQ==",
       "requires": {
-        "core-js": "^3.22.0",
+        "core-js": "^3.26.1",
         "custom-event-polyfill": "^1.0.7",
         "loadjs": "^4.2.0",
         "rangetouch": "^2.0.1",
@@ -15093,7 +15093,8 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmmirror.com/postcss-pxtorem/-/postcss-pxtorem-6.0.0.tgz",
       "integrity": "sha512-ZRXrD7MLLjLk2RNGV6UA4f5Y7gy+a/j1EqjAfp9NdcNYVjUMvg5HTYduTjSkKBkRkfqbg/iKrjMO70V4g1LZeg==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-value-parser": {
       "version": "4.2.0",
@@ -15294,7 +15295,8 @@
     "qrcode.vue": {
       "version": "3.3.3",
       "resolved": "https://registry.npmmirror.com/qrcode.vue/-/qrcode.vue-3.3.3.tgz",
-      "integrity": "sha512-OsD4tQjIbxg/K6D5ZkWjBdYI9eg9K2i8qeYILdEAX5mdAydSAxV7xKmmZSP/hA12olLqEMZ9ryqDQrwa9jEMgw=="
+      "integrity": "sha512-OsD4tQjIbxg/K6D5ZkWjBdYI9eg9K2i8qeYILdEAX5mdAydSAxV7xKmmZSP/hA12olLqEMZ9ryqDQrwa9jEMgw==",
+      "requires": {}
     },
     "qs": {
       "version": "6.10.3",
@@ -16264,7 +16266,8 @@
     "vue-demi": {
       "version": "0.13.2",
       "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.2.tgz",
-      "integrity": "sha512-41ukrclEbMddAyP7PvxMSYqnOSzPV6r7GNnyTSKSCNTaz19GehxmTiXyP9kwHSUv2+Dr6hHqiUiF7L1VAw2KdQ=="
+      "integrity": "sha512-41ukrclEbMddAyP7PvxMSYqnOSzPV6r7GNnyTSKSCNTaz19GehxmTiXyP9kwHSUv2+Dr6hHqiUiF7L1VAw2KdQ==",
+      "requires": {}
     },
     "vue-echarts": {
       "version": "6.2.3",

package.json

@@ -36,7 +36,7 @@
     "mitt": "^3.0.0",
     "normalize.css": "^8.0.1",
     "numeral": "^2.0.6",
-    "plyr": "^3.6.12",
+    "plyr": "^3.7.3",
     "qrcode": "^1.5.1",
     "qrcode.vue": "^3.3.3",
     "query-string": "^7.1.1",

src/router/routes-common.ts

@@ -2,7 +2,30 @@ const paymentType = (window as any).paymentType
 
 // 需要登录的路由
 export const router = [
-
+  {
+    path: '/lessonCourseware',
+    name: 'lessonCourseware',
+    component: () => import('@/views/lessonCourseware/index'),
+    meta: {
+      title: '选择课件'
+    }
+  },
+  {
+    path: '/courseList',
+    name: 'courseList',
+    component: () => import('@/views/courseList/index'),
+    meta: {
+      title: '课程列表'
+    }
+  },
+  {
+    path: '/coursewarePlay',
+    name: 'coursewarePlay',
+    component: () => import('@/views/coursewarePlay/index'),
+    meta: {
+      title: '课程播放'
+    }
+  },
 ]
 
 // 不需要登录的路由

src/views/courseList/image/look.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13px" height="13px" viewBox="0 0 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="选择课件" transform="translate(-282.000000, -159.000000)">
+            <g id="锁备份" transform="translate(282.000000, 159.000000)">
+                <circle id="椭圆形" fill="#FFFFFF" cx="6.5" cy="8" r="1"></circle>
+                <rect id="矩形" stroke="#FFFFFF" stroke-width="1.2" x="1.6" y="4.1" width="9.8" height="7.8" rx="2"></rect>
+                <path d="M4.5,4 L4.5,3 C4.5,1.8954305 5.3954305,1 6.5,1 C7.6045695,1 8.5,1.8954305 8.5,3 L8.5,4 L8.5,4" id="路径" stroke="#FFFFFF" stroke-width="1.2"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/courseList/index.module.less

@@ -0,0 +1,65 @@
+.grid {
+  :global {
+    .van-grid-item {
+      .van-grid-item__content {
+        padding: 0;
+        background: transparent;
+        &::after {
+          display: none;
+        }
+      }
+    }
+  }
+  .gridItem {
+    position: relative;
+    width: 100%;
+    height: 130px;
+    border-radius: 8px;
+    overflow: hidden;
+    .cover {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      z-index: -1;
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    .title {
+      text-align: center;
+      padding: 10px;
+      color: #742c00;
+    }
+    .num {
+      position: absolute;
+      left: 50%;
+      bottom: 12px;
+      transform: translateX(-50%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      width: 50%;
+      height: 20px;
+      border-radius: 20px;
+      background: linear-gradient(180deg, #ff9c7c 0%, #ff5757 100%);
+      color: #fff;
+    }
+    .look {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      background-color: rgba(0, 0, 0, 0.6);
+      z-index: 10;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+    }
+  }
+}

src/views/courseList/index.tsx

@@ -0,0 +1,75 @@
+import request from '@/helpers/request'
+import { state } from '@/state'
+import { Grid, GridItem, Icon } from 'vant'
+import { defineComponent, onMounted, reactive } from 'vue'
+import styles from './index.module.less'
+import iconLook from './image/look.svg'
+import { useRoute } from 'vue-router'
+export default defineComponent({
+  name: 'lessonCourseware',
+  setup() {
+    const route = useRoute()
+    const data = reactive({
+      list: [] as any
+    })
+    const getList = async () => {
+      try {
+        const res: any = await request.post(state.platformApi + '/lessonCoursewareDetail/page', {
+          data: {
+            lessonCoursewareId: route.query.id ? '1607562917531938817' : '1607562917531938817',
+            page: 1,
+            rows: 1000
+          }
+        })
+        if (Array.isArray(res?.data?.rows)) {
+          data.list = res.data.rows
+        }
+      } catch (error) {}
+    }
+    onMounted(() => {
+      getList()
+    })
+
+    const handleClick = (item: any) => {
+      if (route.query.code === 'select') {
+        console.log('选择课时')
+      }
+    }
+    return () => (
+      <div style={{ paddingTop: '14px' }}>
+        <Grid gutter={14} columnNum={3} class={styles.grid}>
+          {data.list.map((item: any) => {
+            return (
+              <GridItem>
+                <div
+                  class={styles.gridItem}
+                  style={{
+                    background: item.coverImg
+                      ? ''
+                      : `hsla(${Math.floor(Math.random() * 360)},50%,50%,.8)`
+                  }}
+                  onClick={() => handleClick(item)}
+                >
+                  {/* <img src={item.coverImg} class={styles.cover} /> */}
+                  <div class={styles.title}>
+                    <div>{item.name}</div>
+                    <div>已使用 1 次</div>
+                  </div>
+                  <div class={styles.num}>
+                    查看
+                    <Icon name="play-circle-o" />
+                  </div>
+                  {item.delFlag && (
+                    <div class={styles.look}>
+                      <Icon name={iconLook} /> 未解锁
+                    </div>
+                  )}
+                </div>
+              </GridItem>
+            )
+          })}
+        </Grid>
+      </div>
+    )
+  }
+})

src/views/coursewarePlay/image/back.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="19px" height="19px" viewBox="0 0 19 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="课件播放（老师）" transform="translate(-40.000000, -13.000000)" stroke="#FFFFFF" stroke-width="2">
+            <g id="图标/通用/返回" transform="translate(40.000000, 13.000000)">
+                <polyline id="Stroke-1" points="13.5 18 5 9.5 13.5 1"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/coursewarePlay/index.module.less

@@ -0,0 +1,58 @@
+.coursewarePlay {
+  position: relative;
+  min-height: 100vh;
+  background-color: rgba(89, 98, 126, 0.2);
+}
+.backBtn {
+  position: absolute;
+  left: 40px;
+  top: 10Px;
+  color: #fff;
+  width: 40Px;
+  height: 26Px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  z-index: 10;
+}
+.menu {
+  position: absolute;
+  top: 10Px;
+  left: 140Px;
+  right: 84Px;
+  z-index: 10;
+  :global {
+    .van-tabs__content,
+    .van-tabs__line {
+      display: none;
+    }
+    .van-tabs__wrap {
+      height: 26Px;
+    }
+    .van-tabs__nav {
+      padding: 0;
+      background: rgba(255, 128, 87, 0.5);
+      .van-tab {
+        color: #fff;
+        font-size: 14Px;
+      }
+      .van-tab--active.van-tab {
+        background: #ff8057;
+      }
+    }
+  }
+}
+.videoItem{
+    width: 100vw;
+    height: 100vh;
+    --plyr-color-main: var(--van-primary);
+    video{
+        width: 100%;
+        height: 100%;
+    }
+    :global{
+        .plyr{
+            height: 100%;
+        }
+    }
+}

src/views/coursewarePlay/index.tsx

@@ -0,0 +1,87 @@
+import { Icon, Swipe, SwipeItem, Tab, Tabs } from 'vant'
+import { defineComponent, onMounted, reactive } from 'vue'
+import iconBack from './image/back.svg'
+import styles from './index.module.less'
+import Plyr from 'plyr'
+import 'plyr/dist/plyr.css'
+
+export default defineComponent({
+  name: 'CoursewarePlay',
+  setup() {
+    onMounted(() => {
+      const nodeList = document.querySelectorAll('.player')
+      console.log('🚀 ~ nodeList', nodeList)
+    //   const player = Plyr.setup('.player', {
+    //     debug: false,
+    //     ratio: '16:9'
+    //   })
+      const player = new Plyr('#player1', {
+        autoplay: true
+      })
+      setTimeout(() => {
+        // player.togglePlay()
+      }, 1000)
+      console.log('🚀 ~ player', player)
+    })
+    return () => (
+      <div class={styles.coursewarePlay}>
+        <div class={styles.backBtn}>
+          <Icon name={iconBack} />
+          返回
+        </div>
+        <div class={styles.menu}>
+          <Tabs>
+            <Tab title="前言"></Tab>
+            <Tab title="嘴形+长振"></Tab>
+            <Tab title="吐音"></Tab>
+            <Tab title="号角发音"></Tab>
+            <Tab title="发音练习"></Tab>
+            <Tab title="结束语"></Tab>
+          </Tabs>
+        </div>
+        <Swipe vertical>
+          <SwipeItem>
+            <div class={styles.videoItem}>
+              <video class="player" id='player1' autoplay>
+                <source
+                  src="https://daya.ks3-cn-beijing.ksyuncs.com/12/1672210184164.mp4"
+                  type="video/mp4"
+                />
+              </video>
+            </div>
+          </SwipeItem>
+          <SwipeItem>
+            <div class={styles.videoItem}>
+              <video class="player" controls>
+                <source
+                  src="https://daya.ks3-cn-beijing.ksyuncs.com/12/1672210184164.mp4"
+                  type="video/mp4"
+                />
+              </video>
+            </div>
+          </SwipeItem>
+          <SwipeItem>
+            <div class={styles.videoItem}>
+              <video class="player" controls>
+                <source
+                  src="https://daya.ks3-cn-beijing.ksyuncs.com/12/1672210184164.mp4"
+                  type="video/mp4"
+                />
+              </video>
+            </div>
+          </SwipeItem>
+          <SwipeItem>
+            <div class={styles.videoItem}>
+              <video class="player" controls>
+                <source
+                  src="https://daya.ks3-cn-beijing.ksyuncs.com/12/1672210184164.mp4"
+                  type="video/mp4"
+                />
+              </video>
+            </div>
+          </SwipeItem>
+        </Swipe>
+      </div>
+    )
+  }
+})

src/views/layout/login.tsx

@@ -65,6 +65,7 @@ export default defineComponent({
           client_id: state.clientId[state.platformType],
           client_secret: state.clientId[state.platformType]
         }
+          console.log("🚀 ~ state.clientId", state.clientId,state.platformType)
         if (this.loginType === 'PWD') {
           forms.password = this.password
           forms.loginType = 'PASSWORD'

src/views/lessonCourseware/image/look.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13px" height="13px" viewBox="0 0 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="选择课件" transform="translate(-282.000000, -159.000000)">
+            <g id="锁备份" transform="translate(282.000000, 159.000000)">
+                <circle id="椭圆形" fill="#FFFFFF" cx="6.5" cy="8" r="1"></circle>
+                <rect id="矩形" stroke="#FFFFFF" stroke-width="1.2" x="1.6" y="4.1" width="9.8" height="7.8" rx="2"></rect>
+                <path d="M4.5,4 L4.5,3 C4.5,1.8954305 5.3954305,1 6.5,1 C7.6045695,1 8.5,1.8954305 8.5,3 L8.5,4 L8.5,4" id="路径" stroke="#FFFFFF" stroke-width="1.2"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/lessonCourseware/index.module.less

@@ -0,0 +1,65 @@
+.grid {
+  :global {
+    .van-grid-item {
+      .van-grid-item__content {
+        padding: 0;
+        background: transparent;
+        &::after {
+          display: none;
+        }
+      }
+    }
+  }
+  .gridItem {
+    position: relative;
+    width: 100%;
+    height: 130px;
+    border-radius: 8px;
+    overflow: hidden;
+    .cover {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      z-index: -1;
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    .title {
+      text-align: center;
+      padding: 10px;
+      color:#742C00;
+    }
+    .num {
+      position: absolute;
+      left: 50%;
+      bottom: 12px;
+      transform: translateX(-50%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      width: 50%;
+      height: 20px;
+      border-radius: 20px;
+      background-color: #fff;
+      color: #742c00;
+    }
+    .look {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      background-color: rgba(0, 0, 0, 0.6);
+      z-index: 10;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+    }
+  }
+}

src/views/lessonCourseware/index.tsx

@@ -0,0 +1,58 @@
+import request from '@/helpers/request'
+import { state } from '@/state'
+import { Grid, GridItem, Icon } from 'vant'
+import { defineComponent, onMounted, reactive } from 'vue'
+import styles from './index.module.less'
+import iconLook from './image/look.svg'
+import { useRoute } from 'vue-router'
+export default defineComponent({
+  name: 'lessonCourseware',
+  setup() {
+    const route = useRoute()
+    const data = reactive({
+      list: [] as any
+    })
+    const getList = async () => {
+      try {
+        const res: any = await request.post(state.platformApi + '/courseSchedule/myCourseware')
+        if (Array.isArray(res?.data?.rows)) {
+          data.list = res.data.rows
+        }
+      } catch (error) {}
+    }
+    onMounted(() => {
+      getList()
+    })
+    const handleClick = (item: any) => {
+        if (route.query.code === 'select'){
+            console.log('这里是选择课件')
+        }
+    }
+    return () => (
+      <div style={{ paddingTop: '14px' }}>
+        <Grid gutter={14} columnNum={3} class={styles.grid}>
+          {data.list.map((item: any) => {
+            return (
+              <GridItem>
+                <div
+                  class={styles.gridItem}
+                  style={{ background: item.coverImg ? '' : `hsla(${Math.floor(Math.random() * 360)},50%,50%,.8)` }}
+                  onClick={() => handleClick(item)}
+                >
+                  <img src={item.coverImg} class={styles.cover} />
+                  <div class={styles.title}>{item.name}</div>
+                  <div class={styles.num}>共{item.courseNum}课</div>
+                  {item.delFlag && (
+                    <div class={styles.look}>
+                      <Icon name={iconLook} /> 未解锁
+                    </div>
+                  )}
+                </div>
+              </GridItem>
+            )
+          })}
+        </Grid>
+      </div>
+    )
+  }
+})