jp-railway/pages/oawork/addressbook.vue

<template>
	<view>
		<u-navbar title="通讯录"></u-navbar>
		<view class="navbartitle" v-if="0" >
			<view  class="navbartitle-left"  >
			<u-icon name="arrow-left" v-if="historyIndex!=0" color="#FFF"></u-icon>
			</view>
			<view class="navbartitle-name">
				{{title}}
				<span  v-show="getCompanyListReady">
					{{!list.length?'   ('+userList.length+'人)':''}}
				</span>
				
			</view>
			
		</view>
		<view class="main" v-show="getCompanyListReady">
			
		<scroll-view  scroll-y="true" v-show="list.length" :scroll-top="scrollTop1"
		 :style="('width: 45%;')+'height:'+ screenHeight+'px;'"
		 class="scroll-Y1">
				
		<view class="news">
			
			<view class="news-item"  :class="{
				'news-item-index':key=='置顶'
			}"
			
				@click="userList=toplist,key='置顶'" >
				<view class="content1">
					<view class="news-title">
						置顶
						
					</view>
					<view>
						<!-- {{item.userList.length}}人 -->
						<u-icon name="arrow-right" color="#B3B3B3"></u-icon>
						
					</view>
					
				</view>
				
			</view>
			
			<view class="news-item" v-for="(item,i) in list" 
			
				@click="ckInfo(item)"  :class="{
					'news-item-index':key==item.label
				}"
				 
				 v-show="item.label.indexOf('测试')==-1" :key="i">
				<view class="content1">
					<view class="news-title">
						{{item.label}}
						
					</view>
					<view>
						<!-- {{item.userList.length}}人 -->
						<u-icon name="arrow-right" color="#B3B3B3"></u-icon>
						
					</view>
					
				</view>
				
			</view>
			<u-divider
			border-color="#CFD2D5">已经到底了</u-divider>
		   </view>
		   </scroll-view>
		   <u-modal v-model="show" @confirm="confirmPhone" confirm-text="拨打电话" confirm-color="#606266" :show-cancel-button="true" ref="uModal"
		   		:asyncClose="true" :title="phoneInfo.name" :content="phoneInfo.phone" :content-style="{fontSize: '24px',color: '#101010'}"></u-modal>
		   	
		   <scroll-view  scroll-y="true" v-if="userList.length" :scroll-top="scrollTop2"
		   :style="('width: 55%;')+'height:'+ screenHeight+'px'"
		    class="scroll-Y2" 
		   			>
		  
		   <view class="userList" >
			   <u-divider margin-top="10"
			   border-color="#CFD2D5">点击可拨打电话 </u-divider>
						 
				<view class="news-item" v-for="(item,i) in userList" 
				
					 :key="i">
					<view class="content2"  @click="phoneInfoCk(item)">
						<view class="news-title1">
							
							{{item.name}}
						</view>
						<view class="news-title2">
							<!-- <u-icon name="phone"></u-icon> -->
							{{item.phone?item.phone:'无'}}
						</view>
					</view>
					
				</view>
		      </view>
			 
			
			  <u-divider  
			  border-color="#CFD2D5">已经到底了 </u-divider>
			   </scroll-view>
	</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/addressbook.js'
	
	export default {
		data() {
			return {
				title:"列表",
				list:[],
				userList:[],
				listForm:{
					pageIndex:1,
					typeId:"",
					title:"",
					pageSize:20,
				},
				recordsTotal:0,
				imgurl:'',
				parentId:"",
				oldparentId:"",
				historyList:[],
				historyIndex:0,
				phoneInfo:{},
				toplist:[],
				show:false,
				screenHeight:0,
				scrollTop1: 0 ,
				scrollTop2: 0 ,
				getCompanyListReady:false,
				key:"置顶"
			}
		},
		onLoad(op){
			if(op.title){
				this.title=op.title
			}
			this.listForm.typeId=op.id
			var _this=this
			uni.getSystemInfo({
				success: function (res) {
					var k=uni.upx2px((44+42+10)*2)
					_this.screenHeight=res.windowHeight-k
				console.log(res.windowHeight,k,_this.screenHeight)
				}
			});
			
			this.getCompanyList()
			this.dataList()
			//this.getList()
		},
		onReachBottom() {
			if (this.list.length < this.recordsTotal) {			
				this.myLoadmore();
			}
		},
		methods: {
			dataList(){
				API.dataList("通讯录置顶人员").then((res) => {
					this.toplist=res.data.map(item=>{
						return {
							phone:item.value,
							name:item.name,
						}
					})
					this.userList=this.toplist
				})
			},
			phoneInfoCk(item){
				if(item.phone){
					this.phoneInfo=item
					this.show=true
				}else{
					uni.showToast({
						title: "当前人员未录入电话号码",
						icon: "none"
					})
				}
				
			},
			confirmPhone(){
				
				
				this.show = false;
				uni.makePhoneCall({
					phoneNumber:this.content //仅为示例
				});
			},
			
			ckInfo(item){
				
				// this.scrollTop1=0
				// this.scrollTop2=0
				this.key=item.label
				this.query(item)
			},
			query(item){
				this.userList =[]
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.userList({
					orgId:item.value
				}).then((res) => {
					uni.hideLoading();
					
					this.userList = res.data;
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			myLoadmore(){
				this.listForm.pageIndex += 1;
				this.getList();
			},
			getCompanyList(){
				this.getCompanyListReady=false
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.bookList({
					parentId:this.parentId
				}).then((res) => {
					uni.hideLoading();
					this.getCompanyListReady=true
					//this.oldparentId=this.parentId;
					// if(this.parentId==''){
					// 	this.parentId=res.data[0].value
					// 	this.title = res.data[0].label;
					// 	this.historyList.push(res.data[0])
					// 	this.getCompanyList()
					// }else{
					
					// }
						this.list = res.data;
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		 display: flex;
	}
	.navbartitle{
		margin-top: 40rpx;
		background-color: #3179f6;
		    display: flex;
		    justify-content: space-between;
			    align-items: center;
			.navbartitle-left{
				padding:20rpx;
				width: 10%;
			}
			.navbartitle-name{
				padding:20rpx;
				width: 90%;
				color: #fff;
				font-size: 32rpx;
				
			}
			
	}
	.scroll-Y1{
		border-right: 1px dashed #B3B3B3;
	}
	.news,.userList{
		.news-item{
			padding:25rpx 20rpx 25rpx 25rpx;
			margin: 20rpx 15rpx 20rpx 20rpx;
			background: #fff;
			border-radius: 10px;
			font-size:32rpx ;
			.content1{
				    display: flex;
				    justify-content: space-between;
			}
			.content2{
				    padding: 4rpx;
				.news-title1{
					font-size: 36rpx;
					font-weight: bold;
				}
			}
		}
		.news-item-index{
			color: #3179f6;
			font-weight: bold;
		}
	}
	
	
	
</style>