|
|
<template>
|
|
|
<view class="">
|
|
|
<!-- //导航栏 -->
|
|
|
<u-navbar bgColor="#ffffff" :placeholder="true" titleStyle="font-weight:600" title="工作待办" :autoBack="true">
|
|
|
|
|
|
<view slot="right" style="display: flex;align-items: center;flex-direction: column;" @click="lishi()">
|
|
|
<svgImage height="36rpx" name="lishi"></svgImage>
|
|
|
<span style="font-size: 18rpx; font-weight: 600;margin-right: 10rpx;color: #1296db;">历史待办</span>
|
|
|
</view>
|
|
|
</u-navbar>
|
|
|
|
|
|
<view class="page-c">
|
|
|
<scroll-view scroll-y="true" style="height: calc(100vh - 120px);" 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;justify-content: space-between;">
|
|
|
<span style="font-size: 28rpx;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;justify-content: space-between;">
|
|
|
<span style="font-size: 24rpx;margin-bottom: 10rpx;">{{ item.createTime }}</span>
|
|
|
<view class=""><uni-badge text="未读"></uni-badge></view>
|
|
|
</view>
|
|
|
</uni-list-item>
|
|
|
</uni-list>
|
|
|
<uni-list v-if="newslist.length == '0'"><uni-list-item title="暂无工作待办"></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-button type="primary" text="确定已读" @click="getXiaoXi2(newobj.id)"></u-button> -->
|
|
|
</u-popup>
|
|
|
</view>
|
|
|
<!-- <Tabbar :value="'工作待办'"></Tabbar> -->
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import Tabbar from '@/components/tabbar/tabbar.vue';
|
|
|
import { listMessage, readMessage, getMessage } from '@/api/indexpage/newslist/newslist.js';
|
|
|
import { getUserProfile } from '@/api/indexpage/user.js';
|
|
|
export default {
|
|
|
components: {
|
|
|
Tabbar
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
newobj: {},
|
|
|
Detailshow: false,
|
|
|
userId: '',
|
|
|
loading: true, //loading
|
|
|
total: 0, //非常规作业总数
|
|
|
pagenum: 1, //分页页码
|
|
|
newslist: []
|
|
|
};
|
|
|
},
|
|
|
onLoad() {
|
|
|
//隐常自带tabber
|
|
|
uni.hideTabBar();
|
|
|
this.getUser();
|
|
|
},
|
|
|
methods: {
|
|
|
closeDetail() {
|
|
|
readMessage(this.newobj.id).then(res => {
|
|
|
this.$modal.msg('消息已读,可前往历史消息查看');
|
|
|
//更新vuex中的消息条数
|
|
|
this.pagenum = 1;
|
|
|
this.newslist = [];
|
|
|
this.getNewsList();
|
|
|
this.Detailshow = false;
|
|
|
//获取消息条数
|
|
|
this.$store.dispatch('getNewsListOne');
|
|
|
//重新获取未读列表
|
|
|
// this.getNewsList();
|
|
|
});
|
|
|
},
|
|
|
// 下拉加载
|
|
|
loadMore() {
|
|
|
//一次分多少页
|
|
|
let pageSize = 20;
|
|
|
//计算分页次数//要分多少页 // 总页数除以分页数
|
|
|
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: '0', pageNum: this.pagenum, pageSize: 20, consumerId: this.userId }).then(res1 => {
|
|
|
this.newslist = [...this.newslist, ...res1.rows];
|
|
|
this.total = res1.total;
|
|
|
this.loading = false;
|
|
|
});
|
|
|
|
|
|
//未读消息
|
|
|
},
|
|
|
// 点击消息查看详情---而后待读消息消失
|
|
|
getXiaoXi(item) {
|
|
|
this.newobj = item;
|
|
|
this.Detailshow = true;
|
|
|
// 调用查看消息详情的接口
|
|
|
},
|
|
|
// 点击消息查看详情---而后待读消息消失
|
|
|
getXiaoXi2(id) {
|
|
|
// 调用查看消息详情的接口
|
|
|
readMessage(id).then(res => {
|
|
|
this.$modal.msg('消息已读,可前往历史消息查看');
|
|
|
//获取消息条数
|
|
|
this.$store.dispatch('getNewsListOne');
|
|
|
//更新vuex中的消息条数
|
|
|
//重新获取未读列表
|
|
|
this.pagenum = 1;
|
|
|
this.newslist = [];
|
|
|
this.getNewsList();
|
|
|
this.Detailshow = false;
|
|
|
});
|
|
|
},
|
|
|
//历史消息
|
|
|
lishi() {
|
|
|
this.$tab.navigateTo('/pages/message/mineNews/lishiNews');
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</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>
|
