|
|
<template>
|
|
|
<view class="">
|
|
|
<u-navbar bgColor="#ffffff" :placeholder="true" titleStyle="font-weight:600" title="历史信息" :autoBack="true">
|
|
|
|
|
|
</u-navbar>
|
|
|
<u-sticky bgColor="#fff">
|
|
|
<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" @change="souSuoRiQi()">
|
|
|
<view style="padding-left: 15rpx;padding-right: 15rpx; width: 100%;">
|
|
|
<!-- <view style="background-color: rgb(255, 255, 255); display: flex; width: 100%; height: 80rpx; padding-left: 18rpx;align-items: center;">
|
|
|
<u-button icon="search" type="primary" style="width: 20%;margin: 0px 10px 0px 10px;" size="mini" shape="circle" text="按日期范围"></u-button>
|
|
|
</view> -->
|
|
|
</view>
|
|
|
</uni-datetime-picker>
|
|
|
</u-sticky>
|
|
|
|
|
|
<!-- loading -->
|
|
|
<LoadingPage :loading="loading"></LoadingPage>
|
|
|
<view class="page-c">
|
|
|
<scroll-view scroll-y="true" style="height: calc(100vh - 50px);" enableBackToTop="true" @scrolltolower="loadMore()">
|
|
|
<uni-list>
|
|
|
<uni-list-item v-for="(item, index) in newslist" :key="index" clickable @click="getXiaoXi(item)" title="列表右侧显示角标">
|
|
|
<view slot="header" style="display: flex;">
|
|
|
<view style="width: 105rpx;border: 1px solid #dddddd;border-radius: 10rpx;">
|
|
|
<!-- 危险备案 -->
|
|
|
<image v-if="item.iconClass === '1'" style="width: 100%;height: 100%;" src="../../../static/images/xiaoxitixing/weixian.png"></image>
|
|
|
<!-- 应急预案 -->
|
|
|
<image v-if="item.iconClass === '2'" style="width: 100%;height: 100%;" src="../../../static/images/xiaoxitixing/yuan.png"></image>
|
|
|
<!-- 消防员提醒 -->
|
|
|
<image v-if="item.iconClass === '3'" style="width: 100%;height: 100%;" src="../../../static/images/xiaoxitixing/xiaofang.png"></image>
|
|
|
<!-- 应急演练-->
|
|
|
<image v-if="item.iconClass === '4'" style="width: 100%;height: 100%;" src="../../../static/images/xiaoxitixing/yanlian.png"></image>
|
|
|
<!-- 应急物资 -->
|
|
|
<image v-if="item.iconClass === '5'" style="width: 100%;height: 100%;" src="../../../static/images/xiaoxitixing/wuzhi.png"></image>
|
|
|
<!-- 应急设施 -->
|
|
|
<image v-if="item.iconClass === '6'" style="width: 100%;height: 100%;" src="../../../static/images/xiaoxitixing/sheshi.png"></image>
|
|
|
<!-- 报修提醒 -->
|
|
|
<image v-if="item.iconClass === '7'" style="width: 100%;height: 100%;" src="../../../static/images/xiaoxitixing/baoxiu.png"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view slot="body" style="display: flex;flex-direction: column;margin-left: 12rpx;flex: 1;">
|
|
|
<span style="font-size: 30rpx;margin-bottom: 15rpx;font-weight: 600;">{{ item.templateName }}</span>
|
|
|
<!-- <span></span> -->
|
|
|
<span><u--text size="12" :text="item.messageContent" lines="1"></u--text></span>
|
|
|
</view>
|
|
|
<view slot="footer" style="display: flex;flex-direction: column;align-items: flex-end;">
|
|
|
<span style="font-size: 24rpx;margin-bottom: 15rpx;">{{ item.createTime }}</span>
|
|
|
<view class=""><uni-badge type="success" text="已读"></uni-badge></view>
|
|
|
</view>
|
|
|
</uni-list-item>
|
|
|
</uni-list>
|
|
|
</scroll-view>
|
|
|
<u-popup :round="10" mode="bottom" :show="Detailshow" @close="closeDetail">
|
|
|
<view class="ruKuInfo">
|
|
|
<view style="color: #3c6fd2;font-size: 36rpx;font-weight: 600;">{{ newobj.templateName }}</view>
|
|
|
<view style="color: #646a6f;font-size: 29rpx;font-weight: 600;">{{ newobj.createTime }}</view>
|
|
|
</view>
|
|
|
<scroll-view scroll-y="true" style="height: 600rpx;" scroll-with-animation="true">
|
|
|
<view style="display: flex;flex-direction: column; justify-content: center;align-items: center;">
|
|
|
<view class="textInfo">
|
|
|
消息内容：
|
|
|
<br />
|
|
|
<span style="color: #171819;font-size: 30rpx;text-indent: 2em;">{{ newobj.messageContent }}</span>
|
|
|
</view>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
</u-popup>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { getUserProfile } from '@/api/indexpage/user.js';
|
|
|
import { listMessage, readMessage, getMessage } from '@/api/indexpage/newslist/newslist.js';
|
|
|
import Tabbar from '@/components/tabbar/tabbar.vue';
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
newobj: {},
|
|
|
Detailshow: false,
|
|
|
datetimerange: [],
|
|
|
userId: '',
|
|
|
loading: true, //loading
|
|
|
total: 0, //非常规作业总数
|
|
|
pagenum: 1, //分页页码
|
|
|
newslist: []
|
|
|
};
|
|
|
},
|
|
|
onLoad() {
|
|
|
//隐常自带tabber
|
|
|
uni.hideTabBar();
|
|
|
this.getUser();
|
|
|
},
|
|
|
methods: {
|
|
|
closeDetail() {
|
|
|
this.Detailshow = false;
|
|
|
},
|
|
|
getXiaoXi(item) {
|
|
|
this.newobj = item;
|
|
|
this.Detailshow = true;
|
|
|
},
|
|
|
souSuoRiQi() {
|
|
|
console.log(this.datetimerange);
|
|
|
},
|
|
|
// 下拉加载
|
|
|
loadMore() {
|
|
|
//一次分多少页
|
|
|
let pageSize = 7;
|
|
|
//计算分页次数//要分多少页 // 总页数除以分页数
|
|
|
let a = this.total / pageSize + 1;
|
|
|
//初始化为1，触发直接请求第二页
|
|
|
this.pagenum = this.pagenum + 1;
|
|
|
//判断第几页 小于总页数才请求
|
|
|
if (this.pagenum <= a) {
|
|
|
uni.showToast({
|
|
|
title: '加载中....',
|
|
|
duration: 1000
|
|
|
});
|
|
|
// console.log('对不', a, '-----');
|
|
|
// console.log(this.pagenum);
|
|
|
// console.log('发请求');
|
|
|
this.getNewsList();
|
|
|
} else {
|
|
|
// console.log('对不', a, '-----');
|
|
|
// console.log(this.pagenum);
|
|
|
uni.showToast({
|
|
|
title: '没有更多了',
|
|
|
duration: 1000
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
getUser() {
|
|
|
getUserProfile().then(res => {
|
|
|
this.userId = res.data.user.userId;
|
|
|
this.getNewsList();
|
|
|
});
|
|
|
},
|
|
|
//我的消息--获取消息条数
|
|
|
getNewsList() {
|
|
|
listMessage({ readStatus: '1', pageNum: this.pagenum, pageSize: 20, consumerId: this.userId }).then(res1 => {
|
|
|
this.newslist = [...this.newslist, ...res1.rows];
|
|
|
this.total = res1.total;
|
|
|
this.loading = false;
|
|
|
});
|
|
|
|
|
|
//未读消息
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.page-c {
|
|
|
.textInfo {
|
|
|
padding: 20rpx;
|
|
|
border-bottom: #dceaf1 1px solid;
|
|
|
width: 90vw;
|
|
|
}
|
|
|
|
|
|
.ruKuInfo {
|
|
|
background-color: #dceaf1;
|
|
|
border-top-left-radius: 20rpx;
|
|
|
border-top-right-radius: 20rpx;
|
|
|
height: 150rpx;
|
|
|
width: 100vw;
|
|
|
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-around;
|
|
|
align-items: center;
|
|
|
|
|
|
.process {
|
|
|
display: flex;
|
|
|
margin: 20rpx 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.paiban {
|
|
|
padding: 20rpx;
|
|
|
}
|
|
|
|
|
|
.paibanBox {
|
|
|
width: 100vw;
|
|
|
// height: 900rpx;
|
|
|
background-color: #fff;
|
|
|
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 37, 105, 0.1);
|
|
|
}
|
|
|
.wenzhi {
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
display: -webkit-box; //作为弹性伸缩盒子模型显示。
|
|
|
-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
|
|
|
-webkit-line-clamp: 3; //显示的行
|
|
|
}
|
|
|
/deep/ .u-read-more__toggle {
|
|
|
// display: flex;
|
|
|
// flex-direction: row;
|
|
|
justify-content: flex-end;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
