fix

src/teacher/screen-projection/components/andoird-guide.module.less

@@ -0,0 +1,78 @@
+.topTitle {
+  position: relative;
+  h2 {
+    font-weight: bold;
+    color: #00201c;
+    line-height: 18px;
+    font-size: 17px;
+    padding-left: 22px;
+    color: #00201c;
+    position: relative;
+    z-index: 20;
+  }
+}
+.wrap {
+  box-sizing: border-box;
+  padding: 37px 0;
+  background-color: #fff;
+
+  .wrapInfo {
+    padding: 0 22px;
+    section {
+      margin-top: 30px;
+      margin-bottom: 50px;
+      .bigP {
+        font-weight: bold;
+        color: #00201c;
+        font-size: 16px;
+        line-height: 20px;
+      }
+      p {
+        font-size: 13px;
+        line-height: 20px;
+        margin-bottom: 20px;
+      }
+    }
+    h3 {
+      font-weight: bold;
+      color: #00201c;
+      font-size: 16px;
+      line-height: 20px;
+    }
+    .blod {
+      font-weight: bold;
+    }
+    .red {
+      color: #ff0000;
+    }
+  }
+}
+
+.dot {
+  position: absolute;
+  width: 10px;
+  height: 17px;
+  background: #00c2b5;
+  opacity: 0.53;
+  border-radius: 1px;
+  top: -7px;
+  left: 0;
+}
+.little {
+  display: inline-block;
+  width: 4px;
+  height: 4px;
+  background: #00c2b5;
+  opacity: 0.53;
+  right: 0;
+}
+.imgWrap {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  .img {
+    margin-bottom: 20px;
+    width: 190px;
+  }
+}

src/teacher/screen-projection/components/android-guide.tsx

