jp-railway/pages/oawork/addressbook.vue

<template>
	<view>
		<u-navbar title="通讯录"></u-navbar>
		<view class="navbartitle" >
			<view  class="navbartitle-left" @click="backCkInfo()" >
			<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="(userList.length?'width: 40%;':'')+'height:'+ screenHeight+'px;'"
		 class="scroll-Y1">
				
		<view class="news">
			
			<view class="news-item" v-for="(item,i) in list" 
			
				@click="ckInfo(item)" v-show="item.label.indexOf('测试')==-1" :key="i">
				<view class="content">
					<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-show="userList.length" :scroll-top="scrollTop2"
		   :style="(list.length?'width: 60%;':'')+'height:'+ screenHeight+'px'"
		    class="scroll-Y2" 
		   			>
		  
		   <view class="userList" v-show="userList.length">
		   
				<view class="news-item" v-for="(item,i) in userList" 
				
					 :key="i">
					<view class="content"  @click="phoneInfoCk(item)">
						<view class="news-title">
							
							{{item.name}}
						</view>
						<view class="news-title">
							<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:{},
				show:false,
				screenHeight:0,
				scrollTop1: 0 ,
				scrollTop2: 0 ,
				getCompanyListReady:false,
			}
		},
		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.getList()
		},
		onReachBottom() {
			if (this.list.length < this.recordsTotal) {			
				this.myLoadmore();
			}
		},
		methods: {
			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 //仅为示例
				});
			},
			backCkInfo(){
				if(this.historyIndex!=0){
					this.historyIndex--
					var item=this.historyList[this.historyIndex]
					this.historyList.pop();
					
					this.query(item)
					this.scrollTop1=10
					this.scrollTop2=10
				}
				
			},
			ckInfo(item){
				this.historyIndex++;
				this.historyList.push(item)
				this.scrollTop1=10
				this.scrollTop2=10
				this.query(item)
			},
			query(item){
				
				this.parentId=item.value
				this.title=item.label
				this.userList=item.userList;
				
				this.getCompanyList()
			},
			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 solid #B3B3B3;
	}
	.news,.userList{
		.news-item{
			padding:30rpx;
			margin: 20rpx;
			background: #fff;
			border-radius: 10px;
			.content{
				    display: flex;
				    justify-content: space-between;
			}
		}
	}
	
	
	
</style>