375 lines
7.5 KiB
Vue
375 lines
7.5 KiB
Vue
<template>
|
|
<view>
|
|
<uni-nav-bar :backgroundColor="navBgColor" class="nav-bar" :border="false" :title="title" fixed="true"
|
|
statusBar="true">
|
|
<template v-slot:left>
|
|
<slot name="left">
|
|
<view :class="[type+'LeftTitle']" :style="{opacity:(type!='huawei'&&type!='oppo'?1: navOpacity)}">
|
|
{{LeftTitle}}
|
|
</view>
|
|
|
|
</slot>
|
|
</template>
|
|
<view class="nav-bar-title " :class="['nav-bar-title-'+type]">
|
|
<slot>
|
|
<view class="iosBox" v-if="type=='ios'">
|
|
<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="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>
|
|
<image class="close" src="/static/image/common/tipLayer-close.png" mode="" @click="closeTipLayer"></image>
|
|
<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>
|
|
</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
|
|
},
|
|
tipLayerText: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
isTipLayer: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
})
|
|
|
|
const data = reactive({
|
|
active: true,
|
|
statusBarHeight: 0,
|
|
LeftTitle: '',
|
|
showTipLayer: true,
|
|
navOpacity: 0, // 导航栏透明度
|
|
navBgColor: props.bgColor // 导航栏背景色
|
|
})
|
|
|
|
let {
|
|
active,
|
|
LeftTitle,
|
|
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(() => {
|
|
if (props.type == 'ios') {
|
|
LeftTitle.value = '编辑'
|
|
} else if (props.type == 'vivo') {
|
|
LeftTitle.value = '拨号'
|
|
} else if (props.type == 'oppo') {
|
|
LeftTitle.value = '通话'
|
|
} else if (props.type == 'huawei') {
|
|
LeftTitle.value = '电话'
|
|
} else {
|
|
LeftTitle.value = ''
|
|
}
|
|
// 同步获取系统信息
|
|
const systemInfo = uni.getSystemInfoSync();
|
|
data.statusBarHeight = systemInfo.statusBarHeight || 0;
|
|
if (props.isTipLayer) {
|
|
if (uni.getStorageSync("call_" + props.type) == props.type) {
|
|
showTipLayer.value = false
|
|
}
|
|
}
|
|
})
|
|
|
|
function setActive(status) {
|
|
active.value = status
|
|
uni.$emit('setActive', status)
|
|
}
|
|
|
|
const closeTipLayer = () => {
|
|
showTipLayer.value = false
|
|
uni.setStorageSync("call_" + props.type, props.type)
|
|
emit("refresh")
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
::v-deep .uni-navbar__header-btns {
|
|
width: 27vw !important;
|
|
}
|
|
|
|
.iosLeftTitle {
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
color: #018AE0;
|
|
}
|
|
|
|
.rightImgBox {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
image {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
}
|
|
|
|
.rightImg_oppo {
|
|
margin-left: 26px;
|
|
}
|
|
|
|
.rightImg_vivo {
|
|
margin-left: 26px;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.oppoLeftTitle {
|
|
padding-left: 8px;
|
|
font-weight: bold;
|
|
font-size: 32px;
|
|
color: #1A1A1A;
|
|
}
|
|
|
|
.huaweiLeftTitle {
|
|
padding-left: 8px;
|
|
font-weight: bold;
|
|
font-size: 30px;
|
|
color: #1A1A1A;
|
|
}
|
|
|
|
.vivoLeftTitle {
|
|
padding-left: 34px;
|
|
font-weight: bold;
|
|
font-size: 30px;
|
|
color: #1A1A1A;
|
|
}
|
|
|
|
.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-oppo {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.oppoBox {
|
|
padding: 0 2px;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
width: 137px;
|
|
height: 34px;
|
|
background: #E9E9E9;
|
|
border-radius: 17px 17px 17px 17px;
|
|
|
|
.btn {
|
|
font-size: 12px;
|
|
color: #6B6B6B;
|
|
width: 67px;
|
|
height: 30px;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
}
|
|
|
|
.active {
|
|
color: #1A1A1A;
|
|
background: #FFFFFF;
|
|
border-radius: 17px 17px 17px 17px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
margin: 0 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rightImg_xiaomi {
|
|
width: 20px !important;
|
|
height: 20px !important;
|
|
}
|
|
|
|
.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> |