<template>
	<view>
		<image src="../../static/beijing.png" class="background" mode=""></image>
		<view class="">
			<!-- 客户明细 -->
			<view class="customerDetails">
				<view class="customerDetails-1" style="border-right: 1px solid #eeca90;">
					<text>姓名</text>
				</view>
				<!-- <text class="name"></text> -->
				<view class="customerDetails-1">
					<text>电话</text>
				</view>
			</view>
			<!-- 详细资料 -->
			<view class="button">
				<view class="details"  v-for="(item,index) in SsionerList" :key="index" @click="RedirectDetail(item)">
					<view class="">
						{{item.username}}
					</view>
					<view class="telephoneNumber">
						<view class="greaterThanSign">
							{{item.phone}}
						</view>
					</view>
				</view>
				

			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				model:{
					UserId:0
				},
				SsionerList:[]
			}
		},
		onLoad() {
			this.ShowCommissionerByManage()
		},
		methods: {
			RedirectDetail(item){
				uni.navigateTo({
					url:'./commissionerdetail/commissionerdetail?usermodel='+encodeURIComponent(JSON.stringify(item))
				})
			},
			ShowCommissionerByManage(){
				let jsonstorage=uni.getStorageSync('userinfo').data
				this.model.UserId=jsonstorage.id
				this.API.GetCommissionerByManage(this.model).then(res=>{
					console.log('销售专员',res)
					res.data.data.forEach((item,index)=>{
						item.phone=item.phone.substr(0, 3) + '****' + item.phone.substr(7)
					})
					this.SsionerList=res.data.data
					if(this.SsionerList.length<1){
						uni.showToast({
							title:'暂无数据',
							icon:'none'
						})
					}
				})
			}
		}
	}
</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: 50rpx;
		top: 3rpx;
	}
</style>
