crk-uni-app/pages/maintain/member.vue

<template>
	<!-- 维护人员 -->
	<view class="member">
		<u-sticky zIndex="3">
			<view class="head">
				<u-search placeholder="请输入姓名或手机号" v-model="keyword" @search="getList" @custom="getList"></u-search>
			</view>
		</u-sticky>
		<view class="main" v-for="(item, index) in memberList" :key="index" >
				<view class="u-img">
					<img :src="item.avatar" ></img>
				</view>
				
				<!-- <u--image :src="item.avatar" radius="5" :lazy-load="true" width="80" height="80"></u--image> -->
				<view class="content">
					<view class="c-name">
						<u-text :text="item.nickName"></u-text> 
					</view>
					<view class="c-addtime">
						<u-text :text="item.phonenumber"></u-text>  
					</view>
					<view class="c-status">
						<u-text :text="item.deptName"></u-text>  
					</view>
				</view>
				<u-icon name="phone" size="30" @click="freeTell(item.phonenumber)"></u-icon>
			</view>
			<view class="btn" v-if="userinfo.roleId == 1">
				<u-button type="primary" class="submit" @click="add" text="新 增"></u-button>
			</view>
		<u-divider text="没有更多数据了"></u-divider>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				// 搜索内容
				search: '',
				type: true,
				color: 'hsl(200, 88%, 55%)',
				
				memberList: [],
				keyword:'',
				userinfo: null
			}
		},
		
		onShow: function(options) {
			this.getList()
			this.userinfo = uni.getStorageSync('userinfo');
		},
		
		onPullDownRefresh(){
			this.getList();
			// this.stopPullDownRefresh()
		},
		methods: {
			async getList() {
				const { data:res } = await this.$http('/userList',{'keyword':this.keyword})
				if(res.code) return
				this.memberList = res.data
				for (var i = 0; i < this.memberList.length; i++) {
					if(this.memberList[i].avatar){
						this.memberList[i].avatar = this.API_URL + this.memberList[i].avatar;
					}else{
						this.memberList[i].avatar="../../static/avatar.png"
					}
				}
			},
			
			async searchMember() {
				const { data:res } = await this.$http('app/employeeList', this.type? { name: this.search }: { phone: this.search })
				if(res.code) return
				this.memberList = res.data
			},
			freeTell(tel) {
				wx.makePhoneCall({
					phoneNumber: tel, //仅为示例，并非真实的电话号码
					success: function() {
						console.log("拨打电话成功！")
					},
					fail: function() {
						console.log("拨打电话失败！")
					}
				})
			},
			add() {
				wx.navigateTo({
					url:'add',    
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.member {
		background: #f6f6f6;
		// padding: 2.667vw 0;
		height: 100vh;
		
		.btn{
			padding: 2.667vw;
			.u-button{
				margin-bottom: 1vh;
			}
			.u-form{
				margin-bottom: 1vh;
			}
		}
		.head {
			background: #fff;
			padding: 2.667vw;
			
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			input {
				padding: 1vw;
				border-radius: 1vw;
			}
		}
		// 展示信息
		.main {
			background: #ffffff;
			margin: 2.667vw 0;
			display: flex;
			justify-content: space-around;
			padding: 2vh 0;
			.u-image{
				float: left;
			}
			.content{
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-around;
				display: flex;
				width: 55vw;
				.c-status{
					display: flex;
				}
			}
			
			.u-img{
				height: 80px;
				width: 80px;
				position: relative;
				img{
					height: 60px;
					width: 60px;
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					margin: auto;
				}
			}
		}
	}
</style>