feat:修改bug
This commit is contained in:
dzc committed
1 parent
a9d66d4f4a
commit
afd84e06e7
12 files changed
+575
-665
No files matched your search
@@ -28,186 +28,189 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'chatItem',
|
||||
data() {
|
||||
return {};
|
||||
export default {
|
||||
name: 'chatItem',
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
props: {
|
||||
userId: {
|
||||
type: Number,
|
||||
},
|
||||
props: {
|
||||
chat: {
|
||||
type: Object,
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
},
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
chat: {
|
||||
type: Object,
|
||||
},
|
||||
methods: {
|
||||
showChatBox() {
|
||||
// 初始化期间进入会话会导致消息不刷新
|
||||
if (!this.configStore.appInit || this.chatStore.loading) {
|
||||
uni.showToast({
|
||||
title: '正在初始化页面,请稍后...',
|
||||
icon: 'none',
|
||||
});
|
||||
return;
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '/pages/message/chat-box?chatIdx=' + this.index,
|
||||
index: {
|
||||
type: Number,
|
||||
},
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
showChatBox() {
|
||||
// 初始化期间进入会话会导致消息不刷新
|
||||
if (!this.configStore.appInit || this.chatStore.loading) {
|
||||
uni.showToast({
|
||||
title: '正在初始化页面,请稍后...',
|
||||
icon: 'none',
|
||||
});
|
||||
},
|
||||
return;
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: `/pages/message/chat-box?chatIdx=${this.index}&memberId=${this.userId}`,
|
||||
});
|
||||
},
|
||||
computed: {
|
||||
isShowSendName() {
|
||||
if (!this.chat.sendNickName) {
|
||||
return false;
|
||||
}
|
||||
let size = this.chat.messages.length;
|
||||
if (size == 0) {
|
||||
return false;
|
||||
}
|
||||
// 只有群聊的普通消息需要显示名称
|
||||
let lastMsg = this.chat.messages[size - 1];
|
||||
return this.$msgType.isNormal(lastMsg.type);
|
||||
},
|
||||
atText() {
|
||||
if (this.chat.atMe) {
|
||||
return '[有人@我]';
|
||||
} else if (this.chat.atAll) {
|
||||
return '[@全体成员]';
|
||||
}
|
||||
return '';
|
||||
},
|
||||
isTextMessage() {
|
||||
if (this.chat.messages.length == 0) {
|
||||
return false;
|
||||
}
|
||||
let idx = this.chat.messages.length - 1;
|
||||
let messageType = this.chat.messages[idx].type;
|
||||
return messageType == this.$enums.MESSAGE_TYPE.TEXT;
|
||||
},
|
||||
isGiftMessage() {
|
||||
if (this.chat.messages.length == 0) {
|
||||
return false;
|
||||
}
|
||||
let idx = this.chat.messages.length - 1;
|
||||
let messageType = this.chat.messages[idx].type;
|
||||
return messageType == this.$enums.MESSAGE_TYPE.GIFT;
|
||||
},
|
||||
nodesText() {
|
||||
let text = this.$str.html2Escape(this.chat.lastContent);
|
||||
return this.$emo.transform(text, 'emoji-small');
|
||||
},
|
||||
online() {
|
||||
if (this.chat.type == 'PRIVATE') {
|
||||
let friend = this.friendStore.findFriend(this.chat.targetId);
|
||||
return friend && friend.online;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isShowSendName() {
|
||||
if (!this.chat.sendNickName) {
|
||||
return false;
|
||||
},
|
||||
}
|
||||
let size = this.chat.messages.length;
|
||||
if (size == 0) {
|
||||
return false;
|
||||
}
|
||||
// 只有群聊的普通消息需要显示名称
|
||||
let lastMsg = this.chat.messages[size - 1];
|
||||
return this.$msgType.isNormal(lastMsg.type);
|
||||
},
|
||||
};
|
||||
atText() {
|
||||
if (this.chat.atMe) {
|
||||
return '[有人@我]';
|
||||
} else if (this.chat.atAll) {
|
||||
return '[@全体成员]';
|
||||
}
|
||||
return '';
|
||||
},
|
||||
isTextMessage() {
|
||||
if (this.chat.messages.length == 0) {
|
||||
return false;
|
||||
}
|
||||
let idx = this.chat.messages.length - 1;
|
||||
let messageType = this.chat.messages[idx].type;
|
||||
return messageType == this.$enums.MESSAGE_TYPE.TEXT;
|
||||
},
|
||||
isGiftMessage() {
|
||||
if (this.chat.messages.length == 0) {
|
||||
return false;
|
||||
}
|
||||
let idx = this.chat.messages.length - 1;
|
||||
let messageType = this.chat.messages[idx].type;
|
||||
return messageType == this.$enums.MESSAGE_TYPE.GIFT;
|
||||
},
|
||||
nodesText() {
|
||||
let text = this.$str.html2Escape(this.chat.lastContent);
|
||||
return this.$emo.transform(text, 'emoji-small');
|
||||
},
|
||||
online() {
|
||||
if (this.chat.type == 'PRIVATE') {
|
||||
let friend = this.friendStore.findFriend(this.chat.targetId);
|
||||
return friend && friend.online;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.chat-item {
|
||||
height: 96rpx;
|
||||
display: flex;
|
||||
margin-bottom: 2rpx;
|
||||
.chat-item {
|
||||
height: 96rpx;
|
||||
display: flex;
|
||||
margin-bottom: 2rpx;
|
||||
position: relative;
|
||||
padding: 18rpx 20rpx;
|
||||
align-items: center;
|
||||
background-color: $im-bg;
|
||||
white-space: nowrap;
|
||||
border-top: 1px solid $im-border;
|
||||
|
||||
&:hover {
|
||||
background-color: $im-bg-active;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $im-bg-active;
|
||||
}
|
||||
|
||||
.mask {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.left {
|
||||
position: relative;
|
||||
padding: 18rpx 20rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: $im-bg;
|
||||
white-space: nowrap;
|
||||
border-top: 1px solid $im-border;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $im-bg-active;
|
||||
}
|
||||
.chat-right {
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding-left: 20rpx;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
|
||||
&.active {
|
||||
background-color: $im-bg-active;
|
||||
}
|
||||
|
||||
.mask {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.left {
|
||||
position: relative;
|
||||
.chat-name {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
|
||||
.chat-right {
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding-left: 20rpx;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
|
||||
.chat-name {
|
||||
.chat-name-text {
|
||||
flex: 1;
|
||||
font-size: $im-font-size-large;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
|
||||
.chat-name-text {
|
||||
flex: 1;
|
||||
font-size: $im-font-size-large;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chat-time {
|
||||
font-size: $im-font-size-smaller-extra;
|
||||
color: $im-text-color-lighter;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chat-content {
|
||||
display: flex;
|
||||
font-size: $im-font-size-smaller;
|
||||
.chat-time {
|
||||
font-size: $im-font-size-smaller-extra;
|
||||
color: $im-text-color-lighter;
|
||||
padding: 8rpx 30rpx 0 0;
|
||||
align-items: center;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-at-text {
|
||||
color: $im-color-danger;
|
||||
}
|
||||
.chat-content {
|
||||
display: flex;
|
||||
font-size: $im-font-size-smaller;
|
||||
color: $im-text-color-lighter;
|
||||
padding: 8rpx 30rpx 0 0;
|
||||
align-items: center;
|
||||
|
||||
.chat-send-name {
|
||||
font-size: $im-font-size-smaller;
|
||||
}
|
||||
.chat-at-text {
|
||||
color: $im-color-danger;
|
||||
}
|
||||
|
||||
.chat-content-text {
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
.chat-send-name {
|
||||
font-size: $im-font-size-smaller;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: $im-font-size;
|
||||
}
|
||||
.chat-content-text {
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: $im-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,25 +1,11 @@
|
||||
<template>
|
||||
<view class="long-press-menu none-pointer-events">
|
||||
<view
|
||||
@longpress.prevent.stop="onLongPress($event)"
|
||||
@touchmove="onTouchMove"
|
||||
@touchend="onTouchEnd"
|
||||
>
|
||||
<view @longpress.prevent.stop="onLongPress($event)" @touchmove="onTouchMove" @touchend="onTouchEnd">
|
||||
<slot></slot>
|
||||
</view>
|
||||
<view
|
||||
v-if="isShowMenu"
|
||||
class="menu-mask"
|
||||
@touchstart="onClose()"
|
||||
@contextmenu.prevent=""
|
||||
></view>
|
||||
<view v-if="isShowMenu" class="menu-mask" @touchstart="onClose()" @contextmenu.prevent=""></view>
|
||||
<view v-if="isShowMenu" class="menu" :style="menuStyle">
|
||||
<view
|
||||
class="menu-item"
|
||||
v-for="item in items"
|
||||
:key="item.key"
|
||||
@click.prevent="onSelectMenu(item)"
|
||||
>
|
||||
<view class="menu-item" v-for="item in items" :key="item.key" @click.prevent="onSelectMenu(item)">
|
||||
<text :style="itemStyle(item)"> {{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -27,119 +13,119 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'long-press-menu',
|
||||
data() {
|
||||
return {
|
||||
isShowMenu: false,
|
||||
isTouchMove: false,
|
||||
style: '',
|
||||
};
|
||||
export default {
|
||||
name: 'long-press-menu',
|
||||
data() {
|
||||
return {
|
||||
isShowMenu: false,
|
||||
isTouchMove: false,
|
||||
style: '',
|
||||
};
|
||||
},
|
||||
props: {
|
||||
items: {
|
||||
type: Array,
|
||||
},
|
||||
props: {
|
||||
items: {
|
||||
type: Array,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onLongPress(e) {
|
||||
if (this.isTouchMove) {
|
||||
// 屏幕移动时不弹出
|
||||
return;
|
||||
}
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
let touches = e.touches[0];
|
||||
let style = '';
|
||||
/* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */
|
||||
if (touches.clientY > res.windowHeight / 2) {
|
||||
style = `bottom:${res.windowHeight - touches.clientY + 20}px;`;
|
||||
} else {
|
||||
style = `top:${touches.clientY + 20}px;`;
|
||||
}
|
||||
if (touches.clientX > res.windowWidth / 2) {
|
||||
style += `right:${res.windowWidth - touches.clientX}px;`;
|
||||
} else {
|
||||
style += `left:${touches.clientX}px;`;
|
||||
}
|
||||
this.menuStyle = style;
|
||||
//
|
||||
this.$nextTick(() => {
|
||||
this.isShowMenu = true;
|
||||
});
|
||||
this.menuTouch = touches;
|
||||
},
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
onLongPress(e) {
|
||||
if (this.isTouchMove) {
|
||||
// 屏幕移动时不弹出
|
||||
return;
|
||||
}
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
let touches = e.touches[0];
|
||||
let style = '';
|
||||
/* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */
|
||||
if (touches.clientY > res.windowHeight / 2) {
|
||||
style = `bottom:${res.windowHeight - touches.clientY + 20}px;`;
|
||||
} else {
|
||||
style = `top:${touches.clientY + 20}px;`;
|
||||
}
|
||||
if (touches.clientX > res.windowWidth / 2) {
|
||||
style += `right:${res.windowWidth - touches.clientX}px;`;
|
||||
} else {
|
||||
style += `left:${touches.clientX}px;`;
|
||||
}
|
||||
this.menuStyle = style;
|
||||
//
|
||||
this.$nextTick(() => {
|
||||
this.isShowMenu = true;
|
||||
});
|
||||
this.menuTouch = touches;
|
||||
},
|
||||
});
|
||||
},
|
||||
onTouchMove(e) {
|
||||
this.isTouchMove = true;
|
||||
let touches = e.touches[0];
|
||||
// 屏幕拖动大于50px时，取消菜单
|
||||
if (
|
||||
Math.abs(touches.clientX || 0 - this.menuTouch.clientX || 0) > 50 ||
|
||||
Math.abs(touches.clientY || 0 - this.menuTouch.clientY || 0) > 50
|
||||
) {
|
||||
this.onClose();
|
||||
}
|
||||
},
|
||||
onTouchEnd() {
|
||||
this.isTouchMove = false;
|
||||
},
|
||||
onSelectMenu(item) {
|
||||
this.$emit('select', item);
|
||||
this.isShowMenu = false;
|
||||
},
|
||||
onClose() {
|
||||
this.isShowMenu = false;
|
||||
},
|
||||
itemStyle(item) {
|
||||
if (item.color) {
|
||||
return `color:${item.color};`;
|
||||
}
|
||||
return `color:#fff;`;
|
||||
},
|
||||
onTouchMove(e) {
|
||||
this.isTouchMove = true;
|
||||
let touches = e.touches[0];
|
||||
// 屏幕拖动大于50px时，取消菜单
|
||||
if (
|
||||
Math.abs(touches.clientX || 0 - this.menuTouch.clientX || 0) > 50 ||
|
||||
Math.abs(touches.clientY || 0 - this.menuTouch.clientY || 0) > 50
|
||||
) {
|
||||
this.onClose();
|
||||
}
|
||||
},
|
||||
};
|
||||
onTouchEnd() {
|
||||
this.isTouchMove = false;
|
||||
},
|
||||
onSelectMenu(item) {
|
||||
this.$emit('select', item);
|
||||
this.isShowMenu = false;
|
||||
},
|
||||
onClose() {
|
||||
this.isShowMenu = false;
|
||||
},
|
||||
itemStyle(item) {
|
||||
if (item.color) {
|
||||
return `color:${item.color};`;
|
||||
}
|
||||
return `color:#fff;`;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.long-press-menu {
|
||||
.menu-mask {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
}
|
||||
.long-press-menu {
|
||||
.menu-mask {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.menu {
|
||||
position: fixed;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background-color: $im-bg-active-lighter;
|
||||
z-index: 1000;
|
||||
box-shadow: $im-box-shadow-dark;
|
||||
.menu {
|
||||
position: fixed;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background-color: $im-bg-active-lighter;
|
||||
z-index: 1000;
|
||||
box-shadow: $im-box-shadow-dark;
|
||||
|
||||
.menu-item {
|
||||
height: 28px;
|
||||
min-width: 120rpx;
|
||||
line-height: 28px;
|
||||
font-size: $im-font-size-small;
|
||||
display: flex;
|
||||
padding: 6px 20px;
|
||||
justify-content: flex-start;
|
||||
.menu-item {
|
||||
height: 28px;
|
||||
min-width: 120rpx;
|
||||
line-height: 28px;
|
||||
font-size: $im-font-size-small;
|
||||
display: flex;
|
||||
padding: 6px 20px;
|
||||
justify-content: flex-start;
|
||||
|
||||
&:hover {
|
||||
background: $im-bg-active-light;
|
||||
}
|
||||
&:hover {
|
||||
background: $im-bg-active-light;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.menu-icon {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user