@@ -0,0 +1,187 @@
+import { defineComponent } from 'vue'
+import { getImage } from '../images'
+import styles from './andoird-guide.module.less'
+
+export const getAssetsHomeFile = getImage
+
+const infoMsg = {
+  meizu: {
+    img1: getAssetsHomeFile('4.png'),
+    img2: getAssetsHomeFile('5.png'),
+    img3: getAssetsHomeFile('6.png'),
+    title1: '打开“设置”页面，点击“更多连接方式”按钮：',
+    title2: '点击“投射屏幕”',
+    title3:
+      '打开“投射屏幕”开关，即可看到可以投屏的设备列表，选择您的设备进行连接。'
+  },
+  xiaomi: {
+    img1: getAssetsHomeFile('7.png'),
+    img2: getAssetsHomeFile('8.png'),
+    img3: getAssetsHomeFile('9.png'),
+    title1: '打开“设置”页面，点击“连接与共享”按钮：',
+    title2: '点击“投屏”：',
+    title3:
+      '打开“打开投屏”开关，即可看到可以投屏的设备列表，选择您的设备进行连接。'
+  },
+  vivo: {
+    img1: getAssetsHomeFile('12.png'),
+    img2: getAssetsHomeFile('13.png'),
+    img3: getAssetsHomeFile('14.png'),
+    title1: '打开“设置”页面，点击“其他网络与连接”按钮：',
+    title2: '点击“手机投屏”：',
+    title3:
+      '打开“手机投屏”开关，即可看到可以投屏的设备列表，选择您的设备进行连接。'
+  },
+  huawei: {
+    img1: getAssetsHomeFile('1.png'),
+    img2: getAssetsHomeFile('2.png'),
+    img3: getAssetsHomeFile('3.png'),
+    title1: '打开“设置”页面，点击“更多连接”按钮：',
+    title2: '点击“手机投屏”：',
+    title3:
+      '打开“无线投屏”开关，即可看到可以投屏的设备列表，选择您的设备进行连接。'
+  }
+}
+export default defineComponent({
+  name: 'adnroid-guide',
+  data() {
+    return {
+      brand: 'huawei'
+    }
+  },
+  mounted() {
+    var ua = navigator.userAgent.split('(')[1].split(')')[0]
+    this.brand = ''
+    var phone = [/MZ/gi, /mi/gi, /vivo/gi]
+    if (phone[0].test(ua)) {
+      this.brand = 'meizu'
+    } else if (phone[1].test(ua)) {
+      this.brand = 'xiaomi'
+    } else if (phone[2].test(ua)) {
+      this.brand = 'vivo'
+    } else {
+      this.brand = 'huawei'
+    }
+  },
+  render() {
+    return (
+      <div class={styles.wrap}>
+        <div class={styles.topTitle}>
+          <h2>通过镜像方式显示手机或平板上的内容</h2>
+        </div>
+        <section>
+          <img style={{ width: '100%' }} src={getAssetsHomeFile('guide.png')} />
+        </section>
+        <div class={styles.wrapInfo}>
+          <section>
+            <h3>第1步</h3>
+            <p>将您的手机或平板连接到您智能电视机所在的同一无线局域网。</p>
+            <h3>第2步</h3>
+            <p>{infoMsg[this.brand]['title1']}</p>
+            <div class={styles.imgWrap}>
+              <img
+                class={styles.img}
+                src={infoMsg[this.brand]['img1']}
+                alt=""
+              />
+            </div>
+
+            <h3>第3步</h3>
+            <p>{infoMsg[this.brand]['title2']}</p>
+            <div class={styles.imgWrap}>
+              <img
+                class={styles.img}
+                src={infoMsg[this.brand]['img2']}
+                alt=""
+              />
+            </div>
+
+            <h3>第4步</h3>
+            <p>{infoMsg[this.brand]['title3']}</p>
+            <div class={styles.imgWrap}>
+              <img
+                class={styles.img}
+                src={infoMsg[this.brand]['img3']}
+                alt=""
+              />
+            </div>
+          </section>
+          <section>
+            <p class={[styles.blod, styles.bigP]}>如果音乐意外停止：</p>
+            <p>
+              如果在这台设备上使用语音助手或进行其他任务，则可能会导致所有音频设备停止播放音乐
+            </p>
+            <p class={[styles.blod, styles.bigP]}>
+              如果您看到视频但听不到声音：
+            </p>
+            <p>
+              如果您听不到任何声音，则请确保手机设备和电视机/听筒的音量都已调高，而且没有静音。
+            </p>
+            <p>
+              请检查响铃/静音开关。如果开关设为静音，您会看到一条橙色的线。切换开关以开启响铃。
+            </p>
+            <p class={[styles.blod, styles.bigP]}>如果内容中断或网络卡顿:</p>
+            <p>
+              如果 Wi-Fi
+              信号欠佳或受到附近设备（例如，微波炉或婴儿监视器）的干扰尝试完成以下步骤：
+            </p>
+            <p>移开或关闭其他可能造成干扰的设备。</p>
+            <p>
+              如果您正尝试使用“隔空播放”将内容流化到智能电视，请尝试使用以太网线缆（而不是通过
+              Wi-Fi）将智能电视直接连接到路由器。
+            </p>
+            <p class={(styles.blod, styles.red)}>
+              *当您锁定设备、将其置于睡眠模式或切换到其他应用时，“隔空播放”连接可能会中断。
+            </p>
+          </section>
+          <section>
+            <p class={[styles.blod, styles.bigP]}>
+              如果“隔空播放”或屏幕镜像在您的设备上无法使用：
+            </p>
+            <p>1.确保您的设备都已开机且彼此距离较近。</p>
+            <p>2.请重新启动您要与“隔空播放”或屏幕镜像配合使用的设备。</p>
+            <p>3.以上方式尝试了仍无法搜到要使用的智能电视:</p>
+            <p class={(styles.blod, styles.red)}>
+              将您的设备连接到同一个 Wi-Fi 网络
+            </p>
+            <p>
+              首先需要确认电视与手机是否连接了同一个Wi-Fi
+              ，电视可以插网线，但必须是同一个路由器的，如果不确认，就把电视网线拔了改为连接Wi-Fi
+              。
+            </p>
+            <p class={[styles.blod, styles.bigP]}>
+              如果同一个Wi-Fi 也无法搜索到需要投屏的设备：
+            </p>
+            <p>
+              原因1·可能电视本身没有投屏功能（如果以前投屏过，也是可以判断为电视是支持投屏的。）
+            </p>
+            <p>A.是不是智能电视？</p>
+            <p>B.能不能自己安装软件？</p>
+            <p>C.是不是安卓系统？</p>
+            <p>D.能不能连接WiFi？</p>
+            <p>请确认以上四点。一般16年以后买的电视，99%都已经是智能电视了</p>
+          </section>
+          <section>
+            <p class={[styles.blod, styles.bigP]}>
+              如果是智能电视或者智能投影仪，但是没有投屏功能怎么办？
+            </p>
+            <p>
+              解决办法：自己安装一个投屏软件进去（幕享、傲软投屏、乐播投屏......）。相当于更新了电视投屏功能。也能解决这个问题。
+            </p>
+            <p>如果是老电视，老投影仪，老机顶盒怎么办？</p>
+            <p>这个也不是没有办法，电视最值钱的就是屏幕了。</p>
+            <p>
+              所以屏幕我们不要浪费了，继续使用，此时我们通过互联网机顶盒，从机顶盒应用商店安装投屏软件，也同样可以
+              进行投屏。
+            </p>
+            <p>a.是不是智能机顶盒？</p>
+            <p>b.能不能自己安装软件？</p>
+            <p>
+              c.是不是安卓系统？买回来之后利用HDMI线连接老电视，再从机顶盒应用商店下载投屏软件，就可以使用投屏了。
+            </p>
+          </section>
+        </div>
+      </div>
+    )
+  }
+})

