首页 发现 帮助
注册 登录
geek
/
live-website
关注 1
点赞 0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

提交

sunshine1130 4 年之前
父节点
d920f56973
当前提交
d2b49d16e3
共有 7 个文件被更改，包括 196 次插入 和 69 次删除
合并视图 显示文件统计
  1. 5 0
      package-lock.json
  2. 1 0
      package.json
  3. 18 23
      public/index.html
  4. 11 2
      src/assets/pc/css/video.scss
  5. 10 2
      src/assets/pc/css/video.wxss
  6. 113 42
      src/components/medicineVideo.vue
  7. 38 0
      src/util/remoteLoad.js

+ 5 - 0
package-lock.json
查看文件 

@@ -6871,6 +6871,11 @@
 
         "minimist": "^1.2.5"
 
         "minimist": "^1.2.5"
 
       }
 
       }
 
     },
 
     },
 
+    "moment": {
 
+      "version": "2.29.1",
 
+      "resolved": "https://registry.npm.taobao.org/moment/download/moment-2.29.1.tgz?cache=0&sync_timestamp=1601983320283&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmoment%2Fdownload%2Fmoment-2.29.1.tgz",
 
+      "integrity": "sha1-sr52n6MZQL6e7qZGnAdeNQBvo9M="
 
+    },
 
     "move-concurrently": {
 
     "move-concurrently": {
 
       "version": "1.0.1",
 
       "version": "1.0.1",
 
       "resolved": "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz",
 
       "resolved": "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz",

+ 1 - 0
package.json
查看文件 

@@ -10,6 +10,7 @@
 
     "axios": "^0.21.0",
 
     "axios": "^0.21.0",
 
     "core-js": "^3.6.5",
 
     "core-js": "^3.6.5",
 
     "element-ui": "^2.14.1",
 
     "element-ui": "^2.14.1",
 
+    "moment": "^2.29.1",
 
     "qs": "^6.9.4",
 
     "qs": "^6.9.4",
 
     "vant": "^2.11.1",
 
     "vant": "^2.11.1",
 
     "vue": "^2.6.11",
 
     "vue": "^2.6.11",

+ 18 - 23
public/index.html
查看文件 

@@ -1,27 +1,22 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
-  <head>
 
-    <meta charset="utf-8">
 
-    <script src="//static.mudu.tv/es6-promise/es6-promise.auto.min.js"></script>
 
 
 
-    <script>window.FETCHER_SERVER_URL = "ws://fetcher.mudu.tv:8088";</script>
 
-    <!--    <script>window.FETCHER_SERVER_URL = "wss://fetcher.mudu.tv";</script>-->
 
-    <script src="//static.mudu.tv/fetcher/bundle.6d7aca164d2389e8bea6.js"></script>
 
-    <script src="//static.mudu.tv/static/websdk/sdk.js"></script>
 
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
-    <title><%= htmlWebpackPlugin.options.title %></title>
 
-  </head>
 
-  <body>
 
-    <noscript>
 
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 
-    </noscript>
 
-    <div id="app"></div>
 
-    <!-- built files will be auto injected -->
 
+<head>
 
+  <meta charset="utf-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
+  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
+  <title><%= htmlWebpackPlugin.options.title %></title>
 
+</head>
 
 
 
-    <script type="module">
 
-      export default Mudu;
 
-    </script>
 
-  </body>
 
-</html>
 
+<body>
 
+  <noscript>
 
+    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
 
+      Please enable it to continue.</strong>
 
+  </noscript>
 
+  <div id="app"></div>
 
+  <!-- built files will be auto injected -->
 
+
 
+</body>
 
+
 
+</html>

+ 11 - 2
src/assets/pc/css/video.scss
查看文件 

@@ -11,8 +11,9 @@ html {
 
     position: relative;
 
     position: relative;
 
     /*  display: flex;
 
     /*  display: flex;
 
     justify-content: center;*/
 
     justify-content: center;*/
 
-    padding-top: 150px;
 
+    padding-top: 50px;
 
     margin: 0 auto;
 
     margin: 0 auto;
 
+    box-sizing: border-box;
 
 
 
     .back-img {
 
     .back-img {
 
         position: absolute;
 
         position: absolute;
 
@@ -170,10 +171,11 @@ html {
 
                 display: none;
 
                 display: none;
 
                 /* Chrome Safari */
 
                 /* Chrome Safari */
 
             }
 
             }
 
+
 
             margin-bottom: 10px;
 
             margin-bottom: 10px;
 
 
 
             >.item {
 
             >.item {
 
-                margin-top: 4px;
 
+                margin-top: 15px;
 
 
 
                 .time {
 
                 .time {
 
                     font-size: 12px;
 
                     font-size: 12px;
 
@@ -218,6 +220,13 @@ html {
 
 
 
                 }
 
                 }
 
             }
 
             }
 
+
 
+            .item101 {
 
+                margin: 0px auto;
 
+                color: #ccc;
 
+                font-size: 12px;
 
+                text-align: center;
 
+            }
 
         }
 
         }
 
 
 
         .send {
 
         .send {

+ 10 - 2
src/assets/pc/css/video.wxss
查看文件 

@@ -11,8 +11,9 @@ html {
 
   position: relative;
 
   position: relative;
 
   /*  display: flex;
 
   /*  display: flex;
 
     justify-content: center;*/
 
     justify-content: center;*/
 
-  padding-top: 150px;
 
+  padding-top: 50px;
 
   margin: 0 auto;
 
   margin: 0 auto;
 
+  box-sizing: border-box;
 
 }
 
 }
 
 
 
 .video-container .back-img {
 
 .video-container .back-img {
 
@@ -166,7 +167,7 @@ html {
 
 }
 
 }
 
 
 
 .video-container .comments .messages-content > .item {
 
 .video-container .comments .messages-content > .item {
 
-  margin-top: 4px;
 
+  margin-top: 15px;
 
 }
 
 }
 
 
 
 .video-container .comments .messages-content > .item .time {
 
 .video-container .comments .messages-content > .item .time {
 
@@ -208,6 +209,13 @@ html {
 
   letter-spacing: 1px;
 
   letter-spacing: 1px;
 
 }
 
 }
 
 
 
+.video-container .comments .messages-content .item101 {
 
+  margin: 0px auto;
 
+  color: #ccc;
 
+  font-size: 12px;
 
+  text-align: center;
 
+}
 
+
 
 .video-container .comments .send {
 
 .video-container .comments .send {
 
   display: flex;
 
   display: flex;
 
   justify-content: center;
 
   justify-content: center;

+ 113 - 42
src/components/medicineVideo.vue
查看文件 

@@ -119,34 +119,39 @@
 
               class="messages-content"
 
               class="messages-content"
 
               id="commentsList"
 
               id="commentsList"
 
               :style="{ height: minHeight + 'px' }"
 
               :style="{ height: minHeight + 'px' }"
 
-              @scroll="getNewComments"
 
             >
 
             >
 
-              <div class="item" v-for="(item, i) in list" :key="i">
 
-                <div class="time">2021-01-01 22:22</div>
 
-                <div class="message">
 
-                  <div class="head-img">
 
-                    <img
 
-                      src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1429871452,4246708244&fm=26&gp=0.jpg"
 
-                      alt=""
 
-                    />
 
+              <div class="item" v-for="(item, i) in commentList" :key="i">
 
+                <div v-show="item.action == 103">
 
+                  <div class="time" v-show="item.timeFlag">
 
+                    {{ item.sendTime }}
 
                   </div>
 
                   </div>
 
-                  <div class="word">
 
-                    <div class="user">上海市网友</div>
 
-                    <div class="tidings">{{i }}</div>
 
+                  <div class="message">
 
+                    <div class="head-img">
 
+                      <img :src="item.head_img" alt="" />
 
+                    </div>
 
+                    <div class="word">
 
+                      <div class="user">
 
+                        {{ item.user_name || "上海市网友" }}
 
+                      </div>
 
+                      <div class="tidings">{{ item.content }}</div>
 
+                    </div>
 
                   </div>
 
                   </div>
 
                 </div>
 
                 </div>
 
+                <div v-show="item.action == 101" class="item101">
 
+                  {{ item.content }}
 
+                </div>
 
               </div>
 
               </div>
 
             </div>
 
             </div>
 
 
 
             <div class="send">
 
             <div class="send">
 
               <div class="textbox">
 
               <div class="textbox">
 
                 <el-input
 
                 <el-input
 
-                  v-model="tidings"
 
+                  v-model="commentsText"
 
                   placeholder="我也来说几句"
 
                   placeholder="我也来说几句"
 
                 ></el-input>
 
                 ></el-input>
 
               </div>
 
               </div>
 
               <div class="send-btn">
 
               <div class="send-btn">
 
-                <el-button type="primary">发送</el-button>
 
+                <el-button type="primary" @click="sendComment">发送</el-button>
 
               </div>
 
               </div>
 
             </div>
 
             </div>
 
           </el-card>
 
           </el-card>
 
@@ -154,19 +159,15 @@
 
       </el-row>
 
       </el-row>
 
     </div>
 
     </div>
 
 
 
-    <div
 
+    <!--   <div
 
       style="height: 1000px; background-color: #232323; margin-top: 100px"
 
       style="height: 1000px; background-color: #232323; margin-top: 100px"
 
-    ></div>
 
+    ></div> -->
 
   </div>
 
   </div>
 
 </template>
 
 </template>
 
 
 
 <script>
 
 <script>
 
-import {
 
-  strToObject,
 
-  initMudu,
 
-  getMsgList,
 
-  initPlayer,
 
-} from "../util/video.js";
 
+import remoteLoad from "../util/remoteLoad";
 
+import moment from "moment";
 
 import "../assets/pc/css/video.scss";
 
 import "../assets/pc/css/video.scss";
 
 export default {
 
 export default {
 
   data() {
 
   data() {
 
@@ -205,10 +206,12 @@ export default {
 
           price: "免费",
 
           price: "免费",
 
         },
 
         },
 
       ],
 
       ],
 
-      tidings: "",
 
-      commentApi: {},
 
+      commentsText: "",
 
+      // commentApi: {},
 
       scrollTop: 0,
 
       scrollTop: 0,
 
-      list: [1, 2, 3, 4, 5, 6, 7, 8, 9],
 
+      commentList: [],
 
+      wsObj: {},
 
+      roomId: 0,
 
       page: 3,
 
       page: 3,
 
     };
 
     };
 
   },
 
   },
 
@@ -220,27 +223,18 @@ export default {
 
     this.width = parseInt(scale * 876);
 
     this.width = parseInt(scale * 876);
 
     this.commentsHeight = this.height + 139;
 
     this.commentsHeight = this.height + 139;
 
     this.minHeight = this.commentsHeight - 41 - 33 - 27;
 
     this.minHeight = this.commentsHeight - 41 - 33 - 27;
 
-    // 初始化播放器+
 
-    this.commentApi = await initMudu({
 
-      id: "J_prismPlayer",
 
-      width: this.width,
 
-      height: this.height,
 
-    });
 
-    console.log("-----------22222222---------");
 
-    let c = await getMsgList(this.commentApi, 0);
 
-    console.log(c);
 
+
 
+    
+  },
 
+  async mounted() {
 
+    this.linkWebSocket();
 
     this.scrollToBottom();
 
     this.scrollToBottom();
 
   },
 
   },
 
-  async mounted() {},
 
   methods: {
 
   methods: {
 
     handleChange(value) {
 
     handleChange(value) {
 
       this.$data.presentNum = value;
 
       this.$data.presentNum = value;
 
       console.log(this.$data.presentNum);
 
       console.log(this.$data.presentNum);
 
     },
 
     },
 
-    getComments(page) {
 
-      getMsgList(1);
 
-    },
 
-
 
     //评论显示从下到上
 
     //评论显示从下到上
 
     scrollToBottom() {
 
     scrollToBottom() {
 
       this.$nextTick(() => {
 
       this.$nextTick(() => {
 
@@ -250,17 +244,94 @@ export default {
 
     },
 
     },
 
     getNewComments(e) {
 
     getNewComments(e) {
 
       let top = e.target.scrollTop;
 
       let top = e.target.scrollTop;
 
-      if (e.target.scrollTop == 0) { 
+      if (e.target.scrollTop == 0) {
 
         console.log("到顶了");
 
         console.log("到顶了");
 
         console.log(this.page);
 
         console.log(this.page);
 
         if (this.page > 0) {
 
         if (this.page > 0) {
 
-          this.list.unshift(10, 11, 12, 13, 14, 15, 16, 17, 18, 19, '间隔');
 
+          this.list.unshift(10, 11, 12, 13, 14, 15, 16, 17, 18, 19, "间隔");
 
           console.log(this.page);
 
           console.log(this.page);
 
-          console.log(this.list)
 
+          console.log(this.list);
 
           this.page -= this.page;
 
           this.page -= this.page;
 
         }
 
         }
 
       }
 
       }
 
     },
 
     },
 
+    linkWebSocket() {
 
+      const self = this;
 
+      let roomId = self.roomId;
 
+      let wsObj = new WebSocket(
 
+        "ws://47.75.134.87:9501?roomId=18&userId=7&group=1"
 
+      ); //建立连接
 
+      self.wsObj = wsObj;
 
+      wsObj.onopen = function () {
 
+        //发送请求
 
+        wsObj.send("Hello WebSocket");
 
+      };
 
+      wsObj.onmessage = function (ev) {
 
+        let commentsList = self.commentList;
 
+        //获取后端响应
 
+        let data = ev.data;
 
+        let commentInfo = JSON.parse(data);
 
+        // console.log(commentInfo);
 
+        if (roomId == 0 && commentInfo.roomId) {
 
+          self.roomId = commentInfo.roomId;
 
+        }
 
+        if (commentsList.length >= 2) {
 
+          let lastComment = commentsList[commentsList.length - 1];
 
+          console.log(lastComment);
 
+          let flag = self.compareTime(
 
+            lastComment.sendTime,
 
+            commentInfo.sendTime
 
+          );
 
+          commentInfo.timeFlag = flag;
 
+        } else {
 
+          commentInfo.timeFlag = true;
 
+        }
 
+        self.commentList.push(commentInfo);
 
+        // self.scrollToBottom();
 
+      };
 
+
 
+      /*     wsObj.onclose = function (ev) {
 
+        alert("close");
 
+      };
 
+      wsObj.onerror = function (ev) {
 
+        alert("error");
 
+      }; */
 
+    },
 
+    sendComment() {
 
+      const self = this;
 
+      let wsObj = self.wsObj;
 
+      let roomId = self.roomId;
 
+      let commentContent = self.commentsText;
 
+      let comment = {
 
+        action: "roomBroadcast",
 
+        controller: "broadcast",
 
+        params: {
 
+          content: commentContent,
 
+          type: "txt",
 
+          roomId: roomId,
 
+          group: 1,
 
+        },
 
+      };
 
+      let json = JSON.stringify(comment);
 
+      wsObj.send(json);
 
+      self.commentsText = "";
 
+    },
 
+
 
+    compareTime(oldTime, newTime) {
 
+      let garMinutes = 2;
 
+      let oldDate = new Date(oldTime);
 
+      let newDate = new Date(newTime);
 
+      let o_time = oldDate.getTime();
 
+      let n_time = newDate.getTime();
 
+      let gapTime = n_time - o_time;
 
+      let flag;
 
+      if (gapTime > garMinutes * 60 * 1000) {
 
+        flag = true;
 
+      } else {
 
+        flag = false;
 
+      }
 
+      return flag;
 
+    },
 
   },
 
   },
 
 };
 
 };
 
 </script>
 
 </script>

+ 38 - 0
src/util/remoteLoad.js
查看文件 

@@ -0,0 +1,38 @@
 
+export default function remoteLoad(url, hasCallback) {
 
+    return createScript(url)
 
+
 
+    
+    function createScript(url) {
 
+        var scriptElement = document.createElement('script');
 
+        document.body.appendChild(scriptElement);
 
+        var promise = new Promise((resolve, reject) => {
 
+            scriptElement.addEventListener('load', e => {
 
+                removeScript(scriptElement)
 
+                if (!hasCallback) {
 
+                    resolve(e)
 
+                }
 
+            }, false)
 
+            scriptElement.addEventListener('error', e => {
 
+                removeScript(scriptElement)
 
+                reject(e)
 
+            }, false)
 
+            if (hasCallback) {
 
+                window.____callback____ = function () {
 
+                    resolve()
 
+                    window.____callback____ = null;
 
+                }
 
+            }
 
+        })
 
+        if (hasCallback) {
 
+            url += "&callback=____callback____"
 
+        }
 
+        scriptElement.src = url;
 
+        return promise;
 
+    }
 
+
 
+
 
+
 
+    function removeScript(scriptElement) {
 
+        document.body.removeChild(scriptElement)
 
+    }
 
+}