Merge branch 'Branch_1' of https://git.u8t.cn/tangxinyue/alipay-emulator into Branch_1

This commit is contained in:
tangxinyue 2026-03-10 16:30:48 +08:00
commit ef71a0a669
31 changed files with 1140 additions and 178 deletions

View File

@ -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>

View File

@ -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 {
name: 'call-list',
props: {
const props = defineProps({
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',
title: '18888888888',
name: '',
phone: '18888888888',
phoneNotes: '电话',
yys: '移动',
kj: '1',
address: '重庆',
time: '星期一',
icon: '/static/logo.png',
status: 1,// 0: 1: 2: | 3 4: 5:
notes: '骚扰电话',
"avatar": "/static/avatar/2.png",
"title": "15887654321",
"name": "王芳",
"phone": "15887654321",
"phoneNotes": "电话",
"yys": "联通",
"kj": "2",
"address": "上海",
"time": "星期二",
"icon": "/static/icon/call.png",
"status": 4,
"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{
.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{
view {
margin-right: 10rpx;
}
.kj{
.kj {
line-height: 0;
width: 22rpx;
height: 22rpx;
image {
width: 100%;
height: 100%;
}
}
.status-icon{
.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,46 +564,81 @@ 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 {
.item{
.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{
.infoBox {
width: calc(100% - 136rpx) !important;
padding: 24rpx 32rpx 24rpx 0;
.left-box{
height: 100%;
box-sizing: border-box;
box-shadow: inset 0 -0.3px 0 0 #C2C2C2;
.left-box {
.title {
font-weight: 400;
font-size: 16px;
color: #1A1A1A;
line-height: 16px;
}
.title-red{
.title-red {
color: #FC3E30 !important;
}
.info{
.info {
align-items: center;
}
.info .phone {
font-weight: 400;
font-size: 14px;
color: #838383;
line-height: 20px;
}
.info .yys {
height: 12px;
background: #C7C7C7;
border-radius: 2px 2px 2px 2px;
padding:0 4rpx;
padding: 0 4rpx;
font-weight: 400;
font-size: 10px;
color: #FFFFFF;
@ -264,18 +646,21 @@ export default {
text-align: center;
}
}
.right-box{
.right-box {
.time {
font-weight: 400;
font-size: 14px;
color: #838383;
line-height: 14px;
}
.icon {
width: 40rpx;
height: 40rpx;
overflow: hidden;
margin-left: 14rpx;
image {
width: 100%;
height: 100%;
@ -284,50 +669,208 @@ export default {
}
}
}
.call-list-xiaomi{
.infoBox{
.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{
text {
font-size: 13px !important;
color: #767676 !important;
}
}
.title-red{
.title-red {
color: #EE0115 !important;
}
.info{
view{
.info {
view {
font-size: 13px;
color: #767676;
}
}
}
}
.call-list-oppo{
.item{
.call-list-oppo {
.item {
padding: 32rpx 36rpx 0 36rpx !important;
justify-content: space-between;
height: 140rpx;
}
.infoBox{
width: calc(100% - 20rpx);
.infoBox {
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;
}
.avatar{
.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{
.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;
}

View File

@ -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>

View File

@ -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>

View File

@ -1,63 +1,43 @@
<template>
<view class="container">
<!-- 自定义头部导航栏 -->
<ZdyNavbar :title="data.navbar.title"
:bgColor="data.navbar.bgColor" :isBack="true" />
<!-- 通话记录列表 -->
<callList type="ios"></callList>
<callList type="xiaomi"></callList>
<callList type="oppo"></callList>
<ZdyNavbar :type="data.type" :scrollTop="data.scrollTop"/>
<ZdyHeader :type="data.type" />
<callList :type="data.type"></callList>
<tabbar :type="data.type" />
</view>
</template>
<script setup>
//
import ZdyNavbar from "@/components/nav-bar/nav-bar.vue"
import callList from "@/components/call-log/list/list.vue"
import ZdyNavbar from "@/components/call-log/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,
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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 381 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 583 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 949 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 982 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1023 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 839 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 852 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 468 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 898 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 796 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 418 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 967 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 873 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB