mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2025-12-20 09:55:53 +08:00
commit message
This commit is contained in:
Chopper
161
manager/src/views/message/message.scss
Normal file
161
manager/src/views/message/message.scss
Normal file
@@ -0,0 +1,161 @@
|
||||
.message {
|
||||
&-main-con {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
}
|
||||
&-mainlist-con {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 10px;
|
||||
width: 300px;
|
||||
bottom: 0;
|
||||
padding: 10px 0;
|
||||
div {
|
||||
padding: 10px;
|
||||
margin: 0 20px;
|
||||
border-bottom: 1px dashed #d2d3d2;
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
.mes-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.message-count-badge-outer {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.message-count-badge {
|
||||
background: #d2d3d2;
|
||||
}
|
||||
.message-count-badge-red {
|
||||
background: #ed3f14;
|
||||
}
|
||||
.mes-type-btn-text {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-content-con {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
left: 300px;
|
||||
background: white;
|
||||
border-radius: 3px;
|
||||
box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, .1);
|
||||
overflow: auto;
|
||||
.message-title-list-con {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.message-content-top-bar {
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
background: white;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-bottom: 1px solid #dededb;
|
||||
.mes-back-btn-con {
|
||||
position: absolute;
|
||||
width: 70px;
|
||||
height: 30px;
|
||||
left: 0;
|
||||
top: 5px;
|
||||
}
|
||||
.mes-title {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 70px;
|
||||
bottom: 0;
|
||||
left: 70px;
|
||||
line-height: 40px;
|
||||
padding: 0 30px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.mes-time-con {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #b7b7b5;
|
||||
}
|
||||
.message-content-body {
|
||||
position: absolute;
|
||||
top: 90px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
.message-content {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-fix {
|
||||
position: fixed;
|
||||
right: 2vw;
|
||||
bottom: 3vh;
|
||||
}
|
||||
|
||||
.back-message-list-enter,
|
||||
.back-message-list-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.back-message-list-enter-active,
|
||||
.back-message-list-leave-active {
|
||||
transition: all .5s;
|
||||
}
|
||||
|
||||
.back-message-list-enter-to,
|
||||
.back-message-list-leave {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.view-message-enter,
|
||||
.view-message-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.view-message-enter-active,
|
||||
.view-message-leave-active {
|
||||
transition: all .5s;
|
||||
}
|
||||
|
||||
.view-message-enter-to,
|
||||
.view-message-leave {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mes-current-type-btn-enter,
|
||||
.mes-current-type-btn-leave-to {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.mes-current-type-btn-enter-active,
|
||||
.mes-current-type-btn-leave-active {
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
.mes-current-type-btn-enter-to,
|
||||
.mes-current-type-btn-leave {
|
||||
opacity: 1;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
465
manager/src/views/message/message.vue
Normal file
465
manager/src/views/message/message.vue
Normal file
@@ -0,0 +1,465 @@
|
||||
<style lang="scss" scoped>
|
||||
@import "./message.scss";
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div class="message-main-con">
|
||||
<div class="message-mainlist-con">
|
||||
<div>
|
||||
<Button @click="setCurrentMesType('unread')" size="large" long type="text">
|
||||
<div class="mes-wrap">
|
||||
<transition name="mes-current-type-btn">
|
||||
<Icon v-show="currentMessageType == 'unread'" type="md-checkmark"></Icon>
|
||||
</transition>
|
||||
<span class="mes-type-btn-text">未读消息</span>
|
||||
<Badge
|
||||
class="message-count-badge-outer"
|
||||
class-name="message-count-badge-red"
|
||||
:count="unreadCount"
|
||||
></Badge>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button @click="setCurrentMesType('hasread')" size="large" long type="text">
|
||||
<div class="mes-wrap">
|
||||
<transition name="mes-current-type-btn">
|
||||
<Icon v-show="currentMessageType == 'hasread'" type="md-checkmark"></Icon>
|
||||
</transition>
|
||||
<span class="mes-type-btn-text">已读消息</span>
|
||||
<Badge
|
||||
class="message-count-badge-outer"
|
||||
class-name="message-count-badge"
|
||||
:count="hasreadCount"
|
||||
></Badge>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button @click="setCurrentMesType('recyclebin')" size="large" long type="text">
|
||||
<div class="mes-wrap">
|
||||
<transition name="mes-current-type-btn">
|
||||
<Icon v-show="currentMessageType == 'recyclebin'" type="md-checkmark"></Icon>
|
||||
</transition>
|
||||
<span class="mes-type-btn-text">回收站</span>
|
||||
<Badge
|
||||
class="message-count-badge-outer"
|
||||
class-name="message-count-badge"
|
||||
:count="recyclebinCount"
|
||||
></Badge>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message-content-con">
|
||||
<transition name="view-message">
|
||||
<div v-if="showMesTitleList" class="message-title-list-con">
|
||||
<Table
|
||||
ref="messageList"
|
||||
:loading="loading"
|
||||
:columns="mesTitleColumns"
|
||||
:data="currentMesList"
|
||||
:no-data-text="noDataText"
|
||||
></Table>
|
||||
<Page
|
||||
:current="params.pageNumber"
|
||||
:total="total"
|
||||
:page-size="params.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[5,10]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
class="page-fix"
|
||||
></Page>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="back-message-list">
|
||||
<div v-if="!showMesTitleList" class="message-view-content-con">
|
||||
<div class="message-content-top-bar">
|
||||
<span class="mes-back-btn-con">
|
||||
<Button type="text" @click="backMesTitleList">
|
||||
<Icon type="ios-arrow-back"></Icon> 返回
|
||||
</Button>
|
||||
</span>
|
||||
<h3 class="mes-title">{{ mes.title }}</h3>
|
||||
</div>
|
||||
<p class="mes-time-con">
|
||||
<Icon type="android-time"></Icon>
|
||||
{{ mes.time }}
|
||||
</p>
|
||||
<div class="message-content-body">
|
||||
<p class="message-content" v-html="mes.content">{{ mes.content }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Cookies from "js-cookie";
|
||||
import {
|
||||
getMessageSendData,
|
||||
editMessageSend,
|
||||
deleteMessageSend
|
||||
} from "@/api/index";
|
||||
export default {
|
||||
name: "message_index",
|
||||
data() {
|
||||
const markAsreadBtn = (h, params) => {
|
||||
return h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
icon: "md-eye-off",
|
||||
size: "small"
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
// 标记已读
|
||||
let v = params.row;
|
||||
// 转换null为""
|
||||
for (let attr in v) {
|
||||
if (v[attr] == null) {
|
||||
v[attr] = "";
|
||||
}
|
||||
}
|
||||
let str = JSON.stringify(v);
|
||||
let data = JSON.parse(str);
|
||||
data.status = 1;
|
||||
this.loading = true;
|
||||
editMessageSend(data).then(res => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
this.unreadCount -= 1;
|
||||
this.hasreadCount += 1;
|
||||
this.$store.commit("setMessageCount", this.unreadCount);
|
||||
this.refreshMessage();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
"标为已读"
|
||||
);
|
||||
};
|
||||
const deleteMesBtn = (h, params) => {
|
||||
return h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
icon: "md-trash",
|
||||
size: "small",
|
||||
type: "error"
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
// 移除
|
||||
let v = params.row;
|
||||
// 转换null为""
|
||||
for (let attr in v) {
|
||||
if (v[attr] == null) {
|
||||
v[attr] = "";
|
||||
}
|
||||
}
|
||||
let str = JSON.stringify(v);
|
||||
let data = JSON.parse(str);
|
||||
data.status = 2;
|
||||
this.loading = true;
|
||||
editMessageSend(data).then(res => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
this.hasreadCount -= 1;
|
||||
this.recyclebinCount += 1;
|
||||
this.refreshMessage();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
"删除"
|
||||
);
|
||||
};
|
||||
const restoreBtn = (h, params) => {
|
||||
return h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
icon: "md-redo",
|
||||
size: "small"
|
||||
},
|
||||
style: {
|
||||
margin: "0 5px 0 0"
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
// 还原
|
||||
let v = params.row;
|
||||
// 转换null为""
|
||||
for (let attr in v) {
|
||||
if (v[attr] == null) {
|
||||
v[attr] = "";
|
||||
}
|
||||
}
|
||||
let str = JSON.stringify(v);
|
||||
let data = JSON.parse(str);
|
||||
data.status = 1;
|
||||
this.loading = true;
|
||||
editMessageSend(data).then(res => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
this.recyclebinCount -= 1;
|
||||
this.hasreadCount += 1;
|
||||
this.refreshMessage();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
"还原"
|
||||
);
|
||||
};
|
||||
const deleteRealBtn = (h, params) => {
|
||||
return h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
icon: "md-trash",
|
||||
size: "small",
|
||||
type: "error"
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
// 彻底删除
|
||||
let v = params.row;
|
||||
this.loading = true;
|
||||
deleteMessageSend(v.id).then(res => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
this.recyclebinCount -= 1;
|
||||
this.refreshMessage();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
"彻底删除"
|
||||
);
|
||||
};
|
||||
return {
|
||||
loading: true,
|
||||
params: {
|
||||
userId: JSON.parse(Cookies.get("userInfo")).id,
|
||||
status: 0,
|
||||
pageNumber: 1, // 当前页数
|
||||
pageSize: 10, // 页面大小
|
||||
sort: "createTime", // 默认排序字段
|
||||
order: "desc" // 默认排序方式
|
||||
},
|
||||
total: 0,
|
||||
totalUnread: 0,
|
||||
totalRead: 0,
|
||||
totalRemove: 0,
|
||||
currentMesList: [],
|
||||
unreadMesList: [],
|
||||
hasreadMesList: [],
|
||||
recyclebinList: [],
|
||||
currentMessageType: "unread",
|
||||
showMesTitleList: true,
|
||||
unreadCount: 0,
|
||||
hasreadCount: 0,
|
||||
recyclebinCount: 0,
|
||||
noDataText: "暂无未读消息",
|
||||
mes: {
|
||||
title: "",
|
||||
time: "",
|
||||
content: ""
|
||||
},
|
||||
dictMessageType: this.$store.state.dict.messageType,
|
||||
mesTitleColumns: [
|
||||
{
|
||||
type: "index",
|
||||
width: 50,
|
||||
align: "center"
|
||||
},
|
||||
{
|
||||
title: " ",
|
||||
key: "title",
|
||||
align: "left",
|
||||
ellipsis: true,
|
||||
render: (h, params) => {
|
||||
return h("span", [
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
style: {
|
||||
margin: "0 30px 0 0"
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.showMesTitleList = false;
|
||||
this.mes.title = params.row.title;
|
||||
this.mes.time = params.row.createTime;
|
||||
this.getContent(params.row);
|
||||
}
|
||||
}
|
||||
},
|
||||
"【" + params.row.type + "】 " + params.row.title
|
||||
)
|
||||
]);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: " ",
|
||||
key: "time",
|
||||
align: "center",
|
||||
width: 190,
|
||||
render: (h, params) => {
|
||||
return h("span", [
|
||||
h("Icon", {
|
||||
props: {
|
||||
type: "md-time",
|
||||
size: 16
|
||||
},
|
||||
style: {
|
||||
margin: "0 5px 3px 0"
|
||||
}
|
||||
}),
|
||||
h("span", params.row.createTime)
|
||||
]);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: " ",
|
||||
key: "asread",
|
||||
align: "center",
|
||||
width: 210,
|
||||
render: (h, params) => {
|
||||
if (this.currentMessageType == "unread") {
|
||||
return h("div", [markAsreadBtn(h, params)]);
|
||||
} else if (this.currentMessageType == "hasread") {
|
||||
return h("div", [deleteMesBtn(h, params)]);
|
||||
} else {
|
||||
return h("div", [
|
||||
restoreBtn(h, params),
|
||||
deleteRealBtn(h, params)
|
||||
]);
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changePage(v) {
|
||||
this.params.pageNumber = v;
|
||||
this.refreshMessage();
|
||||
},
|
||||
changePageSize(v) {
|
||||
this.params.pageSize = v;
|
||||
this.refreshMessage();
|
||||
},
|
||||
refreshMessage() {
|
||||
let status = 0;
|
||||
let type = this.currentMessageType;
|
||||
if (type == "unread") {
|
||||
status = 0;
|
||||
} else if (type == "hasread") {
|
||||
status = 1;
|
||||
} else {
|
||||
status = 2;
|
||||
}
|
||||
this.params.status = status;
|
||||
this.loading = true;
|
||||
getMessageSendData(this.params).then(res => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.currentMesList = res.result.records;
|
||||
this.total = res.result.total;
|
||||
}
|
||||
});
|
||||
},
|
||||
initMessage() {
|
||||
this.params.status = 0;
|
||||
getMessageSendData(this.params).then(res => {
|
||||
if (res.success) {
|
||||
this.unreadCount = res.result.total;
|
||||
this.initReadMessage();
|
||||
}
|
||||
});
|
||||
},
|
||||
initReadMessage() {
|
||||
this.params.status = 1;
|
||||
getMessageSendData(this.params).then(res => {
|
||||
if (res.success) {
|
||||
this.hasreadCount = res.result.total;
|
||||
this.initRemoveMessage();
|
||||
}
|
||||
});
|
||||
},
|
||||
initRemoveMessage() {
|
||||
this.params.status = 2;
|
||||
getMessageSendData(this.params).then(res => {
|
||||
if (res.success) {
|
||||
this.recyclebinCount = res.result.total;
|
||||
this.setCurrentMesType("unread");
|
||||
}
|
||||
});
|
||||
},
|
||||
editMessage(status) {
|
||||
editMessageSend().then(res => {
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
}
|
||||
});
|
||||
},
|
||||
deleteMessage(id) {
|
||||
deleteMessageSend(id).then(res => {
|
||||
if (res.success) {
|
||||
this.$Message.success("删除成功");
|
||||
}
|
||||
});
|
||||
},
|
||||
backMesTitleList() {
|
||||
this.showMesTitleList = true;
|
||||
},
|
||||
setCurrentMesType(type) {
|
||||
if (this.currentMessageType !== type) {
|
||||
this.showMesTitleList = true;
|
||||
}
|
||||
this.currentMessageType = type;
|
||||
if (type == "unread") {
|
||||
this.noDataText = "暂无未读消息";
|
||||
} else if (type == "hasread") {
|
||||
this.noDataText = "暂无已读消息";
|
||||
} else {
|
||||
this.noDataText = "回收站无消息";
|
||||
}
|
||||
this.params.pageNumber = 1;
|
||||
this.refreshMessage();
|
||||
},
|
||||
getContent(v) {
|
||||
this.mes.content = v.content;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initMessage();
|
||||
},
|
||||
watch: {
|
||||
// 监听路由变化通过id获取数据
|
||||
$route(to, from) {
|
||||
if (to.name == "message_index") {
|
||||
this.initMessage();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user