Phone-APP/pages/ContactDetails/ContactDetails.vue

<!--内容：联系人详情界面，联系人名称、电话号码、通话记录。
更新内容:多个号码颜色头
更新人:張志宏
更新时间：2024/9/18
更新内容：传参
更新时间：2024/9/28
-->
<template>
  <view class="content">
	<!-- 上方固定栏，联系人姓名、颜色头、电话、 -->
	<view id="fixedContainer" class="fixed-container">
		<!-- 上方导航栏 -->
		<view class="navbar">
		  	<image @click="navigateToPage('index')" class="return-index" src="../../static/pics/return-left.png" mode=""></image>
			<p @click="navigateToPage('edit')" class="to-edit">编辑</p>
		</view>
		<!-- 联系人姓名 -->
		<view v-if="name!='null'" class="contact-person-name">
			<p>{{name}}</p>
		</view>
		<!-- 保存联系人一个号码的情况 -->
		<view v-if="count==1||count==2|| count==3 || count==4" class="contact-person-phonenumber">	
			<view class="color-head1"></view>
			<p class="phone-number">
			{{formatPhoneNumber1}}
			</p>	
		</view>						
		<view class="sim-position">
			<p>{{location}}</p>
		</view>
		
		<!-- 保存联系人两个号码的情况 -->
		<view v-if="count==2 || count==3 || count==4"  class="contact-person-phonenumber">
			<view class="color-head2"></view>
			<p class="phone-number">
			  {{formatPhoneNumber2}}
			</p>
		</view>		
		<view v-if="count==2 || count==3 || count==4" class="sim-position">
			<p>{{location}}</p>
		</view>
		
		<!-- 联系人3个号码情况 -->
		<view v-if="count==3 || count==4" class="contact-person-phonenumber">
			<view class="color-head3"></view>
			<p class="phone-number">
			  {{formatPhoneNumber3}}
			</p>	
		</view>	
		<view v-if="count==3 || count==4" class="sim-position">
			<p>{{location}}</p>
		</view>
		
		<!-- 联系人4个号码情况 -->
		<view  v-if="count==4" class="contact-person-phonenumber">
			<view class="color-head4"></view>
			<p class="phone-number">
			  {{formatPhoneNumber4}}
			</p>	
		</view>	
		<view v-if="count==4" class="sim-position">
		  <p>{{location}}</p>
		</view>
		
		<!-- 保存联系人多个号码的情况 -->
	    <view v-if="count>4" v-for="(phone,index) in formatPhoneNumbers" :key="index" class="contact-person-phonenumbers">
			<p class="phone-number">
			  {{phone}}
			</p>	
		</view>
		<view v-if="count>4" class="sim-position">
			<p>{{location}}</p>
		</view>
		
		<!-- 分隔线 -->
		<view class="line"></view>	
	</view>

	<!-- 通话记录 -->
	<view :style="{marginTop:containerHeight+'px'}" class="page-content">
			
			<view v-for="(log,index) in filterReadLogs " :key="index" class="contact-datials">
				<!-- <text>{{log.number}}</text> -->
				<view v-if="log.number==cleanPhoneNumber(phoneNumber1)" class="log-color-head1"></view>
				<view v-if="log.number==cleanPhoneNumber(phoneNumber2)" class="log-color-head2"></view>
				<view v-if="log.number==cleanPhoneNumber(phoneNumber3)" class="log-color-head3"></view>
				<view v-if="log.number==cleanPhoneNumber(phoneNumber4)" class="log-color-head4"></view>
				<view class="single-log" @click="CallPhone(log.number)">		
					<view class="single-log-date">
						<p :style="{color:getLogDateColor(log.type)}">{{formatDate(log.date)}}</p>
						<!--  -->
					</view>
					<view class="single-log-type">
						<p :style="{color:getLogDateColor(log.type)}">{{getCallType(log.type)}}</p>
						<!-- 通话时间 -->
						<!-- <p v-if="log.duration!=0">{{formatSeconds(log.duration)}}</p> -->
					</view>
				</view>	
			</view>
	</view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				formEdit: false, // 初始化为 false
				// 存储 fixed-container 的高度
				containerHeight: 0 ,
				//联系人名称
				name:'',
				phones: [
				  { number: '' } // 手机号数组，初始化一个空对象
				],
				//联系人电话号码数量
				count:'',
				//带有间隔的电话号码
				formatPhoneNumber1:'',
				formatPhoneNumber2:'',
				formatPhoneNumber3:'',
				formatPhoneNumber4:'',
				formatPhoneNumbers:[],
				//传输的电话号码
				phoneNumber1:'',
				phoneNumber2:'',
				phoneNumber3:'',
				phoneNumber4:'',
				phoneNumbers:[],
				//通话记录
				telephoneLog:[],
				//筛选后的通话记录
				filterReadLogs:[],
				location:'浙江杭州'
			}
		},

		mounted(){
			this.requestPermissions();//请求权限
			this.handleGetCallLogs();//获取通话记录
			this.filtrCallLogs();//筛选通话记录
			this.updateContainerHeight();//获取fixed-container 的高度
			this.getCallType(this.callType);
			uni.$on('contactSaved', (contact) => {
			    // 打印联系人信息
			    console.log('Saved contact:', contact);
			    // 更新页面内容
			    this.name = contact.name;
			    this.phones = contact.phones.map(phone => ({
			        number: this.formatPhoneNumber(phone.number) // 对每个号码进行格式化
			    }));
			    this.count = this.phones.length; // 更新数量
			});

          

		},
		methods: {
			//跳转页面
			navigateToPage(page){
				switch(page){
					case 'index':
					uni.reLaunch({
					  url:`/pages/index/index`
					});         
					break;
					case 'edit':
						uni.navigateTo({
							url: `/pages/edit/edit?name=${encodeURIComponent(this.name)}&phones=${encodeURIComponent(JSON.stringify(this.phones))}&count=${this.count}`
						});
					//导航到编辑页面
					break;
					default:
					break;
				}
			},
			// 拨打电话
			CallPhone(e) {
			  // 调用HTML5 Plus框架提供的接口
			  plus.device.dial(e, false);
			},
			//获取联系人信息页面高度
			updateContainerHeight() {
				this.$nextTick(()=>{
					const query=uni.createSelectorQuery().in(this);
					query.select('#fixedContainer').boundingClientRect(data=>{
						console.error(data.height);//获取view高度
						this.containerHeight=data.height;
					}).exec();
				});
			},
			//增加号码间隔
			formatPhoneNumber(phoneNumber){
				//將8位分割成4,4
				if(phoneNumber.length===8){
					return phoneNumber.replace(/(\d{4})(\d{4})/,'$1 $2');
				}else if (phoneNumber.length===12){
					return phoneNumber.replace(/(\d{4})(\d{4})(\d{4})/,'$1 $2 $3');
				}else if(phoneNumber.length===11){
					return phoneNumber.replace(/(\d{3})(\d{4})(\d{4})/,'$1 $2 $3');
				}else{
					return phoneNumber;
				}
				
			},
			//申请权限
			requestPermissions() {
			  if (plus.android && plus.android.runtimeMainActivity()) {
			    const activity = plus.android.runtimeMainActivity();
			    const ContextCompat = plus.android.importClass("androidx.core.content.ContextCompat");
			    const ActivityCompat = plus.android.importClass("androidx.core.app.ActivityCompat");
			    const PERMISSIONS = [plus.android.importClass("android.Manifest$permission").READ_CALL_LOG];
			
			    if (PERMISSIONS.every(permission => ContextCompat.checkSelfPermission(activity, permission) === plus.android.importClass("android.content.pm.PackageManager").PERMISSION_GRANTED)) {
			      console.log("权限已授予");
			    } else {
			      ActivityCompat.requestPermissions(activity, PERMISSIONS, 1);
			    }
			  }
			},
			//获取通话记录
			handleGetCallLogs() {
			  if (plus.android) {
			    try {
			      const MainActivity = plus.android.runtimeMainActivity();
			      const CallLogHelper = plus.android.importClass("com.example.mylibrary.CallLogHelper");
			
			      if (CallLogHelper) {
			        const logsJson = CallLogHelper.getCallLogs(MainActivity);
			        console.log("Raw logsJson:", logsJson); // 打印原始数据
			
			        const logsArray = JSON.parse(logsJson);
			        console.log("Parsed logsArray:", logsArray); // 打印解析后的数据
			
			        if (Array.isArray(logsArray)) {
			          this.telephoneLog = logsArray;
					  console.error("telephonelog",this.telephoneLog)
			        } else {
			          console.error("解析后的数据不是数组");
			        }
			      } else {
			        console.error("CallLogHelper 类未加载");
			      }
			    } catch (e) {
			      console.error("获取通话记录失败:", e);
			    }
			  } else {
			    console.error("Android 环境未准备好");
			  }
			},
			//去除电话号码中的空格
			cleanPhoneNumber(phoneNumber){
				const cleanedNumber = phoneNumber.replace(/[^\d+]/g, '');
				// console.error("清洁后的号码", cleanedNumber);
				return cleanedNumber;
			},
			filtrCallLogs(){
				// 去除待筛选的电话号码中的空格
				const cleanPhoneNumber1 = this.phoneNumber1.replace(/\s+/g, '');
				const cleanPhoneNumber2 = this.phoneNumber2 ? this.phoneNumber2.replace(/\s+/g, '') : null;
				const cleanPhoneNumber3 = this.phoneNumber2 ? this.phoneNumber3.replace(/\s+/g, '') : null;
				const cleanPhoneNumber4 = this.phoneNumber2 ? this.phoneNumber4.replace(/\s+/g, '') : null;
				console.log("多个未清洁号码",this.phoneNumbers)
				const cleanPhoneNumbers = this.phoneNumbers.map(num => num.replace(/\s+/g, ''));
				console.log("多个无间隔号码",cleanPhoneNumbers)
				console.log("当前的电话日志",this.telephoneLog)
				if(this.count==1){
					console.log("电话号码",cleanPhoneNumber1)
					this.filterReadLogs = this.telephoneLog.filter(log => log.number === cleanPhoneNumber1);
					console.log("筛选的通话记录",this.filterReadLogs);
				}else if(this.count==2){
					console.log("电话号码",cleanPhoneNumber2)
					this.filterReadLogs = this.telephoneLog.filter(log => log.number === cleanPhoneNumber1 ||log.number === cleanPhoneNumber2);
					console.log("筛选的通话记录",this.filterReadLogs);
				}else if(this.count==3){
					console.log("电话号码",cleanPhoneNumber3)
					this.filterReadLogs = this.telephoneLog.filter(log => log.number === cleanPhoneNumber1 ||log.number === cleanPhoneNumber2||log.number === cleanPhoneNumber3);
					console.log("筛选的通话记录",this.filterReadLogs);
				}else if(this.count==4){
					console.log("电话号码",cleanPhoneNumber4)
					this.filterReadLogs = this.telephoneLog.filter(log => log.number === cleanPhoneNumber1 ||log.number === cleanPhoneNumber2||log.number === cleanPhoneNumber3 || log.number === cleanPhoneNumber4);
					console.log("筛选的通话记录",this.filterReadLogs);
				}
				else{
					console.log("电话号码",cleanPhoneNumbers)
					this.filterReadLogs= this.telephoneLog.filter(log => cleanPhoneNumbers.includes(log.number));
					console.log("筛选的通话记录",this.filterReadLogs);
				}
			},
			// 根据通话类型的数值返回对应的中文字符串
			getCallType(type) {
				
			  switch (type) {
			    case 1:
			      return '来电';
			    case 2:
			      return '拨出';
			    case 3:
			      return '未接';
			    case 4:
			      return '语音信箱';
			    case 5:
			      return '拒接';
			    case 6:
			      return '自动拒接';
			    default:
			      return '未知';
			  }
			},
			getLogDateColor(callType){
			return callType==3 ? '#ff0000' : '#6E5E52'	
			//未接返回红色，其他返回深驼灰色。
			},
			// 格式化日期为“年-月-日 时:分:秒”
			formatDate(timestamp) {
			  const date = new Date(timestamp);
			  const now=new Date();
			  const Y = date.getFullYear() + '/';
			  const M = (date.getMonth() + 1).toString() + '/';
			  const D = date.getDate().toString()+' ';
			  const h = date.getHours().toString()+ ':';
			  const m = date.getMinutes().toString().padStart(2, '0');
			  
			  const currentYear=now.getFullYear()+'/';
			  const currentMonth=(now.getMonth()+1).toString()+'/';
			  const currentDay=now.getDate().toString()+' ';
			  const yesterday=new Date(now);
			  yesterday.setDate(now.getDate()-1);
			  const yesterdayYear=now.getFullYear()+'/';
			  const yesterdayMonth=(now.getMonth()+1).toString()+'/';
			  const yesterdayDay=now.getDate().toString()+' ';
			  
			  if(Y==currentYear&&M==currentMonth&&D==currentDay)
			  {
				  return '今天'+h+m;
			  }else if(Y==yesterdayYear&&M==yesterdayMonth&&D==yesterdayDay){
				  return '昨天'+h+m;
			  }else if(Y==currentYear){
				  return M+D+h+m;
			  }else{
				  return Y+M+D
			  }
			  return Y + M + D + h + m ;
			},
			//格式化通话时间未“时分秒”
			formatSeconds(seconds) {
			    // 计算小时
			    const hours = Math.floor(seconds / 3600);
			    // 计算分钟
			    const minutes = Math.floor((seconds % 3600) / 60);
			    // 计算剩余的秒数
			    const secs = seconds % 60;
				let result = '';
				if (hours > 0) {
					result += `${hours}时`;
				}
				if (minutes > 0) {
					result += `${minutes}分`;
				}
				if (secs > 0 || result === '') {  // 包含 0秒情况
					result += `${secs}秒`;
				}
				return result;
			}

		},
		//页面传输的联系人姓名、电话号码、号码数量
		onLoad(options) {
		    console.error('传输内容的格式', typeof options);
		    console.error('传输的内容', options);
		
		    // 确保有值
		    this.name = decodeURIComponent(options.name || '') || '';
		    this.count = options.count || 0;
		
		    // 处理电话号码
		    const numbers = options.phoneNumbers ? JSON.parse(decodeURIComponent(options.phoneNumbers)) : [];
		    this.phonenumbers = numbers;
		
		    console.error("测试号码", numbers);
		    console.log('传输的电话号码', numbers);
		
		    this.phones = numbers.map(num => ({ number: num.value }));
		
		    for (let i = 0; i < this.count; i++) {
		        if (numbers[i]) {
		            this[`phoneNumber${i + 1}`] = numbers[i].value;
		            this[`formatPhoneNumber${i + 1}`] = this.formatPhoneNumber(this[`phoneNumber${i + 1}`]);
		            console.log(`phoneNumber${i + 1}`, this[`phoneNumber${i + 1}`]);
		            console.log(`formatPhoneNumber${i + 1}`, this[`formatPhoneNumber${i + 1}`]);
		        }
		    }
		    
		    console.error('phones的结构', this.phones);
		},
	}
</script>

<style>
.content{
	/*子元素垂直排列*/
	display: flex;
	flex-direction: column;
	padding: 20rpx;
	width: 100vw;
	height: 100vh;
	background-color: #f5f5f5;	
}
.navbar{
	display: flex;
	justify-content: space-between;
	margin-top: 10%;
	/* background-color: antiquewhite; */
}

.return-index{
	width: 90rpx;
	height: 90rpx;
	margin-left: 2%;
}

.to-edit{
	font-size: 60rpx;
	margin-right: 6%;
	color: #4286F3;
}
.fixed-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #f5f5f5;
    z-index: 1000; /* 确保它位于其他内容之上 */
    padding: 10rpx; /* 可以根据需要调整 */
	padding-top: 5rpx;
	padding-bottom: 0rpx;
    
}

.page-content{
	width: 100vw;
	background-color: #f5f5f5;
}

.contact-person-name {
  display: flex;
  align-items: center;
  font-size: 10vw;
  font-weight: 300;
  letter-spacing: 4rpx;
  line-height: 1.6;
  margin-bottom: 10rpx; 
  margin-left: 10%;
  margin-right: 10%;
  white-space: normal; /* 允许换行 */
  text-align: center; /* 文本居中 */
}

.contact-person-phonenumber{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 60rpx;
	margin-top: 10rpx;
	margin-left: 5rpx;
	margin-bottom: 5rpx;
	font-size: 40rpx;
	font-weight: 120;
	color: rgba(0, 0, 0, 1.0);
	
}
/* 多个号码的样式 */
.contact-person-phonenumbers{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 60rpx;
	margin-left: 65rpx;
	margin-right: 80rpx;
	margin-top: 10rpx;
	margin-bottom: 5rpx;
	font-size: 40rpx;
	font-weight: 120;
	color: rgba(0, 0, 0, 1.0);
	
	
}

