uni-zhks-app/pages/w-infolist/w-infolist.vue

<template>
	<view>
		<view class="navbar">
			<view class="input_box">
				<view class="input_icon"></view>
				<input type="text" value="" v-model="search_text" placeholder="搜索" />
			</view>
			<view class="search_btn" @click="search()">
				<text>搜索</text>
			</view>
		</view>
		
		<!-- news -->
		<view class="news">
			<view class="news_list">
				<view class="item">
					<view class="title">
						<view class="name">一分区机电管理部</view>
						<view class="tip">已读</view>
					</view>
					<view class="time">
						2020-07-05 18:59:23
					</view>
					<view class="inner">
						内容测试。
					</view>
					<view class="detail">
						详情 >>
					</view>
				</view>
				<view class="item">
					<view class="title">
						<view class="name">一分区机电管理部</view>
						<view class="tip">已读</view>
					</view>
					<view class="time">
						2020-07-05 18:59:23
					</view>
					<view class="inner">
						内容测试。
					</view>
					<view class="detail">
						详情 >>
					</view>
				</view>
			</view>
		</view>
	
		<!-- bar -->
		<view class="title_bar">
			<view class="title" @click="changeType('')">所有消息</view>
			<view class="title" @click="changeType('unread')">未读消息</view>
			<view class="title" @click="read('')">全部标已读</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search_text:'',
				type:'',
				
				// 列表数组
				messageList:[]
			};
		},
		onLoad() {
			// this.get_messageList(this.type)
		},
		methods:{
			search(){
				uni.showToast({
					icon:'none',
					title:"点击了搜索："+this.search_text
				})
			},
			changeType(type){
				console.log(type)
				// this.get_messageList(type)
			},
			async get_messageList(type){
				const res = await this.$myRequest({
					url:'/message/list',
					header:{
						Authorization:uni.getStorageSync('token_type') +' '+uni.getStorageSync('Authorization')
					},
					data:{
						type:type
					}
				})
				console.log(res.data.data.data)
				this.messageList = res.data.data.data
			},
			async read(id){
				// const res = await this.$myRequest({
				// 	method:"POST",
				// 	url:'/message/read',
				// 	header:{
				// 		"Content-Type":"application/json",
				// 		Authorization:uni.getStorageSync('token_type') +' '+uni.getStorageSync('Authorization')
				// 	},
				// 	data:{
				// 		id:id
				// 	}
				// })
				// uni.showToast({
				// 	icon:'none',
				// 	title:'全部已读'
				// })
				console.log("全部标已读")
			}
			
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #e9e9e9;
	}
	.navbar {
		width: 750rpx;
		box-sizing: border-box;
		padding-left: 31rpx;
		padding-right: 26rpx;
		padding-top: 14rpx;
		padding-bottom: 14rpx;
		display: flex;
		justify-content: space-between;
		background-color: #eee;
	
		.input_box {
			background-color: #fff;
			border-radius: 20px;
			width: 565rpx;
			display: flex;
			.input_icon {
				margin-left: 43rpx;
				margin-top: 16rpx;
				width: 34rpx;
				height: 34rpx;

				background-image: url(icon/search_black.png);
				background-size: cover;
				background-repeat: no-repeat;
			}
			input{
				width: 460rpx;
				margin-left: 19rpx;
				height: 65rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #232627;
				box-sizing: border-box;
				padding-right: 20rpx;
			}
		}
		
		.search_btn{
			margin-left: 30rpx;
			margin-top: 2rpx;
			width: 108rpx;
			height: 60rpx;
			
			line-height: 60rpx;
			text-align: center;
			background: #FFFFFF;
			border-radius: 33rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #232627;
			
		}
	}
	
	.news{
		padding: 20rpx;
		.news_list{
			.item{
				margin-bottom: 20rpx;
				width: 710rpx;
				background-color: #fff;
				box-sizing: border-box;
				padding: 15rpx;
				.title{
					display: flex;
					justify-content: space-between;
					.name{
						font-size: 30rpx;
						color: #666;
					}
					.tip{
						font-size: 24rpx;
						padding: 8rpx;
						background-color: #d1d1d1;
						color: #fff;
					}
				}
				.time{
					line-height: 40rpx;
					font-size: 20rpx;
					color: #999;
				}
				.inner{
					line-height: 50rpx;
					font-size: 22rpx;
					color: #333;
					border-bottom: 1px solid #f3f3f3;
				}
				.detail{
					padding-top: 15rpx;
					font-size: 20rpx;
					color: #007AFF;
				}
			}
		}
	}
	
	.title_bar{
		background-color: #fff;
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 90rpx;
		box-sizing: border-box;
		padding: 20rpx 0;
		.title{
			float: left;
			width: 248rpx;
			line-height: 50rpx;
			text-align: center;
			font-size: 30rpx;
		}
		.title:nth-child(2){
			border-left: 2rpx solid #ccc;
			border-right: 2rpx solid #ccc;
		}
	}
</style>