调整我的客户列表页面，增加拨打电话功能
This commit is contained in:
唐明明
1
App.vue
1
App.vue
@@ -2,6 +2,7 @@
|
|||||||
import { getVersions } from './apis/interfaces/versions'
|
import { getVersions } from './apis/interfaces/versions'
|
||||||
export default {
|
export default {
|
||||||
onLaunch: function() {
|
onLaunch: function() {
|
||||||
|
return
|
||||||
//#ifdef APP-PLUS
|
//#ifdef APP-PLUS
|
||||||
// 获取系统版本号
|
// 获取系统版本号
|
||||||
getVersions({
|
getVersions({
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
"name" : "抖火",
|
"name" : "抖火",
|
||||||
"appid" : "__UNI__C305C03",
|
"appid" : "__UNI__C305C03",
|
||||||
"description" : "纵有疾风起，人生不言弃",
|
"description" : "纵有疾风起，人生不言弃",
|
||||||
"versionName" : "1.2.8",
|
"versionName" : "1.3.0",
|
||||||
"versionCode" : 102,
|
"versionCode" : 102,
|
||||||
"transformPx" : false,
|
"transformPx" : false,
|
||||||
/* 5+App特有相关 */
|
/* 5+App特有相关 */
|
||||||
|
|||||||
@@ -1,22 +1,30 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="content">
|
<view class="content">
|
||||||
<view class="header">
|
<view class="total">
|
||||||
客户列表
|
<uni-icons type="staff" size="50" color="white"></uni-icons>
|
||||||
<text>共{{count.one}}人</text>
|
<view class="total-user">
|
||||||
|
<view class="total-number">{{count.one}}人</view>
|
||||||
|
<view class="total-title">客户总人数</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<block v-if="users.length > 0">
|
<block v-if="users.length > 0">
|
||||||
<view class="team-item" v-for="(item, index) in users" :key="index">
|
<view class="team-item" v-for="(item, index) in users" :key="index" @click="onCallPhone(item.real_username)">
|
||||||
<u-avatar :src="item.avatar" size="40"></u-avatar>
|
<u-avatar :src="item.avatar" size="48"></u-avatar>
|
||||||
<view class="name">
|
<view class="team-content">
|
||||||
<view class="nowrap">{{item.nickname}}</view>
|
<view class="nowrap name">{{item.nickname}}</view>
|
||||||
<view>
|
<view class="nowrap identitys">
|
||||||
<text class="identity certification-y" v-if="item.certification"><image src="@/static/icons/user_nav_03.png"></image>已实名</text>
|
<text class="identity certification-y" v-if="item.certification"><image src="@/static/icons/user_nav_03.png"></image>已实名</text>
|
||||||
<text class="identity identity-2" v-if="item.identity.order == 2">业务员</text>
|
<text class="identity identity-2" v-if="item.identity.order == 2">业务员</text>
|
||||||
<text class="identity identity-1" v-if="item.identity.order == 1">普通用户</text>
|
<text class="identity identity-1" v-if="item.identity.order == 1">普通用户</text>
|
||||||
<text class="identity identity-3" v-if="item.identity.order == 3">顾问</text>
|
<text class="identity identity-3" v-if="item.identity.order == 3">顾问</text>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="nowrap submit">联系电话：{{item.real_username}}</view>
|
||||||
|
<view class="nowrap submit">注册时间：{{item.created_at}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="mobile">
|
||||||
|
<uni-icons class="mobile-icon" type="phone-filled" size="18" color="white"></uni-icons>
|
||||||
</view>
|
</view>
|
||||||
<view class="mobile">{{item.username}}</view>
|
|
||||||
</view>
|
</view>
|
||||||
<!-- 分页 -->
|
<!-- 分页 -->
|
||||||
<u-loadmore v-if="pagesShow" :status="status" />
|
<u-loadmore v-if="pagesShow" :status="status" />
|
||||||
@@ -78,6 +86,11 @@
|
|||||||
icon : 'none'
|
icon : 'none'
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
},
|
||||||
|
onCallPhone(phone){
|
||||||
|
uni.makePhoneCall({
|
||||||
|
phoneNumber: phone
|
||||||
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onReachBottom() {
|
onReachBottom() {
|
||||||
@@ -96,85 +109,108 @@
|
|||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.content{
|
.content{
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
background: white;
|
||||||
}
|
}
|
||||||
// 统计数据
|
// 统计数据
|
||||||
.header{
|
.total{
|
||||||
|
margin: 30rpx;
|
||||||
|
background: linear-gradient(to top left, #446EFE, #0f36bb);
|
||||||
|
box-shadow: 10rpx 0 15rpx 15rpx rgba(0, 0, 0, .03);
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 50rpx;
|
||||||
|
color: white;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 0 30rpx;
|
align-items: center;
|
||||||
line-height: 100rpx;
|
.total-title{
|
||||||
font-weight: bold;
|
|
||||||
text{
|
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: gray;
|
opacity: .8;
|
||||||
font-weight: normal;
|
padding-top: 10rpx;
|
||||||
|
}
|
||||||
|
.total-number{
|
||||||
|
text-align: right;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 团队列表
|
// 团队列表
|
||||||
.team-item{
|
.team-item{
|
||||||
background: white;
|
background: white;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
|
||||||
padding: 30rpx;
|
padding: 30rpx;
|
||||||
border-radius: 20rpx;
|
border-radius: 20rpx;
|
||||||
margin: 0 30rpx 30rpx 30rpx;
|
margin: 0 30rpx 30rpx 30rpx;
|
||||||
.name{
|
box-shadow: 10rpx 0 15rpx 15rpx rgba(0, 0, 0, .03);
|
||||||
width: calc(100% - 200rpx - 40px);
|
position: relative;
|
||||||
padding: 0 20rpx;
|
overflow: hidden;
|
||||||
|
&::after{
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
border-radius: 15rpx;
|
||||||
|
background: linear-gradient(to top left, #446EFE, #0f36bb);
|
||||||
|
position: absolute;
|
||||||
|
left: -15rpx;
|
||||||
|
top: 30rpx;
|
||||||
|
content: " ";
|
||||||
|
}
|
||||||
|
.team-content{
|
||||||
|
width: calc( 100% - 48px - 100rpx );
|
||||||
|
padding-left: 30rpx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-weight: bold;
|
.name{
|
||||||
font-size: 30rpx;
|
font-weight: bold;
|
||||||
color: #333333;
|
font-size: 34rpx;
|
||||||
.identity{
|
}
|
||||||
display: inline-block;
|
.submit{
|
||||||
background: #F6F6F6;
|
line-height: 40rpx;
|
||||||
color: #999999;
|
font-size: 26rpx;
|
||||||
font-weight: normal;
|
color: gray;
|
||||||
margin-left: 20rpx;
|
}
|
||||||
border-radius: 20rpx;
|
.identitys{
|
||||||
height: 40rpx;
|
margin-bottom: 10rpx;
|
||||||
line-height: 36rpx;
|
.identity{
|
||||||
padding: 0 15rpx;
|
font-size: 24rpx;
|
||||||
font-size: 24rpx;
|
border-radius: 15rpx;
|
||||||
border:solid 1rpx #000;
|
line-height: 30rpx;
|
||||||
box-sizing: border-box;
|
padding: 0 10rpx;
|
||||||
&:first-child{
|
color: white;
|
||||||
margin-left: 0;
|
margin-right: 20rpx;
|
||||||
}
|
&.identity-2{
|
||||||
&.identity-2{
|
background: #443DE2;
|
||||||
background: #ECF0FF;
|
}
|
||||||
border-color: #443DE2;
|
&.identity-1{
|
||||||
color: #443DE2;
|
background: #e1e1e1;
|
||||||
}
|
}
|
||||||
&.identity-1{
|
&.identity-3{
|
||||||
background: #F6F6F6;
|
background: #FEAD45;
|
||||||
border-color: #999999;
|
}
|
||||||
color: #999999;
|
&.certification-y{
|
||||||
}
|
background: #FFF7EC;
|
||||||
&.identity-3{
|
border-color: #FEAD45;
|
||||||
background: #FFF7EC;
|
color: #FEAD45;
|
||||||
border-color: #FEAD45;
|
image{
|
||||||
color: #FEAD45;
|
width: 32rpx;
|
||||||
}
|
height: 32rpx;
|
||||||
&.certification-y{
|
vertical-align: middle;
|
||||||
background: #FFF7EC;
|
margin-bottom: 5rpx;
|
||||||
border-color: #FEAD45;
|
}
|
||||||
color: #FEAD45;
|
|
||||||
image{
|
|
||||||
width: 32rpx;
|
|
||||||
height: 32rpx;
|
|
||||||
vertical-align: middle;
|
|
||||||
margin-bottom: 5rpx;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.mobile{
|
.mobile{
|
||||||
width: 200rpx;
|
width: 100rpx;
|
||||||
color: #666666;
|
border-radius: 35rpx;
|
||||||
text-align: right;
|
margin-top: 9px;
|
||||||
font-size: 30rpx;
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
color: white;
|
||||||
|
background: #446EFE;
|
||||||
|
text-align: center;
|
||||||
|
.mobile-icon{
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user