.phone-number{

	margin-left: 35rpx;
	font-size: 55rpx;
	font-weight: 400;	
}
.phone-number span{
	display: inline-block;
}

.phone-number .gap{
	display: inline-block;
	width: 20rpx;
}
.sim-position{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	font-size: 35rpx;
	font-weight: 280;
	right: 35%;
	margin-left: 20rpx;
	margin-right: 120rpx;
	margin-top: 5rpx;
	margin-bottom: 5rpx;
	height: 40rpx;
	color: rgba(182, 182, 182, 0.9);
}

.color-head1{
	position: absolute;
	width: 19rpx;
	height: 100%;
	background-color: #4286F3;
	/*google蓝*/
	/* background-color: rgb(52, 168, 83); */
	/*google绿*/ 
	/* background-color: #4286F3; */
	
	/* background-color: #1c3eff; */
	left: 20%;
	margin-left: 20rpx;
	margin-right: 5rpx;
	margin-left: 0%;
	border-radius:8rpx 8rpx 8rpx 8rpx;
}

.color-head2{
	position: absolute;
	width: 19rpx;
	height: 100%;
	background-color: rgb(255, 183, 0);
	/* background-color: #FAC230; */
	/*google黄*/
	/* background-color: rgb(234, 67, 53); */
	/*google红*/ 
	/* background-color: #04f03b; */
	left: 20%;
	margin-left: 20rpx;
	margin-right: 5rpx;
	margin-left: 0%;
	border-radius:8rpx 8rpx 8rpx 8rpx;
}

