通话引导提示

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

@@ -1,47 +1,62 @@
 <template>
-	<uni-nav-bar :backgroundColor="navBgColor" class="nav-bar" :border="false" :title="title" fixed="true" statusBar="true">
+	<view>
-		<template v-slot:left>
+		<uni-nav-bar :backgroundColor="navBgColor" class="nav-bar" :border="false" :title="title" fixed="true"
-			<slot name="left">
+			statusBar="true">
-				<view :class="[type+'LeftTitle']"  :style="{opacity:(type!='huawei'&&type!='oppo'?1: navOpacity)}">
+			<template v-slot:left>
-					{{LeftTitle}}
+				<slot name="left">
-				</view>
+					<view :class="[type+'LeftTitle']" :style="{opacity:(type!='huawei'&&type!='oppo'?1: navOpacity)}">
+						{{LeftTitle}}
+					</view>
 
-			</slot>
+				</slot>
-		</template>
+			</template>
-		<view class="nav-bar-title " :class="['nav-bar-title-'+type]">
+			<view class="nav-bar-title " :class="['nav-bar-title-'+type]">
-			<slot>
+				<slot>
-				<view class="iosBox" v-if="type=='ios'">
+					<view class="iosBox" v-if="type=='ios'">
-					<view class="btn " :class="{'active':active}"  @click.stop="setActive(true)">
+						<view class="btn " :class="{'active':active}" @click.stop="setActive(true)">
-						全部来电
+							全部来电
+						</view>
+						<view class="btn" :class="{'active':!active}" @click.stop="setActive(false)">
+							未接来电
+						</view>
 					</view>
-					<view class="btn" :class="{'active':!active}"  @click.stop="setActive(false)">
+					<view class="oppoBox" v-if="type=='oppo'" :style="{opacity: navOpacity?1-navOpacity:1}">
-						未接来电
+						<view class="btn " :class="{'active':active}" @click.stop="setActive(true)">
+							全部
+						</view>
+						<view class="btn" :class="{'active':!active}" @click.stop="setActive(false)">
+							未接
+						</view>
 					</view>
+					<view class="title" v-else-if="type=='xiaomi'" :style="{opacity: navOpacity}">
+						通话
+					</view>
+				</slot>
+			</view>
+			<template v-slot:right>
+				<slot name="right">
+					<view class="rightImgBox" :class="['rightImgBox'+type]">
+
+						<image v-if="type=='oppo'||type=='vivo'" class="rightImg"
+							:src="`/static/image/call/${type}NavRightImg2.png`"></image>
+						<image v-if="type!='ios'" class="rightImg" :class="['rightImg_'+type]"
+							:src="`/static/image/call/${type}NavRightImg.png`"></image>
+					</view>
+				</slot>
+			</template>
+		</uni-nav-bar>
+
+		<view class="tipLayer" :style="{ top: `${45 + data.statusBarHeight}px` }" v-if="isTipLayer&&showTipLayer">
+			<view class="tipLayer-content">
+				<view class="title">
+					<slot name="tipLayer">点击此处<text>[{{ tipLayerText }}]</text></slot>
 				</view>
-				<view class="oppoBox" v-if="type=='oppo'" :style="{opacity: navOpacity?1-navOpacity:1}">
+				<image class="close" src="/static/image/common/tipLayer-close.png" mode="" @click="closeTipLayer"></image>
-					<view class="btn " :class="{'active':active}"  @click.stop="setActive(true)">
+				<image v-if="type=='ios'" class="triangleImg" src="/static/image/common/tipLayer-eye2.png"></image>
-						全部
+				<image v-else class="triangleImg" src="/static/image/common/tipLayer-eye.png"></image>
-					</view>
+			</view>
-					<view class="btn" :class="{'active':!active}"  @click.stop="setActive(false)">
-						未接
-					</view>
-				</view>
-				<view class="title" v-else-if="type=='xiaomi'" :style="{opacity: navOpacity}">
-					通话
-				</view>
-			</slot>
 		</view>
-		<template v-slot:right>
+	</view>
-			<slot name="right">
-				<view class="rightImgBox" :class="['rightImgBox'+type]">
-
-					<image v-if="type=='oppo'||type=='vivo'" class="rightImg" :src="`/static/image/call/${type}NavRightImg2.png`"></image>
-					<image v-if="type!='ios'" class="rightImg" :class="['rightImg_'+type]"
-						:src="`/static/image/call/${type}NavRightImg.png`"></image>
-				</view>
-			</slot>
-		</template>
-	</uni-nav-bar>
 </template>
 
 <script setup>
