341 lines
8.7 KiB
Vue
341 lines
8.7 KiB
Vue
<template>
|
||
<div class="message" ref="message">
|
||
<md-app md-waterfall md-mode="fixed">
|
||
<md-app-toolbar class="md-primary">
|
||
<div class="md-toolbar-section-start">
|
||
<md-button class="md-icon-button" @click="back" :disabled="loading_switch">
|
||
<md-icon>arrow_back</md-icon>
|
||
</md-button>
|
||
<span class="md-title page-title">消息 - {{user_info.msg.length}}条</span>
|
||
</div>
|
||
<div class="md-toolbar-section-end">
|
||
<md-button class="md-icon-button" @click="clear_confirm_switch = true">
|
||
<md-icon>delete</md-icon>
|
||
</md-button>
|
||
</div>
|
||
</md-app-toolbar>
|
||
<md-app-content>
|
||
<v-touch @swiperight="back" :swipe-options="{ direction: 'horizontal' }">
|
||
<div ref="list_placeholder" :style="`height:56px`"></div>
|
||
<md-progress-bar
|
||
v-if="loading_switch"
|
||
md-mode="indeterminate"
|
||
style="position: absolute; top: 56px; left: 0; width: 100%;"
|
||
></md-progress-bar>
|
||
<md-card v-for="(msg, index) in msgs" :key="index">
|
||
<md-card-header>
|
||
<md-avatar>
|
||
<md-icon :class="msg.color">{{msg.icon}}</md-icon>
|
||
</md-avatar>
|
||
|
||
<div class="md-title" @click="turnToDetail(msg.id)">{{msg.title}}</div>
|
||
<div class="md-subhead" @click="turnToDetail(msg.id)">{{msg.sub}}</div>
|
||
</md-card-header>
|
||
</md-card>
|
||
|
||
<md-dialog-confirm
|
||
:md-active.sync="clear_confirm_switch"
|
||
md-title="警告"
|
||
md-content="您将清空所有消息</br>该操作不可复原，是否继续"
|
||
md-confirm-text="继续"
|
||
md-cancel-text="取消"
|
||
:md-click-outside-to-close="false"
|
||
@md-confirm="clearMsg"
|
||
/>
|
||
|
||
<md-snackbar
|
||
md-position="center"
|
||
:md-active.sync="show_snackbar"
|
||
md-persistent
|
||
:md-duration="1500"
|
||
>
|
||
<span>{{ snakebar_msg }}</span>
|
||
</md-snackbar>
|
||
<div style="height: 40px;"></div>
|
||
</v-touch>
|
||
</md-app-content>
|
||
</md-app>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// @ is an alias to /src
|
||
import { mapState, mapActions } from "vuex";
|
||
import { setHtmlFontSize } from "@/utils/px2rem.js";
|
||
import { api } from "@/axios/fetch.js";
|
||
|
||
export default {
|
||
name: "Message",
|
||
data() {
|
||
return {
|
||
// 消息数据
|
||
msgs: [],
|
||
// 显示高度，控制md-app的最小高度，防止抽屉高度塌陷
|
||
clientHeight: "",
|
||
// snackbar控制
|
||
show_snackbar: false,
|
||
snakebar_msg: "",
|
||
// 加载控制
|
||
loading_switch: false,
|
||
// 清除确认弹窗控制
|
||
clear_confirm_switch: false
|
||
};
|
||
},
|
||
computed: {
|
||
...mapState(["user_info", "settings", "bar_state"])
|
||
},
|
||
methods: {
|
||
...mapActions(["setUserInfo", "setSettings", "setBarState"]),
|
||
// 修改md-app的最小高度
|
||
changeFixed(clientHeight) {
|
||
//动态修改样式
|
||
this.$refs.message.children[0].style.minHeight = clientHeight + "px";
|
||
this.$refs.list_placeholder.parentNode.parentNode.style.maxHeight =
|
||
clientHeight + "px";
|
||
this.$refs.list_placeholder.parentNode.style.minHeight =
|
||
clientHeight - 32 + "px";
|
||
window.document.documentElement.setAttribute(
|
||
"data-theme",
|
||
this.settings.is_dark_mode ? "dark" : "light"
|
||
);
|
||
},
|
||
|
||
// 初始化
|
||
init() {
|
||
// 刷新vuex
|
||
this.$store.replaceState(
|
||
Object.assign(
|
||
this.$store.state,
|
||
JSON.parse(localStorage.getItem("tracer"))
|
||
)
|
||
);
|
||
// 底部状态栏状态设置
|
||
this.setBarState([false, this]);
|
||
// 无内容拦截
|
||
if (this.user_info.msg.length == 0) {
|
||
this.back();
|
||
}
|
||
console.log(this.user_info.msg);
|
||
this.processMsg();
|
||
},
|
||
|
||
// 返回到主页
|
||
back() {
|
||
this.$router.replace("/account");
|
||
},
|
||
|
||
// 调用snackBar
|
||
message(msg) {
|
||
this.snakebar_msg = msg;
|
||
this.show_snackbar = true;
|
||
},
|
||
|
||
// 处理消息数据
|
||
processMsg() {
|
||
for (let msg of this.user_info.msg) {
|
||
let content;
|
||
switch (msg.type) {
|
||
case "comment":
|
||
// 评论
|
||
content = {
|
||
color: "",
|
||
icon: "chat",
|
||
title: "您有新的评论",
|
||
sub: "点击查看",
|
||
id: msg.id
|
||
};
|
||
this.msgs.push(content);
|
||
break;
|
||
case "reply":
|
||
// 回复
|
||
content = {
|
||
color: "",
|
||
icon: "textsms",
|
||
title: "您有新的回复",
|
||
sub: "点击查看",
|
||
id: msg.id
|
||
};
|
||
this.msgs.push(content);
|
||
break;
|
||
case "pass":
|
||
// 审核通过
|
||
content = {
|
||
color: "md-primary",
|
||
icon: "beenhere",
|
||
title: "您提交的失物招领已通过审核",
|
||
sub: "点击查看",
|
||
id: msg.id
|
||
};
|
||
this.msgs.push(content);
|
||
break;
|
||
case "veto":
|
||
// 审核未通过
|
||
content = {
|
||
color: "md-accent",
|
||
icon: "security",
|
||
title: "您提交的失物招领未通过审核",
|
||
sub: msg.reason,
|
||
id: msg.id
|
||
};
|
||
this.msgs.push(content);
|
||
break;
|
||
}
|
||
}
|
||
},
|
||
// 跳转详情
|
||
turnToDetail(id) {
|
||
console.log(id);
|
||
this.$router.push({ path: "/detail", query: { id: id } });
|
||
},
|
||
// 清空消息
|
||
clearMsg() {
|
||
this.loading_switch = true;
|
||
let data = {
|
||
openid: this.user_info.openid
|
||
};
|
||
api
|
||
.delete("/clear", { data })
|
||
.then(res => {
|
||
let user_info = this.user_info;
|
||
user_info.msg = [];
|
||
this.setUserInfo([user_info, this]);
|
||
console.log("信息清空成功，用户信息覆写完成");
|
||
this.message("清空成功");
|
||
this.loading_switch = false;
|
||
this.back();
|
||
})
|
||
.catch(err => {
|
||
console.log(err);
|
||
this.loading_switch = false;
|
||
if (err.response && err.response.status != 500) {
|
||
this.message(`${err.response.status}: ${err.response.data}`);
|
||
} else {
|
||
this.message("网络错误,请稍候重试");
|
||
}
|
||
});
|
||
}
|
||
},
|
||
created() {
|
||
this.init();
|
||
},
|
||
mounted() {
|
||
// 获取浏览器可视区域高度
|
||
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||
//document.body.clientWidth;
|
||
window.onresize = function temp() {
|
||
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||
setHtmlFontSize();
|
||
}.bind(this);
|
||
this.$refs.list_placeholder.parentNode.parentNode.addEventListener(
|
||
"scroll",
|
||
this.scroll
|
||
);
|
||
},
|
||
watch: {
|
||
// 如果 `clientHeight` 发生改变，这个函数就会运行
|
||
clientHeight: function() {
|
||
this.changeFixed(this.clientHeight);
|
||
}
|
||
},
|
||
beforeDestroy() {},
|
||
components: {}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss" type="text/scss">
|
||
@import "../../style/main";
|
||
.message {
|
||
width: 100%;
|
||
// max-width: 500px;
|
||
min-height: 100%;
|
||
background: #fff;
|
||
// margin: 0 auto;
|
||
.expand {
|
||
box-sizing: border-box;
|
||
min-height: 0.8rem !important;
|
||
margin: 0.5rem 16px !important;
|
||
}
|
||
.login-submit {
|
||
width: 100%;
|
||
margin: 0.5rem 0 !important;
|
||
}
|
||
.md-toolbar {
|
||
position: fixed;
|
||
top: 0;
|
||
}
|
||
.md-toolbar-row {
|
||
order: 12;
|
||
// margin-bottom: .3rem !important;
|
||
}
|
||
.md-toolbar-section-start,
|
||
.md-toolbar-section-end,
|
||
.md-toolbar-row {
|
||
min-height: 56px;
|
||
}
|
||
.md-toolbar-row {
|
||
margin-top: -10px;
|
||
}
|
||
.md-speed-dial.md-bottom-right {
|
||
position: fixed !important;
|
||
}
|
||
}
|
||
// Demo purposes only
|
||
.md-drawer {
|
||
width: 240px;
|
||
max-width: calc(100vw - 125px);
|
||
}
|
||
.md-app-scroller > div {
|
||
overflow-y: scroll !important;
|
||
}
|
||
.face {
|
||
color: #fff !important;
|
||
}
|
||
.page-title {
|
||
flex: 1;
|
||
min-height: 56px;
|
||
line-height: 56px;
|
||
}
|
||
.sroll-top-area {
|
||
flex: 1;
|
||
min-height: 56px;
|
||
}
|
||
.md-bottom-bar.md-type-fixed .md-bottom-bar-item {
|
||
max-width: 1000px !important;
|
||
}
|
||
.md-card-example {
|
||
.md-subhead {
|
||
margin-top: 0.1rem;
|
||
.md-icon {
|
||
$size: 16px;
|
||
width: $size;
|
||
min-width: $size;
|
||
height: $size;
|
||
font-size: $size !important;
|
||
margin-right: 0.3rem;
|
||
}
|
||
|
||
span {
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
}
|
||
.md-app-content .md-card {
|
||
margin: 0 !important;
|
||
}
|
||
.loading {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
height: 5rem;
|
||
width: 5rem;
|
||
margin-top: -2.5rem;
|
||
margin-left: -2.5rem;
|
||
}
|
||
.md-list-item-text p {
|
||
word-wrap: break-word !important;
|
||
overflow: visible !important;
|
||
white-space: normal !important;
|
||
margin-top: 0.2rem;
|
||
}
|
||
</style>
|