uni-zhihuikuangshan-2/pages/index/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" @input="on_input()" 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="tab">
			<view class="item" :class="active == 1?'active':''" @click="change_active(1)">文件</view>
			<view class="item" :class="active == 2?'active':''" @click="change_active(2)">人员</view>
		</view>

		<!-- 搜索列表 -->
		<view class="list" v-if="active == 1">
			<view class="item" v-for="(item,index) in list" :key="index" @click="go_record(item.id)">
				<view class="title">{{item.title}}</view>
				<view class="icon">
					<uni-icons type="arrowright"></uni-icons>
				</view>
			</view>

			<view v-if="list.length == 0" style="font-size: 32rpx;text-align: center;line-height: 400rpx;">暂无搜索结果</view>
		</view>

		<!-- 搜索人员 -->
		<view class="people_list" v-if="active == 2">
			<view class="item" v-for="(item,index) in people_list" :key="index" @click="go_user_info(item.staff_num)">
				<view class="left">
					<view class="icon">{{item.name.charAt(0)}}</view>
					<view class="text">{{item.name}} {{item.dept_name}} {{item.duty_num}}</view>
				</view>
				<view class="right" @click.stop="phone(item.mobile)">
					<uni-icons type="phone"></uni-icons>
				</view>
			</view>

			<view v-if="people_list.length == 0" style="font-size: 32rpx;text-align: center;line-height: 400rpx;">暂无搜索结果
			</view>

		</view>
	</view>
</template>

<script>
	import {
		set_base_url
	} from '@/common/set_base_url.js'
	export default {
		data() {
			return {
				mine_code: "",
				statusBarHeight: 25,

				// 搜索关键词
				search_text: "",

				// 搜索结果列表
				list: [],
				people_list: [],
				active: 1
				
			};
		},
		onLoad(option) {
			this.mine_code = option.mine_code
			// 获取手机系统信息
			const info = uni.getSystemInfoSync()
			// 设置状态栏高度
			this.statusBarHeight = info.statusBarHeight

			console.log(this.mine_code)

			// 根据矿编码切换首页接口不同的请求基础路径
			this.base_url = set_base_url(this.mine_code)
			this.debounceSearch = this.debounce(this.search, 500)
		},
		methods: {
			change_active(index) {
				this.active = index

				this.search()
			},
			click_left() {
				uni.navigateBack();
			},
			debounce(fn, time = 100) {
				let timer = null
				return function(...args) {
					if (timer) clearTimeout(timer)
					timer = setTimeout(() => {
						fn.apply(this, args)
					}, time)
				}
			},
			on_input() {
				console.log(this.search_text)
				this.debounceSearch()
			},
			search() {
				if (this.search_text == "") {
					uni.showToast({
						icon: "none",
						title: "请输入搜索内容"
					})

					return
				} else {
					// uni.showLoading()
					if (this.active == 1) {
						uni.request({
							url: this.base_url + "/swagger/api/page/v1/getPageList",
							method: "GET",
							header: {
								'accesskey': "b364b449a18af327867f7edc3431b541"
							},
							data: {
								title: this.search_text,
								departmentId: "",
								pageNumber: 0,
								pageSize: 0
							},
							success: (res) => {
								console.log(res)
								// uni.hideLoading()

								this.list = res.data.data
							}
						})
					} else if (this.active == 2) {
						uni.request({
							url: this.base_url + "/user/search",
							method: "POST",
							header: {
								'Authorization': uni.getStorageSync('token_type') + ' ' + uni.getStorageSync(
									'Authorization'),
								'accesskey': "b364b449a18af327867f7edc3431b541"
							},
							data: {
								content: this.search_text
							},
							success: (res) => {
								console.log(res)
								// uni.hideLoading()

								this.people_list = res.data.data
							}
						})
					}

				}

			},

			// 打开二维码页面
			go_record(id) {
				uni.navigateTo({
					url: "../../index/record/record?pageId=" + id + "&mine_code=" + this.mine_code,
				})
			},

			go_user_info(staff_num) {
				if (this.mine_code == 'ningmeijituan') {
					uni.navigateTo({
						url: "../../origanization/communication/origanization/personal_information/personal_information_peixun?staff_num=" +
							staff_num
					})
				} else {
					uni.navigateTo({
						url: "../../origanization/communication/origanization/personal_information/personal_information_info?staff_num=" +
							staff_num
					})
				}

			},
			phone(mobile) {
				if (mobile != null) {
					uni.makePhoneCall({
						phoneNumber: mobile
					});
				} else {
					uni.showToast({
						icon: "none",
						title: "未绑定手机号"
					})
				}
			},

		}

	}
</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;
		}
	}


	.tab {
		background-color: #FFFFFF;
		z-index: 999;
		position: fixed;
		top: 1;
		left: 0;

		width: 750rpx;
		box-sizing: border-box;
		padding: 20rpx 25rpx;
		display: flex;

		.item {
			box-sizing: border-box;
			padding: 10rpx 30rpx;

			border-radius: 10rpx;
			margin-right: 20rpx;
			font-size: 26rpx;

			border: 1rpx solid #009fe8;
			color: #009fe8;
		}

		.item.active {
			background-color: #009fe8;
			color: #FFFFFF;
		}
	}

	.list {
		margin-top: 60rpx;
		box-sizing: border-box;
		padding: 10rpx 25rpx;

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;

			box-sizing: border-box;
			padding: 35rpx 0;
			border-bottom: 1rpx solid #F4F4F4;

			.title {
				font-size: 32rpx;
			}

			.icon {}
		}
	}

	.people_list {
		margin-top: 60rpx;
		box-sizing: border-box;
		padding: 10rpx 25rpx;

		.item {
			height: 110rpx;

			display: flex;
			justify-content: space-between;
			align-items: center;

			border-bottom: 1rpx solid #F3F8F7;

			.left {
				display: flex;
				align-items: center;

				.icon {
					width: 35rpx;
					height: 35rpx;
					text-align: center;
					line-height: 35rpx;
					border-radius: 50%;
					border: 1rpx solid #00A1E9;

					font-size: 24rpx;
					color: #00A1E9;
				}

				.text {
					margin-left: 18rpx;
					font-size: 30rpx;

				}
			}

			.right {}
		}

	}
</style>