@@ -76,13 +91,21 @@
 		scrollTop: {
 			type: Number,
 			default: 0
-		}
+		},
+		tipLayerText: {
+			type: String,
+			default: ''
+		},
+		isTipLayer: {
+			type: Boolean,
+			default: false
+		},
 	})
 
 	const data = reactive({
-		active:true,
+		active: true,
 		statusBarHeight: 0,
-		LeftTitle:'',
+		LeftTitle: '',
 		showTipLayer: true,
 		navOpacity: 0, // 导航栏透明度
 		navBgColor: props.bgColor // 导航栏背景色
@@ -113,21 +136,33 @@
 	});
 
 	onMounted(() => {
-		if(props.type=='ios'){
+		if (props.type == 'ios') {
-			LeftTitle.value='编辑'
+			LeftTitle.value = '编辑'
-		}else if(props.type=='vivo'){
+		} else if (props.type == 'vivo') {
-			LeftTitle.value='拨号'
+			LeftTitle.value = '拨号'
-		}else if(props.type=='oppo'){
+		} else if (props.type == 'oppo') {
-			LeftTitle.value='通话'
+			LeftTitle.value = '通话'
-		}else if(props.type=='huawei'){
+		} else if (props.type == 'huawei') {
-			LeftTitle.value='电话'
+			LeftTitle.value = '电话'
-		}else {
+		} else {
-			LeftTitle.value=''
+			LeftTitle.value = ''
+		}
+		if (props.isTipLayer) {
+			if (uni.getStorageSync("call_" + props.type) == props.type) {
+				showTipLayer.value = false
+			}
 		}
 	})
-	function setActive(status){
+
-		active.value=status
+	function setActive(status) {
-		uni.$emit('setActive',status)
+		active.value = status
+		uni.$emit('setActive', status)
+	}
+
+	const closeTipLayer = () => {
+		showTipLayer.value = false
+		uni.setStorageSync("call_" + props.type, props.type)
+		emit("refresh")
 	}
 </script>
 
@@ -145,8 +180,9 @@
 	.rightImgBox {
 		display: flex;
 		align-items: center;
+
 		image {
-			width: 24px ;
+			width: 24px;
 			height: 24px;
 		}
 	}
@@ -154,6 +190,7 @@
 	.rightImg_oppo {
 		margin-left: 26px;
 	}
+
 	.rightImg_vivo {
 		margin-left: 26px;
 		margin-right: 16px;
@@ -179,6 +216,7 @@
 		font-size: 30px;
 		color: #1A1A1A;
 	}
+
 	.nav-bar-title-xiaomi {
 		display: flex;
 		align-items: center;
@@ -265,5 +303,70 @@
 	.rightImg_huawei {
 		width: 38px !important;
 		height: 38px !important;
+	}
+
+	.tipLayer {
+		box-sizing: border-box;
+		min-width: 200px !important;
+		height: 48px;
+		background: #B8EDFE;
+		border-radius: 8px 8px 8px 8px;
+		position: fixed;
+		/* top: 115px; */
+		left: 50%;
+		transform: translateX(-50%);
+		z-index: 999;
+
+		.tipLayer-content {
+			position: relative;
+
+			.title {
+				font-weight: 450;
+				font-size: 14px;
+				color: #268FFF;
+				line-height: 48px;
+				text-align: center;
+
+				text {
+					font-size: 14px;
+					font-weight: bold;
+					color: #006ADD;
+				}
+
+				::v-deep text {
+					font-size: 14px;
+					font-weight: bold;
+					color: #006ADD;
+				}
+			}
+
+			.triangleImg {
+				width: 111px;
+				height: 52px;
+				pointer-events: none;
+				position: absolute;
+				top: -23px;
+				left: calc(50% - 111px);
+			}
+
+			.triangle {
+				position: absolute;
+				top: -57px;
+				left: calc(50% - 40px);
+				pointer-events: none;
+			}
+
+			.close {
+				position: absolute;
+				top: -5px;
+				right: -5px;
+				width: 18px;
+				height: 18px;
+			}
+		}
+
+
+
+
 	}
 </style>

pages/call-log/call.vue

@@ -8,7 +8,7 @@
 	</view>
 	<view class="container">
 		<!-- 自定义头部导航栏 -->
-		<ZdyNavbar :type="data.type" :scrollTop="data.scrollTop" @click="open"/>
+		<ZdyNavbar tipLayerText="新增记录" :isTipLayer="true" :type="data.type" :scrollTop="data.scrollTop" @click="open"/>
 		<ZdyHeader :type="data.type" />
 		<callList :type="data.type" ref="callLogList"></callList>
 		<tabbar :type="data.type" />

pages/other/card/card.vue

@@ -23,7 +23,7 @@
 					<l-painter-view :css="`position: absolute;left:262px;top:102px;`">
 						<l-painter-text :css="data.textCss2+data.textCssLeft" :text="data.form.nation" />
 					</l-painter-view>
-					<l-painter-view :css="`position: absolute;left:122px;top:150px;`">
+					<l-painter-view :css="`position: absolute;left:122px;top:152px;`">
 						<l-painter-text v-for="(item,index) in data.form.year.toString()" :css="data.textCss3+data.textCssLeft"
 							:text="item" :key="index" />
 					</l-painter-view>