src/teacher/screen-projection/components/ios-guide.module.less

@@ -0,0 +1,84 @@
+.marginB33 {
+  margin-bottom: 33px;
+  h2 {
+    padding-left: 0 !important;
+  }
+}
+.wrap {
+  box-sizing: border-box;
+  padding: 37px 0;
+  background-color: #fff;
+
+  .topTitle {
+    position: relative;
+    h2 {
+      font-weight: bold;
+      color: #00201c;
+      line-height: 18px;
+      font-size: 17px;
+      padding-left: 22px;
+      color: #00201c;
+      position: relative;
+      z-index: 20;
+    }
+  }
+  .wrapInfo {
+    padding: 0 22px;
+    section {
+      // margin-top: 0.3rem;
+      margin-bottom: 45px;
+      .bigP {
+        font-weight: bold;
+        color: #00201c;
+        font-size: 16px;
+        line-height: 20px;
+      }
+      p {
+        font-size: 13px;
+        line-height: 20px;
+        margin-bottom: 20px;
+      }
+    }
+    h3 {
+      font-weight: bold;
+      color: #00201c;
+      font-size: 16px;
+      line-height: 20px;
+    }
+    .blod {
+      font-weight: bold;
+    }
+    .red {
+      color: #ff0000;
+    }
+  }
+}
+
+.dot {
+  position: absolute;
+  width: 10px;
+  height: 17px;
+  background: #00c2b5;
+  opacity: 0.53;
+  border-radius: 1px;
+  top: -7px;
+  left: 0;
+}
+.little {
+  display: inline-block;
+  width: 4px;
+  height: 4px;
+  background: #00c2b5;
+  opacity: 0.53;
+  right: 0;
+}
+.imgWrap {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  .img {
+    margin-bottom: 20px;
+    width: 190px;
+  }
+}

src/teacher/screen-projection/components/ios-guide.tsx

