diff --git a/resources/assets/js/components/Mobile/Notification.vue b/resources/assets/js/components/Mobile/Notification.vue new file mode 100644 index 000000000..ce8703ea2 --- /dev/null +++ b/resources/assets/js/components/Mobile/Notification.vue @@ -0,0 +1,65 @@ + + + diff --git a/resources/assets/js/pages/manage.vue b/resources/assets/js/pages/manage.vue index 3af178397..5da229ed0 100644 --- a/resources/assets/js/pages/manage.vue +++ b/resources/assets/js/pages/manage.vue @@ -359,6 +359,7 @@ + @@ -378,9 +379,11 @@ import notificationKoro from "notification-koro1"; import {Store} from "le5le-store"; import MobileBack from "../components/Mobile/Back"; import TaskMenu from "./manage/components/TaskMenu"; +import MobileNotification from "../components/Mobile/Notification"; export default { components: { + MobileNotification, TaskMenu, MobileBack, MobileTabbar, @@ -894,7 +897,7 @@ export default { }, addDialogMsg(data) { - if (!this.natificationReady) { + if (!this.natificationReady && !this.$isEEUiApp) { return; // 通知未准备好 } if (!this.natificationHidden @@ -918,24 +921,36 @@ export default { default: return; } - this._notificationId = id; - this.notificationManage.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.notificationManage.replaceTitle(dialog.name); - this.notificationManage.userAgreed(); - } else { - this.$store.dispatch("getDialogOne", dialog_id).then(({data}) => { - if (this._notificationId === id) { - this.notificationManage.replaceTitle(data.name); + this.__notificationId = id; + const notificationFunc = (title) => { + if (this.__notificationId === id) { + if (this.$isEEUiApp) { + this.$refs.mobileNotification.open({ + userid: userid, + desc: body, + callback: () => { + this.goForward({name: 'manage-messenger', params: {dialogId: dialog_id}}); + } + }) + } else { + this.notificationManage.replaceOptions({ + icon: $A.originUrl('images/logo.png'), + body: body, + data: data, + tag: "dialog", + requireInteraction: true + }); + this.notificationManage.replaceTitle(title); this.notificationManage.userAgreed(); } + } + } + const dialog = this.cacheDialogs.find((item) => item.id == dialog_id); + if (dialog) { + notificationFunc(dialog.name) + } else { + this.$store.dispatch("getDialogOne", dialog_id).then(({data}) => { + notificationFunc(data.name) }).catch(() => {}) } }, diff --git a/resources/assets/sass/components/mobile.scss b/resources/assets/sass/components/mobile.scss index 392550171..aa6066312 100644 --- a/resources/assets/sass/components/mobile.scss +++ b/resources/assets/sass/components/mobile.scss @@ -144,6 +144,43 @@ } } +.mobile-notification { + position: fixed; + left: 50%; + top: 20px; + z-index: 9998; + padding: 12px; + border-radius: 8px; + border: 1px solid #ebeef5; + background-color: #fff; + box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%); + width: 90%; + max-width: 320px; + transform: translate(-50%, 0); + .common-avatar { + &.avatar-wrapper { + align-items: flex-start; + .avatar-name { + font-weight: bold; + padding-left: 12px; + } + } + } + .notification-desc { + float: left; + margin-top: -18px; + margin-left: 52px; + font-size: 13px; + line-height: 18px; + word-break: break-all; + text-overflow: ellipsis; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + } +} + .mobile-fade-enter-active { transition: all 0.2s ease; } @@ -171,6 +208,20 @@ opacity: 0; } +.mobile-notify-enter-active { + transition: all 0.3s ease; +} + +.mobile-notify-leave-active { + transition: all 0.3s ease; +} + +.mobile-notify-enter, +.mobile-notify-leave-to { + transform: translate(-50%, -100%); + opacity: 0; +} + @media (max-width: 768px) { .mobile-tabbar { display: flex; @@ -178,4 +229,9 @@ .mobile-back { display: block; } + .mobile-notification { + top: 12px; + width: 94%; + max-width: none; + } }