uni-zhks-app/pages/p-i-safety-monitoring/p-i-s-search/p-i-s-search.vue

<template>
	<view>
		<view class="content">
			<view :style="{height:statusBarHeight + 'px'}">
				<!-- 这里是状态栏 -->
			</view>
			<view class="navbar">
		
				<view class="left" @click="click_left()">
					<uni-icons type="arrowleft" color="#fff" size="18"></uni-icons>
				</view>
				<view class="right">
					<view class="input_box">
						<view class="input_icon"></view>
						<input type="text" value="" v-model="search_text" placeholder="搜索" />
					</view>
				</view>
				<view class="search_btn" @click="search()">
					<text>搜索</text>
				</view>
			</view>
		</view>
		<!-- 占位符 -->
		<view :style="{height: statusBarHeight + 'px'}"></view>
		<view style="height: 93rpx;"></view>
		
		<view class="inner_box">
			<view class="inner_title">
				<view class="name name_1">序号</view>
				<view class="name name_2">安装地点</view>
				<view class="name name_3">数值/状态</view>
			</view>
			<view class="list_item">
				<view class="item" :class="item.status" v-for="item in searchList" :key="item.id">
					<view class="text text_1">{{item.id}}</view>
					<view class="text text_2">{{item.position}}</view>
					<view class="text text_3">{{item.value}}{{item.unit}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 20,
				// 查询关键词
				search_text:'',
				
				//查询结果列表
				searchList:[]
				
				
			};
		},
		created() {
			// 获取手机系统信息
			const info = uni.getSystemInfoSync()
			// 设置状态栏高度
			this.statusBarHeight = info.statusBarHeight
			
		},
		methods: {
			click_left() {
				uni.navigateBack();
			},
			async search(){
				// console.log(this.search_text)
				const res = await this.$myRequest({
					method:"POST",
					url: '/safety/search',
					header: {
						'Content-Type': 'application/json', 
					},
					data:{
						name:this.search_text
					}
				})
				
				console.log(res.data.data)
				this.searchList = res.data.data
				
			},
		}

	}
</script>

<style lang="scss" scoped>
	.content {
		position: fixed;
		top: 0;
		left: 0;
			
		background-color: #009FE8;
	}

	.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;

		.left {
			width: 42rpx;
			line-height: 65rpx;
		}

		.right {
			margin-left: 30rpx;
			width: 620rpx;
			height: 65rpx;
			background-color: #fff;
			border-radius: 33rpx;
			
			
			.input_box {
				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{
					margin-left: 19rpx;
					height: 65rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #232627;
				}
			}
			
			
		}
		
		.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;
			
		}
	}

	.inner_box{
		.inner_title{
			
			padding: 0 24rpx;
			
			height: 94rpx;
			background: #F3F6FA;
			
			display: flex;
			justify-content: space-between;
			align-items: center;
			.name{
				font-size: 27rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #232627;
				text-align: center;
			}
			.name_1{
				width: 125rpx;
			}
			.name_2{
				margin: 0 15rpx;
				width: 420rpx;
			}
			.name_3{
				width: 125rpx;
			}
		}
		.list_item{
			.item{
				padding: 0 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				border-bottom: 1px solid #f3f3f3;
				.text{
					font-size: 25rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					line-height: 94rpx;
					text-align: center;
				}
				.text_1{
					width: 125rpx;
				}
				.text_2{
					margin: 0 15rpx;
					width: 420rpx;
				}
				.text_3{
					width: 125rpx;
				}
			}
			.normal{
				color: #27AE60;
			}
			.alarm{
				color: #E74C3C;
			}
			.sign{
				color: #2C3E50;
			}
			.fault{
				color: #2873FF;
			}
		}
	}

</style>