yichael_proadvanced/pages/friend-page/search/search.vue

<template>
	<view>
		<uni-nav-bar  id="nav-bar" status-bar="true" backgroundColor="#FFF"
			@clickLeft="onBack()" @clickRight="onSearch()"  fixed="true" :border="false">
			<view slot="left" >
				<view class="flex align-center " style="margin-left: 20rpx;">
					<image class="p-left-arrow" src="/static/p-left-arrow.png"></image>
				</view>
			</view>
			<view slot='middle'  style=" margin-left: -65rpx; flex: 1.5;">
				<view class="cu-bar ">
					<view class="search-form round" style="margin: 0 10rpx;">
						<text class="cuIcon-search"></text>
						<input @input="onKeyInput" :adjust-position="false" type="text"
							placeholder="输入名字,搜索好友" confirm-type="search"></input>
					</view>
				</view>
				
			</view>
			<!-- @clickRight="onNavFcGame()" -->
			<view slot="right" >
				<view style="position: relative; border: 1rpx solid #FFFFFF;">
				<view class="text-16px make-text-bPurple" style="line-height: 32rpx;">搜索</view>
				</view>
			</view>
		</uni-nav-bar>
	<!-- 	<view class="cu-bar search bg-white">
			<view class=" flex align-center margin-left" @click="onBack()">
				<image class="p-left-arrow" src="/static/p-left-arrow.png"></image>
			</view>
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input @input="onKeyInput" @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text"
					placeholder="输入名字,搜索好友" confirm-type="search"></input>
			</view>
			<view class="action">
				<view class="text-16px make-text-bPurple" style="line-height: 32rpx;" @click="onSearch()">搜索</view>
			</view>
		</view> -->

		<view class="cu-list menu-avatar ">
			<view class="cu-item card-view" style="height: 180rpx;" v-for="(item, index) in friends" :key="index">
				<view class="cu-avatar round lg"
				:style="[{ backgroundImage:'url('+item.avatarUrl+')' }]">
					<view class="cu-tag badge-bottom" >
						<image v-if="item.gender == 0" style="height: 32rpx;width: 32rpx;" src="../../../static/friend/boy.png"></image>
						<image v-if="item.gender == 1" style="height: 32rpx;width: 32rpx;" src="../../../static/friend/girl.png"></image>
					</view>
				</view>
				<view class="content" style="width: 360rpx;">
					<view class="text-grey">{{item.username}}</view>
					<view class="text-gray text-sm flex">
						<view class="text-cut">
							<text class="cuIcon-infofill text-red  margin-right-xs"></text>
							{{item.signature}}
						</view>

					</view>
					<!-- <view class="text-gray text-sm flex">
						<view class="text-cut">
							<text class="cuIcon-infofill text-red  margin-right-xs"></text>
							我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
						</view>

					</view> -->
				</view>
				<view class="action" style="width: 160rpx; ">
					<button v-if="!item.isFriend" class="cu-btn round make-lines-bPurple"
						style="width: 146rpx; right: 30rpx;" @click="onAddFriend(item)">
						添加</button>
					<button v-else class="cu-btn round bg-grey" style="width: 146rpx; right: 30rpx;">
						已关注</button>
				</view>
			</view>

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

<script>
	import config from '../../../common/config.js';
	import reqUtil from '../../../util/util-js/requstUtil.js';

	export default {
		data() {
			return {
				friends: [],
				inputValue:''
			}
		},
		methods: {
			onBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			onKeyInput: function(event) {
				this.inputValue = event.target.value
			},
			onSearch() {
				if(this.inputValue.length < 1){
					uni.showToast({
						title:'请输入名字',
						duration:1000,
						icon:'none',
						mask:true
					})
					return;
				}
				reqUtil.requestData(config.URL.SEARCHFIRENDLIST, {
					username: this.inputValue
				}).then(
					res => {
						console.log(JSON.stringify(res));
						this.friends = res.data.friends;

					},
					e => {
						console.log(e);
					}
				);
			},
			onAddFriend(data) {
				uni.showToast({
					title: '添加中..',
					duration: 1000,
					icon: 'loading',
					mask: true
				})
				reqUtil.requestData(config.URL.ADDFIRENDINFO, {
					friendId: data.friendId
				}).then(
					res => {
						console.log(JSON.stringify(res));
						// this.friends = res.data.friends;
						if (0 === res.code) {
							data.isFriend = true;
							uni.showToast({
								title: '添加成功',
								duration: 1000,
								mask: true
							})
						}
					},
					e => {
						console.log(e);
					}
				);
			}
		}
	}
</script>

<style>

</style>