314 lines
7.4 KiB
Vue
314 lines
7.4 KiB
Vue
<template>
|
|
<div class="laf">
|
|
<header>
|
|
<div class="w">
|
|
<div class="icon-box" @click="reflash()">
|
|
<i class="el-icon-refresh icon"></i>
|
|
</div>
|
|
<div class="title-box">失物招领</div>
|
|
<div class="icon-box" @click="goToAdd()">
|
|
<i class="el-icon-plus icon"></i>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div style="height: 1.2rem;"></div>
|
|
<div class="search-warp" @click='goToSearch()'>
|
|
<div class="search-box">
|
|
<i class="el-icon-search icon"></i>
|
|
<!-- <p>该功能开发中</p> -->
|
|
<!-- <input type="text" placeholder="输入物品名" /> -->
|
|
</div>
|
|
<div class="submit">搜索</div>
|
|
</div>
|
|
<nav>
|
|
<div class="lost" :class="page_type == 'lost' ? 'select': ''" @click="changeNav('lost')">失物</div>
|
|
<div class="found" :class="page_type == 'found' ? 'select': ''" @click="changeNav('found')">招领</div>
|
|
</nav>
|
|
<div class="main">
|
|
<p v-if="page_type == 'lost'? LAF_data.lost.length == 0 : LAF_data.found.length == 0">空空如也呢，快点击右上角添加一个吧~</p>
|
|
<div class="lost-page" v-if="page_type == 'lost'">
|
|
<LAFCard :content="item" v-for="(item, i) in LAF_data.lost" :key="i"></LAFCard>
|
|
</div>
|
|
<div class="found-page" v-else>
|
|
<LAFCard :content="item" v-for="(item, i) in LAF_data.found" :key="i"></LAFCard>
|
|
</div>
|
|
</div>
|
|
<FooterSpace></FooterSpace>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// @ is an alias to /src
|
|
|
|
import FooterSpace from "@/components/FooterSpace.vue";
|
|
import LAFCard from "./components/LAFCard.vue";
|
|
import { mapState, mapActions } from "vuex";
|
|
import { getLAF } from "@/axios/api.js";
|
|
import { Loading } from "element-ui";
|
|
import { loginInterceptor } from "@/lib/utils.js";
|
|
|
|
export default {
|
|
name: "lost_and_found",
|
|
data() {
|
|
return {
|
|
page_type: "lost",
|
|
need_reflash: false
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState([
|
|
"user_info",
|
|
"LAF_data",
|
|
'LAF_reflash'
|
|
]),
|
|
},
|
|
methods: {
|
|
...mapActions([
|
|
"setCurrentPage",
|
|
"setLAFData",
|
|
"setLAFReflash"
|
|
]),
|
|
// 初始化
|
|
init() {
|
|
this.getLAFData();
|
|
},
|
|
|
|
getLAFData() {
|
|
// 拦截器
|
|
if (Object.keys(this.LAF_data).length != 0) {
|
|
let now = new Date().getTime(); //毫秒级时间戳
|
|
if (
|
|
now - this.LAF_data.get_time < 1000 * 60 * 3 &&
|
|
!this.need_reflash && !this.LAF_reflash
|
|
) {
|
|
// 上次获取的的时间是3分钟之内且无需刷新
|
|
return;
|
|
}
|
|
}
|
|
let load = Loading.service({
|
|
background: "rgba(236,245,255,.7)",
|
|
target: document.querySelector(".laf")
|
|
});
|
|
getLAF().then(res => {
|
|
// console.log(res.data);
|
|
let data = res.data
|
|
let laf
|
|
if(data.lost.errcode == 200 && data.found.errcode == 200) {
|
|
// 成功获取到信息
|
|
laf = {
|
|
lost: JSON.parse(data.lost.arr),
|
|
found: JSON.parse(data.found.arr),
|
|
get_time: new Date().getTime()
|
|
}
|
|
// console.log(laf)
|
|
if(this.need_reflash) {
|
|
this.$message({
|
|
message: "数据更新成功",
|
|
type: "success"
|
|
});
|
|
}
|
|
} else {
|
|
// 信息获取失败
|
|
laf = {
|
|
lost: [],
|
|
found: [],
|
|
get_time: new Date().getTime()
|
|
}
|
|
this.$message.error("数据更新失败，请联系管理员");
|
|
console.log(res.data)
|
|
}
|
|
this.setLAFData([laf, this]);
|
|
this.setLAFReflash([false, this]);
|
|
this.need_reflash = false;
|
|
load.close()
|
|
}).catch(err => {
|
|
console.log(err)
|
|
laf = {
|
|
lost: [],
|
|
found: [],
|
|
get_time: new Date().getTime()
|
|
}
|
|
this.$message.error("网络连接失败，请联系管理员");
|
|
this.setLAFData([laf, this]);
|
|
this.need_reflash = true;
|
|
load.close()
|
|
});
|
|
},
|
|
|
|
// 改变nav
|
|
changeNav(type) {
|
|
this.page_type = type
|
|
},
|
|
|
|
reflash(){
|
|
// 拦截器
|
|
if(this.need_reflash) return
|
|
this.need_reflash = true
|
|
this.getLAFData()
|
|
},
|
|
// 点击新增
|
|
goToAdd(){
|
|
this.$router.push('/lafadd')
|
|
},
|
|
// 点击搜索
|
|
goToSearch(){
|
|
this.$router.push('/lafsearch')
|
|
|
|
}
|
|
},
|
|
created() {
|
|
},
|
|
mounted() {
|
|
this.init();
|
|
this.setCurrentPage(["laf", this]);
|
|
},
|
|
activated() {
|
|
this.setCurrentPage(["laf", this]);
|
|
},
|
|
components: {
|
|
FooterSpace,
|
|
LAFCard
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss" type="text/scss">
|
|
@import "../../style/main";
|
|
.laf {
|
|
width: 100%;
|
|
max-width: 500px;
|
|
margin: 0 auto;
|
|
background-color: #f8f8f8;
|
|
min-height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 1.2rem;
|
|
z-index: 100;
|
|
.w {
|
|
height: 1.2rem;
|
|
width: 100%;
|
|
max-width: 500px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background-image: $gradualLAF;
|
|
color: #fff;
|
|
.title-box {
|
|
font-size: 0.5rem;
|
|
}
|
|
.icon-box {
|
|
height: 1.2rem;
|
|
width: 1.2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.icon {
|
|
font-size: .6rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.search-warp {
|
|
height: 1rem;
|
|
// background: red;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 0.3rem;
|
|
margin: 0.2rem 0;
|
|
.submit {
|
|
height: 0.7rem;
|
|
width: 1.5rem;
|
|
// background-image: linear-gradient(to right, #1be5d2, #5e75e5);
|
|
background-image: $gradualLAF;
|
|
border-radius: 0.5rem;
|
|
font-size: 0.3rem;
|
|
color: #fff;
|
|
line-height: 0.7rem;
|
|
text-align: center;
|
|
position: relative;
|
|
z-index: 1;
|
|
margin-left: 0.3rem;
|
|
}
|
|
.submit::before {
|
|
content: "";
|
|
display: block;
|
|
background: inherit;
|
|
filter: blur(0.1rem);
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0.1rem;
|
|
left: 0.1rem;
|
|
opacity: 0.4;
|
|
transform-origin: 0 0;
|
|
border-radius: inherit;
|
|
transform: scale(1, 1);
|
|
z-index: -1;
|
|
}
|
|
.search-box {
|
|
width: 100%;
|
|
height: 0.7rem;
|
|
border-radius: 0.5rem;
|
|
background: rgb(241, 239, 239);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 0.3rem;
|
|
box-sizing: border-box;
|
|
.icon {
|
|
color: #989898;
|
|
font-size: 0.3rem;
|
|
}
|
|
input, p{
|
|
width: 100%;
|
|
height: 0.7rem;
|
|
line-height: .7rem;
|
|
border: none;
|
|
padding-left: 0.3rem;
|
|
font-size: 0.3rem;
|
|
background: rgb(241, 239, 239);
|
|
outline: none;
|
|
}
|
|
}
|
|
}
|
|
nav {
|
|
height: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 0.3rem;
|
|
div {
|
|
font-size: 0.4rem;
|
|
height: 0.7rem;
|
|
line-height: 0.7rem;
|
|
}
|
|
.lost {
|
|
margin-right: 1rem;
|
|
}
|
|
.select {
|
|
font-size: 0.5rem;
|
|
font-weight: 600;
|
|
border-bottom: 2px #ab64f6 solid;
|
|
}
|
|
}
|
|
.main > p {
|
|
font-size: .3rem;
|
|
margin-left: .3rem;
|
|
margin-top: .3rem;
|
|
color: #989898;
|
|
}
|
|
.main > div{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
padding: 0.3rem;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
</style> |