GEKE_PHONE/pages/team/teams.vue

<template>
	<div>
	<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="🔍  搜索" style="text-align: center;" v-model="name" />
		</div>
		<br>
		<div style="height: 10px;width: 100%;background-color: #F1F1F1 ;"></div>
		<view class="cu-list menu radius" >
		  <view class="cu-item arrow animation-slide-bottom" v-for='(item,index) in data'>
		    <navigator class="content" @click="tmuser(item.id)" hover-class="none">
				<div style="margin-top: -10px;">
		     <span class="imgs">
		     	<image :src="item.avatar" class="imgs"></image>
		     </span>	
			 </div>
		     <div style="margin-top: -40px;">
				  <text style="margin-left: 40%;">{{item.realname}}</text>
			 </div>
			 <div style="margin-top: -25px;">
			 				  <text class="text-grey" style="margin-left: 70%;">{{item.post}}</text>
			 </div>
		   </navigator>
		  </view> 
					</view>
				
		<!-- <div style="background-color: #FFFFFF;">
			<div style="margin-left: 10px;">
			<ul>
				<li class="s" v-for='(item,index) in data' >
				<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;" @click="tmuser(item.id)">{{item.post}}</span>
					<span style="width: 10px;height: 10px;float: right;"></span>
					<span style="float: right;color: #0081FF;font-size: 15px;" v-if='item.count=="1"' @click="jump(item.id)">TA的团队</span> 
					</div>
				</div>
				<br>
				<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
				
				</li>
				
			</ul>
			</div>
		</div> -->
		
	</div>
	<div style="color:#A3A7B1;font-size: 15px;margin-left: 42%;">
		<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/departUser',
				 userUrls:'/sys/user/queryById',
			}
			},
			watch:{
				name:{
					handler(newVal, objVal) {
					 this.queryUserName(newVal);
			  },
				}
			},
			created(){
				this.queryUserName()
			},
			methods:{
				tmuser(item){
					/* this.$store.commit('SET_TEMUSERID',item); */
					/* this.$http.get(this.userUrls,{params:{id:item}}).then(res=>{
						console.log("res",res)
						 if (res.statusCode==200) {
							let perArr = res.data.data
					        let avatar=(perArr.avatar && perArr.avatar.length > 0)? api.getFileAccessHttpUrl(perArr.avatar):'/static/avatar_boy.png'
							
						this.$store.commit('SET_CHAT',{chatname:perArr.realname,chatid:perArr.id,chatimg:avatar});
						this.$Router.push({name:'userchat'})
						}
					}).catch(err => {
						console.log(err);
					}); */
					//this.$store.commit('SET_CHAT',{chatname:item.realname,chatid:item.id,chatimg:item.avatar});
					this.$store.commit('SET_TEMUSERID',item);
					this.$Router.push({name:'teamuser2'})
					//this.$Router.push({name:'userchat'})
				},
				jump(item){
					this.$store.commit('SET_TEAMUSERID',item);
					this.$Router.push({name:'teames'})
				},
				queryUserName(name){
					this.data=[];
					this.$http.get(this.userUrl,{params:{departId:this.$store.getters.departId,name:name}}).then(res=>{
						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',
							count:res.data[i].count
						}
					this.data.push(s)
						}
						 }
						 
						
					}).catch(err => {
						console.log(err);
					});
					},
					ret(){
						this.$Router.push({name:'orgz'})
					}
					
				},
				
			}
			
	
	
	
</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>