218 lines
3.9 KiB
Vue
218 lines
3.9 KiB
Vue
<template>
|
|
<view class="header" :class="['header_'+type]">
|
|
<view class="title" v-if="type!='vivo'">
|
|
{{title}}
|
|
</view>
|
|
<view class="search" v-if="type!='oppo'&&type!='huawei'&&type!='vivo'">
|
|
<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="selectType" v-if="type=='huawei'">
|
|
<view class="btn active">
|
|
全部来电
|
|
</view>
|
|
<view class="btn">
|
|
未接来电
|
|
</view>
|
|
</view>
|
|
<view class="selectTypeVivo" v-if="type=='vivo'">
|
|
<view class="btn active">
|
|
全部
|
|
</view>
|
|
<view class="btn">
|
|
未接
|
|
</view>
|
|
</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')
|
|
}else if(props.type=='oppo'){
|
|
title.value="通话"
|
|
}else if(props.type=='huawei'){
|
|
title.value="电话"
|
|
}
|
|
|
|
})
|
|
</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;
|
|
}
|
|
}
|
|
}
|
|
.selectTypeVivo{
|
|
padding-top: 18px;
|
|
height: 48px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.btn{
|
|
width: 62px;
|
|
background-color: #F6F6F6;
|
|
text-align: center;
|
|
font-size: 13px;
|
|
color: #555555;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
border-radius: 8px 0 0 8px;
|
|
margin: 0 1px;
|
|
}
|
|
.btn:nth-child(2){
|
|
border-radius:0 8px 8px 0;
|
|
}
|
|
.active{
|
|
font-size: 13px;
|
|
color: #1A1A1A;
|
|
background: #DCF6E6;
|
|
}
|
|
}
|
|
.header_huawei{
|
|
padding-bottom: 14px;
|
|
.title{
|
|
padding-left: 3px;
|
|
font-weight: bold;
|
|
font-size: 30px !important;
|
|
color: #1A1A1A !important;
|
|
}
|
|
.selectType{
|
|
margin-top: 18px;
|
|
height: 38px;
|
|
background: #F4F4F4;
|
|
border-radius: 19px 19px 19px 19px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 2px;
|
|
.btn{
|
|
width: 50%;
|
|
text-align: center;
|
|
font-size: 13px;
|
|
color: #555555;
|
|
height: 34px;
|
|
line-height: 34px;
|
|
}
|
|
.active{
|
|
font-size: 13px;
|
|
color: #1A1A1A;
|
|
background: #fff;
|
|
border-radius: 19px 19px 19px 19px;
|
|
}
|
|
|
|
}
|
|
}
|
|
.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> |