|
|
@@ -1,22 +1,244 @@
|
|
|
<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}}
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="main">
|
|
|
+
|
|
|
+ <scroll-view scroll-y="true" v-show="list.length"
|
|
|
+ :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"
|
|
|
+ :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,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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();
|
|
|
+ console.log(this.historyList)
|
|
|
+ this.query(item)
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ ckInfo(item){
|
|
|
+ this.historyIndex++;
|
|
|
+ this.historyList.push(item)
|
|
|
+ this.query(item)
|
|
|
+ },
|
|
|
+ query(item){
|
|
|
+ console.log(item)
|
|
|
+ this.parentId=item.value
|
|
|
+ this.title=item.label
|
|
|
+ this.userList=item.userList;
|
|
|
+
|
|
|
+ this.getCompanyList()
|
|
|
+ },
|
|
|
+ myLoadmore(){
|
|
|
+ this.listForm.pageIndex += 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ getCompanyList(){
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+
|
|
|
+ API.bookList({
|
|
|
+ parentId:this.parentId
|
|
|
+ }).then((res) => {
|
|
|
+ uni.hideLoading();
|
|
|
+
|
|
|
+ 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>
|
|
|
-
|
|
|
+<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>
|
zhengkaixin