.color-head3{
	position: absolute;
	width: 19rpx;
	height: 100%;
	background-color: #04f03b;
	left: 20%;
	margin-left: 20rpx;
	margin-right: 5rpx;
	margin-left: 0%;
	border-radius:8rpx 8rpx 8rpx 8rpx;
}

.color-head4{
	position: absolute;
	width: 19rpx;
	height: 100%;
	background-color: rgb(234, 67, 53);
	left: 20%;
	margin-left: 20rpx;
	margin-right: 5rpx;
	margin-left: 0%;
	border-radius:8rpx 8rpx 8rpx 8rpx;
}

.line{
	/*分隔线，位于较高层、宽度、height参数为分隔线的粗细、颜色、上下间隔*/
	z-index: 1;
	position: relative;
	width: 95%;
	height: 2rpx;
	background-color: #dbdbdb;
	margin-left: 10rpx;
	margin-right: 5rpx;
	margin-top: 20rpx;
	margin-bottom: 0rpx;
	/* padding-bottom: 3rpx; */
	box-shadow: 0 2rpx 3rpx rgba(224, 224, 224, 0.2);
}

.contact-datials{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	z-index: 0;
	flex-flow: row;
	position: relative;
	width: 90%;
	margin-top: 5rpx;
	margin-bottom: 15rpx;
	margin-left: 20rpx;
	margin-right: 30rpx;
	/* padding-bottom: 5rpx; */
	height: 150rpx;
	border: 0.5rpx;
	border-radius: 10rpx;
	background-color: #ffffff;
}
.log-color-head1{
	
	width: 30rpx;
	height: 150rpx;
	background-color: #4286F3;
	/* background-color: rgba(66, 153, 244); */	
	/*google蓝*/ 
	/* background-color: rgb(52,168,83); */
	/* background-color: #55AF7B; */
	/*google绿*/ 
	/* background-color: #2A20FF;/*蓝紫色偏蓝*/ 
	/* background-color: #1c3eff; */
	left: 0%;
	margin-left: 20rpx;
	margin-right: 5rpx;
	margin-left: 0%;
	border-radius:12rpx 12rpx 12rpx 12rpx;
}

