封装通话组件

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/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,63 +1,43 @@
 <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 callList from "@/components/call-log/list/list.vue"
+	import tabbar from "@/components/call-log/tabbar/tabbar.vue"
 
-import {
-	ref,
-	reactive,
-	watch,
-	nextTick,
-	getCurrentInstance
-} from "vue";
-import {
-	onLoad,
-	onShow,
-	onReady,
-	onPullDownRefresh,
-	onReachBottom
-} from "@dcloudio/uni-app";
-const {
-	appContext,
-	proxy
-} = getCurrentInstance();
-const data = reactive({
-	navbar: {
-		title: "身份证",
-		bgColor: '#EDEDED',
-	},
 
+	import { ref, reactive, watch, nextTick, getCurrentInstance } from "vue";
+	import { onLoad, onShow, onReady, onPageScroll, onReachBottom } from "@dcloudio/uni-app";
+	const { appContext, proxy } = getCurrentInstance();
+	const data = reactive({
+		type: 'ios',
+		scrollTop:0
 	})
 
+	onLoad((option) => {
 
+	})
+	onReady(() => {
 
-onLoad((option) => {
+	})
+	onShow(() => {})
+	onPageScroll((e) => {
+		console.log(e)
+		data.scrollTop=e.scrollTop
 
-})
+	})
-onReady(() => {
+	onReachBottom(() => {
 
-})
+	})
-onShow(() => { })
-onPullDownRefresh(() => {
-	setTimeout(() => {
-		uni.stopPullDownRefresh();
-	}, 1000);
-})
-onReachBottom(() => {
-
-})
 </script>
 
 <style lang="scss" scoped>