通话列表模拟
This commit is contained in:
小李
parent
b8975f5015
commit
41fa7f7398
|
|
@ -6,8 +6,8 @@
|
||||||
"type" : "uni-app:app-ios"
|
"type" : "uni-app:app-ios"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"customPlaygroundType" : "local",
|
"customPlaygroundType" : "device",
|
||||||
"playground" : "custom",
|
"playground" : "standard",
|
||||||
"type" : "uni-app:app-android"
|
"type" : "uni-app:app-android"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,335 @@
|
||||||
|
<template>
|
||||||
|
<view class="call-list" :class="['call-list-'+type]">
|
||||||
|
<view v-for="(item,index) in list" :key="index" class="item">
|
||||||
|
<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>
|
||||||
|
</view>
|
||||||
|
<view class="infoBox">
|
||||||
|
<view class="left-box">
|
||||||
|
<view class="leftInfo">
|
||||||
|
<view class="title" :class="{'title-red':item.status==0}">
|
||||||
|
<!-- ios -->
|
||||||
|
<view class="notes" v-if="type=='ios'">
|
||||||
|
{{item.name||item.phone}}
|
||||||
|
</view>
|
||||||
|
<!-- xiaomi -->
|
||||||
|
<view class="notes" v-else-if="type=='xiaomi'">
|
||||||
|
{{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'">
|
||||||
|
{{item.name||item.phone}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="info">
|
||||||
|
|
||||||
|
<!-- 卡几 -->
|
||||||
|
<view class="kj" v-if="type!='ios'&&type!='xiaomi'&&(type=='oppo')">
|
||||||
|
<image :src="`/static/image/call/${type}KJ${item.kj}.png`" mode=""></image>
|
||||||
|
</view>
|
||||||
|
<!-- 时间 -->
|
||||||
|
<view class="time" v-if="type!='ios'&&(type=='xiaomi')">
|
||||||
|
{{item.time}}
|
||||||
|
</view>
|
||||||
|
<!-- icon -->
|
||||||
|
<view class="status-icon" v-if="type=='ios'">
|
||||||
|
<image src="/static/image/call/iosStatusIcon.png" mode=""></image>
|
||||||
|
</view>
|
||||||
|
<!-- 地址 -->
|
||||||
|
<view class="address" v-if="type!='ios'&&(type=='xiaomi'||type=='oppo')">
|
||||||
|
{{item.address}}
|
||||||
|
</view>
|
||||||
|
<!-- 运营商 -->
|
||||||
|
<view class="yys">
|
||||||
|
{{item.yys}}
|
||||||
|
</view>
|
||||||
|
<!-- 电话 -->
|
||||||
|
<view class="phone" v-if="type!='xiaomi'&&type!='oppo'">
|
||||||
|
{{item.phone}}
|
||||||
|
</view>
|
||||||
|
<!-- 备注 -->
|
||||||
|
<view class="notes" v-if="type=='oppo'">
|
||||||
|
{{item.notes}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="right-box">
|
||||||
|
<!-- 时间 -->
|
||||||
|
<view class="time" v-if="type=='ios'&&(type!='xiaomi')">
|
||||||
|
{{item.time}}
|
||||||
|
</view>
|
||||||
|
<!-- 图标 -->
|
||||||
|
<view class="icon" v-if="type=='ios'||type=='xiaomi'||type=='oppo'">
|
||||||
|
<image :src="`/static/image/call/${type}RightIcon.png`" mode=""></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'call-list',
|
||||||
|
props: {
|
||||||
|
isHuise: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
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: '骚扰电话',
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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: '骚扰电话',
|
||||||
|
|
||||||
|
},
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
isHuise(newValue, oldValue) {
|
||||||
|
console.log(newValue)
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.call-list {
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #fff;
|
||||||
|
.item {
|
||||||
|
display: flex;
|
||||||
|
.avatar {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
image {
|
||||||
|
width: 100% !important;
|
||||||
|
height: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.infoBox{
|
||||||
|
width: calc(100% - 80rpx);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
box-shadow: inset 0 -0.3px 0 0 #C2C2C2;
|
||||||
|
.left-box {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.leftInfo {
|
||||||
|
.title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
.info {
|
||||||
|
display: flex;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666;
|
||||||
|
view{
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
.kj{
|
||||||
|
line-height: 0;
|
||||||
|
width: 22rpx;
|
||||||
|
height: 22rpx;
|
||||||
|
image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.status-icon{
|
||||||
|
line-height: 0;
|
||||||
|
width: 22rpx;
|
||||||
|
height: 22rpx;
|
||||||
|
image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.call-list-ios {
|
||||||
|
.item{
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.avatar {
|
||||||
|
width: 84rpx;
|
||||||
|
height: 84rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-left: 32rpx;
|
||||||
|
}
|
||||||
|
.infoBox{
|
||||||
|
width: calc(100% - 136rpx) !important;
|
||||||
|
padding: 24rpx 32rpx 24rpx 0;
|
||||||
|
.left-box{
|
||||||
|
.title {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #1A1A1A;
|
||||||
|
line-height: 16px;
|
||||||
|
}
|
||||||
|
.title-red{
|
||||||
|
color: #FC3E30 !important;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 10px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 10px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.call-list-xiaomi{
|
||||||
|
.infoBox{
|
||||||
|
width: 100% !important;
|
||||||
|
padding: 34rpx 56rpx 28rpx 56rpx;
|
||||||
|
.title {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #1A1A1A;
|
||||||
|
text{
|
||||||
|
font-size: 13px !important;
|
||||||
|
color: #767676 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.title-red{
|
||||||
|
color: #EE0115 !important;
|
||||||
|
}
|
||||||
|
.info{
|
||||||
|
|
||||||
|
view{
|
||||||
|
font-size: 13px;
|
||||||
|
color: #767676;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.call-list-oppo{
|
||||||
|
.item{
|
||||||
|
padding: 32rpx 36rpx 0 36rpx !important;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.infoBox{
|
||||||
|
width: calc(100% - 20rpx);
|
||||||
|
padding-bottom: 36rpx;
|
||||||
|
}
|
||||||
|
.avatar{
|
||||||
|
width: 26rpx !important;
|
||||||
|
height: 26rpx !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
image {
|
||||||
|
width: 100% !important;
|
||||||
|
height: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.info{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
15
pages.json
15
pages.json
|
|
@ -9,7 +9,20 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"subPackages": [{
|
|
||||||
|
"subPackages": [
|
||||||
|
{
|
||||||
|
"root": "pages/call-log",
|
||||||
|
"pages": [{
|
||||||
|
"path": "call",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "通话记录页面",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
"root": "pages/balance",
|
"root": "pages/balance",
|
||||||
"pages": [{
|
"pages": [{
|
||||||
"path": "index",
|
"path": "index",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,65 @@
|
||||||
|
<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>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
// 自定义头部
|
||||||
|
import ZdyNavbar from "@/components/nav-bar/nav-bar.vue"
|
||||||
|
import callList from "@/components/call-log/list/list.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',
|
||||||
|
},
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
onLoad((option) => {
|
||||||
|
|
||||||
|
})
|
||||||
|
onReady(() => {
|
||||||
|
|
||||||
|
})
|
||||||
|
onShow(() => { })
|
||||||
|
onPullDownRefresh(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.stopPullDownRefresh();
|
||||||
|
}, 1000);
|
||||||
|
})
|
||||||
|
onReachBottom(() => {
|
||||||
|
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 714 B |
Binary file not shown.
|
After Width: | Height: | Size: 333 B |
Binary file not shown.
|
After Width: | Height: | Size: 515 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 348 B |
Binary file not shown.
|
After Width: | Height: | Size: 331 B |
Binary file not shown.
|
After Width: | Height: | Size: 335 B |
Binary file not shown.
|
After Width: | Height: | Size: 833 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Loading…
Reference in New Issue