GEKE_PHONE/pages/team/teames.vue

<template>
	<div style="background-color: #FFFFFF;">
		<!-- <div class="top" @click="ret()">
			<div style="width: 10%;height: 5px;"></div>
			<div style="margin-left: 10px;">
			<span style="float: left;width: 20px;height: 20px;">
				<image src="../../static/icon/fanhui3.png" style="width: 18px;height: 18px;"></image>
			</span>	
			<div style="margin-top: 5px;">
			<span style="color: #FFFFFF;">返回</span>
			</div>
			</div>
			<div style="text-align: center;margin-top: -22px;">
			<span style="color: #FFFFFF;">团队信息</span>
			</div>
		</div> -->
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">团队信息</block>
		</cu-custom>
		<div class="ins">
			<div style="height: 3px;"></div>
			 <input  :placeholder='ico' style="text-align: center;" v-model="name" />
		</div>
		<br>
		<div style="height: 10px;width: 100%;background-color: #F1F1F1 ;"></div>
		
		<div style="background-color: #FFFFFF;">
			<div style="margin-left: 10px;">
			<ul>
				<li class="s" v-for='(item,index) in data' @click="jump(item.id)">
				<br>
				<span class="imgs">
					<image :src="item.avatar" class="imgs"></image>
				</span>	
				<div style="margin-left: 50px;margin-top: -40px;">
					<div>
						<h3>{{item.realname}}</h3>
					</div>
					<div style="margin-top: -27px;margin-left: 80px;">
					<span style="margin-left: 50px;color: #A3A7B1;font-size: 15px;" >{{item.post}}</span> 
					</div>
				</div>
				<br>
				<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
				
				</li>
				
			</ul>
			</div>
		</div>
		<br>
		<div style="color:#A3A7B1;font-size: 15px;margin-left: 47%;">
			<span>共</span>
			<span style="margin-left: 10px;">{{data.length}}</span>
			<span style="margin-left: 10px;">人</span>
		</div>
		
	</div>
</template>

<script>
	import api from '@/api/api'
	export default {
		data() {
			return {
				data:[],
				name:'',
				userUrl:'/sys/user/queryTeamUser',
				ico:'🔍  搜索'
			}
			},
			watch:{
				name:{
					handler(newVal, objVal) {
					 this.queryUserName(newVal);
			  },
				}
			},
			created(){
				this.queryUserName()
			},
			methods:{
				jump(item){
					this.$store.commit('SET_TEMUSERID',item);
					this.$Router.push({name:'teamuser'})
				},
				queryUserName(name){
					this.data=[];
					this.$http.get(this.userUrl,{params:{userId:this.$store.getters.teamUserId,name:name}}).then(res=>{
						/* this.data=res.data; */
							 if(res.data.length>0){
								 
						 for(var i=0;i<res.data.length;i++){
							 var s={
								 id:res.data[i].id,
								 realname:res.data[i].realname,
								 post:res.data[i].post,
								 avatar:(res.data[i].avatar && res.data[i].avatar.length > 0)? api.getFileAccessHttpUrl(res.data[i].avatar):'/static/avatar_boy.png'
							 }
							this.data.push(s)
						 }
						  } 
						  console.log(this.data)
						
					}).catch(err => {
						console.log(err);
					});
					},
					ret(){
						this.$Router.push({name:'teams'})
					}
					
				},
				
			}
			
	
	
	
</script>

<style>
	.ins{
		background-color:  #F1F1F1;
		width: 90%;
		height: 30px;
		margin:0 auto;
		border-radius:5px 5px 5px 5px; 
		margin-top: 15px;
		
	}
	.s{
		list-style-type:none;
		margin-left: -40px;
	}
	
	.imgs{
		width: 40px;
		height: 40px;
		border-radius:5px 5px 5px 5px; 
		
	}
	.top{
		  background-color: #5677AC;
		  width: 100%;
		  height: 40px;
		 
	}
	
	
	
</style>