335 lines
6.9 KiB
Vue
335 lines
6.9 KiB
Vue
<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> |