@@ -0,0 +1,150 @@
+import { defineComponent } from 'vue'
+import { getImage } from '../images'
+import styles from './ios-guide.module.less'
+
+export const getAssetsHomeFile = getImage
+
+export default defineComponent({
+  name: 'ios-guide',
+  render() {
+    return (
+      <div class={styles.wrap}>
+        <div class={styles.topTitle}>
+          <h2>通过镜像方式显示 iPhone或iPad上的内容</h2>
+        </div>
+
+        <img style={{ width: '100%' }} src={getAssetsHomeFile('guide.png')} />
+
+        <div class={styles.wrapInfo}>
+          <section>
+            <h3>第1步</h3>
+            <p>
+              通过镜像方式显示 iPhone或iPad上的内容将您的 iPhone或iPad
+              连接到您的 Apple TV 或兼容“隔空播放
+              2”的智能电视机所在的同一无线局域网。
+            </p>
+            <h3>第2步</h3>
+            <p>
+              打开“控制中心”：
+              <br />
+              在 iPhone X 或更新机型或者装有 iPadOS 13 或更高版本的 iPad
+              上：从屏幕右上角向下轻扫。
+              <br />在 iPhone 8 或更早机型或者 iOS 11
+              或更低版本上：从屏幕底部边缘向上轻扫。
+            </p>
+            <h3>第3步</h3>
+            <p>轻点 “屏幕镜像”。（iOS 11 之前版本：AirPlay 镜像）</p>
+            <h3>第4步</h3>
+            <p>从列表中选择您的 Apple TV 或兼容“隔空播放 2”的智能电视机</p>
+            <h3>第5步</h3>
+            <p>
+              如果电视机屏幕上出现“隔空播放”密码，请在 iOS 或 iPadOS
+              设备上输入这个密码。
+            </p>
+            <h3>第6步</h3>
+            <p>
+              要停止镜像您的 iOS 或 iPadOS
+              设备，请打开“控制中心”，轻点“屏幕镜像”，然后轻点“停止镜像”。
+            </p>
+          </section>
+          <div class={[styles.topTitle, styles.marginB33]}>
+            <h2>iOS 10控制中心图片：</h2>
+          </div>
+          <section>
+            <img
+              src={getAssetsHomeFile('11.png')}
+              style={{ width: '100%' }}
+              alt=""
+            />
+          </section>
+          <div class={[styles.topTitle, styles.marginB33]}>
+            <h2>iOS 10之后版本控制中心图片：</h2>
+          </div>
+          <section>
+            <img
+              src={getAssetsHomeFile('10.png')}
+              style={{ width: '100%' }}
+              alt=""
+            />
+          </section>
+          <section>
+            <p class={[styles.blod, styles.bigP]}>如果音乐意外停止：</p>
+            <p>
+              如果在这台设备上使用 Siri
+              或进行其他任务，则可能会导致所有音频设备停止播放音乐
+            </p>
+            <p class={[styles.blod, styles.bigP]}>
+              如果您看到视频但听不到声音：
+            </p>
+            <p>
+              如果您听不到任何声音，则请确保 iOS
+              设备和电视机/听筒的音量都已调高，而且没有静音。
+            </p>
+            <p>
+              请检查响铃/静音开关。如果开关设为静音，您会看到一条橙色的线。切换开关以开启响铃。
+            </p>
+            <p class={[styles.blod, styles.bigP]}>如果内容中断或网络卡顿:</p>
+            <p>
+              如果 Wi-Fi
+              信号欠佳或受到附近设备（例如，微波炉或婴儿监视器）的干扰尝试完成以下步骤：
+            </p>
+            <p>移开或关闭其他可能造成干扰的设备。</p>
+            <p>
+              如果您正尝试使用“隔空播放”将内容流化到智能电视，请尝试使用以太网线缆（而不是通过
+              Wi-Fi）将智能电视直接连接到路由器。
+            </p>
+            <p class={[styles.blod, styles.red]}>
+              *当您锁定设备、将其置于睡眠模式或切换到其他应用时，“隔空播放”连接可能会中断。
+            </p>
+          </section>
+          <section>
+            <p class={[styles.blod, styles.bigP]}>
+              如果“隔空播放”或屏幕镜像在您的设备上无法使用：
+            </p>
+            <p>1.确保您的设备都已开机且彼此距离较近。</p>
+            <p>2.请重新启动您要与“隔空播放”或屏幕镜像配合使用的设备。</p>
+            <p>3.以上方式尝试了仍无法搜到要使用的智能电视:</p>
+            <p class={[styles.blod, styles.red]}>
+              将您的设备连接到同一个 Wi-Fi 网络
+            </p>
+            <p>
+              首先需要确认电视与手机是否连接了同一个Wi-Fi
+              ，电视可以插网线，但必须是同一个路由器的，如果不确认，就把电视网线拔了改为连接Wi-Fi
+              。
+            </p>
+            <p class={[styles.blod, styles.bigP]}>
+              如果同一个Wi-Fi 也无法搜索到需要投屏的设备：
+            </p>
+            <p>
+              原因1·可能电视本身没有投屏功能（如果以前投屏过，也是可以判断为电视是支持投屏的。）
+            </p>
+            <p>A.是不是智能电视？</p>
+            <p>B.能不能自己安装软件？</p>
+            <p>C.是不是安卓系统？</p>
+            <p>D.能不能连接WiFi？</p>
+            <p>请确认以上四点。一般16年以后买的电视，99%都已经是智能电视了</p>
+          </section>
+          <section>
+            <p class={[styles.blod, styles.bigP]}>
+              如果是智能电视或者智能投影仪，但是没有投屏功能怎么办？
+            </p>
+            <p>
+              解决办法：自己安装一个投屏软件进去（幕享、傲软投屏、乐播投屏......）。相当于更新了电视投屏功能。也能解决这个问题。
+            </p>
+            <p>如果是老电视，老投影仪，老机顶盒怎么办？</p>
+            <p>这个也不是没有办法，电视最值钱的就是屏幕了。</p>
+            <p>
+              所以屏幕我们不要浪费了，继续使用，此时我们通过互联网机顶盒，从机顶盒应用商店安装投屏软件，也同样可以
+              进行投屏。
+            </p>
+            <p>a.是不是智能机顶盒？</p>
+            <p>b.能不能自己安装软件？</p>
+            <p>
+              c.是不是安卓系统？买回来之后利用HDMI线连接老电视，再从机顶盒应用商店下载投屏软件，就可以使用投屏了。
+            </p>
+          </section>
+        </div>
+      </div>
+    )
+  }
+})

