|
|
@@ -119,34 +119,39 @@
|
|
|
class="messages-content"
|
|
|
id="commentsList"
|
|
|
: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 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 v-show="item.action == 101" class="item101">
|
|
|
+ {{ item.content }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="send">
|
|
|
<div class="textbox">
|
|
|
<el-input
|
|
|
- v-model="tidings"
|
|
|
+ v-model="commentsText"
|
|
|
placeholder="我也来说几句"
|
|
|
></el-input>
|
|
|
</div>
|
|
|
<div class="send-btn">
|
|
|
- <el-button type="primary">发送</el-button>
|
|
|
+ <el-button type="primary" @click="sendComment">发送</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
@@ -154,19 +159,15 @@
|
|
|
</el-row>
|
|
|
</div>
|
|
|
|
|
|
- <div
|
|
|
+ <!-- <div
|
|
|
style="height: 1000px; background-color: #232323; margin-top: 100px"
|
|
|
- ></div>
|
|
|
+ ></div> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<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";
|
|
|
export default {
|
|
|
data() {
|
|
|
@@ -205,10 +206,12 @@ export default {
|
|
|
price: "免费",
|
|
|
},
|
|
|
],
|
|
|
- tidings: "",
|
|
|
- commentApi: {},
|
|
|
+ commentsText: "",
|
|
|
+ // commentApi: {},
|
|
|
scrollTop: 0,
|
|
|
- list: [1, 2, 3, 4, 5, 6, 7, 8, 9],
|
|
|
+ commentList: [],
|
|
|
+ wsObj: {},
|
|
|
+ roomId: 0,
|
|
|
page: 3,
|
|
|
};
|
|
|
},
|
|
|
@@ -220,27 +223,18 @@ export default {
|
|
|
this.width = parseInt(scale * 876);
|
|
|
this.commentsHeight = this.height + 139;
|
|
|
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();
|
|
|
},
|
|
|
- async mounted() {},
|
|
|
methods: {
|
|
|
handleChange(value) {
|
|
|
this.$data.presentNum = value;
|
|
|
console.log(this.$data.presentNum);
|
|
|
},
|
|
|
- getComments(page) {
|
|
|
- getMsgList(1);
|
|
|
- },
|
|
|
-
|
|
|
//评论显示从下到上
|
|
|
scrollToBottom() {
|
|
|
this.$nextTick(() => {
|
|
|
@@ -250,17 +244,94 @@ export default {
|
|
|
},
|
|
|
getNewComments(e) {
|
|
|
let top = e.target.scrollTop;
|
|
|
- if (e.target.scrollTop == 0) {
|
|
|
+ if (e.target.scrollTop == 0) {
|
|
|
console.log("到顶了");
|
|
|
console.log(this.page);
|
|
|
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.list)
|
|
|
+ console.log(this.list);
|
|
|
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>
|
