From 8560c8517964e0ea2b5fb02811f4a43e1974d973 Mon Sep 17 00:00:00 2001
From: zhangzeli <123456>
Date: 星期四, 06 一月 2022 09:58:59 +0800
Subject: [PATCH] 优化
---
src/views/main-components/message-tip.vue | 588 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 294 insertions(+), 294 deletions(-)
diff --git a/src/views/main-components/message-tip.vue b/src/views/main-components/message-tip.vue
index 8affd2e..dc34542 100644
--- a/src/views/main-components/message-tip.vue
+++ b/src/views/main-components/message-tip.vue
@@ -1,297 +1,297 @@
-<template>
- <div style="display: inline-block" class="message-content">
- <Dropdown trigger="click" placement="bottom-end">
- <div style="display: inline-block">
- <div class="header-right-icon header-action">
- <Badge :count="messageCount">
- <Icon type="md-notifications" :size="20" style="margin-top: 3px" />
- </Badge>
- </div>
- </div>
- <div slot="list" class="message-tip">
- <div class="title-content">
- <div class="title">{{ $t("Notifications") }}</div>
- <a class="mark" v-if="messageList.length > 0" @click="markAll">{{
- $t("markAll")
- }}</a>
- <a class="mark" v-else @click="getData">{{
- $t("refresh")
- }}</a>
- </div>
- <div class="mes-list">
- <div v-if="messageList.length == 0" class="empty-message">
- <Icon type="ios-mail-open-outline" size="70" color="#e4e4e4" />
- <p>{{ $t("noNewMes") }}</p>
- </div>
- <div v-else>
- <div
- v-for="(item, index) in messageList"
- :key="index"
- :class="{
- 'mes-item': item.status == 0,
- 'mes-item opacity': item.status == 1,
- }"
- @click="messageDetail(item)"
- >
- <div class="icon">
- <Avatar
- v-if="item.type == '閫氱煡'"
- style="background-color: #ff9900"
- icon="md-send"
- class="icon"
- />
- <Avatar
- v-else-if="item.type == '鎻愰啋'"
- style="background-color: #ed4014"
- icon="md-alarm"
- class="icon"
- />
- <Avatar
- v-else-if="item.type == '绉佷俊'"
- style="background-color: #87d068"
- icon="md-person"
- class="icon"
- />
- <Avatar
- v-else-if="item.type == '宸ヤ綔娴�'"
- style="background-color: #2db7f5"
- icon="md-briefcase"
- class="icon"
- />
- <Avatar
- v-else-if="item.type == '绯荤粺鍏憡'"
- style="background-color: #2d8cf0"
- icon="md-mail"
- class="icon"
- />
- <Avatar v-else icon="ios-mail" class="icon" />
- </div>
- <div class="detail">
- <div class="mes-title">{{ item.title }}</div>
- <div class="mes-time">
- <Icon type="md-time" style="margin-right: 3px" /><Time
- :time="item.createTime"
- />
- </div>
- </div>
- </div>
- </div>
- <Spin fix v-if="loading" />
- </div>
- <a class="show-more" @click="showMessage">
- <Icon
- type="ios-arrow-dropright-circle"
- size="16"
- style="margin: 0 5px 2px 0"
- />{{ $t("showMore") }}
- </a>
- </div>
- </Dropdown>
- </div>
-</template>
+<!--<template>-->
+ <!--<div style="display: inline-block" class="message-content">-->
+ <!--<Dropdown trigger="click" placement="bottom-end">-->
+ <!--<div style="display: inline-block">-->
+ <!--<div class="header-right-icon header-action">-->
+ <!--<Badge :count="messageCount">-->
+ <!--<Icon type="md-notifications" :size="20" style="margin-top: 3px" />-->
+ <!--</Badge>-->
+ <!--</div>-->
+ <!--</div>-->
+ <!--<div slot="list" class="message-tip">-->
+ <!--<div class="title-content">-->
+ <!--<div class="title">{{ $t("Notifications") }}</div>-->
+ <!--<a class="mark" v-if="messageList.length > 0" @click="markAll">{{-->
+ <!--$t("markAll")-->
+ <!--}}</a>-->
+ <!--<a class="mark" v-else @click="getData">{{-->
+ <!--$t("refresh")-->
+ <!--}}</a>-->
+ <!--</div>-->
+ <!--<div class="mes-list">-->
+ <!--<div v-if="messageList.length == 0" class="empty-message">-->
+ <!--<Icon type="ios-mail-open-outline" size="70" color="#e4e4e4" />-->
+ <!--<p>{{ $t("noNewMes") }}</p>-->
+ <!--</div>-->
+ <!--<div v-else>-->
+ <!--<div-->
+ <!--v-for="(item, index) in messageList"-->
+ <!--:key="index"-->
+ <!--:class="{-->
+ <!--'mes-item': item.status == 0,-->
+ <!--'mes-item opacity': item.status == 1,-->
+ <!--}"-->
+ <!--@click="messageDetail(item)"-->
+ <!-->-->
+ <!--<div class="icon">-->
+ <!--<Avatar-->
+ <!--v-if="item.type == '閫氱煡'"-->
+ <!--style="background-color: #ff9900"-->
+ <!--icon="md-send"-->
+ <!--class="icon"-->
+ <!--/>-->
+ <!--<Avatar-->
+ <!--v-else-if="item.type == '鎻愰啋'"-->
+ <!--style="background-color: #ed4014"-->
+ <!--icon="md-alarm"-->
+ <!--class="icon"-->
+ <!--/>-->
+ <!--<Avatar-->
+ <!--v-else-if="item.type == '绉佷俊'"-->
+ <!--style="background-color: #87d068"-->
+ <!--icon="md-person"-->
+ <!--class="icon"-->
+ <!--/>-->
+ <!--<Avatar-->
+ <!--v-else-if="item.type == '宸ヤ綔娴�'"-->
+ <!--style="background-color: #2db7f5"-->
+ <!--icon="md-briefcase"-->
+ <!--class="icon"-->
+ <!--/>-->
+ <!--<Avatar-->
+ <!--v-else-if="item.type == '绯荤粺鍏憡'"-->
+ <!--style="background-color: #2d8cf0"-->
+ <!--icon="md-mail"-->
+ <!--class="icon"-->
+ <!--/>-->
+ <!--<Avatar v-else icon="ios-mail" class="icon" />-->
+ <!--</div>-->
+ <!--<div class="detail">-->
+ <!--<div class="mes-title">{{ item.title }}</div>-->
+ <!--<div class="mes-time">-->
+ <!--<Icon type="md-time" style="margin-right: 3px" /><Time-->
+ <!--:time="item.createTime"-->
+ <!--/>-->
+ <!--</div>-->
+ <!--</div>-->
+ <!--</div>-->
+ <!--</div>-->
+ <!--<Spin fix v-if="loading" />-->
+ <!--</div>-->
+ <!--<a class="show-more" @click="showMessage">-->
+ <!--<Icon-->
+ <!--type="ios-arrow-dropright-circle"-->
+ <!--size="16"-->
+ <!--style="margin: 0 5px 2px 0"-->
+ <!--/>{{ $t("showMore") }}-->
+ <!--</a>-->
+ <!--</div>-->
+ <!--</Dropdown>-->
+ <!--</div>-->
+<!--</template>-->
-<script>
-import { ws, getMessageSendData, allMessageSend } from "@/api/index";
-import SockJS from "sockjs-client";
-import Stomp from "stompjs";
-import util from "@/libs/util.js";
-import Cookies from "js-cookie";
-export default {
- name: "messageTip",
- props: {},
- data() {
- return {
- loading: false,
- userId: "",
- messageList: [],
- client: null,
- };
- },
- computed: {
- messageCount() {
- return this.$store.state.app.messageCount;
- },
- },
- stompClient: {
- monitorIntervalTime: 100,
- stompReconnect: true,
- timeout(orgCmd) {},
- },
- methods: {
- init() {
- let userInfo = JSON.parse(Cookies.get("userInfo"));
- this.userId = userInfo.id;
- this.getData();
- // 娑堟伅寮�鍏� websocket
- let messageOpen = this.getStore("messageOpen");
- if (messageOpen != "0") {
- this.connect();
- }
- },
- getData() {
- // 璇诲彇鏈娑堟伅
- this.loading = true;
- getMessageSendData({
- userId: this.userId,
- status: 0,
- pageSize: 5,
- sort: "createTime",
- order: "desc",
- }).then((res) => {
- if (res.success) {
- this.loading = false;
- this.messageList = res.result.content;
- this.$store.commit("setMessageCount", res.result.totalElements);
- }
- });
- },
- showMessage() {
- util.openNewPage(this, "message_index");
- if (this.$route.name == "message_index") {
- return;
- }
- this.$router.push({
- name: "message_index",
- });
- },
- connect() {
- let headers = {};
- this.client = Stomp.over(new SockJS(ws));
- this.client.connect(headers, this.onConnected, this.onFailed);
- },
- onConnected(frame) {
- console.log("杩炴帴ws鎴愬姛: " + frame);
- let topicSubscription = this.client.subscribe(
- "/topic/subscribe",
- this.responseCallback
- );
- let queueSubscription = this.client.subscribe(
- "/user/" + this.userId + "/queue/subscribe",
- this.responseCallback
- );
- },
- onFailed(frame) {
- console.log("杩炴帴ws澶辫触锛� " + JSON.stringify(frame));
- },
- responseCallback(frame) {
- console.log("鏀跺埌娑堟伅锛�" + frame.body);
- this.getData();
- },
- messageDetail(v) {
- if (v.status == 1) {
- return;
- }
- util.openNewPage(this, "message_index");
- this.$router.push({
- name: "message_index",
- query: { count: this.messageCount, content: v },
- });
- v.status = 1;
- },
- markAll() {
- allMessageSend(0).then((res) => {
- if (res.success) {
- this.getData();
- }
- });
- },
- },
- mounted() {
- this.init();
- },
-};
-</script>
+<!--<script>-->
+<!--import { ws, getMessageSendData, allMessageSend } from "@/api/index";-->
+<!--import SockJS from "sockjs-client";-->
+<!--import Stomp from "stompjs";-->
+<!--import util from "@/libs/util.js";-->
+<!--import Cookies from "js-cookie";-->
+<!--export default {-->
+ <!--name: "messageTip",-->
+ <!--props: {},-->
+ <!--data() {-->
+ <!--return {-->
+ <!--loading: false,-->
+ <!--userId: "",-->
+ <!--messageList: [],-->
+ <!--client: null,-->
+ <!--};-->
+ <!--},-->
+ <!--computed: {-->
+ <!--messageCount() {-->
+ <!--return this.$store.state.app.messageCount;-->
+ <!--},-->
+ <!--},-->
+ <!--stompClient: {-->
+ <!--monitorIntervalTime: 100,-->
+ <!--stompReconnect: true,-->
+ <!--timeout(orgCmd) {},-->
+ <!--},-->
+ <!--methods: {-->
+ <!--init() {-->
+ <!--let userInfo = JSON.parse(Cookies.get("userInfo"));-->
+ <!--this.userId = userInfo.id;-->
+ <!--this.getData();-->
+ <!--// 娑堟伅寮�鍏� websocket-->
+ <!--let messageOpen = this.getStore("messageOpen");-->
+ <!--if (messageOpen != "0") {-->
+ <!--this.connect();-->
+ <!--}-->
+ <!--},-->
+ <!--getData() {-->
+ <!--// 璇诲彇鏈娑堟伅-->
+ <!--this.loading = true;-->
+ <!--getMessageSendData({-->
+ <!--userId: this.userId,-->
+ <!--status: 0,-->
+ <!--pageSize: 5,-->
+ <!--sort: "createTime",-->
+ <!--order: "desc",-->
+ <!--}).then((res) => {-->
+ <!--if (res.success) {-->
+ <!--this.loading = false;-->
+ <!--this.messageList = res.result.content;-->
+ <!--this.$store.commit("setMessageCount", res.result.totalElements);-->
+ <!--}-->
+ <!--});-->
+ <!--},-->
+ <!--showMessage() {-->
+ <!--util.openNewPage(this, "message_index");-->
+ <!--if (this.$route.name == "message_index") {-->
+ <!--return;-->
+ <!--}-->
+ <!--this.$router.push({-->
+ <!--name: "message_index",-->
+ <!--});-->
+ <!--},-->
+ <!--connect() {-->
+ <!--let headers = {};-->
+ <!--this.client = Stomp.over(new SockJS(ws));-->
+ <!--this.client.connect(headers, this.onConnected, this.onFailed);-->
+ <!--},-->
+ <!--onConnected(frame) {-->
+ <!--console.log("杩炴帴ws鎴愬姛: " + frame);-->
+ <!--let topicSubscription = this.client.subscribe(-->
+ <!--"/topic/subscribe",-->
+ <!--this.responseCallback-->
+ <!--);-->
+ <!--let queueSubscription = this.client.subscribe(-->
+ <!--"/user/" + this.userId + "/queue/subscribe",-->
+ <!--this.responseCallback-->
+ <!--);-->
+ <!--},-->
+ <!--onFailed(frame) {-->
+ <!--console.log("杩炴帴ws澶辫触锛� " + JSON.stringify(frame));-->
+ <!--},-->
+ <!--responseCallback(frame) {-->
+ <!--console.log("鏀跺埌娑堟伅锛�" + frame.body);-->
+ <!--this.getData();-->
+ <!--},-->
+ <!--messageDetail(v) {-->
+ <!--if (v.status == 1) {-->
+ <!--return;-->
+ <!--}-->
+ <!--util.openNewPage(this, "message_index");-->
+ <!--this.$router.push({-->
+ <!--name: "message_index",-->
+ <!--query: { count: this.messageCount, content: v },-->
+ <!--});-->
+ <!--v.status = 1;-->
+ <!--},-->
+ <!--markAll() {-->
+ <!--allMessageSend(0).then((res) => {-->
+ <!--if (res.success) {-->
+ <!--this.getData();-->
+ <!--}-->
+ <!--});-->
+ <!--},-->
+ <!--},-->
+ <!--mounted() {-->
+ <!--this.init();-->
+ <!--},-->
+<!--};-->
+<!--</script>-->
-<style lang="less">
-.message-content .ivu-select-dropdown {
- padding: 0;
-}
-.message-tip {
- display: flex;
- flex-direction: column;
- width: 320px;
- .title-content {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 16px;
- .title {
- color: #515a6e;
- font-size: 16px;
- font-weight: 500;
- }
- .mark {
- font-size: 12px;
- }
- }
- .empty-message {
- height: 220px;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- color: #a7a7a7;
- p {
- margin-top: 10px;
- }
- }
- .mes-list {
- position: relative;
- display: flex;
- flex-direction: column;
- max-height: 261px;
- overflow: auto;
- .mes-item {
- display: flex;
- height: 87px;
- padding: 12px 16px 12px 16px;
- cursor: pointer;
- transition: all 0.2s ease-in-out;
- &:hover {
- background-color: #f6f6f6;
- }
- .icon {
- margin: 1px 16px 0 0;
- width: 32px;
- }
- .detail {
- .mes-title {
- color: #515a6e;
- min-height: 42px;
- margin-bottom: 5px;
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- }
- .mes-time {
- font-size: 12px;
- color: #869ac0;
- }
- }
- }
- .opacity {
- opacity: 0.4;
- }
- }
- .mes-list::-webkit-scrollbar {
- width: 6px;
- height: 6px;
- }
+<!--<style lang="less">-->
+<!--.message-content .ivu-select-dropdown {-->
+ <!--padding: 0;-->
+<!--}-->
+<!--.message-tip {-->
+ <!--display: flex;-->
+ <!--flex-direction: column;-->
+ <!--width: 320px;-->
+ <!--.title-content {-->
+ <!--display: flex;-->
+ <!--justify-content: space-between;-->
+ <!--align-items: center;-->
+ <!--padding: 16px;-->
+ <!--.title {-->
+ <!--color: #515a6e;-->
+ <!--font-size: 16px;-->
+ <!--font-weight: 500;-->
+ <!--}-->
+ <!--.mark {-->
+ <!--font-size: 12px;-->
+ <!--}-->
+ <!--}-->
+ <!--.empty-message {-->
+ <!--height: 220px;-->
+ <!--display: flex;-->
+ <!--flex-direction: column;-->
+ <!--align-items: center;-->
+ <!--justify-content: center;-->
+ <!--color: #a7a7a7;-->
+ <!--p {-->
+ <!--margin-top: 10px;-->
+ <!--}-->
+ <!--}-->
+ <!--.mes-list {-->
+ <!--position: relative;-->
+ <!--display: flex;-->
+ <!--flex-direction: column;-->
+ <!--max-height: 261px;-->
+ <!--overflow: auto;-->
+ <!--.mes-item {-->
+ <!--display: flex;-->
+ <!--height: 87px;-->
+ <!--padding: 12px 16px 12px 16px;-->
+ <!--cursor: pointer;-->
+ <!--transition: all 0.2s ease-in-out;-->
+ <!--&:hover {-->
+ <!--background-color: #f6f6f6;-->
+ <!--}-->
+ <!--.icon {-->
+ <!--margin: 1px 16px 0 0;-->
+ <!--width: 32px;-->
+ <!--}-->
+ <!--.detail {-->
+ <!--.mes-title {-->
+ <!--color: #515a6e;-->
+ <!--min-height: 42px;-->
+ <!--margin-bottom: 5px;-->
+ <!--overflow: hidden;-->
+ <!--text-overflow: ellipsis;-->
+ <!--display: -webkit-box;-->
+ <!-- -webkit-line-clamp: 2;-->
+ <!-- -webkit-box-orient: vertical;-->
+ <!--}-->
+ <!--.mes-time {-->
+ <!--font-size: 12px;-->
+ <!--color: #869ac0;-->
+ <!--}-->
+ <!--}-->
+ <!--}-->
+ <!--.opacity {-->
+ <!--opacity: 0.4;-->
+ <!--}-->
+ <!--}-->
+ <!--.mes-list::-webkit-scrollbar {-->
+ <!--width: 6px;-->
+ <!--height: 6px;-->
+ <!--}-->
- .mes-list::-webkit-scrollbar-thumb {
- border-radius: 4px;
- -webkit-box-shadow: inset 0 0 2px #d1d1d1;
- background: #e4e4e4;
- }
- .show-more {
- border-top: 1px solid #eff2f7;
- padding: 16px;
- display: flex;
- align-content: center;
- justify-content: center;
- align-items: center;
- }
-}
-</style>
\ No newline at end of file
+ <!--.mes-list::-webkit-scrollbar-thumb {-->
+ <!--border-radius: 4px;-->
+ <!-- -webkit-box-shadow: inset 0 0 2px #d1d1d1;-->
+ <!--background: #e4e4e4;-->
+ <!--}-->
+ <!--.show-more {-->
+ <!--border-top: 1px solid #eff2f7;-->
+ <!--padding: 16px;-->
+ <!--display: flex;-->
+ <!--align-content: center;-->
+ <!--justify-content: center;-->
+ <!--align-items: center;-->
+ <!--}-->
+<!--}-->
+<!--</style>-->
\ No newline at end of file
--
Gitblit v1.9.1