src/teacher/screen-projection/guide.tsx

@@ -0,0 +1,15 @@
+import { defineComponent } from 'vue'
+import IosGuide from './components/ios-guide'
+import AndroidGuide from './components/android-guide'
+
+export default defineComponent({
+  name: 'guide',
+  data() {
+    return {
+      client: 'ios'
+    }
+  },
+  render() {
+    return <>{this.client === 'ios' ? <IosGuide /> : <AndroidGuide />}</>
+  }
+})

src/teacher/screen-projection/images/index.ts

@@ -0,0 +1,5 @@
+const modules = import.meta.globEager(`../images/**`)
+export const getImage = (name: string) => {
+    // console.log("🚀 ~ modules", modules[`../images/${name}`]?.default)
+    return modules[`../images/${name}`]?.default || ''
+}

src/teacher/screen-projection/index.module.less

@@ -0,0 +1,16 @@
+.line {
+  width: 4px;
+  height: 14px;
+  background: #ff8057;
+  border-radius: 2px;
+  margin: 0 8px;
+}
+.tips {
+  display: flex;
+  align-items: center;
+  padding: 14px;
+}
+.popup {
+  height: 100vh;
+  overflow-y: auto;
+}

src/teacher/screen-projection/index.tsx

@@ -1,10 +1,100 @@
-import { defineComponent, ref } from "vue";
+import OHeader from '@/components/o-header'
+import request from '@/helpers/request'
+import { state } from '@/state'
+import { Cell, CellGroup, Image, Popup } from 'vant'
+import { defineComponent, onMounted, reactive, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import Guide from './guide'
+import { getImage } from './images'
+import styles from './index.module.less'
 
 export default defineComponent({
-    name: 'screen-projection',
-    setup(props, ctx) {
-        return () => (
-            <div>投屏</div>
+  name: 'screen-projection',
+  setup(props, { emit }) {
+    const icons = {
+      music: getImage('icon-music.png'),
+      video: getImage('icon-video.png')
+    }
+    const route = useRoute()
+    const query = route.query || {}
+    const data = reactive({
+      guideOpen: false,
+      knowledgePointList: [] as any,
+      name: '',
+      lessonTargetDesc: ''
+    })
+    console.log(query)
+    // 获取课件详情
+    const getDetail = async () => {
+      try {
+        const res: any = await request.get(
+          state.platformApi + `/lessonCoursewareDetail/detail/${query.id}`
         )
-    },
-})
+        if (res?.data) {
+          data.name = res.data.name
+          data.lessonTargetDesc = res.data.lessonTargetDesc
+          data.knowledgePointList = res.data.knowledgePointList || []
+        }
+      } catch (error) {}
+    }
+    onMounted(() => {
+      getDetail()
+    })
+    return () => (
+      <div>
+        <OHeader
+          isBack
+          rightText="投屏帮助"
+          onClickRight={() => {
+            console.log('打开投屏')
+            data.guideOpen = true
+          }}
+        />
+        <div>
+          <div class={styles.tips}>
+            <div class={styles.line}></div>
+            <div>{data.name}</div>
+          </div>
+          <CellGroup inset>
+            {data.knowledgePointList.map((item: any) => {
+              return (
+                <>
+                  {Array.isArray(item.materialList) &&
+                    item.materialList.map((n: any) => {
+                      return (
+                        <Cell title={n.name} isLink center>
+                          {{
+                            icon: () => (
+                              <Image
+                                style={{ marginRight: '12px' }}
+                                width={36}
+                                height={36}
+                                src={['VIDEO', 'IMG'].includes(n.type) ? icons.video : icons.music}
+                              />
+                            )
+                          }}
+                        </Cell>
+                      )
+                    })}
+                </>
+              )
+            })}
+          </CellGroup>
+        </div>
+
+        <Popup
+          v-model:show={data.guideOpen}
+          position="right"
+          closeable
+          closeIconPosition="top-left"
+          safeAreaInsetBottom
+          safeAreaInsetTop
+        >
+          <div class={styles.popup}>
+            <Guide />
+          </div>
+        </Popup>
+      </div>
+    )
+  }
+})

src/views/lessonCourseware/index.tsx

@@ -12,9 +12,11 @@ export default defineComponent({
     const route = useRoute()
     const router = useRouter()
     const data = reactive({
+      loading: true,
       list: [] as any
     })
     const getList = async () => {
+      data.loading = true
       if (route.query.code === 'select') {
         try {
           const res: any = await request.post(state.platformApi + `/courseSchedule/getCourseware/${route.query.courseScheduleId}`)
@@ -37,6 +39,7 @@ export default defineComponent({
           }
         } catch (error) {}
       }
+      data.loading = false
     }
     onMounted(() => {
       getList()
@@ -88,7 +91,7 @@ export default defineComponent({
             )
           })}
         </Grid>
-        {!data.list.length && <OEmpty tips="没有课件" />}
+        {!data.loading && !data.list.length && <OEmpty tips="没有课件" />}
       </div>
     )
   }