270 lines
6.9 KiB
Vue
270 lines
6.9 KiB
Vue
<template>
|
||
<div class="created" ref="created">
|
||
<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.created.length}}条</span>
|
||
</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-content
|
||
v-for="(item, index) in user_info.created"
|
||
:key="index"
|
||
@click="turnToDetail(item.id)"
|
||
>
|
||
<md-card class="md-card-example">
|
||
<md-card-area md-inset>
|
||
<md-card-media md-ratio="16:9">
|
||
<img :src="`https://tracer.lacus.site/photo/${item.img_url}`" />
|
||
</md-card-media>
|
||
|
||
<md-card-header>
|
||
<h2 class="md-subheading">{{item.title}}</h2>
|
||
<div class="md-subhead">
|
||
<md-icon>access_time</md-icon>
|
||
<span>{{formatDateTime(item.create_time)}}</span>
|
||
</div>
|
||
<div class="md-subhead">
|
||
<md-icon>location_on</md-icon>
|
||
<span>{{item.total_addr}}</span>
|
||
</div>
|
||
</md-card-header>
|
||
</md-card-area>
|
||
</md-card>
|
||
</md-content>
|
||
|
||
<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";
|
||
import { formatDateTime } from "@/utils/formatTime.js";
|
||
|
||
export default {
|
||
name: "Created",
|
||
data() {
|
||
return {
|
||
// 显示高度，控制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"]),
|
||
formatDateTime,
|
||
// 修改md-app的最小高度
|
||
changeFixed(clientHeight) {
|
||
//动态修改样式
|
||
this.$refs.created.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.created.length == 0) {
|
||
this.back();
|
||
}
|
||
},
|
||
|
||
// 返回到主页
|
||
back() {
|
||
this.$router.replace("/account");
|
||
},
|
||
|
||
// 调用snackBar
|
||
message(msg) {
|
||
this.snakebar_msg = msg;
|
||
this.show_snackbar = true;
|
||
},
|
||
|
||
// 跳转详情
|
||
turnToDetail(id) {
|
||
console.log(id);
|
||
this.$router.push({ path: "/detail", query: { id: id } });
|
||
},
|
||
},
|
||
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";
|
||
.created {
|
||
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>
|