Skip to content

A
apaas-ui
Commit 85877838 authored by 徐一鸣's avatar 徐一鸣
Browse files
Options

消息通知调试

parent 7193335a
Hide whitespace changes
Inline Side-by-side
Showing with 367 additions and 30 deletions
src/pages/user/notice/notice.vue
View file @ 85877838
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<div class="notcie_filter"> <div class="notcie_filter">
<a :class="{ current: unread }" @click.prevent="filterAction(true)"> <a :class="{ current: unread }" @click.prevent="filterAction(true)">
<span class="btn_text">未读消息</span> <span class="btn_text">未读消息</span>
<span class="width_num" v-text="unreadCount"></span> <span class="width_num" v-text="unreadMessageCount"></span>
</a> </a>
<a :class="{ current: !unread }" @click.prevent="filterAction(false)"> <a :class="{ current: !unread }" @click.prevent="filterAction(false)">
<span class="btn_text">全部消息</span> <span class="btn_text">全部消息</span>
...@@ -28,12 +28,13 @@ ...@@ -28,12 +28,13 @@
<img :src="require('../../../assets/imgs/msg_icon_qkxx.png')" /> <img :src="require('../../../assets/imgs/msg_icon_qkxx.png')" />
<span class="btn_text">清空所有消息</span> <span class="btn_text">清空所有消息</span>
</a> </a>
<a style="cursor: text;"> <span style="font-size: 12px;color: #d0d5e7;">|</span>
<span style="font-size: 12px;color: #d0d5e7;">|</span> <a class="set_notice_btn">
</a> <span>
<a @click.prevent="setMessage"> <img :src="require('../../../assets/imgs/msg_icon_xxsz.png')" />
<img :src="require('../../../assets/imgs/msg_icon_xxsz.png')" /> <span class="btn_text" style="color: #0f2683;">消息设置</span>
<span class="btn_text" style="color: #0f2683;">消息设置</span> </span>
<set-notice></set-notice>
</a> </a>
</div> </div>
</div> </div>
...@@ -52,7 +53,10 @@ ...@@ -52,7 +53,10 @@
<p class="notice_time" v-text="getTime(item.create_time)"></p> <p class="notice_time" v-text="getTime(item.create_time)"></p>
</div> </div>
<div class="notice_action"> <div class="notice_action">
<a @click.prevent="readItem(item)"> <a v-if="item.readed === 1" class="disabled">
<img :src="require('../../../assets/imgs/msg_icon_yidu.png')" />
</a>
<a v-else @click.prevent="readItem(item)">
<img :src="require('../../../assets/imgs/msg_icon_yidu.png')" /> <img :src="require('../../../assets/imgs/msg_icon_yidu.png')" />
</a> </a>
<a @click.prevent="removeItem(item)"> <a @click.prevent="removeItem(item)">
...@@ -78,11 +82,14 @@ ...@@ -78,11 +82,14 @@
<script> <script>
import ListPagination from "@/components/comments-pagination"; import ListPagination from "@/components/comments-pagination";
import setNotice from "./setNotice";
import helper from "@/services/helper.js"; import helper from "@/services/helper.js";
import { mapState, mapMutations } from "vuex";
export default { export default {
components: { components: {
ListPagination, ListPagination,
setNotice,
}, },
data: () => ({ data: () => ({
unread: true, unread: true,
...@@ -91,17 +98,38 @@ export default { ...@@ -91,17 +98,38 @@ export default {
pageSizes: [10, 20, 50], pageSizes: [10, 20, 50],
pageSize: 10, pageSize: 10,
currentPage: 1, currentPage: 1,
unreadCount: 0,
initDisabled: false, initDisabled: false,
}), }),
computed: {
...mapState({
unreadMessageCount: "unreadMessageCount",
}),
},
methods: { methods: {
...mapMutations({
setUnreadMessageCount: "setUnreadMessageCount",
}),
initList() { initList() {
let url = this.unread let _self = this;
? "/apaas/service/v3/mymsg/unread"
: "/apaas/service/v3/mymsg/all";
this.initDisabled = true; this.initDisabled = true;
this.getMessage({
unread: this.unread,
callback(data) {
_self.list = data.data || [];
_self.listTotal = data.total || 0;
},
finallyCallback() {
_self.initDisabled = false;
},
});
},
getMessage({ unread, callback, finallyCallback }) {
let url = unread
? "/apaas/service/v3/mymsg/unread"
: "/apaas/service/v3/mymsg/all";
this.$http this.$http
.get(url, { .get(url, {
params: { params: {
...@@ -111,21 +139,16 @@ export default { ...@@ -111,21 +139,16 @@ export default {
}) })
.then(({ data }) => { .then(({ data }) => {
if (data.success === 1) { if (data.success === 1) {
this.list = data.data.data || []; if (unread) {
this.listTotal = data.data.total || 0; this.setUnreadMessageCount(data.data.total || 0);
if (this.unread) {
this.unreadCount = data.data.total || 0;
} }
} else { typeof callback === "function" && callback(data.data);
console.log("消息列表请求失败");
} }
typeof finallyCallback === "function" && finallyCallback();
this.initDisabled = false;
}) })
.catch((error) => { .catch((error) => {
console.log(error); console.log(error);
this.initDisabled = false; typeof finallyCallback === "function" && finallyCallback();
}); });
}, },
getType(type = 0) { getType(type = 0) {
...@@ -170,20 +193,59 @@ export default { ...@@ -170,20 +193,59 @@ export default {
this.currentPage = value; this.currentPage = value;
this.initList(); this.initList();
}, },
refreshList() {
this.initList(); // 刷新列表
if (!this.unread) {
console.log("刷新未读消息数");
this.getMessage({
unread: true,
});
}
},
readAction(ids) {
this.$http
.post("/apaas/service/v3/mymsg/setread", ids)
.then(({ data }) => {
if (data.success === 1) {
this.$message.success("操作成功");
this.refreshList();
} else {
this.$message.error(data.errMsg || "操作失败");
}
})
.catch((error) => {
console.log(error);
this.$message.error("操作失败");
});
},
removeAction(ids) {
this.$http
.post("/apaas/service/v3/mymsg/clear", ids)
.then(({ data }) => {
if (data.success === 1) {
this.$message.success("操作成功");
this.refreshList();
} else {
this.$message.error(data.errMsg || "操作失败");
}
})
.catch((error) => {
console.log(error);
this.$message.error("操作失败");
});
},
readItem(item) { readItem(item) {
console.log("readItem", item.id); this.readAction([item.id]);
}, },
removeItem(item) { removeItem(item) {
console.log("removeItem", item.id); this.removeAction([item.id]);
}, },
readAll() { readAll() {
console.log("readAll"); this.readAction([]);
}, },
removeAll() { removeAll() {
console.log("removeAll"); this.removeAction([]);
},
setMessage() {
console.log("setMessage");
}, },
}, },
created() { created() {
...@@ -202,6 +264,10 @@ export default { ...@@ -202,6 +264,10 @@ export default {
align-items: stretch; align-items: stretch;
overflow: auto; overflow: auto;
} }
.notice_container a.disabled {
cursor: not-allowed;
opacity: 0.5;
}
.main_container { .main_container {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
...@@ -225,7 +291,7 @@ export default { ...@@ -225,7 +291,7 @@ export default {
color: #8890a7; color: #8890a7;
cursor: pointer; cursor: pointer;
} }
.notice_header a + a { .notice_header > div > * + * {
margin-left: 30px; margin-left: 30px;
} }
.notice_header a > * { .notice_header a > * {
...@@ -338,4 +404,26 @@ export default { ...@@ -338,4 +404,26 @@ export default {
.notice_item:hover .notice_action { .notice_item:hover .notice_action {
display: flex; display: flex;
} }
.set_notice_btn {
position: relative;
}
.set_notice_btn::after {
content: "";
position: absolute;
right: 0;
top: 100%;
width: 100%;
height: 30px;
z-index: 665;
}
.set_notice_btn > .set_notice {
position: absolute;
top: 40px;
right: 0;
z-index: 666;
display: none;
}
.set_notice_btn:hover > .set_notice {
display: block;
}
</style> </style>
src/pages/user/notice/setNotice.vue 0 → 100644
View file @ 85877838
<template>
<div class="set_notice">
<div class="type_item">
<p class="item_title">服务推送</p>
<p class="item_description">关闭后用户将接收不到服务推送的消息通知</p>
<div class="item_action">
<a
:class="{ on: data.service_message === 1 }"
@click="toggleAction('service_message', 1)"
>
<img
class="icon_off"
:src="require('../../../assets/imgs/btn_off_hov.png')"
/>
<img
class="icon_on"
:src="require('../../../assets/imgs/btn_on_hov.png')"
/>
</a>
</div>
</div>
<div class="type_item">
<p class="item_title">平台维护</p>
<p class="item_description">关闭后用户将接收不到平台维护的消息通知</p>
<div class="item_action">
<a
:class="{ on: data.platform_message === 1 }"
@click="toggleAction('platform_message', 2)"
>
<img
class="icon_off"
:src="require('../../../assets/imgs/btn_off_hov.png')"
/>
<img
class="icon_on"
:src="require('../../../assets/imgs/btn_on_hov.png')"
/>
</a>
</div>
</div>
<div class="type_item">
<p class="item_title">版本更新</p>
<p class="item_description">关闭后用户将接收不到版本更新的消息通知</p>
<div class="item_action">
<a
:class="{ on: data.version_message === 1 }"
@click="toggleAction('version_message', 3)"
>
<img
class="icon_off"
:src="require('../../../assets/imgs/btn_off_hov.png')"
/>
<img
class="icon_on"
:src="require('../../../assets/imgs/btn_on_hov.png')"
/>
</a>
</div>
</div>
<div class="type_item">
<p class="item_title">系统通知</p>
<p class="item_description">关闭后用户将接收不到系统通知的消息通知</p>
<div class="item_action">
<a
:class="{ on: data.system_message === 1 }"
@click="toggleAction('system_message', 4)"
>
<img
class="icon_off"
:src="require('../../../assets/imgs/btn_off_hov.png')"
/>
<img
class="icon_on"
:src="require('../../../assets/imgs/btn_on_hov.png')"
/>
</a>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
data: {
service_message: 0,
platform_message: 0,
version_message: 0,
system_message: 0,
},
disabledstate: {},
};
},
methods: {
getOptions() {
this.$http.get("/apaas/backmgt/center/messageSets").then(({ data }) => {
if (data.success === 1) {
let options = data.data;
this.data.service_message = options.service_message;
this.data.platform_message = options.platform_message;
this.data.version_message = options.version_message;
this.data.system_message = options.system_message;
}
});
},
setOption(typeStr, type, state) {
this.$set(this.disabledstate, typeStr, true);
let finallycallback = () => {
this.$set(this.disabledstate, typeStr, false);
this.getOptions();
};
this.$http
.put("/apaas/backmgt/center/messageSets", null, {
params: {
type,
state,
},
})
.then(({ data }) => {
if (data.success === 1) {
this.$message.success("设置成功");
} else {
this.$message.error(data.errMsg || "设置失败");
}
finallycallback();
})
.catch((error) => {
console.log(error);
this.$message.error("设置失败");
finallycallback();
});
},
toggleAction(typeStr, type) {
if (this.disabledstate[typeStr]) {
this.$message.warning("你操作的频率过快，请稍等");
return;
}
let state = this.data[typeStr] === 1 ? 0 : 1;
this.$set(this.data, typeStr, state);
this.setOption(typeStr, type, state);
},
},
created() {
this.getOptions();
},
};
</script>
<style>
.set_notice {
width: 410px;
background-color: #fff;
border: 1px solid #e3e5ef;
box-sizing: border-box;
border-radius: 10px;
}
.set_notice::before {
content: "";
position: absolute;
top: -16px;
right: 20px;
border-top: 0 solid transparent;
border-right: 8px solid transparent;
border-bottom: 16px solid #e3e5ef;
border-left: 8px solid transparent;
}
.set_notice::after {
content: "";
position: absolute;
top: -14px;
right: 21px;
border-top: 0 solid transparent;
border-right: 7px solid transparent;
border-bottom: 14px solid #fff;
border-left: 7px solid transparent;
}
.type_item {
position: relative;
padding: 12px 100px 12px 35px;
}
.type_item + .type_item {
border-top: 1px solid #e3e5ef;
}
.type_item p {
font-size: 14px;
line-height: 24px;
color: #242c43;
}
.type_item p.item_title {
position: relative;
}
.type_item p.item_title::before {
content: "";
position: absolute;
top: 8px;
left: -18px;
width: 8px;
height: 8px;
border-radius: 50%;
}
.type_item:nth-child(1) p.item_title::before {
background-color: #e8740f;
}
.type_item:nth-child(2) p.item_title::before {
background-color: #3c61ff;
}
.type_item:nth-child(3) p.item_title::before {
background-color: #ffa80b;
}
.type_item:nth-child(4) p.item_title::before {
background-color: #7785ec;
}
.type_item p.item_description {
color: #a9aec0;
}
.item_action {
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.item_action a {
font-size: 0;
cursor: pointer;
}
.item_action a .icon_on {
display: none;
}
.item_action a.on .icon_on {
display: inline-block;
}
.item_action a.on .icon_off {
display: none;
}
</style>
src/store/index.js
View file @ 85877838
...@@ -27,6 +27,7 @@ const store = new Vuex.Store({ ...@@ -27,6 +27,7 @@ const store = new Vuex.Store({
queryType: '', queryType: '',
id: '', id: '',
}, //智能制图服务详情id }, //智能制图服务详情id
unreadMessageCount: 0
}, },
getters: { getters: {
// 1：超管 2：组织管理员 3：普通用户 4：开发者 // 1：超管 2：组织管理员 3：普通用户 4：开发者
...@@ -72,6 +73,9 @@ const store = new Vuex.Store({ ...@@ -72,6 +73,9 @@ const store = new Vuex.Store({
setZnztDetailsParams(state, newValue) { setZnztDetailsParams(state, newValue) {
state.znztDetailsParams = newValue; state.znztDetailsParams = newValue;
}, },
setUnreadMessageCount(state, newValue) {
state.unreadMessageCount = newValue;
},
}, },
}); });
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment