封装通话组件

components/call-log/header/header.vue

@@ -0,0 +1,137 @@
+<template>
+	<view class="header" :class="['header_'+type]">
+			<view class="title">
+				{{title}}
+			</view>
+			<view class="search">
+				<view class="left">
+					<image src="/static/image/call/iosSearchLeft.png" mode=""></image>
+					{{searchTitle}}
+				</view>
+					<image v-if="type=='ios'" src="/static/image/call/iosSearchRight.png" mode=""></image>
+			</view>
+			<view class="select" v-if="type=='xiaomi'">
+				全部通话
+				<image src="/static/image/call/xiaomiHeaderSelectImg.png" mode=""></image>
+			</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		onMounted,
+		reactive,
+		ref,
+		toRefs
+	} from 'vue'
+
+	const topPopup = ref()
+
+	// 定义组件属性
+	const props = defineProps({
+
+		type: {
+			type: String,
+			default: 'ios'
+		},
+	})
+
+	const data = reactive({
+		statusBarHeight: 0,
+		showTipLayer: true,
+		title:'最近通话',
+		searchTitle:"搜索",
+		list:[
+			"个人收藏",
+			"最近通话",
+			"通讯录",
+			"拨号键盘",
+			"语音留言"
+		]
+	})
+
+	let {
+		searchTitle,
+		title,
+		list,
+		showTipLayer
+	} = toRefs(data)
+
+	onMounted(() => {
+		if(props.type=='xiaomi'){
+			searchTitle.value="搜索联系人"
+			title.value="通话"
+			console.log('aaaaaaaaaaa')
+		}
+	})
+</script>
+
+<style scoped lang="scss">
+.header{
+	padding: 0 15px;
+	background-color: #fff;
+	.title{
+		font-weight: bold;
+		font-size: 32px;
+		color: #1A1A1A;
+	}
+	.search{
+		margin-top: 10px;
+		width: 100%;
+		height: 34px;
+		background: #EEEEF0;
+		border-radius: 12px 12px 12px 12px;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		.left{
+			display: flex;
+			align-items: center;
+			font-size: 16px;
+			color: #838383;
+		}
+		image{
+			width: 16px;
+			height: 16px;
+			margin: 0 8px;
+		}
+	}
+	.select{
+		padding-left: 15px;
+		margin-top: 20px;
+		display: flex;
+		align-items: center;
+		font-weight: 400;
+		font-size: 13px;
+		color: #8B8DA5;
+		image{
+			width: 13px;
+			height: 13px;
+			margin-left: 6px;
+		}
+	}
+}
+.header_xiaomi{
+	.title{
+		padding-left: 15px;
+		font-weight: 400 !important;
+		font-size: 30px !important;
+		color: #1A1A1A !important;
+	}
+	.search{
+		margin-top: 10px;
+		height: 41px  !important;
+		background: #F0F0F0  !important;
+		border-radius: 21px 21px 21px 21px  !important;
+		.left{
+			font-size: 16px  !important;
+			color: #AAAAAA  !important;
+		}
+		image{
+			width: 16px;
+			height: 16px;
+			margin: 0 8px;
+		}
+	}
+}
+</style>

components/call-log/list/list.vue

@@ -1,9 +1,19 @@
 <template>
 	<view class="call-list" :class="['call-list-'+type]">
-		<view v-for="(item,index) in list" :key="index" class="item">
+		<view v-for="(item,index) in list" :key="index" class="item" 
+			@touchstart="touchStart($event, index)"
+			@touchmove="touchMove($event, index)"
+			@touchend="touchEnd($event, index)"
+			:style="{'transform': 'translateX(' + swiperList[index] + 'px)', 'transition': swiperList[index] == 0 ? 'all 0.3s' : ''}">
 			<view class="avatar" v-if="type!='xiaomi'">
 				<image v-if="type=='ios'" :src="'/static/image/call/iosAvatar.png'||item.avatar" mode=""></image>
-					<image v-else-if="type=='oppo'" :src="`/static/image/call/${type}StatusIcon${item.status}.png`" mode="widthFix"></image>
+				<image v-else-if="type=='oppo'" :src="`/static/image/call/${type}StatusIcon${item.status}.png`" mode="widthFix">
+				</image>
+				<image v-else-if="type=='huawei'" :src="`/static/image/call/${type}StatusIcon${item.status}.png`"
+					mode="widthFix"></image>
+				<image v-else-if="type=='vivo'" :src="`/static/image/call/${type}StatusIcon${item.status}.png`" mode="widthFix">
+				</image>
+
 			</view>
 			<view class="infoBox">
 				<view class="left-box">
@@ -18,18 +28,28 @@
 								{{item.name||item.notes||item.phone}}
 								<text v-if="!item.name&&item.notes">{{item.phone}}</text>
 							</view>
-								<view class="notes" v-else-if="type='oppo'">
+							<view class="notes" v-else-if="type=='oppo'">
+								{{item.name||item.phone}}
+							</view>
+							<view class="notes" v-else-if="type=='huawei'">
+								{{item.name||item.phone}}
+							</view>
+							<view class="notes" v-else-if="type=='vivo'">
 								{{item.name||item.phone}}
 							</view>
 						</view>
 						<view class="info">
 
+							<!-- 电话 -->
+							<view class="phone" v-if="type=='vivo'">
+								{{item.notes||item.phone}}
+							</view>
 							<!-- 卡几 -->
-								<view class="kj"  v-if="type!='ios'&&type!='xiaomi'&&(type=='oppo')">
+							<view class="kj" v-if="type=='oppo'||type=='huawei'">
 								<image :src="`/static/image/call/${type}KJ${item.kj}.png`" mode=""></image>
 							</view>
 							<!-- 时间 -->
-								<view class="time" v-if="type!='ios'&&(type=='xiaomi')">
+							<view class="time" v-if="type=='xiaomi'">
 								{{item.time}}
 							</view>
 							<!-- icon -->
@@ -37,7 +57,7 @@
 								<image src="/static/image/call/iosStatusIcon.png" mode=""></image>
 							</view>
 							<!-- 地址 -->
-								<view class="address" v-if="type!='ios'&&(type=='xiaomi'||type=='oppo')">
+							<view class="address" v-if="type!='ios'">
 								{{item.address}}
 							</view>
 							<!-- 运营商 -->
@@ -45,11 +65,11 @@
 								{{item.yys}}
 							</view>
 							<!-- 电话 -->
-								<view class="phone" v-if="type!='xiaomi'&&type!='oppo'">
+							<view class="phone" v-if="type=='ios'">
 								{{item.phone}}
 							</view>
 							<!-- 备注 -->
-								<view class="notes" v-if="type=='oppo'">
+							<view class="notes" v-if="type=='oppo'||type=='huawei'">
 								{{item.notes}}
 							</view>
 						</view>
@@ -57,24 +77,27 @@
 				</view>
 				<view class="right-box">
 					<!-- 时间 -->
-					<view class="time" v-if="type=='ios'&&(type!='xiaomi')">
+					<view class="time" v-if="type!='xiaomi'">
 						{{item.time}}
 					</view>
 					<!-- 图标 -->
-					<view class="icon" v-if="type=='ios'||type=='xiaomi'||type=='oppo'">
+					<view class="icon">
 						<image :src="`/static/image/call/${type}RightIcon.png`" mode=""></image>
 					</view>
 				</view>
 			</view>
+			<!-- 删除按钮 -->
+			<view class="delete-btn" @click="deleteItem(index)">
+				<text class="delete-text">删除</text>
+			</view>
 		</view>
 	</view>
 </template>
 
-<script>
+<script setup>
+	import { ref, reactive, onMounted, watch } from 'vue';
 
-export default {
+	const props = defineProps({
-	name: 'call-list',
-	props: {
 		isHuise: {
 			type: Boolean,
 			default: true
@@ -83,79 +106,393 @@ export default {
 			type: String,
 			default: 'ios'
 		}
-	},
+	});
-	data() {
-		return {
-			list:[
-				{
-					avatar: '/static/logo.png',
-					title: '18888888888',
-					name: '大王',
-					phone: '18888888888',
-					phoneNotes: '电话',
-					yys: '移动',
-					kj: '1',
-					address: '重庆',
-					time: '星期一',
-					icon: '/static/logo.png',
-					status: 0,// 播出 0:无响应 1:已接 2:已拒绝 | 来电 3：未接 4:已接 5:已拒绝
-					notes: '骚扰电话',
 
+	const list = ref([
+  {
+    "avatar": "/static/avatar/1.png",
+    "title": "13912345678",
+    "name": "李强",
+    "phone": "13912345678",
+    "phoneNotes": "电话",
+    "yys": "移动",
+    "kj": "3",
+    "address": "北京",
+    "time": "星期一",
+    "icon": "/static/icon/call.png",
+    "status": 1,
+    "notes": "工作往来"
   },
   {
-					avatar: '/static/logo.png',
+    "avatar": "/static/avatar/2.png",
-					title: '18888888888',
+    "title": "15887654321",
-					name: '',
+    "name": "王芳",
-					phone: '18888888888',
+    "phone": "15887654321",
-					phoneNotes: '电话',
+    "phoneNotes": "电话",
-					yys: '移动',
+    "yys": "联通",
-					kj: '1',
+    "kj": "2",
-					address: '重庆',
+    "address": "上海",
-					time: '星期一',
+    "time": "星期二",
-					icon: '/static/logo.png',
+    "icon": "/static/icon/call.png",
-					status: 1,// 播出 0:无响应 1:已接 2:已拒绝 | 来电 3：未接 4:已接 5:已拒绝
+    "status": 4,
-					notes: '骚扰电话',
+    "notes": "老朋友"
-
   },
-			]
+  {
+    "avatar": "/static/logo.png",
+    "title": "18711223344",
+    "name": "张伟",
+    "phone": "18711223344",
+    "phoneNotes": "电话",
+    "yys": "移动",
+    "kj": "1",
+    "address": "广州",
+    "time": "星期三",
+    "icon": "/static/logo.png",
+    "status": 0,
+    "notes": "推销电话"
+  },
+  {
+    "avatar": "/static/avatar/4.png",
+    "title": "13644556677",
+    "name": "刘洋",
+    "phone": "13644556677",
+    "phoneNotes": "电话",
+    "yys": "电信",
+    "kj": "5",
+    "address": "深圳",
+    "time": "星期四",
+    "icon": "/static/icon/call.png",
+    "status": 2,
+    "notes": "快递小哥"
+  },
+  {
+    "avatar": "/static/avatar/5.png",
+    "title": "17788889999",
+    "name": "陈静",
+    "phone": "17788889999",
+    "phoneNotes": "电话",
+    "yys": "联通",
+    "kj": "2",
+    "address": "杭州",
+    "time": "星期五",
+    "icon": "/static/icon/call.png",
+    "status": 3,
+    "notes": "大学同学"
+  },
+  {
+    "avatar": "/static/logo.png",
+    "title": "15133334444",
+    "name": "赵雷",
+    "phone": "15133334444",
+    "phoneNotes": "电话",
+    "yys": "移动",
+    "kj": "4",
+    "address": "成都",
+    "time": "星期一",
+    "icon": "/static/logo.png",
+    "status": 5,
+    "notes": "骚扰电话"
+  },
+  {
+    "avatar": "/static/avatar/7.png",
+    "title": "18966667777",
+    "name": "孙丽",
+    "phone": "18966667777",
+    "phoneNotes": "电话",
+    "yys": "电信",
+    "kj": "3",
+    "address": "武汉",
+    "time": "星期二",
+    "icon": "/static/icon/call.png",
+    "status": 1,
+    "notes": "客户"
+  },
+  {
+    "avatar": "/static/avatar/8.png",
+    "title": "15555558888",
+    "name": "周涛",
+    "phone": "15555558888",
+    "phoneNotes": "电话",
+    "yys": "联通",
+    "kj": "1",
+    "address": "西安",
+    "time": "星期三",
+    "icon": "/static/icon/call.png",
+    "status": 4,
+    "notes": "家人"
+  },
+  {
+    "avatar": "/static/logo.png",
+    "title": "13011112222",
+    "name": "吴杰",
+    "phone": "13011112222",
+    "phoneNotes": "电话",
+    "yys": "电信",
+    "kj": "5",
+    "address": "南京",
+    "time": "星期四",
+    "icon": "/static/logo.png",
+    "status": 0,
+    "notes": "广告推销"
+  },
+  {
+    "avatar": "/static/avatar/10.png",
+    "title": "18899990000",
+    "name": "郑爽",
+    "phone": "18899990000",
+    "phoneNotes": "电话",
+    "yys": "移动",
+    "kj": "2",
+    "address": "长沙",
+    "time": "星期五",
+    "icon": "/static/icon/call.png",
+    "status": 2,
+    "notes": "同事"
+  },
+  {
+    "avatar": "/static/logo.png",
+    "title": "15712345678",
+    "name": "王磊",
+    "phone": "15712345678",
+    "phoneNotes": "电话",
+    "yys": "移动",
+    "kj": "3",
+    "address": "天津",
+    "time": "星期一",
+    "icon": "/static/logo.png",
+    "status": 3,
+    "notes": "未知号码"
+  },
+  {
+    "avatar": "/static/avatar/12.png",
+    "title": "15287654321",
+    "name": "李娜",
+    "phone": "15287654321",
+    "phoneNotes": "电话",
+    "yys": "联通",
+    "kj": "4",
+    "address": "苏州",
+    "time": "星期二",
+    "icon": "/static/icon/call.png",
+    "status": 5,
+    "notes": "健身房"
+  },
+  {
+    "avatar": "/static/avatar/13.png",
+    "title": "18799887766",
+    "name": "张敏",
+    "phone": "18799887766",
+    "phoneNotes": "电话",
+    "yys": "移动",
+    "kj": "1",
+    "address": "青岛",
+    "time": "星期三",
+    "icon": "/static/icon/call.png",
+    "status": 1,
+    "notes": "学校老师"
+  },
+  {
+    "avatar": "/static/logo.png",
+    "title": "13655443322",
+    "name": "刘东",
+    "phone": "13655443322",
+    "phoneNotes": "电话",
+    "yys": "电信",
+    "kj": "5",
+    "address": "大连",
+    "time": "星期四",
+    "icon": "/static/logo.png",
+    "status": 4,
+    "notes": "保险推销"
+  },
+  {
+    "avatar": "/static/avatar/15.png",
+    "title": "17722334455",
+    "name": "陈龙",
+    "phone": "17722334455",
+    "phoneNotes": "电话",
+    "yys": "联通",
+    "kj": "2",
+    "address": "厦门",
+    "time": "星期五",
+    "icon": "/static/icon/call.png",
+    "status": 0,
+    "notes": "外卖"
+  },
+  {
+    "avatar": "/static/avatar/16.png",
+    "title": "15166778899",
+    "name": "赵雅",
+    "phone": "15166778899",
+    "phoneNotes": "电话",
+    "yys": "移动",
+    "kj": "3",
+    "address": "宁波",
+    "time": "星期一",
+    "icon": "/static/icon/call.png",
+    "status": 2,
+    "notes": "亲戚"
+  },
+  {
+    "avatar": "/static/logo.png",
+    "title": "18911223344",
+    "name": "孙浩",
+    "phone": "18911223344",
+    "phoneNotes": "电话",
+    "yys": "电信",
+    "kj": "4",
+    "address": "郑州",
+    "time": "星期二",
+    "icon": "/static/logo.png",
+    "status": 3,
+    "notes": "房产中介"
+  },
+  {
+    "avatar": "/static/avatar/18.png",
+    "title": "15544332211",
+    "name": "周梅",
+    "phone": "15544332211",
+    "phoneNotes": "电话",
+    "yys": "联通",
+    "kj": "1",
+    "address": "沈阳",
+    "time": "星期三",
+    "icon": "/static/icon/call.png",
+    "status": 5,
+    "notes": "银行客服"
+  },
+  {
+    "avatar": "/static/avatar/19.png",
+    "title": "13099887766",
+    "name": "吴刚",
+    "phone": "13099887766",
+    "phoneNotes": "电话",
+    "yys": "电信",
+    "kj": "2",
+    "address": "济南",
+    "time": "星期四",
+    "icon": "/static/icon/call.png",
+    "status": 1,
+    "notes": "合作伙伴"
+  },
+  {
+    "avatar": "/static/logo.png",
+    "title": "18818818818",
+    "name": "郑丽",
+    "phone": "18818818818",
+    "phoneNotes": "电话",
+    "yys": "移动",
+    "kj": "5",
+    "address": "重庆",
+    "time": "星期五",
+    "icon": "/static/logo.png",
+    "status": 4,
+    "notes": "骚扰电话"
+  }
+]);
+
+	const swiperList = ref([]); // 存储每个item的滑动距离
+	const startX = ref(0); // 触摸开始X坐标
+	const startY = ref(0); // 触摸开始Y坐标
+	const deleteWidth = ref(70); // 删除按钮宽度
+
+	onMounted(() => {
+		// 初始化swiperList数组
+		swiperList.value = new Array(list.value.length).fill(0);
+	});
+
+	watch(() => props.isHuise, (newValue, oldValue) => {
+		console.log(newValue);
+	});
+
+	// 触摸开始
+	const touchStart = (e, index) => {
+		startX.value = e.changedTouches[0].clientX;
+		startY.value = e.changedTouches[0].clientY;
+		// 关闭其他item的滑动
+		swiperList.value.forEach((item, i) => {
+			if (i !== index) {
+				swiperList.value[i] = 0;
+			}
+		});
 	};
-	},
-	watch: {
-		isHuise(newValue, oldValue) {
-			console.log(newValue)
 
+	// 触摸移动
+	const touchMove = (e, index) => {
+		const moveX = e.changedTouches[0].clientX;
+		const moveY = e.changedTouches[0].clientY;
+		const disX = moveX - startX.value;
+		const disY = moveY - startY.value;
+		// 判断是否为左右滑动
+		if (Math.abs(disX) > Math.abs(disY)) {
+			// 阻止默认事件，防止页面滚动
+			e.preventDefault();
+			// 计算滑动距离，限制在0到-deleteWidth之间
+			let distance = Math.max(-deleteWidth.value, Math.min(0, disX));
+			swiperList.value[index] = distance;
 		}
-	},
+	};
-	mounted() {
-		
-	},
-	methods: {
 
+	// 触摸结束
+	const touchEnd = (e, index) => {
+		const endX = e.changedTouches[0].clientX;
+		const disX = endX - startX.value;
+		// 判断是否滑动超过一半
+		if (disX < -deleteWidth.value / 2) {
+			swiperList.value[index] = -deleteWidth.value;
+		} else {
+			swiperList.value[index] = 0;
 		}
 	};
+
+	// 删除item
+	const deleteItem = (index) => {
+		// 显示确认弹窗
+		uni.showModal({
+			title: '确认删除',
+			content: '确定要删除这条通话记录吗？',
+			confirmText: '删除',
+			cancelText: '取消',
+			success: (res) => {
+				if (res.confirm) {
+					// 删除item
+					list.value.splice(index, 1);
+					// 更新swiperList
+					swiperList.value.splice(index, 1);
+				}
+			}
+		});
+	};
 </script>
 
 <style lang="scss" scoped>
 	.call-list {
+		width: 100vw;
+		overflow: hidden;
 		box-sizing: border-box;
 		background-color: #fff;
+
 		.item {
 			display: flex;
+			position: relative;
+			width: 100%;
 			.avatar {
 				width: 80rpx;
 				height: 80rpx;
-				overflow: hidden;
+
 				image {
 					width: 100% !important;
 					height: 100% !important;
 				}
 			}
+
 			.infoBox {
 				width: calc(100% - 80rpx);
 				display: flex;
 				justify-content: space-between;
 				align-items: center;
-				box-shadow: inset 0 -0.3px 0 0 #C2C2C2;
+				background-color: #fff;
+
 				.left-box {
 					display: flex;
 					justify-content: flex-start;
@@ -167,26 +504,32 @@ export default {
 							color: #333;
 							margin-bottom: 10rpx;
 						}
+
 						.info {
 							display: flex;
 							font-size: 28rpx;
 							color: #666;
+
 							view {
 								margin-right: 10rpx;
 							}
+
 							.kj {
 								line-height: 0;
 								width: 22rpx;
 								height: 22rpx;
+
 								image {
 									width: 100%;
 									height: 100%;
 								}
 							}
+
 							.status-icon {
 								line-height: 0;
 								width: 22rpx;
 								height: 22rpx;
+
 								image {
 									width: 100%;
 									height: 100%;
@@ -196,19 +539,23 @@ export default {
 
 					}
 				}
+
 				.right-box {
 					display: flex;
 					justify-content: flex-end;
 					align-items: center;
+
 					.time {
 						font-size: 28rpx;
 						color: #666;
 					}
+
 					.icon {
 						width: 40rpx;
 						height: 40rpx;
 						overflow: hidden;
 						margin-left: 20rpx;
+
 						image {
 							width: 100%;
 							height: 100%;
@@ -217,22 +564,53 @@ export default {
 				}
 			}
 
+			// 删除按钮
+			.delete-btn {
+				position: absolute;
+				top: 0;
+				right: -160rpx;
+				width: 160rpx;
+				height: 100%;
+				background-color: #FF3B30;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				.delete-text {
+					color: #fff;
+					font-size: 32rpx;
 				}
 			}
+		}
+	}
+
 	.call-list-ios {
+		.delete-btn{
+			right: -140rpx !important;
+			width: 140rpx !important;
+			height: 100% !important;
+			background-color: #FF3B30;
+		}
 		.item {
 			align-items: center;
 			justify-content: space-between;
+			height: 132rpx;
 		}
+
 		.avatar {
 			width: 84rpx;
 			height: 84rpx;
 			border-radius: 50%;
 			margin-left: 32rpx;
 		}
+
 		.infoBox {
 			width: calc(100% - 136rpx) !important;
 			padding: 24rpx 32rpx 24rpx 0;
+			height: 100%;
+			box-sizing: border-box;
+
+			box-shadow: inset 0 -0.3px 0 0 #C2C2C2;
+
 			.left-box {
 				.title {
 					font-weight: 400;
@@ -240,18 +618,22 @@ export default {
 					color: #1A1A1A;
 					line-height: 16px;
 				}
+
 				.title-red {
 					color: #FC3E30 !important;
 				}
+
 				.info {
 					align-items: center;
 				}
+
 				.info .phone {
 					font-weight: 400;
 					font-size: 14px;
 					color: #838383;
 					line-height: 20px;
 				}
+
 				.info .yys {
 					height: 12px;
 					background: #C7C7C7;
@@ -264,6 +646,7 @@ export default {
 					text-align: center;
 				}
 			}
+
 			.right-box {
 				.time {
 					font-weight: 400;
@@ -271,11 +654,13 @@ export default {
 					color: #838383;
 					line-height: 14px;
 				}
+
 				.icon {
 					width: 40rpx;
 					height: 40rpx;
 					overflow: hidden;
 					margin-left: 14rpx;
+
 					image {
 						width: 100%;
 						height: 100%;
@@ -284,22 +669,33 @@ export default {
 			}
 		}
 	}
+
 	.call-list-xiaomi {
+		.item {
+			height: 140rpx;
+		}
+
 		.infoBox {
 			width: 100% !important;
 			padding: 34rpx 56rpx 28rpx 56rpx;
+			height: 100%;
+			box-sizing: border-box;
+
 			.title {
 				font-weight: 400;
 				font-size: 16px;
 				color: #1A1A1A;
+
 				text {
 					font-size: 13px !important;
 					color: #767676 !important;
 				}
 			}
+
 			.title-red {
 				color: #EE0115 !important;
 			}
+
 			.info {
 
 				view {
@@ -309,24 +705,171 @@ export default {
 			}
 		}
 	}
+
 	.call-list-oppo {
 		.item {
 			padding: 32rpx 36rpx 0 36rpx !important;
 			justify-content: space-between;
+			height: 140rpx;
 		}
+
 		.infoBox {
-			width: calc(100% - 20rpx);
+			width: calc(100% - 46rpx) !important;
 			padding-bottom: 36rpx;
+			height: 100%;
+			box-sizing: border-box;
+			box-shadow: inset 0 -0.3px 0 0 #C2C2C2;
+
+			.title {
+				font-weight: 400;
+				font-size: 16px;
+				color: #1A1A1A;
 			}
+
+			.title-red {
+				color: #DB2C22 !important;
+			}
+
+			.info {
+
+				view {
+					font-size: 13px;
+					color: #767676;
+				}
+
+				.notes {
+					color: #F17A30;
+				}
+			}
+
+			.right-box {
+				.time {
+					color: #767676;
+					font-size: 13px;
+				}
+			}
+		}
+
 		.avatar {
 			width: 26rpx !important;
 			height: 26rpx !important;
 			border-radius: 0 !important;
+
 			image {
 				width: 100% !important;
 				height: 100% !important;
 			}
 		}
+
+		.info {
+			display: flex;
+			align-items: center;
+		}
+	}
+
+	.call-list-vivo {
+		.item {
+			padding: 36rpx 52rpx 0 36rpx !important;
+			justify-content: space-between;
+			height: 140rpx;
+
+			.infoBox {
+				width: calc(100% - 52rpx) !important;
+				padding-bottom: 32rpx;
+				height: 100%;
+				box-sizing: border-box;
+				box-shadow: inset 0 -0.3px 0 0 #C2C2C2;
+
+				.title {
+					font-weight: 400;
+					font-size: 16px;
+					color: #1A1A1A;
+				}
+
+				.title-red {
+					color: #F04E51 !important;
+				}
+
+				.info {
+
+					view {
+						font-size: 12px;
+						color: #8C8C8C;
+					}
+				}
+
+				.right-box {
+					.time {
+						color: #8C8C8C;
+						font-size: 14px;
+					}
+				}
+			}
+		}
+
+		.avatar {
+			width: 32rpx !important;
+			height: 32rpx !important;
+			border-radius: 0 !important;
+
+			image {
+				width: 100% !important;
+				height: 100% !important;
+			}
+		}
+	}
+
+	.call-list-huawei {
+		.item {
+			padding: 24rpx 32rpx 0 32rpx !important;
+			justify-content: space-between;
+			height: 120rpx;
+		}
+
+		.infoBox {
+			width: calc(100% - 52rpx) !important;
+			padding-bottom: 24rpx;
+			height: 100%;
+			box-sizing: border-box;
+			box-shadow: inset 0 -0.3px 0 0 #C2C2C2;
+
+			.title {
+				font-weight: 400;
+				font-size: 16px;
+				color: #1A1A1A;
+			}
+
+			.title-red {
+				color: #E83F28 !important;
+			}
+
+			.info {
+
+				view {
+					font-size: 13px;
+					color: #696969;
+				}
+			}
+
+			.right-box {
+				.time {
+					color: #696969;
+					font-size: 13px;
+				}
+			}
+		}
+
+		.avatar {
+			width: 32rpx !important;
+			height: 32rpx !important;
+			border-radius: 0 !important;
+
+			image {
+				width: 100% !important;
+				height: 100% !important;
+			}
+		}
+
 		.info {
 			display: flex;
 			align-items: center;

components/call-log/nav-bar/nav-bar.vue

@@ -0,0 +1,158 @@
+<template>
+	<uni-nav-bar :backgroundColor="navBgColor" class="nav-bar" :border="false" :title="title" fixed="true" >
+		<template v-slot:left>
+			<slot name="left">
+				<view :class="[type+'LeftTitle']"  v-if="type=='ios'">
+					编辑
+				</view>
+				<view :class="[type+'LeftTitle']"  v-else-if="type=='vivo'">
+					拨号
+				</view>
+				<view :class="[type+'LeftTitle']"  v-else-if="type=='oppo'">
+					通话
+				</view>
+				<view :class="[type+'LeftTitle']"  v-else-if="type=='huawei'">
+					电话
+				</view>
+			</slot>
+		</template>
+		<view class="nav-bar-title " :class="['nav-bar-title-'+type]">
+			<slot>
+				<view class="iosBox" v-if="type=='ios'">
+					<view class="btn active">
+						全部来电
+					</view>
+					<view class="btn">
+						未接来电
+					</view>
+				</view>
+				<view class="title" v-else-if="type=='xiaomi'" :style="{opacity: navOpacity}">
+					通话
+				</view>
+			</slot>
+		</view>
+		<template v-slot:right>
+			<slot name="right">
+				<image v-if="type!='ios'" class="rightImg" :class="['rightImg_'+type]" src="/static/image/call/xiaomiNavRightImg.png"></image>
+			</slot>
+		</template>
+	</uni-nav-bar>
+</template>
+
+<script setup>
+	import {
+		onMounted,
+		reactive,
+		ref,
+		toRefs,
+		watch
+	} from 'vue'
+
+	const topPopup = ref()
+
+	// 定义组件属性
+	const props = defineProps({
+		bgColor: {
+			type: String,
+			default: '#fff'
+		},
+		textColor: {
+			type: String,
+			default: '#000'
+		},
+		title: {
+			type: String,
+			default: ''
+		},
+		type: {
+			type: String,
+			default: 'ios'
+		},
+		scrollTop:{
+			type: Number,
+			default: 0
+		}
+	})
+
+	const data = reactive({
+		statusBarHeight: 0,
+		showTipLayer: true,
+		navOpacity: 0, // 导航栏透明度
+		navBgColor: props.bgColor // 导航栏背景色
+	})
+
+	let {
+		showTipLayer,
+		navOpacity,
+		navBgColor
+	} = toRefs(data)
+
+	// 监听 scrollTop 变化
+	watch(() => props.scrollTop, (newValue, oldValue) => {
+		console.log('scrollTop changed:', newValue);
+		// 根据 scrollTop 的值计算导航栏透明度
+		if (newValue > 0) {
+			// 当 scrollTop 大于 0 时，透明度逐渐增加
+			navOpacity.value = Math.min(1, newValue / 100);
+			// 可以根据需要调整背景色
+			// navBgColor.value = `rgba(255, 255, 255, ${navOpacity.value})`;
+		} else {
+			// 当 scrollTop 为 0 时，透明度为 1
+			navOpacity.value = 0;
+			// navBgColor.value = props.bgColor;
+		}
+	});
+
+	onMounted(() => {
+	})
+</script>
+
+<style scoped lang="scss">
+	.iosLeftTitle {
+		font-weight: 400;
+		font-size: 16px;
+		color: #018AE0;
+	}
+	.nav-bar-title-xiaomi {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		font-weight: bold;
+		font-size: 18px;
+		color: #1A1A1A;
+	}
+	.nav-bar-title-ios {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		.iosBox {
+			width: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: space-around;
+			width: 145px;
+			height: 30px;
+			background: #EEEEEE;
+			border-radius: 8px 8px 8px 8px;
+			.btn {
+				font-size: 12px;
+				color: #1A1A1A;
+				width: 69px;
+				height: 26px;
+				text-align: center;
+				line-height: 26px;
+			}
+			.active {
+				background: #FFFFFF;
+				box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
+				border-radius: 6px 6px 6px 6px;
+			}
+		}
+	}
+	.rightImg_xiaomi{
+		width: 20px;
+		height: 20px;
+	}
+</style>

components/call-log/tabbar/tabbar.vue

@@ -0,0 +1,144 @@
+<template>
+	<view class="footer" :class="['footer_'+type]">
+		<view class="item" v-for="(item,index) in list" :key="index">
+			<image :src="`/static/image/call/${type}TabbarImg${index+1}.png`" mode=""></image>
+			<text>{{item}}</text>
+		</view>
+	</view>
+	<view class="footer footerZhangwei" :class="['footer_'+type]">
+		<view class="item" v-for="(item,index) in list" :key="index">
+			<image :src="`/static/image/call/${type}TabbarImg${index+1}.png`" mode=""></image>
+			<text>{{item}}</text>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		onMounted,
+		reactive,
+		ref,
+		toRefs
+	} from 'vue'
+
+	const topPopup = ref()
+
+	// 定义组件属性
+	const props = defineProps({
+		bgColor: {
+			type: String,
+			default: '#fff'
+		},
+		textColor: {
+			type: String,
+			default: '#000'
+		},
+		title: {
+			type: String,
+			default: ''
+		},
+		type: {
+			type: String,
+			default: 'ios'
+		},
+	})
+
+	const data = reactive({
+		statusBarHeight: 0,
+		showTipLayer: true,
+		list: [
+			"个人收藏",
+			"最近通话",
+			"通讯录",
+			"拨号键盘",
+			"语音留言"
+		]
+	})
+
+	let {
+		list,
+		showTipLayer
+	} = toRefs(data)
+
+	onMounted(() => {
+		if (props.type == 'xiaomi') {
+			list.value = ["通话",
+				"联系人",
+				"营业厅"
+			]
+		}else if (props.type == 'oppo') {
+			list.value = ["通话",
+				"联系人",
+				"营业厅"
+			]
+		}
+	})
+</script>
+
+<style scoped lang="scss">
+	.footerZhangwei{
+		position: relative !important; 
+		opacity: 0 !important;
+	}
+	.footer {
+		position: fixed;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		display: flex;
+		justify-content: space-around;
+		background: #f7f7f7;
+
+		.item {
+			display: flex;
+			flex-direction: column;
+			text-align: center;
+			align-items: center;
+
+			image {
+				width: 32px;
+				height: 32px;
+			}
+
+			text {
+				font-size: 10px;
+				color: #959597;
+			}
+		}
+	}
+
+	.footer_ios {
+		padding-top: 2px;
+		padding-bottom: constant(safe-area-inset-bottom) !important; // 兼容 IOS<11.2 
+		padding-bottom: env(safe-area-inset-bottom) !important; // 兼容 IOS>11.2 
+		.item:nth-child(2) {
+			text {
+				color: #007AFC;
+			}
+		}
+	}
+
+
+	.footer_xiaomi ,.footer_oppo{
+		padding-top: 7px;
+		padding-bottom: 17px;
+		background-color: #fff !important;
+		.item {
+			image {
+				width: 24px;
+				height: 24px;
+			}
+		
+			text {
+				font-size: 10px;
+				color: #999999;
+			}
+		}
+		.item:nth-child(1) {
+			text {
+				color: #333;
+			}
+		}
+	}
+	
+</style>

pages/call-log/call.vue

@@ -1,48 +1,28 @@
 <template>
 	<view class="container">
 		<!-- 自定义头部导航栏 -->
-		<ZdyNavbar  :title="data.navbar.title"
+		<ZdyNavbar :type="data.type" :scrollTop="data.scrollTop"/>
-			:bgColor="data.navbar.bgColor" :isBack="true" />
+		<ZdyHeader :type="data.type" />
-        <!-- 通话记录列表 -->
+		<callList :type="data.type"></callList>
-        <callList type="ios"></callList>
+		<tabbar :type="data.type" />
-        <callList type="xiaomi"></callList>
-        <callList type="oppo"></callList>
 	</view>
 </template>
 
 <script setup>
-// 自定义头部
+	import ZdyNavbar from "@/components/call-log/nav-bar/nav-bar.vue"
-import ZdyNavbar from "@/components/nav-bar/nav-bar.vue"
+	import ZdyHeader from "@/components/call-log/header/header.vue"
 	import callList from "@/components/call-log/list/list.vue"
+	import tabbar from "@/components/call-log/tabbar/tabbar.vue"
 
-import {
+
-	ref,
+	import { ref, reactive, watch, nextTick, getCurrentInstance } from "vue";
-	reactive,
+	import { onLoad, onShow, onReady, onPageScroll, onReachBottom } from "@dcloudio/uni-app";
-	watch,
+	const { appContext, proxy } = getCurrentInstance();
-	nextTick,
-	getCurrentInstance
-} from "vue";
-import {
-	onLoad,
-	onShow,
-	onReady,
-	onPullDownRefresh,
-	onReachBottom
-} from "@dcloudio/uni-app";
-const {
-	appContext,
-	proxy
-} = getCurrentInstance();
 	const data = reactive({
-	navbar: {
+		type: 'ios',
-		title: "身份证",
+		scrollTop:0
-		bgColor: '#EDEDED',
-	},
-
 	})
 
-
-
 	onLoad((option) => {
 
 	})
@@ -50,10 +30,10 @@ onReady(() => {
 
 	})
 	onShow(() => {})
-onPullDownRefresh(() => {
+	onPageScroll((e) => {
-	setTimeout(() => {
+		console.log(e)
-		uni.stopPullDownRefresh();
+		data.scrollTop=e.scrollTop
-	}, 1000);
+
 	})
 	onReachBottom(() => {