smart-app/pages/information/information.vue

<template>
	<view class="box">
		<scroll-view scroll-y="true">
			<!-- 头部-->
			<cu-custom bgColor="bg-blue" :isBack="false">
				<block slot="backText">消息</block>
				<block slot="content"></block>
				<block slot="right">
					<view class=" flex justify-center round">
						<button v-if="btnshow" class="margin-top-ssm  cu-btn round line-blue text-white">
							<button class="cu-btn  line-blue" @click="read(1)">
								<text class="text-white">标记已读</text>
							</button>
							<text> | </text>
							<button class=" cu-btn  line-blue" @click="btnshow=false">
								<text class="text-white">管理</text>
							</button>
						</button>
						<button v-else class="margin-top-ssm  cu-btn round line-blue text-white">
							<button class="cu-btn  line-blue" @click="chooseAll()">
								<text class="text-white">全选</text>
							</button>
							<text> | </text>
							<button class="cu-btn  line-blue" @click="del()">
								<text class="text-white">删除选中</text>
							</button>
							<text> | </text>
							<button class=" cu-btn  line-blue" @click="btnshow=true">
								<text class="text-white">取消管理</text>
							</button>
						</button>
					</view>
				</block>
			</cu-custom>
			<!-- 内容-->
			<view class="cu-card dynamic margin-top-sm">
				<view class="cu-list menu-avatar comment" v-for="(item,index) in list" :key="index" style="margin-top: 0;">
					<view class="cu-item_1">
						<view class="cu-item_left">
							<view v-if="btnshow==false" style="margin: 30rpx 20rpx 0 0;">
								<checkbox-group @change="choose(index,item)">
									<checkbox :class="item.checked?'checked':''" :checked="item.checked" class="round"></checkbox>
								</checkbox-group>
							</view>
							<view style="position: relative;">
							    <view v-if="item.reading==0" class="cuIcon-title"style="color: red;position: absolute;top:0px; right: 0;z-index: 9;" ></view>
								<!-- <image class="menuImageTask" src="/static/information/information.png"></image> -->
								<image class="menuImageTask" :src="item.portrait"></image>
							</view>
						</view>
						<view :class="btnshow==false?'cu-item_right2':'cu-item_right'" >
							<view class="cu-item_right_1">
								<view>
									 <!-- <view class="cu-item_right_name">系统通知</view> -->
									<view class="cu-item_right_name">{{item.sendName}}</view>
								</view>
								<view>
									<view class="cu-item_right_time">{{item.informationCreateTime | timeStamp}}</view>
								</view>
							</view>
							<view class="cu-item_right_value">
								<text>{{item.rulesContent}}</text>
							</view>
							<view class="cu-item_right_value2" @click="navToTaskDetails(item)">
								<view>{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="list.length==0 && prompt" class="bg-white text-center">
				<view>
					<image class="menuImageNoTask" src="../../static/task/noTask.png"></image>
				</view>
				<view style="padding:28rpx 0 132rpx;font-size: 26rpx;color: #8A8A8A;">暂时没有消息~</view>
			</view>	
			<view v-if="list.length!=0 && prompt" style="padding: 60rpx 0 160rpx;text-align: center;font-size: 26rpx;color: #AEAEAE;">没有更多内容了~</view>
		</scroll-view>
		<!-- 引入底部导航栏 -->
		<tabBar v-if="show" :pagePath="'/pages/information/information'"></tabBar>
	</view>

</template>
<script>
	export default {
		data() {
			return {
				btnshow: true,
				list: [],
				all: false,
				show:false,
				prompt:false,
				clickData:[]
			};
		},
		onShow() {
			this.findInformationData();
		},
		methods: {
			//消息任务跳转
			navToTaskDetails(item) {
				var type;
				if (item.task_category == 2) {
					type = 2
				} else if (item.task_category == 3) {
					type = 3
				} else {
					type = 1
				}
				this.clickData.push(item);
				this.read(0);
				uni.navigateTo({
					url: "/pages/task/details/details?type=" + type + "&value=0"+"&taskId="+item.taskId+ "&contractid=" +item.contract_info_id
				})
			},
			choose(index, items) { //单选
				if (items.checked) {
					this.$set(items, 'checked', false)
				} else {
					this.$set(items, 'checked', true)
				}
			},
			chooseAll() {
				if (this.all) {
					this.list.forEach(item => {
						this.$set(item, 'checked', false)
					})
					this.all = false
				} else {
					this.list.forEach(item => {
						this.$set(item, 'checked', true)
					})
					this.all = true
				}
			},
			del() {
				var that=this;
				let selectData = [];
				that.list.forEach(item => {
					if (item.checked) {
						selectData.push(item)
					}
				});
				if(selectData.length>0){
					that.http.request("/app/task/informationDelete",selectData,'json',true).then((res)=>{
						that.show=false;
						that.findInformationData();
						that.$prompt.none("删除成功")
					})	
				}else{
					that.$prompt.none("暂无选中数据");
				}
				that.prompt=true;
			},
			read(type){
				var that=this;
				if(type==1){
					if(that.list.length>0){
						that.http.request("/app/task/informationRead",that.list,'json',true).then((res)=>{
							that.show=false;
							that.$prompt.none("操作成功");
							setTimeout(function(){
								that.findInformationData();
							},4000)
						})
					}else{
						that.$prompt.none("暂无未读消息")
					}
				}else{
					that.http.request("/app/task/informationRead",that.clickData,'json',true).then((res)=>{
						that.clickData=[];
					})
				}
				
			},
			/**
			 * 获取信息表的数据，判断该任务的规则是否已经到达提醒时间，然后进行通知
			 */
			findInformationData(){
				var userId = uni.getStorageSync("userInfo").id;
				var porject = uni.getStorageSync("porject"+"_"+uni.getStorageSync("userInfo").id);
				var that =this;
				that.http.request("/app/task/findInformation",{userId:userId,contractId:porject.contractId,projectId:porject.id},false,true).then((res)=>{
					that.list=res.datas;
					var i=0;
					that.list.forEach((item)=>{
						//编辑通知信息
						var value;
						if(that.intervalTime.getTimeLeft(item.informationCreateTime)<=0){
							value ="您负责的任务："+item.name+"，已超过计划完成时间,请抓紧进度，及时完成任务，谢谢！（来自（"+item.sendName+"））";								
						}else{
							value ="距离您的工作："+item.name+"，计划完成时间还有"+that.intervalTime.getTimeLeft(item.informationCreateTime)+"天，请留意工作进度，谢谢！（来自（"+item.sendName+"））";						
						}
					    item.rulesContent = value;
						if(item.reading==0){
							i=i+1;
						}
					})
					that.tabberData.newsNum=i;
					that.show= true;
					that.prompt=true;
				})
			}
		},
		onHide() {
			this.show= false;
		},
		filters: {
			timeStamp: function(value) {
				if (!value) return '';
				var now = new Date(value);
				var year = now.getFullYear();
				var month = now.getMonth() + 1;
				var hour = now.getHours() >=10 ? now.getHours() : "0"+now.getHours() ;
				var minutes = now.getMinutes() >=10 ? now.getMinutes() : "0"+now.getMinutes();
				var time = hour+":"+minutes;
				if (month < 10) {
					month = '0' + month
				}
				var date = now.getDate();
				if (date < 10) {
					date = '0' + date
				}
				return year + "-" + month + "-" + date+" "+time
			},
		},
	}
</script>

<style>
	page {
		background-color: white;
	}

	.margin-bottom-big {
		margin-bottom: 150rpx;
	}

	.bg_F {
		background-color: #F0F0F0;
	}

	.bg_b {
		background-color: #BADFF3;
	}
	.menuImageNoTask{width:162rpx;height: 105rpx;margin-top: 60rpx;}
	.cu-item_1{display: flex;padding: 26rpx 24rpx;border-bottom: 2rpx solid #E3E1E1;}
	.cu-item_left{margin-right: 14rpx;display: flex;}
	.cu-item_left .menuImageTask{width: 100rpx;height: 100rpx;border-radius: 50%;}
	.cu-item_right{width: 588rpx;}
	.cu-item_right2{width: 516rpx;}
	.cu-item_right_1{display: flex;justify-content: space-between;align-items: center;}
	.cu-item_right_name{font-size: 26rpx;color: #101010;font-weight: bold;}
	.cu-item_right_time{font-size: 26rpx;color:#8A8A8A}
	.cu-item_right_value{font-size: 30rpx;color: #101010;margin: 10rpx 0 14rpx;}
	.cu-item_right_value2{background-color: #F7F7F7;border-radius: 10rpx;padding: 26rpx 22rpx 30rpx;}
	.cu-item_right_value2 view{width: 100%;font-size: 30rpx;color: #8A8A8A;overflow: hidden;text-overflow: ellipsis; -o-text-overflow: ellipsis;white-space:nowrap;}
    .cu-btn{
		padding: 0px 5px !important;
	}
</style>