dou_fire/pages/work/available.vue

<template>
	<view class="content">
		<view class="header-search">
			<input type="text"  placeholder="输入用户名或手机号码搜索" v-model="searchValue" maxlength="11">
			<button size="mini" @click="onSearch">搜索</button>
		</view>
		<!-- 下级列表 -->
		<view class="available-user" v-if="searchValue.length <= 0">
			<block v-if="users.length > 0">
				<view class="user-item border-solid" v-for="(item, index) in users" :key="index" @click="onItem(item)">
					<image class="cover" :src="item.avatar" mode="aspectFill"></image>
					<view class="text">
						<view class="nickname nowrap">{{item.nickname}}</view>
						<view class="no nowrap">{{item.username}}</view>
					</view>
					<view class="icon">
						<u-icon class="icon-u" name="arrow-right" color="#ddd" size="20"></u-icon>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="search-null">
					<u-empty
						mode="list"
						icon="http://cdn.uviewui.com/uview/empty/list.png"
						text="暂无下级用户"
					>
					</u-empty>
				</view>
			</block>
		</view>
		<!-- 搜索结果 -->
		<view class="available-user" v-else>
			<block v-if="searchResults.length > 0">
				<view class="user-item border-solid" v-for="(item, index) in searchResults" :key="index" @click="onItem(item)">
					<image class="cover" :src="item.avatar" mode="aspectFill"></image>
					<view class="text">
						<view class="nickname nowrap">{{item.nickname}}</view>
						<view class="no nowrap">{{item.username}}</view>
					</view>
					<view class="icon">
						<u-icon class="icon-u" name="arrow-right" color="#ddd" size="20"></u-icon>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="search-null">
					<u-empty
						mode="search"
						icon="http://cdn.uviewui.com/uview/empty/search.png"
						:text="searchText"
					>
					</u-empty>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import { availableUser } from '@/apis/interfaces/business.js'
	import { relations } from '@/apis/interfaces/user.js'
	export default {
		data() {
			return {
				isSearch		: false,
				users			: [],
				pages			: {},
				searchValue		: '',
				searchResults	: [],
				searchText		: '输入姓名或姓名搜索'
			};
		},
		created() {
			this.getUsers()
		},
		// 监听搜索值变化重置搜索这状态
		methods: {
			// 我的伙伴
			getUsers(){
				uni.showLoading({
					title: '加载中...',
					mask : true
				})
				relations().then(res => {
					let { users } = res;
					this.users = users.data
					this.pages = users.page
					uni.hideLoading()
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 搜索用户
			onSearch(){
				if(this.searchValue == ''){
					uni.showToast({
						title: '请输入搜索关键字',
						icon : 'none'
					})
					return
				}
				let isNumber = new RegExp("[0-9]+");
				// 搜索信息
				uni.showLoading({
					title: '搜索中...',
					mask : true
				})
				availableUser(isNumber.test(this.searchValue) ? 'mobile': 'name', this.searchValue).then(res => {
					this.searchResults = res
					this.isSearch = true
				}).catch(err => {
					this.searchText = err.message
				}).finally(() => {
					uni.hideLoading()
				})
			},
			// 选择用户
			onItem(userInfo){
				this.$store.commit('setUser', userInfo)
				this.$Router.back()
			}
		}
	}
</script>

<style lang="scss">
	// 搜索结果为空
	.search-null{
		height: 70vh;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	// 搜索用户
	.available-user{
		padding-top: 130rpx;
		.user-item{
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: white;

			.cover{
				width: 88rpx;
				height: 88rpx;
				border-radius: $radius;
			}
			.text{
				width: calc(100% - 168rpx);
				padding-left: 30rpx;
				box-sizing: border-box;
				.nickname{
					line-height: 40rpx;
					font-size: 32rpx;
					color: #333;
				}
				.no{
					line-height: 40rpx;
					color: gray;
					font-size: 28rpx;
				}
			}
			.icon{
				width: 80rpx;
				text-align: right;
				.icon-u{
					display: inline-block;
				}
			}
		}
	}
	// header
	.header-search{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		padding: 20rpx 30rpx;
		background: white;
		display: flex;
		input{
			background: #f8f8f8;
			height: 70rpx;
			line-height: 70rpx;
			border-radius: $radius-lg;
			padding: 0 30rpx;
			box-sizing: border-box;
			width: calc(100% - 170rpx);
			font-size: 30rpx;
			margin-right: 30rpx;
		}
		button[size="mini"]{
			width: 140rpx;
			height: 70rpx;
			line-height: 70rpx;
			padding: 0;
			background: $main-color;
			color: white;
			font-size: 30rpx;
			font-weight: normal;
			
		}
	}
</style>