通话列表模拟
This commit is contained in:
小李
parent
b8975f5015
commit
41fa7f7398
|
|
@ -6,8 +6,8 @@
|
|||
"type" : "uni-app:app-ios"
|
||||
},
|
||||
{
|
||||
"customPlaygroundType" : "local",
|
||||
"playground" : "custom",
|
||||
"customPlaygroundType" : "device",
|
||||
"playground" : "standard",
|
||||
"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",
|
||||
"pages": [{
|
||||
"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