github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2026-01-18 21:38:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: 新增通讯录菜单

Browse Source
This commit is contained in:
kuaifan 2024-06-02 10:44:59 +08:00
parent 617fe902a4
commit 4886edc684
2 changed files with 195 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

279
resources/assets/js/pages/manage/messenger.vue
View File

@ -75,7 +75,7 @@
dialog_msg_id: dialog.search_msg_id, dialog_msg_id: dialog.search_msg_id,
search_msg_id: dialog.search_msg_id, search_msg_id: dialog.search_msg_id,
})" })"
v-longpress="handleLongpress" v-longpress="handleDialogLongpress"
:style="{'background-color':dialog.color}"> :style="{'background-color':dialog.color}">
<template v-if="dialog.type=='group'"> <template v-if="dialog.type=='group'">
<EAvatar v-if="dialog.avatar" class="img-avatar" :src="dialog.avatar" :size="42"></EAvatar> <EAvatar v-if="dialog.avatar" class="img-avatar" :src="dialog.avatar" :size="42"></EAvatar>
@ -130,7 +130,13 @@
<li v-for="items in contactsList"> <li v-for="items in contactsList">
<div class="label">{{items.az}}</div> <div class="label">{{items.az}}</div>
<ul> <ul>
<li v-for="(user, index) in items.list" :key="index" @click="openContacts(user)"> <li
v-for="(user, index) in items.list"
:key="index"
:data-id="user.userid"
:class="userClass(user)"
@click="openContacts(user)"
v-longpress="handleUserLongpress">
<div class="avatar"><UserAvatar :userid="user.userid" :size="contactAvatarSize"/></div> <div class="avatar"><UserAvatar :userid="user.userid" :size="contactAvatarSize"/></div>
<div class="nickname"> <div class="nickname">
<em>{{user.nickname}}</em> <em>{{user.nickname}}</em>
@ -161,37 +167,59 @@
transfer> transfer>
<div :style="{userSelect:operateVisible ? 'none' : 'auto', height: operateStyles.height}"></div> <div :style="{userSelect:operateVisible ? 'none' : 'auto', height: operateStyles.height}"></div>
<DropdownMenu slot="list" class="messenger-dialog-operation"> <DropdownMenu slot="list" class="messenger-dialog-operation">
<DropdownItem @click.native="handleTopClick"> <template v-if="operateType==='dialog'">
<div class="item"> <DropdownItem @click.native="handleDialogClick('top')">
{{ $L(operateItem.top_at ? '取消置顶' : '置顶') }} <div class="item">
<i class="taskfont" v-html="operateItem.top_at ? '&#xe7e3;' : '&#xe7e6;'"></i> {{ $L(operateItem.top_at ? '取消置顶' : '置顶') }}
</div> <i class="taskfont" v-html="operateItem.top_at ? '&#xe7e3;' : '&#xe7e6;'"></i>
</DropdownItem> </div>
<DropdownItem @click.native="handleReadClick"> </DropdownItem>
<div class="item"> <DropdownItem @click.native="handleDialogClick('read')">
{{ $L($A.getDialogUnread(operateItem, true) > 0 ? '标记已读' : '标记未读') }} <div class="item">
<i class="taskfont" v-html="$A.getDialogUnread(operateItem, true) > 0 ? '&#xe7e8;' : '&#xe7e9;'"></i> {{ $L($A.getDialogUnread(operateItem, true) > 0 ? '标记已读' : '标记未读') }}
</div> <i class="taskfont" v-html="$A.getDialogUnread(operateItem, true) > 0 ? '&#xe7e8;' : '&#xe7e9;'"></i>
</div>
</DropdownItem> </DropdownItem>
<DropdownItem @click.native="handleSilenceClick" :disabled="silenceDisabled(operateItem)"> <DropdownItem @click.native="handleDialogClick('silence')" :disabled="silenceDisabled(operateItem)">
<div class="item"> <div class="item">
{{ $L(operateItem.silence ? '允许消息通知' : '消息免打扰') }} {{ $L(operateItem.silence ? '允许消息通知' : '消息免打扰') }}
<i class="taskfont" v-html="operateItem.silence ? '&#xe7eb;' : '&#xe7d7;'"></i> <i class="taskfont" v-html="operateItem.silence ? '&#xe7eb;' : '&#xe7d7;'"></i>
</div> </div>
</DropdownItem> </DropdownItem>
<DropdownItem @click.native="handleHideClick" :disabled="!!operateItem.top_at"> <DropdownItem @click.native="handleDialogClick('hide')" :disabled="!!operateItem.top_at">
<div class="item"> <div class="item">
{{ $L('不显示该会话') }} {{ $L('不显示该会话') }}
<i class="taskfont">&#xe881;</i> <i class="taskfont">&#xe881;</i>
</div> </div>
</DropdownItem> </DropdownItem>
<DropdownItem @click.native="handleColorClick(c.color)" v-for="(c, k) in taskColorList" :key="'c_' + k" :divided="k==0" v-if="k<6" > <DropdownItem @click.native="handleDialogClick('color', c.color)" v-for="(c, k) in taskColorList" :key="'c_' + k" :divided="k==0" v-if="k<6" >
<div class="item"> <div class="item">
{{$L(c.name)}} {{$L(c.name)}}
<i class="taskfont color" :style="{color:c.primary||'#ddd'}" v-html="c.color == (operateItem.color||'') ? '&#xe61d;' : '&#xe61c;'"></i> <i class="taskfont color" :style="{color:c.primary||'#ddd'}" v-html="c.color == (operateItem.color||'') ? '&#xe61d;' : '&#xe61c;'"></i>
</div> </div>
</DropdownItem> </DropdownItem>
</template>
<template v-else>
<DropdownItem @click.native="handleUserClick('msg')">
<div class="item">
{{ $L('发送消息') }}
<i class="taskfont">&#xe6eb;</i>
</div>
</DropdownItem>
<DropdownItem @click.native="handleUserClick('group')">
<div class="item">
{{ $L('创建群组') }}
<i class="taskfont">&#xe63f;</i>
</div>
</DropdownItem>
<DropdownItem @click.native="handleUserClick('avatar')">
<div class="item">
{{ $L('查看头像') }}
<i class="taskfont">&#xe7bc;</i>
</div>
</DropdownItem>
</template>
</DropdownMenu> </DropdownMenu>
</Dropdown> </Dropdown>
</div> </div>
@ -263,6 +291,7 @@ export default {
operateItem: {}, operateItem: {},
operateStyles: {}, operateStyles: {},
operateVisible: false, operateVisible: false,
operateType: 'dialog',
clickAgainSubscribe: null, clickAgainSubscribe: null,
} }
@ -684,7 +713,7 @@ export default {
return { return {
top: dialog.top_at, top: dialog.top_at,
active: dialog.id == this.dialogId && (dialog.search_msg_id == this.dialogMsgId || !this.dialogMsgId), active: dialog.id == this.dialogId && (dialog.search_msg_id == this.dialogMsgId || !this.dialogMsgId),
operate: this.operateVisible && dialog.id == this.operateItem.id, operate: this.operateVisible && this.operateType === 'dialog' && dialog.id == this.operateItem.id,
completed: $A.dialogCompleted(dialog) completed: $A.dialogCompleted(dialog)
} }
}, },
@ -706,6 +735,12 @@ export default {
return $A.Date(b.last_at) - $A.Date(a.last_at); return $A.Date(b.last_at) - $A.Date(a.last_at);
}, },
userClass(user) {
return {
operate: this.operateVisible && this.operateType === 'contacts' && user.userid == this.operateItem.userid
}
},
openDialog(dialogId) { openDialog(dialogId) {
if (this.operateVisible) { if (this.operateVisible) {
return return
@ -980,7 +1015,7 @@ export default {
}) })
}, },
handleLongpress(event, el) { handleDialogLongpress(event, el) {
if (this.dialogSearchKey) { if (this.dialogSearchKey) {
return; return;
} }
@ -989,12 +1024,28 @@ export default {
if (!dialogItem) { if (!dialogItem) {
return return
} }
this.handleLongpress(dialogItem, el.getBoundingClientRect(), event.clientX)
},
handleUserLongpress(event, el) {
if (this.contactsKey) {
return;
}
const userId = $A.getAttr(el, 'data-id')
const userItem = this.contactsFilter.find(item => item.userid == userId)
if (!userItem) {
return
}
this.handleLongpress(userItem, el.getBoundingClientRect(), event.clientX)
},
handleLongpress(item, rect, clientX) {
this.operateType = this.tabActive;
this.operateVisible = false; this.operateVisible = false;
this.operateItem = $A.isJson(dialogItem) ? dialogItem : {}; this.operateItem = $A.isJson(item) ? item : {};
this.$nextTick(() => { this.$nextTick(() => {
const rect = el.getBoundingClientRect();
this.operateStyles = { this.operateStyles = {
left: `${event.clientX}px`, left: `${clientX}px`,
top: `${rect.top + this.windowScrollY}px`, top: `${rect.top + this.windowScrollY}px`,
height: rect.height + 'px', height: rect.height + 'px',
} }
@ -1002,77 +1053,101 @@ export default {
}) })
}, },
handleTopClick() { handleDialogClick(act, value = undefined) {
this.$store.dispatch("call", { switch (act) {
url: 'dialog/top', case 'top':
data: { this.$store.dispatch("call", {
dialog_id: this.operateItem.id, url: 'dialog/top',
}, data: {
}).then(({data}) => { dialog_id: this.operateItem.id,
this.$store.dispatch("saveDialog", data); },
this.$nextTick(this.scrollIntoActive); }).then(({data}) => {
}).catch(({msg}) => { this.$store.dispatch("saveDialog", data);
$A.modalError(msg); this.$nextTick(this.scrollIntoActive);
}); }).catch(({msg}) => {
}, $A.modalError(msg);
});
break;
handleReadClick() { case 'read':
this.$store.dispatch("showSpinner", 600) this.$store.dispatch("showSpinner", 600)
this.$store.dispatch("dialogMsgMark", { this.$store.dispatch("dialogMsgMark", {
type: $A.getDialogUnread(this.operateItem, true) > 0 ? 'read' : 'unread', type: $A.getDialogUnread(this.operateItem, true) > 0 ? 'read' : 'unread',
dialog_id: this.operateItem.id, dialog_id: this.operateItem.id,
}).catch(({msg}) => { }).catch(({msg}) => {
$A.modalError(msg) $A.modalError(msg)
}).finally(_ => { }).finally(_ => {
this.$store.dispatch("hiddenSpinner") this.$store.dispatch("hiddenSpinner")
}) })
}, break;
handleSilenceClick() { case 'silence':
if (this.silenceDisabled(this.operateItem)) { if (this.silenceDisabled(this.operateItem)) {
return return
}
this.$store.dispatch("call", {
url: 'dialog/msg/silence',
data: {
dialog_id: this.operateItem.id,
type: this.operateItem.silence ? 'cancel' : 'set'
},
}).then(({data}) => {
this.$store.dispatch("saveDialog", data);
}).catch(({msg}) => {
$A.modalError(msg);
});
break;
case 'hide':
this.$store.dispatch("call", {
url: 'dialog/hide',
data: {
dialog_id: this.operateItem.id,
},
}).then(({data}) => {
if (this.dialogId == this.operateItem.id) {
this.$store.dispatch("openDialog", 0)
}
this.$store.dispatch("saveDialog", data);
}).catch(({msg}) => {
$A.modalError(msg);
});
break;
case 'color':
this.$store.dispatch("call", {
url: 'dialog/msg/color',
data: {
dialog_id: this.operateItem.id,
color: value
},
}).then(({data}) => {
this.$store.dispatch("saveDialog", data);
}).catch(({msg}) => {
$A.modalError(msg);
});
break;
} }
this.$store.dispatch("call", {
url: 'dialog/msg/silence',
data: {
dialog_id: this.operateItem.id,
type: this.operateItem.silence ? 'cancel' : 'set'
},
}).then(({data}) => {
this.$store.dispatch("saveDialog", data);
}).catch(({msg}) => {
$A.modalError(msg);
});
}, },
handleHideClick() { handleUserClick(act) {
this.$store.dispatch("call", { switch (act) {
url: 'dialog/hide', case 'msg':
data: { this.openContacts(this.operateItem);
dialog_id: this.operateItem.id, break;
},
}).then(({data}) => {
if (this.dialogId == this.operateItem.id) {
this.$store.dispatch("openDialog", 0)
}
this.$store.dispatch("saveDialog", data);
}).catch(({msg}) => {
$A.modalError(msg);
});
},
handleColorClick(color) { case 'group':
this.$store.dispatch("call", { const userids = [this.userId]
url: 'dialog/msg/color', if (this.operateItem.userid && this.userId != this.operateItem.userid) {
data: { userids.push(this.operateItem.userid)
dialog_id: this.operateItem.id, }
color: color Store.set('createGroup', userids);
}, break;
}).then(({data}) => {
this.$store.dispatch("saveDialog", data); case 'avatar':
}).catch(({msg}) => { this.$store.dispatch("previewImage", this.operateItem.userimg)
$A.modalError(msg); break;
}); }
}, },
updateDialogs(timeout) { updateDialogs(timeout) {

18
resources/assets/sass/pages/page-messenger.scss vendored
View File

@ -427,6 +427,7 @@
align-items: center; align-items: center;
height: 52px; height: 52px;
cursor: pointer; cursor: pointer;
position: relative;
.avatar { .avatar {
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
@ -470,6 +471,23 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
&:before {
display: none;
position: absolute;
content: "";
top: 0;
left: -24px;
right: 0;
bottom: 0;
z-index: 1;
border: 2px solid $primary-color;
pointer-events: none;
}
&.operate {
&:before {
display: block;
}
}
} }
} }
} }