jp-youdian-Inspection/pages/team/teamList.vue

<template>
	<view>
		<u-navbar title="团队成员" title-color="#101010" ></u-navbar>
		<view class="top">
			<view class="search">
				<view class="searchBox">
					<u-search shape="square" placeholder="搜索授权用户" maxlength="12" v-model="testName" :show-action="false"
						:animation="true"></u-search>
					<u-button type="primary" size="mini" @click="testBtn">搜素</u-button>
				</view>
			</view>
		</view>
		
		<view class="bodyMain">
			
		
		<view class="list"  >
			<view class="item" 
			 v-for="(item,index) in list" 
			 v-show="showqueryName(item) "
			 @click="gotoUrl('/pages/team/teamInfo?id='+item.id)"
			 :key="index">
				
				<view class="icon">
					
					<image class="img" v-if="item.image" :src="item.image" mode=""></image>
					
					<image class="img" v-else src="@/assets/img/默认头像.png" mode=""></image>
				</view>
				
				<view class="body">
					<view class="line1">
						<view class="title">
							{{item.name}} 
							
							<span class="tag"  v-for="(o,ind) in  item.roleList"
							 :class="'role'+o.role">{{o.roleName}}</span> 
		
						</view>
						
					</view>
					
					<view class="line2">
						<view class="value">
							
							{{item.phone}}
							
						</view>
					
					</view>
					
		
				</view>
				<view class="openId":class="{
					openIdOk:item.openId
				}">
					{{item.openId?'已登录':'未登录'}}
					<u-icon name="arrow-right" size="24" color="#BBBBBB" ></u-icon>
					
				</view>
			</view>
			
			
		</view>
		<u-divider :isnone="list.length==0" nonetext="没有找到相关内容" border-color="#CFD2D5">已经到底了</u-divider>
		</view>
		<view class="floating-button">
			<view class="button"  @click="gotoUrl('/pages/team/teamAdd')" >
				
				<image class="img"  src="@/assets/img/team/index0.svg" mode=""></image>
				
				添加人员
			</view>
			
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/pagesTeam.js'
	
	export default {
		data() {
			return {
				list:[],
				listForm:{
					pageIndex: 1,
					pageSize: 99,
					recordsTotal: 1,
					status:0,
					roleName:"XJ,XJADMIN",
					
					roleName:"XJ",
				},
				testName: "",
				queryName: "",
				
				lockId:"",
				lockName:"",
				current:0,
				tabslist:[
					{
						name: '待处理'
					}, {
						name: '已处理'
					}
				]
			};
		},
		onLoad(op) {
			
			
		},
		onShow(){
			this.getList()
		},
		methods: {
			showqueryName(item){
				if(this.queryName){
					var name=item.name
					return name.indexOf(this.queryName)!=-1
					
				}else{
					return true
				}
			},
			roleNamesShow(str){
				var sz=str.split(",")
				var rsz=[]
				sz.forEach(item=>{
					if(item.indexOf('巡检')!=-1){
						rsz.push(item)
					}
					
				})
				return rsz.join(',')
			},
			submit(){
					
			},
			testBtn() {
			
				this.queryName = this.testName
				
			},
			getList(bl) {
				if(bl){
					this.listForm.pageIndex = 1
				}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
					 
				API.teamMembers(this.listForm).then((res) => {
					
				
					var list = res.data.memberList
					
					// list=list.sort((item1,item2)=>{
					// 	if(item1.role<item2.role){
					// 		return -1
					// 	}else {
					// 		return 1
					// 	}
						
					// })
					list.forEach(item=>{
						item.roleList=[]
						if(item.role&&item.roleName){
							var szA=item.role.split(',')
							var szB=item.roleName.split(',')
							for(var i in szA){
								var key1=szA[i]
								var key2=szB[i]
								item.roleList.push({
									role:key1,
									roleName:key2
								})
							}
						}
						
						
					})
					
					this.list= list
					uni.hideLoading();
				
				}).catch(error => {
				
					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
		
	}
</script>

<style lang="scss" scoped>
	.bodyMain{
		padding-bottom: 120rpx;
	}
		.list {
			padding: 0rpx 32rpx;
background-color: rgba(255,255,255,1);
			.item {
				display: flex;
				border-bottom: 2rpx solid rgba(232, 232, 232, 1);
				padding: 12rpx 0;
				margin: 12rpx 0;
				.icon{
						    display: flex;
						    align-items: center;
							margin-right: 8rpx;
					}
				.img {
					width: 72rpx;
					height: 72rpx;

				}
				.openId{
					    display: flex;
					    white-space: pre;
					    align-items: center;
						color: red;
				}
				.openIdOk{
					color:  #19be6b;
				}
				.body {
					margin: 0 12rpx;
					width: 100%;
					
					.line1,
					.line2 {

						display: flex;
						justify-content: space-between;
					}
					.line2 {
						color: rgba(119,119,119,1);
						font-size: 24rpx;
						margin-top: 8rpx;
					}
					.line1 {
						.title {
							color: rgba(51, 51, 51, 1);
							font-size: 32rpx;
							font-weight: bold;
						}

						.status {
							background-color:  rgba(255, 61, 0, 1);
							font-size: 24rpx;
							color:#fff;
							padding: 2rpx 8rpx;
							//border-radius: 8rpx;

						}
						
						.status0 {
							background-color:  rgba(255, 61, 0, 1);
							
						}
						.status1 {
							background-color:  #007aff;
							
						}

						.status2 {
							background-color:  #ff9900;
							
						}

						.status3 {
							background-color:  #19be6b;
							
						}

						.status4 {
							border: 2rpx solid rgba(255, 61, 0, 1);
							color: rgba(255, 61, 0, 1);
						}
					}
					
					.errorDesc{
						margin: 8rpx 0;
						 width: 480rpx;
						     color: #777777;
						     font-size: 24rpx;
						 overflow: hidden;
						    text-overflow: ellipsis;
						    white-space: nowrap; /* 禁止换行，强制单行 */
					}
				}
			}

			.item:last-child {
			  border-bottom:0px solid rgba(232,232,232,1);
			}
		}
		
		.top{
			
			border-bottom: 2rpx solid #e8e8e8;
				
		}
		
		.search {
		
			padding: 16rpx 32rpx;
			background: #fff;
			   
		
			.searchBox {
				display: flex;
				align-items: center;
				background: #F2F2F2;
				padding: 2rpx 16rpx;
				border-radius: 16rpx;
				justify-content: space-between;
			}
		}
		
		
		.floating-button {
			z-index: 999;
			position: fixed; 
			  bottom: 0;   
			    width: 100%;
				 display: flex;
				  height: 120rpx;
				    justify-content: center;
				background-color: rgba(255,255,255,1);
				.button{
					margin-top: 24rpx;
					border-radius: 50px;
				 height: 80rpx;
					width: 80%;
					display: flex;
					    align-items: center;
					    justify-content: center;
						padding:12rpx;
						
						background-color: rgba(22,119,255,1);
						color: rgba(255,255,255,1);
						font-size: 36rpx;
				}
				.img{
					width: 40rpx;
					height: 40rpx;
					margin-right: 8rpx;
				}
		}
		.tag{
			border-radius: 2pt;
			background-color: #8bc34a;
			color: rgba(255,255,255,1);
			font-size: 24rpx;
			line-height: 24rpx;
			padding:2rpx 8rpx;
			margin-left: 8rpx;

		}
		.role0{
			background-color: #FFC107;
		}
		.role1{
			background-color: rgba(22,119,255,1);
		}
		.role2{
			background-color: #19be6b;
		}
		
		.role3{
			background-color: #9E9E9E;
		}
		.role4{
			background-color: #9C27B0;
		}
		.role5{
			background-color: #8BC34A;
		}
</style>