vue

public/appnew/src/components/phoneDetail/headPersional.vue

+<template>
+<div>
+	<header :class="{'no-border':data.noborder}">
+		<a class="ps-back" @click="back" href="javascript:;"></a>
+		<div class="title">
+			<!--<div class="title_area" v-for=" (item,index) in data.title">-->
+			
+			<div class="title_area" >
+				<h2 @click="changeType(0)" style="width : 1rem ; "> 全部</h2>
+				<div :class="status == 0 ? 'border_line' : ''"></div>
+			</div>
+			<div class="title_area">
+				<!--<h2 @click="changeType"> {{data.title[index]}}</h2>-->
+				<h2 @click="changeType(1)" style="width : 1rem ; "> 我的</h2>
+				<div :class="status == 1 ? 'border_line' : ''"></div>
+			</div>
+		</div>
+		<!--<h2>{{data.title}}</h2>-->
+		<slot></slot>
+	</header>
+	<div class="header_seat"></div>
+</div>
+</template>
+
+<script>
+	export default {
+		name: '',
+		props: {
+			data: {
+				type: Object,
+				default: () => ({
+					message: 'hello'
+				})
+			}
+		},
+		data: () => ({
+			status : 0
+		}),
+		computed: {
+			
+		},
+		methods: {
+			back() {
+				var _this = this;
+				if(_this.data.isBack){
+					history.go(-1);
+				}else{
+					_this.common.Compatible({
+						paraIos: {
+							'route': 'aabb',
+							'url': 'back'
+						},
+						fnAndroid: function() {
+							window.android.onBackPressed();
+						},
+						fn: function() {
+							console.warn('error');
+						}
+					});
+				}
+			},
+			changeType : function(index){
+				var that = this ;
+//				if (index == 1 ){
+//					layer.tipsX("功能正在开发中，请耐心等待。。。");
+//				}
+				
+				if ( that.status == index ){
+					return false ;
+				}
+				var status = that.status ;
+				status = status - 1 ; 
+				if ( status < 0 ){
+					status = status * -1;
+				}
+				that.status = status ;
+				that.$emit("lisentenStatus",status);
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	header {
+		box-sizing: border-box;
+	    position: fixed;
+	    top: 0;
+	    right: 0;
+	    left: 0;
+	    width: 100%;
+	    height: .88rem;
+	    background: #fff;
+	    z-index: 100;
+	    box-shadow: 0 2px 4px 0 rgba(186,186,186,0.15);
+	}
+	header.no-border{
+	    box-shadow: none;
+	}
+	header .ps-back {
+	    position: absolute;
+	    top: 0;
+	    bottom: 0;
+	    left: 0;
+	    display: block;
+	    width: .88rem;
+	    height: .88rem;
+	    background: url(images/ic_back_black@2x.png) no-repeat 0.3rem center;
+	    background-size: .36rem .28rem;
+	}
+	header .icon-link {
+	    position: absolute;
+	    top: 0;
+	    bottom: 0;
+	    right: 0;
+	    display: block;
+	    width: .88rem;
+	    height: .88rem;
+	}
+	header .icon-link.icon-link-share {
+	    background: url(images/icon_share@2x.png) no-repeat center center/.34rem .38rem;
+	}
+	header>h2{
+		font-size: .34rem;
+	    line-height: .88rem;
+	    overflow: hidden;
+	    height: .88rem;
+	    padding: 0 .88rem;
+	    /*text-align: center;*/
+	    white-space: nowrap;
+	    text-overflow: ellipsis;
+	    color: #333;
+	    
+	    /*margin-left : .5rem;*/
+	  
+	}
+	header+.header_seat {
+	    height: 0.88rem;
+	}
+	.title_area{
+		text-align:center ; 
+		width : 50%;
+		float:left;
+	}
+	.title_area>h2{
+		font-size: .34rem;
+	    line-height: .88rem;
+	    overflow: hidden;
+	    height: .88rem;
+	    padding: 0 .88rem;
+	    white-space: nowrap;
+	    text-overflow: ellipsis;
+	    color: #333;
+	  
+	}
+	.title {
+		width :4rem;
+		text-align:center ;
+		overflow:hidden ;
+		margin-left:1.5rem;	
+	}
+	.border_line {
+		width : .6rem;
+		height : 3px;
+		background-color :#ff9318;
+		border-radius :2.5px;
+		text-align:center ; 
+		margin-left : 1.08rem ;
+		position:relative;
+		top:-0.1rem;
+	}
+</style>
\ No newline at end of file

public/appnew/src/components/phoneDetail/phoneDetail.vue

 <template>
 	<div>
-		<header-pulic :data="headerData" v-on:lisentenStatus="lisentenStatus"></header-pulic>
-		<!--<header-tab :data="headerData" v-on:lisentenStatus="lisentenStatus"></header-tab>-->
-		<div class="search_area" style="padding-left:.1rem;margin-top:0.1rem;">
+		<!--<header-pulic :data="headerData" v-on:lisentenStatus="lisentenStatus"></header-pulic>-->
+		<header-persional :data="headerData" v-on:lisentenStatus="lisentenStatus"></header-persional>
+		<div class="search_area" style="padding-left:.1rem;margin-top:0.1rem;" v-show="agent_status==0">
 			<myDatepicker @change="changeTime" :date="startTime" :option="multiOption" :limit="limit"></myDatepicker> 
 			<!--<myDatepicker @change="changeTime1" :date="endtime" :option="timeoption" :limit="limit"></myDatepicker>-->
 			<!--@change="changeStr2"-->
@@ -13,8 +13,8 @@
 			</div>
 		</div>
 		<div  ref="list" @scroll="handleScroll">
-			<div v-for="(item,index) in items " :key = "index" class="border_line_bottom" >
-				<div class="border_line_bottom" v-if="index==0 " style="margin-top:.3rem;border-top:1px solid #eeeeee">
+			<div v-for="(item,index) in items " :key = "index" class="border_line_bottom" style="width:7.5rem;">
+				<div class="border_line_bottom" v-if="index==0 " style="margin-top:.3rem;border-top:1px solid #eeeeee;width:7.5rem;">
 					<div class="border_line_right left" style="width:1.46rem;" v-if="index==0 ">
 						<span>通话ID</span>
 					</div>
@@ -41,7 +41,7 @@
 					<div class="border_line_right left" style="width:1.46rem;">
 						<span>{{item.name}}</span>
 					</div>
-					<div class="border_line_right left" style="width:1.46rem;">
+					<div class="border_line_right left" style="width:1.4rem;">
 						<span>{{item.users_id}}</span>
 					</div>
 					<div class="left" style="width:1.46rem">
@@ -61,10 +61,12 @@
 
 <script>
 	import myDatepicker  from 'vue-datepicker/vue-datepicker-es6.vue';
+	import headerPersional from '@/components/phoneDetail/headPersional.vue'
 	export default {
 		name: '',
 		components:{
-		    myDatepicker
+		    myDatepicker,
+		    'header-persional' : headerPersional
 		  },
 		props: {
 			data: {
@@ -91,7 +93,10 @@
 			var time2 = this.initThisDay(date);
 			console.log(time1)
 			return {
+				agent_status : 0 ,
 				items : [],
+				items1 : [] , 
+				items2 :[] , 
 				itemsta : false ,
 				headerData: {
 					'title': "通话记录",
@@ -211,6 +216,12 @@
              // 监听（绑定）滚轮 滚动事件
 		},
 		methods: {
+			lisentenStatus : function(status){
+				let that = this ;
+				console.log(status);
+				that.agent_status = status ; 
+				this.initData();
+			},
 			handleScroll(){
  				this.a = document.body.scrollHeight || document.documentElement.scrollHeight;
              	this.b = document.body.scrollTop || document.documentElement.scrollTop;
@@ -292,8 +303,6 @@
 				var that = this ;
 				var inp1 = that.input1;
 				var inp2 = that.input2;
-				console.log(inp1);
-				console.log(inp2);
 				if (inp1 == "" && inp2 == "") {
 					var status = 0;
 					var id = "";
@@ -310,6 +319,7 @@
 					var status =0
 					var id = "";
 				}
+				this.items = [] ;
 				this.isLoading = false ; 
 				var startTime = that.startTime0 ;
 //				var endTime = that.endTime0;
@@ -323,13 +333,14 @@
 //					layer.tipsX("开始时间不能大于终止时间");
 //					return false 
 //				}
+//agent_status
 				var params = {
-					'start_date' : startTime ,
+					'start_date' : that.agent_status == 1 ? that.thisday : startTime ,
 //					'end_date' : endTime,
 					"agents_id" : that.urlParams.agents_id ,
 					'AuthToken' : that.urlParams.token,
-					"users_id" : id,
-					"users_type" : status,//that.userType,
+					"users_id" : that.agent_status == 1 ? '' : id,
+					"users_type" : that.agent_status == 1 ? '0' : status,//that.userType,
 					'pageNo' : pageNo,
 					"pageSize" : 30
 				}
@@ -436,6 +447,4 @@
 		
 	}
 </style>
-
-
 http://localhost:8080/#/priceReport?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJkYXRhIjp7ImlkIjo1NzM5LCJuYW1lIjoiXHU2MDNiXHU2ZDRiXHU4YmQ1MSIsInBob25lIjoiMTU2MDE2NTIzNTMiLCJsZXZlbCI6MzB9LCJ0aW1lU3RhbXBfIjoxNTMwNjA2ODU4fQ.8jL49CjtBMV6BqmaKdJfd4pkGBazrAgQQrutb53Z3mY-->
\ No newline at end of file