perf: 手机版无法聊天，输入页面跳动
This commit is contained in:
kuaifan
parent
6b7f8fd31c
commit
b02453e9f4
@ -229,6 +229,8 @@ export default {
|
||||
addTaskShow: false,
|
||||
addTaskSubscribe: null,
|
||||
|
||||
dialogMsgSubscribe: null,
|
||||
|
||||
columns: [],
|
||||
|
||||
projectKeyValue: '',
|
||||
@ -265,6 +267,9 @@ export default {
|
||||
this.addTaskSubscribe = Store.subscribe('addTask', (data) => {
|
||||
this.onAddTask(data)
|
||||
});
|
||||
this.dialogMsgSubscribe = Store.subscribe('dialogMsgPush', (data) => {
|
||||
this.addDialogMsg(data)
|
||||
});
|
||||
//
|
||||
document.addEventListener('keydown', this.shortcutEvent);
|
||||
window.addEventListener('resize', this.innerHeightListener);
|
||||
@ -279,6 +284,10 @@ export default {
|
||||
this.addTaskSubscribe.unsubscribe();
|
||||
this.addTaskSubscribe = null;
|
||||
}
|
||||
if (this.dialogMsgSubscribe) {
|
||||
this.dialogMsgSubscribe.unsubscribe();
|
||||
this.dialogMsgSubscribe = null;
|
||||
}
|
||||
//
|
||||
document.removeEventListener('keydown', this.shortcutEvent);
|
||||
window.removeEventListener('resize', this.innerHeightListener);
|
||||
@ -297,7 +306,6 @@ export default {
|
||||
'cacheProjects',
|
||||
'projectTotal',
|
||||
'taskId',
|
||||
'dialogMsgPush',
|
||||
]),
|
||||
|
||||
...mapGetters(['taskData', 'dashboardTask']),
|
||||
@ -390,43 +398,6 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
dialogMsgPush(data) {
|
||||
if (this.natificationHidden && this.natificationReady) {
|
||||
const {id, dialog_id, type, msg} = data;
|
||||
let body = '';
|
||||
switch (type) {
|
||||
case 'text':
|
||||
body = msg.text;
|
||||
break;
|
||||
case 'file':
|
||||
body = '[' + this.$L(msg.type == 'img' ? '图片信息' : '文件信息') + ']'
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
this._notificationId = id;
|
||||
this.notificationClass.replaceOptions({
|
||||
icon: $A.originUrl('images/logo.png'),
|
||||
body: body,
|
||||
data: data,
|
||||
tag: "dialog",
|
||||
requireInteraction: true
|
||||
});
|
||||
let dialog = this.cacheDialogs.find((item) => item.id == dialog_id);
|
||||
if (dialog) {
|
||||
this.notificationClass.replaceTitle(dialog.name);
|
||||
this.notificationClass.userAgreed();
|
||||
} else {
|
||||
this.$store.dispatch("getDialogOne", dialog_id).then(({data}) => {
|
||||
if (this._notificationId === id) {
|
||||
this.notificationClass.replaceTitle(data.name);
|
||||
this.notificationClass.userAgreed();
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
projectKeyValue(val) {
|
||||
if (val == '') {
|
||||
return;
|
||||
@ -605,6 +576,43 @@ export default {
|
||||
this.addTaskShow = true;
|
||||
},
|
||||
|
||||
addDialogMsg(data) {
|
||||
if (this.natificationHidden && this.natificationReady) {
|
||||
const {id, dialog_id, type, msg} = data;
|
||||
let body = '';
|
||||
switch (type) {
|
||||
case 'text':
|
||||
body = msg.text;
|
||||
break;
|
||||
case 'file':
|
||||
body = '[' + this.$L(msg.type == 'img' ? '图片信息' : '文件信息') + ']'
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
this._notificationId = id;
|
||||
this.notificationClass.replaceOptions({
|
||||
icon: $A.originUrl('images/logo.png'),
|
||||
body: body,
|
||||
data: data,
|
||||
tag: "dialog",
|
||||
requireInteraction: true
|
||||
});
|
||||
let dialog = this.cacheDialogs.find((item) => item.id == dialog_id);
|
||||
if (dialog) {
|
||||
this.notificationClass.replaceTitle(dialog.name);
|
||||
this.notificationClass.userAgreed();
|
||||
} else {
|
||||
this.$store.dispatch("getDialogOne", dialog_id).then(({data}) => {
|
||||
if (this._notificationId === id) {
|
||||
this.notificationClass.replaceTitle(data.name);
|
||||
this.notificationClass.userAgreed();
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
taskVisibleChange(visible) {
|
||||
if (!visible) {
|
||||
this.$store.dispatch('openTask', 0)
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
<ScrollerY
|
||||
ref="scroller"
|
||||
class="dialog-scroller overlay-y"
|
||||
:auto-bottom="autoBottom"
|
||||
:auto-bottom="isAutoBottom"
|
||||
@on-scroll="chatScroll"
|
||||
static>
|
||||
<div ref="manageList" class="dialog-list">
|
||||
@ -57,7 +57,7 @@
|
||||
</div>
|
||||
</ScrollerY>
|
||||
<div :class="['dialog-footer', msgNew > 0 && dialogMsgList.length > 0 ? 'newmsg' : '']" @click="onActive">
|
||||
<div class="dialog-newmsg" @click="goNewBottom">{{$L('有' + msgNew + '条新消息')}}</div>
|
||||
<div class="dialog-newmsg" @click="autoToBottom">{{$L('有' + msgNew + '条新消息')}}</div>
|
||||
<slot name="inputBefore"/>
|
||||
<DragInput
|
||||
ref="input"
|
||||
@ -95,6 +95,7 @@ import ScrollerY from "../../../components/ScrollerY";
|
||||
import {mapState} from "vuex";
|
||||
import DialogView from "./DialogView";
|
||||
import DialogUpload from "./DialogUpload";
|
||||
import {Store} from "le5le-store";
|
||||
|
||||
export default {
|
||||
name: "DialogWrapper",
|
||||
@ -118,7 +119,22 @@ export default {
|
||||
msgNew: 0,
|
||||
topId: 0,
|
||||
|
||||
tempMsgs: []
|
||||
tempMsgs: [],
|
||||
|
||||
dialogMsgSubscribe: null,
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.dialogMsgSubscribe = Store.subscribe('dialogMsgPush', (data) => {
|
||||
this.addDialogMsg(data)
|
||||
});
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
if (this.dialogMsgSubscribe) {
|
||||
this.dialogMsgSubscribe.unsubscribe();
|
||||
this.dialogMsgSubscribe = null;
|
||||
}
|
||||
},
|
||||
|
||||
@ -127,7 +143,7 @@ export default {
|
||||
'userId',
|
||||
'cacheDialogs',
|
||||
'dialogMsgs',
|
||||
'dialogMsgPush',
|
||||
'windowMax768',
|
||||
]),
|
||||
|
||||
dialogData() {
|
||||
@ -145,6 +161,13 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
isAutoBottom() {
|
||||
if (this.windowMax768 && this.inputFocus) {
|
||||
return false;
|
||||
}
|
||||
return this.autoBottom
|
||||
},
|
||||
|
||||
tempMsgList() {
|
||||
if (!this.dialogId) {
|
||||
return [];
|
||||
@ -173,14 +196,6 @@ export default {
|
||||
immediate: true
|
||||
},
|
||||
|
||||
dialogMsgPush() {
|
||||
if (this.autoBottom) {
|
||||
this.$nextTick(this.goBottom);
|
||||
} else {
|
||||
this.msgNew++;
|
||||
}
|
||||
},
|
||||
|
||||
dialogId: {
|
||||
handler(id) {
|
||||
if (id) {
|
||||
@ -213,10 +228,10 @@ export default {
|
||||
text: this.msgText,
|
||||
},
|
||||
});
|
||||
if (this.$store.state.windowMax768) {
|
||||
if (this.windowMax768) {
|
||||
this.$refs.input.blur();
|
||||
}
|
||||
this.autoBottom = true;
|
||||
this.autoToBottom();
|
||||
this.onActive();
|
||||
//
|
||||
this.$store.dispatch("call", {
|
||||
@ -295,7 +310,10 @@ export default {
|
||||
userid: this.userId,
|
||||
msg: { },
|
||||
});
|
||||
this.autoBottom = true;
|
||||
if (this.windowMax768) {
|
||||
this.$refs.input.blur();
|
||||
}
|
||||
this.autoToBottom();
|
||||
this.onActive();
|
||||
break;
|
||||
|
||||
@ -322,6 +340,7 @@ export default {
|
||||
switch (res.directionreal) {
|
||||
case 'up':
|
||||
if (res.scrollE < 10) {
|
||||
this.msgNew = 0;
|
||||
this.autoBottom = true;
|
||||
}
|
||||
break;
|
||||
@ -330,27 +349,18 @@ export default {
|
||||
break;
|
||||
}
|
||||
if (res.scale === 1) {
|
||||
this.msgNew = 0;
|
||||
this.autoBottom = true;
|
||||
}
|
||||
},
|
||||
|
||||
goBottom() {
|
||||
if (this.autoBottom) {
|
||||
this.msgNew = 0;
|
||||
this.$refs.scroller.autoToBottom();
|
||||
}
|
||||
},
|
||||
|
||||
goNewBottom() {
|
||||
this.autoBottom = true;
|
||||
this.goBottom();
|
||||
},
|
||||
|
||||
onEventFocus(e) {
|
||||
this.inputFocus = true;
|
||||
this.$emit("on-focus", e)
|
||||
},
|
||||
|
||||
onEventblur(e) {
|
||||
this.inputFocus = false;
|
||||
this.$emit("on-blur", e)
|
||||
},
|
||||
|
||||
@ -358,6 +368,10 @@ export default {
|
||||
this.$emit("on-active");
|
||||
},
|
||||
|
||||
autoToBottom() {
|
||||
this.$refs.scroller && this.$refs.scroller.autoToBottom();
|
||||
},
|
||||
|
||||
openProject() {
|
||||
if (!this.dialogData.group_info) {
|
||||
return;
|
||||
@ -390,6 +404,18 @@ export default {
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
addDialogMsg() {
|
||||
if (this.isAutoBottom) {
|
||||
this.$nextTick(this.autoToBottom);
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.scroller && this.$refs.scroller.scrollInfo().scrollE > 10) {
|
||||
this.msgNew++;
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2014,7 +2014,7 @@ export default {
|
||||
(function (msg) {
|
||||
const {mode, data} = msg;
|
||||
const {dialog_id} = data;
|
||||
if (mode === "add" || mode === "chat") {
|
||||
if (["add", "chat"].includes(mode) && !state.dialogMsgs.find(({id}) => id == data.id)) {
|
||||
// 新增任务消息数量
|
||||
dispatch("increaseTaskMsgNum", dialog_id);
|
||||
if (mode === "chat") {
|
||||
@ -2024,13 +2024,11 @@ export default {
|
||||
// 更新对话列表
|
||||
if (dialog) {
|
||||
// 新增未读数
|
||||
if (data.userid !== state.userId && state.dialogMsgs.findIndex(({id}) => id == data.id) === -1) {
|
||||
dialog.unread++;
|
||||
}
|
||||
dialog.unread++;
|
||||
// 移动到首位
|
||||
dispatch("moveDialogTop", dialog_id);
|
||||
}
|
||||
state.dialogMsgPush = data;
|
||||
Store.set('dialogMsgPush', data);
|
||||
}
|
||||
// 更新消息列表
|
||||
dispatch("saveDialogMsg", data)
|
||||
|
||||
@ -52,7 +52,6 @@ state.userOnline = {};
|
||||
|
||||
// 会话聊天
|
||||
state.dialogMsgs = [];
|
||||
state.dialogMsgPush = {};
|
||||
state.dialogOpenId = 0;
|
||||
|
||||
// 文件
|
||||
|
||||
@ -330,10 +330,10 @@
|
||||
position: relative;
|
||||
.dialog-back {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 64px;
|
||||
height: 49px;
|
||||
z-index: 1;
|
||||
font-size: 26px;
|
||||
display: flex;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user