uni-zhihuikuangshan/pages/production/personnel_orientation/search/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>
						<view class="input_text">
							<input type="text" v-model="search_text" placeholder="搜索井下人员"
								placeholder-style="color:#fff;" />
						</view>
					</view>
				</view>
				<view class="btn" @click="search()">搜索</view>
			</view>
		</view>
		<!-- 占位符 -->
		<view :style="{height: statusBarHeight + 'px'}"></view>
		<view style="height: 93rpx;"></view>


		<!-- 搜索列表 -->
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index" v-if="index < 100" @click="open(item.people_id)">
				<view class="avatar" :style="{backgroundColor:bgColor[index]}">{{item.remark.split('').pop()}}</view>
				<view class="info">
					<view class="name">{{item.remark}}</view>
					<view class="dept">{{item.dept_name}}</view>
				</view>
				<view class="position">({{item.position}})</view>
			</view>
		</view>
		
		<uni-popup ref="popup" type="center">
			<view class="popup_box">
				<view class="item">定位信息</view>
				<view class="item">
					<view class="text">姓名：</view>
					<view class="text">{{info.name}}</view>
				</view>
				<view class="item">
					<view class="text">所属区队：</view>
					<view class="text">{{info.depart_name}}</view>
				</view>
				<view class="item">
					<view class="text">下井时间：</view>
					<view class="text">{{info.down_time}}</view>
				</view>
				<view class="item">
					<view class="text">当前位置：</view>
					<view class="text">{{info.station_name}}</view>
				</view>
				<view class="item">
					<view class="text">班次：</view>
					<view class="text">{{info.classes}}</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 20,

				// 搜索关键词
				search_text: "",
				
				// 头像随机色
				bgColor:[],
				list:[],
				
				mine:"",
				// 定位信息
				info:{}
			};
		},
		onLoad(option) {
			this.mine = option.mine
			// 获取手机系统信息
			const info = uni.getSystemInfoSync()
			// 设置状态栏高度
			this.statusBarHeight = info.statusBarHeight
			
			// 设置头像
			for(let i=0;i<100;i++){
				// 获取随机色
				let r = parseInt(Math.random() * 256)
				let g = parseInt(Math.random() * 256)
				let b = parseInt(Math.random() * 256)
				
				// ES6 字符串拼接
				// this.bgColor = `rgba(${r},${g},${b},0.3)`
				let color = "rgba(" + r + "," + g + "," + b + "," + 0.3 + ")"
				// console.log(color)
				this.bgColor.push(color)
			}

		},
		methods: {
			click_left() {
				uni.navigateBack();
			},
			search() {
				uni.showLoading()
				// console.log(this.search_text)
				
				this.$p_api.personnel_people_search({
					name:this.search_text,
					mine:this.mine
				}).then((res)=>{
					console.log(res)
					uni.hideLoading()
					this.list = res.data.data
				})
				
			},
			
			open(people_id) {
				console.log(people_id)
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('center')
					
				this.$p_api.personnel_people_info({
					mine:this.mine,
					people_id:people_id
				}).then((res)=>{
					console.log(res.data.data)
					this.info = res.data.data
				})
			}
		}

	}
</script>

<style lang="scss">
	.content {
		position: fixed;
		top: 0;
		left: 0;

		background-color: #009FE8;
		z-index: 999;
	}

	.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;
			margin-right: 15rpx;
		}

		.right {
			width: 500rpx;
			height: 65rpx;
			background: rgba(255, 255, 255, 0.2);
			border-radius: 33rpx;

			.input_box {
				display: flex;

				.input_icon {
					margin-left: 43rpx;
					margin-top: 16rpx;
					width: 34rpx;
					height: 34rpx;

					background-image: url(icon/search.png);
					background-size: cover;
					background-repeat: no-repeat;
				}

				.input_text {
					margin-left: 19rpx;

					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 65rpx;

					input {
						font-size: 24rpx;
						height: 65rpx;
						line-height: 65rpx;
					}
				}
			}
		}

		.btn {
			margin-left: 20rpx;
			width: 120rpx;
			text-align: center;
			height: 65rpx;
			line-height: 65rpx;
			background: rgba(255, 255, 255, 0.2);
			border-radius: 33rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}


	.list {
		.item{
			height: 120rpx;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #F1F1F1;
			box-sizing: border-box;
			padding: 0 25rpx;
			.avatar{
				font-size: 46rpx;
				width: 90rpx;
				height: 90rpx;
				text-align: center;
				line-height: 90rpx;
				color: #FFFFFF;
				border-radius: 50%;
			}
			.info{
				margin-left: 40rpx;
				min-width: 200rpx;
				font-size: 28rpx;
				.name{
					
				}
				.dept{
					color: #999;
					font-size: 24rpx;
				}
			}
			.position{
				font-size: 28rpx;
			}
		}
	}
	
	.popup_box{
		width: 600rpx;
		height: 600rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		.item{
			line-height: 100rpx;
			box-sizing: border-box;
			padding: 0rpx 20rpx;
			border-bottom: 2rpx solid #F1F1F1;
			
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
	
</style>