|
|
@@ -21,7 +21,15 @@
|
|
|
class="record-item"
|
|
|
:class="item.id !== self.id ? 'receive-record' : 'send-record'"
|
|
|
>
|
|
|
- <span>{{ item.msg }}</span>
|
|
|
+ <div>
|
|
|
+ <span>{{ item.msg }}</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>{{ item.msg }}</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>{{ item.msg }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-scrollbar>
|
|
|
@@ -47,12 +55,33 @@
|
|
|
{{ item.nickname }}
|
|
|
</div>
|
|
|
<!-- <div class="user">5asfdasdf</div> -->
|
|
|
- <span>{{ item.msg }}</span>
|
|
|
+ <!-- <span>{{ item.msg }}</span> -->
|
|
|
+ <div class="message-content-text" style="margin-left:2px; margin-top: 0" v-text="_parseText(item.msg)"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-if="item.id === self.id" class="record-item send-record">
|
|
|
<!-- <div class="user">5asfdasdf</div> -->
|
|
|
- <span>{{ item.msg }}</span>
|
|
|
+ <!-- <span>{{ item.msg }}</span> -->
|
|
|
+ <!-- 链接 -->
|
|
|
+ <!-- <a class="message-content-text" href="https://img2.baidu.com/it/u=1605987499,4009355285&fm=26&fmt=auto&gp=0.jpg" target="_blank">https://img2.baidu.com/it/u=1605987499,4009355285&fm=26&fmt=auto&gp=0.jpg</a> -->
|
|
|
+ <!-- 文本 -->
|
|
|
+ <!-- <div class="message-content-text" v-text="_parseText(item.msg)"></div> -->
|
|
|
+ <!-- 图片 -->
|
|
|
+ <!-- <div class="message-content-image" :style="getImageStyle('https://img2.baidu.com/it/u=1605987499,4009355285&fm=26&fmt=auto&gp=0.jpg')">
|
|
|
+ <viewer style="display: flex; align-items: center">
|
|
|
+ <img src="https://img2.baidu.com/it/u=1605987499,4009355285&fm=26&fmt=auto&gp=0.jpg" alt="" />
|
|
|
+ </viewer>
|
|
|
+ </div> -->
|
|
|
+ <!-- 视频格式文件 -->
|
|
|
+ <div class="message-content-image">
|
|
|
+ <video style="width: 255px" src="https://media.w3.org/2010/05/sintel/trailer.mp4" controls="controls">您的浏览器不支持 video 标签。</video>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="avatar">
|
|
|
+ <el-avatar
|
|
|
+ shape="square"
|
|
|
+ src="https://img2.baidu.com/it/u=1077360284,2857506492&fm=26&fmt=auto&gp=0.jpg"
|
|
|
+ ></el-avatar>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-scrollbar>
|
|
|
@@ -60,9 +89,21 @@
|
|
|
<div class="send-msg-wrap">
|
|
|
<div class="send-header">
|
|
|
<div class="tools" style="margin:10px">
|
|
|
- <input type="file" name="" id="siofu_input">
|
|
|
-
|
|
|
- <i id="upload-btn" class="el-icon-folder-opened" @click="upload"></i>
|
|
|
+ <el-upload
|
|
|
+ ref="upload"
|
|
|
+ class="file-uploader"
|
|
|
+ action="/api/upload/"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-success="handleSuccess"
|
|
|
+ :before-upload="beforeUpload"
|
|
|
+ style="display: inline"
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ id="upload-btn"
|
|
|
+ class="el-icon-folder-opened"
|
|
|
+ @click="upload"
|
|
|
+ ></i>
|
|
|
+ </el-upload>
|
|
|
<i class="el-icon-folder-add"></i>
|
|
|
<i class="el-icon-folder-opened"></i>
|
|
|
</div>
|
|
|
@@ -94,6 +135,7 @@
|
|
|
|
|
|
<script>
|
|
|
import { addCookie, getCookie } from "@/utils/setCookie.js";
|
|
|
+import { isUrl, parseText, processReturn } from "@/utils/common";
|
|
|
export default {
|
|
|
name: "ChatFrame",
|
|
|
props: ["selected", "tab"],
|
|
|
@@ -105,7 +147,7 @@ export default {
|
|
|
room_record: {},
|
|
|
room_record_list: [],
|
|
|
self: null,
|
|
|
- uploader: null
|
|
|
+ uploadProgress: false
|
|
|
};
|
|
|
},
|
|
|
computed: {},
|
|
|
@@ -125,105 +167,182 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- upload() {
|
|
|
- console.log(`this.$socket`, this.$socket)
|
|
|
- this.uploader = this.$socketUpload(this.$socket);
|
|
|
- this.uploader.addEventListener("choose", (event) => {
|
|
|
- console.info('-----------event----------')
|
|
|
- console.info(event)
|
|
|
-
|
|
|
- })
|
|
|
-
|
|
|
- this.uploader.addEventListener("start", (event) => {
|
|
|
- console.info('-----------start----------')
|
|
|
- console.info(event)
|
|
|
- console.log(`event.file`, event.file)
|
|
|
- this.uploader.submitFiles(event.file)
|
|
|
- })
|
|
|
-
|
|
|
- this.uploader.addEventListener("progress", (event) => {
|
|
|
- console.info('-----------progress----------')
|
|
|
- console.info(event)
|
|
|
- })
|
|
|
+ handleSuccess(res, file) {
|
|
|
+ console.log(`res`, res);
|
|
|
+ this.imageUrl = URL.createObjectURL(file.raw);
|
|
|
+ },
|
|
|
+ beforeUpload(file) {
|
|
|
+ console.log(`file`, file);
|
|
|
+ // const isJPG = file.type === "image/jpeg";
|
|
|
+ // const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
|
|
|
- this.uploader.addEventListener("load", (event) => {
|
|
|
- console.info('-----------load----------')
|
|
|
- console.info(event)
|
|
|
- })
|
|
|
+ // if (!isJPG) {
|
|
|
+ // this.$message.error("上传头像图片只能是 JPG 格式!");
|
|
|
+ // }
|
|
|
+ // if (!isLt2M) {
|
|
|
+ // this.$message.error("上传头像图片大小不能超过 2MB!");
|
|
|
+ // }
|
|
|
+ // return isJPG && isLt2M;
|
|
|
+ this.uploadProgress = true;
|
|
|
+ this.fileData = file;
|
|
|
+ // 调用函数分割文件 我这里是分割成不超过20M的文件快
|
|
|
+ this.fileDataList = this.createFileChunk(file, 1024 * 1024 * 20);
|
|
|
+ console.log(`this.fileDataList`, this.fileDataList);
|
|
|
+ // return new Promise((reslove, reject)=>{
|
|
|
+ // this.fileUpLoad(reslove, reject);
|
|
|
+ // })
|
|
|
+ let fd = new FormData();
|
|
|
+ fd.append("filename", file);
|
|
|
+ // fd.append('project_id', this.project_id)
|
|
|
+ // fd.append('version_id', this.version_id)
|
|
|
+ console.log(`fd`, fd);
|
|
|
+ this.$http.post("/api/upload/", fd).then(
|
|
|
+ res => {
|
|
|
+ // this.importDataBtnText='导入成功';
|
|
|
+ console.log(`res1111`, res);
|
|
|
+ console.log("======success====");
|
|
|
+ },
|
|
|
+ res => {
|
|
|
+ console.log("===========shibai====");
|
|
|
+ // this.importDataBtnText='导入失败';
|
|
|
+ console.log(res);
|
|
|
+ }
|
|
|
+ );
|
|
|
+ return false;
|
|
|
+ },
|
|
|
+ submitUpload() {
|
|
|
+ this.$refs.upload.submit();
|
|
|
+ },
|
|
|
|
|
|
- this.uploader.addEventListener("complete", (event) => {
|
|
|
- console.info('-----------complete----------')
|
|
|
- console.info(event)
|
|
|
- })
|
|
|
+ /**
|
|
|
+ * 文本转译/校验
|
|
|
+ * @params text
|
|
|
+ */
|
|
|
+ _parseText(text) {
|
|
|
+ return parseText(text);
|
|
|
+ },
|
|
|
|
|
|
- this.uploader.addEventListener("error", function(data) {
|
|
|
- console.log(`data`, data)
|
|
|
- if (data.code === 1) {
|
|
|
- alert("Don't upload such a big file");
|
|
|
- }
|
|
|
- });
|
|
|
- this.uploader.prompt()
|
|
|
- // console.log(`object`, document.getElementById("upload-btn"))
|
|
|
- // const ob = this.uploader.listenOnSubmit(document.getElementById("upload-btn"), document.getElementById("siofu_input"));
|
|
|
- console.log('==========')
|
|
|
- // this.uploader.listenOnInput()
|
|
|
- // console.log(`uploader`, this.uploader);
|
|
|
+ /**
|
|
|
+ * 是否URL
|
|
|
+ * @params text
|
|
|
+ */
|
|
|
+ _isUrl(text) {
|
|
|
+ return isUrl(text);
|
|
|
},
|
|
|
- newFn(event) {
|
|
|
- console.log(`event`, event);
|
|
|
+
|
|
|
+ // // 初始化上传接口的函数，再上面上传之前调用的
|
|
|
+ // fileUpLoad(reslove, reject) {
|
|
|
+ // const paramsData = {
|
|
|
+ // multipartUpload: true, // 是否是文件分步，分块上传
|
|
|
+ // name: this.fileData.name,
|
|
|
+ // size: this.fileData.size,
|
|
|
+ // }
|
|
|
+ // initFileUpload(paramsData).then(res => {
|
|
|
+ // const uploadUrl = res.data.data.uploadUrl
|
|
|
+ // const completeMultipartUrl = res.data.data.completeMultipartUrl
|
|
|
+ // // 文件上传的请求地址
|
|
|
+ // this.uploadUrl = uploadUrl
|
|
|
+ // // 合并文件上传的请求地址
|
|
|
+ // this.completeMultipartUrl = completeMultipartUrl
|
|
|
+ // reslove();
|
|
|
+ // }).catch((err)=>{
|
|
|
+ // reject(err)
|
|
|
+ // })
|
|
|
+ // },
|
|
|
+ // 文件分割的方法
|
|
|
+ createFileChunk(file, size = chunkSize) {
|
|
|
+ const fileChunkList = [];
|
|
|
+ let count = 0;
|
|
|
+ let num = 1;
|
|
|
+ while (count < file.size) {
|
|
|
+ fileChunkList.push({
|
|
|
+ file: file.slice(count, count + size),
|
|
|
+ partNumber: num
|
|
|
+ });
|
|
|
+ count += size;
|
|
|
+ num++;
|
|
|
+ }
|
|
|
+ return fileChunkList;
|
|
|
},
|
|
|
+ /**
|
|
|
+ * 根据图片url设置图片框宽高, 注意是图片框
|
|
|
+ */
|
|
|
+ getImageStyle(src) {
|
|
|
+ const arr = src.split('$');
|
|
|
+ let width = Number(arr[2]);
|
|
|
+ let height = Number(arr[3]);
|
|
|
+ if (this.mobile) {
|
|
|
+ // 如果是移动端,图片最大宽度138, 返回值加12是因为设置的是图片框的宽高要加入padding值
|
|
|
+ if (width > 138) {
|
|
|
+ height = (height * 138) / width;
|
|
|
+ width = 138;
|
|
|
+ return {
|
|
|
+ width: `${width + 12}px`,
|
|
|
+ height: `${height + 12}px`,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ width: `${width + 12}px`,
|
|
|
+ height: `${height + 12}px`,
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ upload() {},
|
|
|
|
|
|
sendMsg(e) {
|
|
|
- console.log(`uploader`, this.uploader);
|
|
|
- // if (e.which === 13) {
|
|
|
- // console.log(`e.which`, e.which);
|
|
|
- // e.cancelBubble = true;
|
|
|
- // e.preventDefault();
|
|
|
- // e.stopPropagation();
|
|
|
- // }
|
|
|
+ if (e.which === 13) {
|
|
|
+ console.log(`e.which`, e.which);
|
|
|
+ e.cancelBubble = true;
|
|
|
+ e.preventDefault();
|
|
|
+ e.stopPropagation();
|
|
|
+ }
|
|
|
|
|
|
- // if (this.msg.trim() === "") {
|
|
|
- // this.msg = "";
|
|
|
- // return;
|
|
|
- // }
|
|
|
- // console.log(`this.self`, this.self);
|
|
|
- // const msgInfo = {
|
|
|
- // id: this.$socket.id,
|
|
|
- // msg: this.msg,
|
|
|
- // nickname: this.self.nickname
|
|
|
- // };
|
|
|
- // this.msg = ""; // 输入enter后置空
|
|
|
- // if (this.tab === "friends") {
|
|
|
- // msgInfo.toid = this.selected.id;
|
|
|
- // this.$socket.emit("private message", this.selected.id, msgInfo);
|
|
|
- // if (this.friend_record[this.selected.id]) {
|
|
|
- // this.friend_record[this.selected.id].push(msgInfo);
|
|
|
- // this.friend_record_list = this.friend_record[this.selected.id];
|
|
|
- // } else {
|
|
|
- // this.friend_record[this.selected.id] = [];
|
|
|
- // this.friend_record[this.selected.id].push(msgInfo);
|
|
|
- // this.friend_record_list = this.friend_record[this.selected.id];
|
|
|
- // }
|
|
|
- // addCookie("friend_record", JSON.stringify(this.friend_record));
|
|
|
- // } else {
|
|
|
- // msgInfo.roomid = this.selected.id;
|
|
|
- // this.$socket.emit("chat-room", this.selected.id, msgInfo);
|
|
|
- // if (this.room_record[this.selected.id]) {
|
|
|
- // this.room_record[this.selected.id].push(msgInfo);
|
|
|
- // this.room_record_list = this.room_record[this.selected.id];
|
|
|
- // } else {
|
|
|
- // this.room_record[this.selected.id] = [];
|
|
|
- // this.room_record[this.selected.id].push(msgInfo);
|
|
|
- // this.room_record_list = this.room_record[this.selected.id];
|
|
|
- // }
|
|
|
- // addCookie("room_record", JSON.stringify(this.room_record));
|
|
|
- // }
|
|
|
- // this.$nextTick(() => {
|
|
|
- // // 滚动到底部
|
|
|
- // this.$refs["myScrollbar"].wrap.scrollTop = this.$refs[
|
|
|
- // "myScrollbar"
|
|
|
- // ].wrap.scrollHeight;
|
|
|
- // });
|
|
|
+ if (this.msg.trim() === "") {
|
|
|
+ this.msg = "";
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.self) {
|
|
|
+ this.self = JSON.parse(localStorage.getItem("self"));
|
|
|
+ }
|
|
|
+ console.log(`this.self`, this.self);
|
|
|
+ const msgInfo = {
|
|
|
+ id: this.$socket.id,
|
|
|
+ msg: this.msg,
|
|
|
+ nickname: this.self.nickname
|
|
|
+ };
|
|
|
+ this.msg = ""; // 输入enter后置空
|
|
|
+ if (this.tab === "friends") {
|
|
|
+ msgInfo.toid = this.selected.id;
|
|
|
+ this.$socket.emit("private message", this.selected.id, msgInfo);
|
|
|
+ if (this.friend_record[this.selected.id]) {
|
|
|
+ this.friend_record[this.selected.id].push(msgInfo);
|
|
|
+ this.friend_record_list = this.friend_record[this.selected.id];
|
|
|
+ } else {
|
|
|
+ this.friend_record[this.selected.id] = [];
|
|
|
+ this.friend_record[this.selected.id].push(msgInfo);
|
|
|
+ this.friend_record_list = this.friend_record[this.selected.id];
|
|
|
+ }
|
|
|
+ addCookie("friend_record", JSON.stringify(this.friend_record));
|
|
|
+ } else {
|
|
|
+ msgInfo.roomid = this.selected.id;
|
|
|
+ this.$socket.emit("chat-room", this.selected.id, msgInfo);
|
|
|
+ if (this.room_record[this.selected.id]) {
|
|
|
+ this.room_record[this.selected.id].push(msgInfo);
|
|
|
+ this.room_record_list = this.room_record[this.selected.id];
|
|
|
+ } else {
|
|
|
+ this.room_record[this.selected.id] = [];
|
|
|
+ this.room_record[this.selected.id].push(msgInfo);
|
|
|
+ this.room_record_list = this.room_record[this.selected.id];
|
|
|
+ }
|
|
|
+ addCookie("room_record", JSON.stringify(this.room_record));
|
|
|
+ }
|
|
|
+ this.$nextTick(() => {
|
|
|
+ // 滚动到底部
|
|
|
+ this.$refs["myScrollbar"].wrap.scrollTop = this.$refs[
|
|
|
+ "myScrollbar"
|
|
|
+ ].wrap.scrollHeight;
|
|
|
+ });
|
|
|
},
|
|
|
|
|
|
closeScoket() {
|
|
|
@@ -355,7 +474,7 @@ export default {
|
|
|
border-radius: 5px;
|
|
|
}
|
|
|
.nickname {
|
|
|
- padding: 10px 5px;
|
|
|
+ padding: 4px;
|
|
|
margin-bottom: 2px;
|
|
|
font-size: 14px;
|
|
|
color: gray;
|
|
|
@@ -366,9 +485,7 @@ export default {
|
|
|
background-color: rgb(199, 206, 200);
|
|
|
}
|
|
|
.send-record {
|
|
|
- width: 60%;
|
|
|
position: relative;
|
|
|
- float: right;
|
|
|
justify-content: flex-end;
|
|
|
}
|
|
|
.receive-record {
|
|
|
@@ -376,8 +493,32 @@ export default {
|
|
|
justify-content: flex-start;
|
|
|
}
|
|
|
.send-record > span {
|
|
|
+ display: inline-block;
|
|
|
text-align: right;
|
|
|
+}
|
|
|
+.message-content-text,
|
|
|
+.message-content-image {
|
|
|
+ max-width: 600px;
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 35px;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-top: 4px;
|
|
|
+ padding: 6px;
|
|
|
background: rgb(117, 197, 128);
|
|
|
+ font-size: 16px;
|
|
|
+ border-radius: 5px;
|
|
|
+ text-align: left;
|
|
|
+ word-break: break-word;
|
|
|
+}
|
|
|
+.message-content-image {
|
|
|
+ max-height: 255px;
|
|
|
+ max-width: 255px;
|
|
|
+ background: rgb(204, 197, 197);
|
|
|
+}
|
|
|
+.message-content-image img {
|
|
|
+ cursor: pointer;
|
|
|
+ max-width: 225px;
|
|
|
+ max-height: 225px;
|
|
|
}
|
|
|
.receive-record > span {
|
|
|
text-align: left;
|