.log-color-head2{
	
	width: 30rpx;
	height: 150rpx;
	background-color: rgb(255, 183, 0);
	/* background-color: #FAC230; */
	/*google黄*/ 
	/* background-color: rgb(234, 67, 53); */
	/* background-color: #E84537; */
	/*google红*/ 
	/* background-color: #04f03b; */
	left: 0%;
	margin-left: 20rpx;
	margin-right: 5rpx;
	margin-left: 0%;
	border-radius:12rpx 12rpx 12rpx 12rpx;
}

.log-color-head3{
	
	width: 30rpx;
	height: 150rpx;
	background-color: #04f03b;
	/* background-color: #FAC230; */
	/*google黄*/ 
	/* background-color: rgb(234, 67, 53); */
	/* background-color: #E84537; */
	/*google红*/ 
	/* background-color: #04f03b; */
	left: 0%;
	margin-left: 20rpx;
	margin-right: 5rpx;
	margin-left: 0%;
	border-radius:12rpx 12rpx 12rpx 12rpx;
}

.log-color-head4{
	
	width: 30rpx;
	height: 150rpx;
	background-color: rgb(234, 67, 53);
	/* background-color: #FAC230; */
	/*google黄*/ 
	/* background-color: rgb(234, 67, 53); */
	/* background-color: #E84537; */
	/*google红*/ 
	/* background-color: #04f03b; */
	left: 0%;
	margin-left: 20rpx;
	margin-right: 5rpx;
	margin-left: 0%;
	border-radius:12rpx 12rpx 12rpx 12rpx;
}

.single-log{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 92%;
	font-size: 50rpx;
}
.single-log-date{
	margin-left: 3%;
	font-size: 70rpx;
	color: #9c9c9c;
}
.single-log-type{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-right: 5%;
}
</style>