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 @@
<div class="notcie_filter">
<a :class="{ current: unread }" @click.prevent="filterAction(true)">
<span class="btn_text">未读消息</span>
<span class="width_num" v-text="unreadCount"></span>
<span class="width_num" v-text="unreadMessageCount"></span>
</a>
<a :class="{ current: !unread }" @click.prevent="filterAction(false)">
<span class="btn_text">全部消息</span>
......@@ -28,12 +28,13 @@
<img :src="require('../../../assets/imgs/msg_icon_qkxx.png')" />
<span class="btn_text">清空所有消息</span>
</a>
<a style="cursor: text;">
<span style="font-size: 12px;color: #d0d5e7;">|</span>
</a>
<a @click.prevent="setMessage">
<img :src="require('../../../assets/imgs/msg_icon_xxsz.png')" />
<span class="btn_text" style="color: #0f2683;">消息设置</span>
<span style="font-size: 12px;color: #d0d5e7;">|</span>
<a class="set_notice_btn">
<span>
<img :src="require('../../../assets/imgs/msg_icon_xxsz.png')" />
<span class="btn_text" style="color: #0f2683;">消息设置</span>
</span>
<set-notice></set-notice>
</a>
</div>
</div>
......@@ -52,7 +53,10 @@
<p class="notice_time" v-text="getTime(item.create_time)"></p>
</div>
<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')" />
</a>
<a @click.prevent="removeItem(item)">
......@@ -78,11 +82,14 @@
<script>
import ListPagination from "@/components/comments-pagination";
import setNotice from "./setNotice";
import helper from "@/services/helper.js";
import { mapState, mapMutations } from "vuex";
export default {
components: {
ListPagination,
setNotice,
},
data: () => ({
unread: true,
......@@ -91,17 +98,38 @@ export default {
pageSizes: [10, 20, 50],
pageSize: 10,
currentPage: 1,
unreadCount: 0,
initDisabled: false,
}),
computed: {
...mapState({
unreadMessageCount: "unreadMessageCount",
}),
},
methods: {
...mapMutations({
setUnreadMessageCount: "setUnreadMessageCount",
}),
initList() {
let url = this.unread
? "/apaas/service/v3/mymsg/unread"
: "/apaas/service/v3/mymsg/all";
let _self = this;
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
.get(url, {
params: {
......@@ -111,21 +139,16 @@ export default {
})
.then(({ data }) => {
if (data.success === 1) {
this.list = data.data.data || [];
this.listTotal = data.data.total || 0;
if (this.unread) {
this.unreadCount = data.data.total || 0;
if (unread) {
this.setUnreadMessageCount(data.data.total || 0);
}
} else {
console.log("消息列表请求失败");
typeof callback === "function" && callback(data.data);
}
this.initDisabled = false;
typeof finallyCallback === "function" && finallyCallback();
})
.catch((error) => {
console.log(error);
this.initDisabled = false;
typeof finallyCallback === "function" && finallyCallback();
});
},
getType(type = 0) {
......@@ -170,20 +193,59 @@ export default {
this.currentPage = value;
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) {
console.log("readItem", item.id);
this.readAction([item.id]);
},
removeItem(item) {
console.log("removeItem", item.id);
this.removeAction([item.id]);
},
readAll() {
console.log("readAll");
this.readAction([]);
},
removeAll() {
console.log("removeAll");
},
setMessage() {
console.log("setMessage");
this.removeAction([]);
},
},
created() {
......@@ -202,6 +264,10 @@ export default {
align-items: stretch;
overflow: auto;
}
.notice_container a.disabled {
cursor: not-allowed;
opacity: 0.5;
}
.main_container {
flex-grow: 1;
display: flex;
......@@ -225,7 +291,7 @@ export default {
color: #8890a7;
cursor: pointer;
}
.notice_header a + a {
.notice_header > div > * + * {
margin-left: 30px;
}
.notice_header a > * {
......@@ -338,4 +404,26 @@ export default {
.notice_item:hover .notice_action {
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>
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({
queryType: '',
id: '',
}, //智能制图服务详情id
unreadMessageCount: 0
},
getters: {
// 1：超管 2：组织管理员 3：普通用户 4：开发者
......@@ -72,6 +73,9 @@ const store = new Vuex.Store({
setZnztDetailsParams(state, 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