<template>
	<view class="container">
		<image src="../../static/beijing.png" class="background"></image>
		<view>
			<!-- 客户明细 -->
			<view class="customerDetails">
				<view class="customerDetails-1" style="border-right: 1px solid #eeca90;">
					<text>头像</text>
				</view>
				<!-- <text class="name"></text> -->
				<view class="customerDetails-1" style="border-right: 1px solid #eeca90;">
					<text>姓名</text>
				</view>
				<view class="customerDetails-1" style="border-right: 1px solid #eeca90;">
					<text>ID编号</text>
				</view>
				<view class="customerDetails-1">
					<text>手机号</text>
				</view>
			</view>
			<!-- item.phone.substr(0, 3) + '****' + item.phone.substr(7) -->
			<!-- 详细资料 -->
			<view class="button">
				<view class="details" v-for="(item,index) in list" :key="index">
					<view class="" style="margin-top: 10px;text-align: left;">
						<image :src="item.beijintupian" style="width: 30px;height: 30px;"></image>
					</view>
					<view class="">
						{{item.username}}
					</view>
					<view class="">
						{{item.id}}
					</view>
					<view class="telephoneNumber">
						<view class="greaterThanSign">
							{{item.phone}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					"ParentUserId": 0,
					"KeyWord": "",
					"TotalCount": 0,
					"PageIndex": 1,
					"PageSize": 20,
					"Sort": [{
						"Field": "",
						"Type": 0
					}]
				},
				list:[]
			}
		},
		onLoad() {
			this.ShowUserList()
		},
		methods: {
			ShowUserList() {
				let jsonstorage=uni.getStorageSync('userinfo').data
				this.form.ParentUserId=jsonstorage.id
				this.API.GetUserList(this.form).then(res => {
					console.log('数据', res)
					if(res.data.data.total==0){
						uni.showToast({
							title:'暂无数据',
							icon:'none'
						})
						return
					}else{
						res.data.data.rows.forEach((item,index)=>{
							item.phone=item.phone.substr(0, 3) + '****' + item.phone.substr(7)
						})
						this.list=res.data.data.rows
					}
					console.log('数据',this.list)
				})
			}
		},
	}
</script>

<style>
	/* 背景图片 */
	.background {
		width: 100%;
		height: 100%;
		position: fixed;
		/* border-radius:50% 50% 0 0 ; */
		background-size: 100% 100%;
		z-index: -1;
	}

	.customerDetails {
		width: 100%;
		height: 76rpx;
		/* font-size: 25rpx; */
		background-color: #292929;
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: #FFFFFF;
		/* background-color: #008000; */
	}

	.customerDetails-1 {
		/* background-color: #007AFF; */
		width: 50%;
		height: 40rpx;
		line-height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		/* text-align: center; */
	}

	.customerDetails-1 text {
		font-size: 30rpx;
	}

	.name {
		/* border: #007AFF solid 2rpx; */
		height: 50rpx;
	}

	/* 详细资 */
	.button {
		width: 100%;
		height: 100%;
		margin: 22rpx auto;
	}

	.details {
		width: 680rpx;
		height: 70rpx;
		border-radius: 35rpx;
		font-size: 25rpx;
		background-color: #181818;
		color: #e4e4e4;
		line-height: 70rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 16rpx auto;
	}

	/* 电话号码 */
	.telephoneNumber {
		display: flex;
		justify-content: flex-end;
		/* background-color: #007AFF; */
	}

	/* 箭头 */
	.greaterThanSign::after {
		content: "";
		display: inline-block;
		width: 18rpx;
		height: 28rpx;
		/* background-color: #007AFF; */
		background: url(../../static/dayu.png);
		background-size: 100%;
		position: relative;
		left: 40rpx;
		top: 3rpx;
	}
</style>
