添加

package.json

@@ -19,8 +19,7 @@
     "umi-request": "^1.4.0",
     "vue": "^3.2.25",
     "vue-router": "^4.0.12",
-    "vue-virtual-list-v3": "^1.3.6",
-    "vue-virtual-scroll-list": "^2.3.3"
+    "vue-virtual-scroller": "^2.0.0-alpha.1",
   },
   "devDependencies": {
     "@types/js-cookie": "^3.0.1",

src/components/live-message/index.tsx

@@ -17,6 +17,9 @@ export default defineComponent({
       modelIndex: 'message' as tabStatus,
     }
   },
+  setup(props, { emit }) {
+
+  },
   methods: {
     tabChange(val: any) {
       this.modelIndex = val.props.name

src/components/live-message/model/message-model.tsx

@@ -1,6 +1,8 @@
 import { defineComponent } from "vue";
 import { ElTag } from "element-plus";
-import VirtualList from 'vue-virtual-scroll-v3'
+// import VirtualList from 'vue-virtual-list-v3';
+// import VirtualList from 'vue3-virtual-list'
+import { RecycleScroller } from 'vue-virtual-scroller'
 import styles from './index.module.less'
 import event, { LIVE_EVENT_MESSAGE } from '/src/components/live-broadcast/event';
 import { state } from '/src/state'
@@ -16,7 +18,7 @@ export default defineComponent({
   },
   data() {
     return {
-      messageList: [] as any[], // 回复学生列表
+      messageList: [{ name: 1, id: 1 }] as any[], // 回复学生列表
       loadingMessage: false, // 观看列表状态
     }
   },
@@ -57,6 +59,14 @@ export default defineComponent({
   },
   render() {
     return (
+      // <RecycleScroller class="virtual-list"
+      //   style="height: 185px"
+      //   item-height={85}
+      //   items={this.messageList}
+      //   key-field="id"
+      // >
+      //   <div style={{ color: '#fff' }}>showInfo</div>
+      // </RecycleScroller>
       //     <VirtualList class="list-dynamic scroll-touch"
       //     :data-key="'id'"
       //     :data-sources="items"
@@ -74,19 +84,19 @@ export default defineComponent({
       //       </div>
       //   </template>
       // </VirtualList>
-
       // <VirtualList class={styles.itemContent}
-      // dataKey="id"
-      // dataSources={this.messageList}
-      // estimateSize="85"
-      // itemClass="'itemInfo'"
-      // ref="virtualList">
-      //   <template #default={source}>
-      //     <div class="item-inner">
-      //       111
-      //     </div>
-      //   </template>
+      //   dataKey="id"
+      //   dataSources={this.messageList}
+      //   estimateSize="85"
+      //   itemClass="'itemInfo'"
+      //   ref="virtualList">
+      //     <template v-slot={source}>
+      //       <div style={{ color: 'red' }}>
+      //         { source }
+      //       </div>
+      //     </template>
       // </VirtualList>
+
       <div style={{ minHeight: '100%', position: 'relative' }}>
         {this.messageList.length > 0 ? this.messageList.map((item : any) => (
           <div class={styles.itemContent}>
@@ -105,4 +115,8 @@ export default defineComponent({
       </div>
     )
   }
-})
+})
+
+function source(source: any) {
+  throw new Error("Function not implemented.");
+}

src/components/live-message/model/message-model.vue

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <RecycleScroller class="virtual-list"
+        style="height: 185px"
+        item-height="85"
+        :items="messageList"
+      >
+      <template v-slot="{item}">
+        <div>11</div>
+      </template>
+    </RecycleScroller>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ElTag } from "element-plus";
+import { RecycleScroller } from "vue-virtual-scroller";
+import event, {
+  LIVE_EVENT_MESSAGE,
+} from "/src/components/live-broadcast/event";
+import { state } from "/src/state";
+import dayjs from "dayjs";
+import Empty from "/src/components/empty";
+import { onBeforeMount, onMounted } from "vue";
+
+let messageList = [] as any[];
+let loadingMessage = false as boolean;
+const onMessage = (value: any) => {
+  if (value && value.user) {
+    console.log(state.user);
+    console.log(value);
+    const sendTime = dayjs(value.$EventMessage.sentTime || new Date()).format(
+      "HH:mm:ss"
+    );
+
+    let tempObj = {
+      name: value.user?.name,
+      id: value.user.id,
+      isSelf: false,
+      content: value.content,
+      sendTime,
+    };
+    // 判断是否是主播
+    if (value.user.id === state.user.id) {
+      tempObj.isSelf = true;
+    }
+    messageList.push(tempObj);
+    loadingMessage = false;
+  }
+  console.log(messageList);
+};
+onMounted(() => {
+  loadingMessage = true;
+  event.on(LIVE_EVENT_MESSAGE["RC:TxtMsg"], onMessage);
+
+  setTimeout(() => {
+    loadingMessage = false;
+  }, 2000);
+});
+onBeforeMount(() => {
+  event.off(LIVE_EVENT_MESSAGE["RC:TxtMsg"], onMessage);
+});
+</script>
+
+<style lang="less" scoped>
+@import url("./index.module.less");
+</style>

src/pages/login/index.tsx

@@ -72,6 +72,18 @@ export default defineComponent({
       (this as any).$refs.loginForm.validate(async (valid: any) => {
         if (valid) {
           try {
+            // 根据手机号获取学生信息
+// export const checkStudentPhone = (data) => request2({
+//   url: '/api-web/studentManage/queryUserByPhone',
+//   method: 'get',
+//   params: data,
+//   hideLoading: true
+// })
+            // const resPhone: any = await request('/api-web/studentManage/queryUserByPhone', {
+            //   params: {
+            //     mobile: loginForm.username
+            //   }
+            // })
             const res: any = await request.post('/api-auth/usernameLogin', {
               data: {
                 username: loginForm.username,
@@ -84,6 +96,13 @@ export default defineComponent({
             let token: string = res?.data.authentication.token_type + ' ' + res?.data.authentication.access_token;
             console.log(token);
             setToken(token)
+
+            // const roomDetail = await request.get('/api-web/imLiveBroadcastRoom/queryRoom', {
+            //   params: {
+            //     roomUid: 'w_3fi4PXQcooe5_VUseReA'
+            //   }
+            // })
+            // console.log(roomDetail, 'roomDetail');
             ElMessage.success('登录成功')
             this.$router.push(this.redirect || '/')
             // this.$router.push({ path: "/home" });

src/permission.ts

@@ -32,7 +32,7 @@ router.beforeEach(async (to, from, next) => {
       } else {
         try {
           // 异步获取用户信息
-          await request.get('/api-web/employee/queryUserInfo').then(res => {
+          await request.get('/api-teacher/teacher/queryUserInfo').then(res => {
             console.log(res)
             state.user = res.data
           })

vite.config.ts

@@ -6,7 +6,8 @@ import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 const vueJsx = require('@vitejs/plugin-vue-jsx')
 const legacy = require('@vitejs/plugin-legacy')
 
-const proxyUrl = "https://test.dayaedu.com/"; // test 环境
+// const proxyUrl = "https://test.dayaedu.com/"; // test 环境
+const proxyUrl = "http://dev.dayaedu.com/"; // test 环境
 // https://vitejs.dev/config/
 export default defineConfig({
   base: "./",
@@ -77,6 +78,10 @@ export default defineConfig({
       '/api-auth': {
         target: proxyUrl,
         changeOrigin: true
+      },
+      '/api-teacher': {
+        target: proxyUrl,
+        changeOrigin: true
       }
     }
   }

yarn.lock

@@ -3083,6 +3083,11 @@ minimist@^1.2.0, minimist@^1.2.5:
   resolved "https://registry.npmmirror.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
 
+mitt@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmmirror.com/mitt/-/mitt-2.1.0.tgz#f740577c23176c6205b121b2973514eade1b2230"
+  integrity sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg==
+
 mitt@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmmirror.com/mitt/-/mitt-3.0.0.tgz#69ef9bd5c80ff6f57473e8d89326d01c414be0bd"
@@ -4322,6 +4327,16 @@ vue-demi@*:
   resolved "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.12.1.tgz#f7e18efbecffd11ab069d1472d7a06e319b4174c"
   integrity sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw==
 
+vue-observe-visibility@^2.0.0-alpha.1:
+  version "2.0.0-alpha.1"
+  resolved "https://registry.npmmirror.com/vue-observe-visibility/-/vue-observe-visibility-2.0.0-alpha.1.tgz#1e4eda7b12562161d58984b7e0dea676d83bdb13"
+  integrity sha512-flFbp/gs9pZniXR6fans8smv1kDScJ8RS7rEpMjhVabiKeq7Qz3D9+eGsypncjfIyyU84saU88XZ0zjbD6Gq/g==
+
+vue-resize@^2.0.0-alpha.1:
+  version "2.0.0-alpha.1"
+  resolved "https://registry.npmmirror.com/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz#43eeb79e74febe932b9b20c5c57e0ebc14e2df3a"
+  integrity sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==
+
 vue-router@^4.0.12:
   version "4.0.12"
   resolved "https://registry.npmmirror.com/vue-router/-/vue-router-4.0.12.tgz#8dc792cddf5bb1abcc3908f9064136de7e13c460"
@@ -4347,6 +4362,20 @@ vue-virtual-scroll-list@^2.3.3:
   resolved "https://registry.npmmirror.com/vue-virtual-scroll-list/-/vue-virtual-scroll-list-2.3.3.tgz#290f0d04be814b93585f2ef232097b671141e5b1"
   integrity sha512-heuwlZ+lEdcVSp66CpVXnyNdsiHl/XU1cvqJb0yUHGlLv6DGK8OX16FH8I3w/wKNXtHSPF9itdBBGJFrXkyHeg==
 
+vue-virtual-scroller@^2.0.0-alpha.1:
+  version "2.0.0-alpha.1"
+  resolved "https://registry.npmmirror.com/vue-virtual-scroller/-/vue-virtual-scroller-2.0.0-alpha.1.tgz#5b5410105b8e60ca57bbd5f2faf5ad1d8108d046"
+  integrity sha512-Mn5w3Qe06t7c3Imm2RHD43RACab1CCWplpdgzq+/FWJcpQtcGKd5vDep8i+nIwFtzFLsWAqEK0RzM7KrfAcBng==
+  dependencies:
+    mitt "^2.1.0"
+    vue-observe-visibility "^2.0.0-alpha.1"
+    vue-resize "^2.0.0-alpha.1"
+
+vue3-virtual-list@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmmirror.com/vue3-virtual-list/-/vue3-virtual-list-1.0.2.tgz#358e8f24fe7d1d72f34eeb087478dfed409a8443"
+  integrity sha512-WzJPe785hQqAWwVWsRoxUuZ0cLrI8rdQHjthE3a4Izl3l6YcgSELpjKKhhq/C1dXS1QfakjQON7Z4wb387yDhw==
+
 vue@^3.2.25:
   version "3.2.31"
   resolved "https://registry.npmmirror.com/vue/-/vue-3.2.31.tgz#e0c49924335e9f188352816788a4cca10f817ce6"