jiaoyuju_fawen/bureau-of-education/pages/indexView/addressee/index.vue

<template>
	<view class="addressee">
		<u-navbar ref="uNavbar" :border-bottom="false" :back-icon-color="setNav.backColor" :is-back="setNav.isdisPlayNavTitle" :title-size="setNav.size" :title-bold="setNav.bold" :title="setNav.navTitle" :title-color="setNav.color" :background="setNav"></u-navbar>
		<view class="topNav" :style="{top: topNav + 'px'}">
			<view class="item">
				<view class="text" :class="yidu == 0?'active':''" @click="onNav(0)">未读收文</view>
			</view>
			<view class="item">
				<view class="text" :class="yidu == 1?'active':''"  @click="onNav(1)">已读收文</view>
			</view>
		</view>
		<view class="searchBox">
			<view class="inputBox">
				<u-input class="input" v-model="searchVal" type="text" height="70" placeholder="请输入标题" placeholderStyle="{'color:#AAAAAA'}" />
				<view class="btn">查询</view>
			</view>
			<view class="timeBox">
				<image class="r" src="/static/img/icon_xzrq.png" mode=""></image>
				<view class="text" @click="onShowTime()">{{message_time || '选择日期'}}</view>
				<image class="d" src="/static/img/icon_xzrq_xl.png" mode=""></image>
				<view class="yidu" @click="allDu(1)" v-if="yidu == 0 && data.length">
					<image class="yd" src="/static/img/icon_yjyd.png" mode=""></image>
					<view class="tt">全部已读</view>
				</view>
				<view class="shanchu" @click="allDu(2)" v-if="yidu == 1 && data.length">
					<image class="yd" src="/static/img/icon_plsc.png" mode=""></image>
					<view class="tt">全部删除</view>
				</view>
			</view>
		</view>
		<view class="contentMain" v-if="data.length">
			
			<view  class="u-swipe-action" v-for="(item, index) in data" :key="index"  @click.stop="jump(item)">
				<!-- <view class="checkbox" v-if="">
					<u-checkbox class="check" v-model="item.checked" active-color="#009FE8" size="40"></u-checkbox>
				</view> -->
				<view class="check" v-if="allduCk || allduDel">
					<image v-if="!item.checked" class="normal" src="../../../static/img/icon_qx_normal.png"></image>
					<image v-else class="selected"  src="../../../static/img/icon_qx_selected.png"></image>
				</view>
				<view class="item">
					<view class="title">{{item.message_title}}</view>
					<view class="userInfo">
						<view class="user">
							<!-- <view class="name">来文机关：潜山市教育局</view> -->
							<view class="name">拟稿人：{{item.send_user_name}}</view>
							<view class="name">收文日期：{{item.send_message_time}}</view>
							<view class="name">流程结束日期：{{item.finish_time == null?'未结束':item.finish_time}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="no-data" v-else>暂无数据</view>
		<view style="height: 130rpx;" v-if="allduCk"></view>
		<view class="bottomBtn" v-if="allduCk && yidu == 0">
			<view class="all" @click="selectedAll">
				<!-- <u-checkbox class="check"  active-color="#009FE8" size="40"></u-checkbox> -->
				<image v-if="!isSelected"  class="normal" src="../../../static/img/icon_qx_normal.png"></image>
				<image v-else class="selected"  src="../../../static/img/icon_qx_selected.png"></image>
				<view class="text">全选</view>
			</view>
			<view class="btn" @click="yiduUpdate">全部已读</view>
		</view>
		<view class="bottomBtn allduDel" v-if="allduDel && yidu == 1">
			<view class="all" @click="selectedAll">
				<!-- <u-checkbox class="check"  active-color="#009FE8" size="40"></u-checkbox> -->
				<image v-if="!isSelected"  class="normal" src="../../../static/img/icon_qx_normal.png"></image>
				<image v-else class="selected"  src="../../../static/img/icon_qx_selected.png"></image>
				<view class="text">全选</view>
			</view>
			<view class="btn" @click="allDel">全部删除</view>
		</view>
		
		<!-- 时间 -->
		<u-picker mode="time" v-model="showTime" :params="params" @confirm="getTime"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				setNav:{
					backgroundColor:'#fff',  //背景色
					color:'#333',  //字体颜色
					bold: true,
					size: '36',
					backColor: '#333',
					isdisPlayNavTitle: true, //是否显示返回按钮
					navTitle:'收文' //导航标题
				},
				searchVal: '',
				topNav: 0,
				allduCk: false,
				options: [
					{
						text: '归档',
						style: {
							backgroundColor: '#00B034'
						}
					}
				],
				pageNo: 1,
				csQueryListData: [],
				showTime: false,
				params: {
					year: true,
					month: true,
					day: true
				},
				message_time: '',
				yidu: 0,
				allduDel: false,
				userInfo: {},
				pageNo: 1,
				total: 0,
				data: [],
				isSelected: false
			}
		},
		onReachBottom() {
			if (this.data.length >= this.total) {
				return
			}
			this.pageNo += 1
			this.getQueryList()
		},
		onLoad() {
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo') || '{}');
			this.getQueryList()
			setTimeout(() => {
				this.topNav = (this.$refs.uNavbar.navbarHeight) + (this.$refs.uNavbar.statusBarHeight)
			}, 10)
			// this.getMessageReceive()
		},
		methods:{
			selectedAll() {
				this.isSelected = !this.isSelected
				this.data.forEach(item => {
					item.checked = this.isSelected
				})
			},
			async getQueryList() {
				let res = await this.$u.post(`boman-web-core/p/cs/queryList`, {
					"table": "boman_message_receive",
					    "pageNo": this.pageNo,
					    "isUi": false,
					    "pageSize": 10,
					    "orderBy": "create_time desc",
					    "fixedData": {
					        "condition": {
					            "visible": "Y",
								"receive_user_id": this.userInfo.id,
					            "status": this.yidu == 0 ? "N" : 'Y',
					            "create_time": this.message_time,
					            "is_del":"N"
					        }
					    }
				})
				if (res.data && res.data.rows) {
					res.data.rows = res.data.rows.map(item => {
						return Object.assign({}, item, {
							checked: false
						})
					})
					if (this.pageNo == 1) {
						this.data = res.data.rows
					} else {
						this.data = this.data.concat(res.data.rows)
					}
				}
			},
			// getTime(e) {
			// 	// console.log(e);
			// 	this.message_time = `${e.year}-${e.month}-${e.day}`
			// },
			click(index, index1) {
				if(index1 == 1) {
					this.list.splice(index, 1);
					this.$u.toast(`删除了第${index}个cell`);
				} else {
					this.list[index].show = false;
					this.$u.toast(`收藏成功`);
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if(index != idx) this.list[idx].show = false;
				})
			},
			onNav(val) {
				this.yidu = val
				this.pageNo = 1
				this.getQueryList()
			},
			onShowTime() {
				this.showTime = !this.showTime
			},
			getTime(e) {
				this.message_time = `${e.year}-${e.month}-${e.day}`
				this.pageNo = 1
				this.getQueryList()
			},
			allDu(val) {
				if (val == 1) {
					this.allduCk = !this.allduCk
				} else {
					this.allduDel = !this.allduDel
				}
			},
			async getMessageReceive () {
				let that = this
				let data = {
					"table": "boman_message_receive",
					"pageNo": that.pageNo,
					"isUi": false,
					"pageSize": 10,
					"orderBy": "create_time desc",
					"fixedData": {
						"condition": {
							"visible": "Y",
							"receive_user_id": '',
							"status":"N",
							"create_time":"2021-01-01",
							"is_del":"N"
						}
					},
					"finish_time": null,
					"id": ''
				}
				
				let res = await that.$u.post(`boman-web-core/p/cs/queryList`,data)
				that.csQueryListData = res.data.rows
			},
			async yiduUpdate () {
				let that = this
				let condition = []
				condition = this.data.filter(item => item.checked)
				if (!condition.length) {
					uni.showToast({
						title: '未选择已读文章',
						icon: 'none'
					})
				}
				let data = {
					"tableName": "boman_message_receive",
					    "condition": {
					        "id": condition.map(item => item.id)
					    },
					    "commitData": {
					        "status":"Y"
					    }
				}
				
				let res = await that.$u.post(`boman-web-core/p/cs/update`,data)
				// that.csQueryListData = res.data.tableHeadList
				if (res.code == 200) {
					uni.showToast({
						title:'已读成功'
					})
					this.allduDel = false
					this.getQueryList()
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			async allDel () {
				let that = this
				let condition = []
				condition = this.data.filter(item => item.checked)
				if (!condition.length) {
					uni.showToast({
						title: '未选择删除文章',
						icon: 'none'
					})
				}
				let data = {
					"tableName": "boman_message_receive",
					    "condition": {
					        "id": condition.map(item => item.id)
					    },
					    "commitData": {
					        "is_del":"Y"
					    }
				}
				
				let res = await that.$u.post(`boman-web-core/p/cs/update`,data)
				// that.csQueryListData = res.data.tableHeadList
				if (res.code == 200) {
					uni.showToast({
						title:'删除成功'
					})
					this.allduDel = false
					this.getQueryList()
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			async jump(item = {}) {
				if (this.allduCk || this.allduDel) {
					item.checked = !item.checked
					return
				}
				// if (this.yidu == 0) {
				// 	let data = {
				// 		"tableName": "boman_message_receive",
				// 		    "condition": {
				// 		        "id": item.id
				// 		    },
				// 		    "commitData": {
				// 		        "status":"Y"
				// 		    }
				// 	}
					
				// 	let res = await this.$u.post(`boman-web-core/p/cs/update`,data)
				// 	// that.csQueryListData = res.data.tableHeadList
					
				// } else {
				// 	uni.navigateTo({
				// 		url: '/pages/indexView/addressee/details?id=' + item.message_id + '&objId=' + item.id
				// 	})
				// }
				uni.navigateTo({
					url: '/pages/indexView/addressee/details?id=' + item.message_id + '&objId=' + item.id
				})
			}
		}
	}
</script>
<style>
	page{
		background: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
.topNav{
	display: flex;
	align-items: center;
	background: #FFFFFF;
	height: 90rpx;
	box-shadow: 0px 14rpx 10rpx 0px rgba(218, 218, 218, 0.35);
	position: sticky;
	width: 100%;
	left: 0;
	z-index: 9;
	.item{
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		.text{
			font-size: 26rpx;
			color: #191919;
			font-weight: 600;
		}
		.active{
			position: relative;
			&::after{
				content: '';
				position: absolute;
				width: 28rpx;
				height: 6rpx;
				background: #009FE8;
				border-radius: 6rpx;
				bottom: -14rpx;
				left: 50%;
				transform: translate(-50%,0);
			}
		}
	}
}
.searchBox{
	padding: 30rpx;
	.inputBox{
		display: flex;
		align-items: center;
		.input{
			flex: 1;
			width: 100%;
			margin-right: 30rpx;
			background: #EDEDED;
			border-radius: 40rpx;
			padding: 0 30rpx !important;
		}
		.btn{
			background: #009FE8;
			color: #FFFFFF;
			font-size: 26rpx;
			height: 60rpx;
			line-height: 60rpx;
			padding: 0 30rpx;
			text-align: center;
			border-radius: 40rpx;
		}
	}
	
}
.timeBox{
	padding: 30rpx 0 20rpx 0;
	display: flex;
	align-items: center;
	.r{
		width: 30rpx;
		height: 33rpx;
	}
	.text{
		font-size: 26rpx;
		color: #343434;
		margin: 0 14rpx;
	}
	.d{
		width: 20rpx;
		height: 20rpx;
	}
	.yidu{
		margin-left: auto;
		display: flex;
		align-items: center;
		.yd{
			width: 26rpx;
			height: 26rpx;
		}
		.tt{
			font-size: 24rpx;
			color: #54BA10;
			margin-left: 10rpx;
		}
	}
	.shanchu{
		margin-left: auto;
		display: flex;
		align-items: center;
		.yd{
			width: 30rpx;
			height: 35rpx;
		}
		.tt{
			font-size: 24rpx;
			color: #FF3131;
			margin-left: 10rpx;
		}
	}
}
.contentMain{
	.u-swipe-action {
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		.checkbox{
			flex: 0 0 40rpx;
			width: 40rpx;
			margin-left: 30rpx;
			.check{
				width: 40rpx;
			}
		}
		.check {
			margin-left: 20rpx;
			.normal,
			.selected {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
	.item{
		flex: 1;
		padding: 0 30rpx;
		.title{
			font-size: 28rpx;
			font-weight: 700;
			color: #343434;
			width: 70%;
			white-space: break-word;
			word-break:break-all;
		}
		.userInfo{
			display: flex;
			align-items: flex-end;
			margin-top: 30rpx;
			border-bottom: solid 1rpx #DADADA;
			padding-bottom: 30rpx;
			.user{
				flex: 1;
				color: #666;
				font-size: 24rpx;
				.name{
					margin-bottom: 10rpx;
				}
			}
			.status{
				color: #AAAAAA;
				font-size: 26rpx;
				margin-bottom: 4rpx;
			}
		}
	}
}
.bottomBtn{
	display: flex;
	align-items: center;
	height: 100rpx;
	width: 100%;
	left: 0;
	z-index: 9;
	bottom: 0;
	position: fixed;
	border-top: solid 1px #E5E5E5;
	.all{
		display: flex;
		align-items: center;
		flex: 0 0 200rpx;
		background: #FFFFFF;
		justify-content: center;
		line-height: 100rpx;
		.normal,
		.selected {
			width: 30rpx;
			height: 30rpx;
		}
		.check{
			width: 40rpx;
			height: 40rpx;
		}
		.text{
			font-size: 28rpx;
			color: #343434;
			margin-left: 20rpx;
		}
	}
	.btn{
		background: #009FE8;
		color: #FFFFFF;
		font-size: 28rpx;
		line-height: 100rpx;
		text-align: center;
		flex: 1;
	}
}

.allduDel{
	.btn{
		background: #FF3131;
		color: #FFFFFF;
		font-size: 28rpx;
		line-height: 100rpx;
		text-align: center;
		flex: 1;
	}
}
</style>