|
|
@@ -1,8 +1,598 @@ |
|
|
|
<template> |
|
|
|
<view class="box"> |
|
|
|
<!-- 搜索框点击跳转 --> |
|
|
|
<view> |
|
|
|
<view class="search-box"> |
|
|
|
<view class="search" @click="goSearch"> |
|
|
|
<view class="search-img"> |
|
|
|
<image class="search-img1" src="../../../static/images/search.png" mode=""></image> |
|
|
|
</view> |
|
|
|
<view class="search-text">输入客户姓名/手机号</view> |
|
|
|
</view> |
|
|
|
<view class="search-screen" @click="screenshow"> |
|
|
|
<image class="search-screen1" src="../../../static/images/screen.png" mode=""></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="content"> |
|
|
|
<view class="content-tips" @click="godetail()"> |
|
|
|
<view class="content-first"> |
|
|
|
<view class="left"> |
|
|
|
<view class="img"> |
|
|
|
A |
|
|
|
</view> |
|
|
|
<view class="test"> |
|
|
|
李先生 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="right"> |
|
|
|
<view class="point"></view> |
|
|
|
<view class="test"> |
|
|
|
定金 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="content-sec"> |
|
|
|
<view class="content-sec-lab"> |
|
|
|
手机号码:<view class="content-sec-lab1">18777897865</view> |
|
|
|
</view> |
|
|
|
<view class="content-sec-lab"> |
|
|
|
客户标签: |
|
|
|
<view class="content-sec-tips">投资</view> |
|
|
|
<view class="content-sec-tips">理财专用</view> |
|
|
|
<view class="content-sec-tips">学区</view> |
|
|
|
</view> |
|
|
|
<view class="content-sec-lab"> |
|
|
|
顾问姓名:<view class="content-sec-lab1">齐横三</view> |
|
|
|
</view> |
|
|
|
<view class="content-sec-lab"> |
|
|
|
添加时间:<view class="content-sec-lab1">2021-07-20 14:00:30</view> |
|
|
|
</view> |
|
|
|
<view class="content-sec-num"> |
|
|
|
<view class=""> |
|
|
|
3次到访 |
|
|
|
</view> |
|
|
|
<view class=""> |
|
|
|
55分/88% |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="content-last"> |
|
|
|
<view class="content-last-tab"> |
|
|
|
添加提醒 |
|
|
|
</view> |
|
|
|
<view class="content-last-tab"> |
|
|
|
拨打电话 |
|
|
|
</view> |
|
|
|
<view class="content-last-tab"> |
|
|
|
写跟进 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="content-tips"> |
|
|
|
<view class="content-first"> |
|
|
|
<view class="left"> |
|
|
|
<view class="img"> |
|
|
|
A |
|
|
|
</view> |
|
|
|
<view class="test"> |
|
|
|
李先生 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="right"> |
|
|
|
<view class="point"></view> |
|
|
|
<view class="test"> |
|
|
|
定金 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="content-sec"> |
|
|
|
<view class="content-sec-lab"> |
|
|
|
手机号码:<view class="content-sec-lab1">18777897865</view> |
|
|
|
</view> |
|
|
|
<view class="content-sec-lab"> |
|
|
|
客户标签: |
|
|
|
<view class="content-sec-tips">投资</view> |
|
|
|
<view class="content-sec-tips">理财专用11</view> |
|
|
|
<view class="content-sec-tips">学区</view> |
|
|
|
</view> |
|
|
|
<view class="content-sec-lab"> |
|
|
|
顾问姓名:<view class="content-sec-lab1">齐横三</view> |
|
|
|
</view> |
|
|
|
<view class="content-sec-lab"> |
|
|
|
添加时间:<view class="content-sec-lab1">2021-07-20 14:00:30</view> |
|
|
|
</view> |
|
|
|
<view class="content-sec-num"> |
|
|
|
<view class=""> |
|
|
|
3次到访 |
|
|
|
</view> |
|
|
|
<view class=""> |
|
|
|
55分/88% |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="content-last"> |
|
|
|
<view class="content-last-tab"> |
|
|
|
添加提醒 |
|
|
|
</view> |
|
|
|
<view class="content-last-tab"> |
|
|
|
拨打电话 |
|
|
|
</view> |
|
|
|
<view class="content-last-tab"> |
|
|
|
写跟进 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<u-popup v-model="screenShow" mode="top" > |
|
|
|
<view class="screen"> |
|
|
|
<!-- 顾问选择 --> |
|
|
|
<view class="screen-counselor"> |
|
|
|
<view class="screen-text"> |
|
|
|
所属顾问 |
|
|
|
</view> |
|
|
|
<view class="screen-sel"> |
|
|
|
<u-input v-model="screen.counselorName" type="text" placeholder='请选择' @click="selectshow = true" class="screen-inp" disabled /> |
|
|
|
<image class="screen-sel-img" src="../../../static/images/right.png" mode=""></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="screen-counselor"> |
|
|
|
<view class="screen-text"> |
|
|
|
客户标签 |
|
|
|
</view> |
|
|
|
<view class="screen-sel"> |
|
|
|
<u-input v-model="screen.cunsumerTips" type="text" placeholder='请选择' @click="selectTipshow = true" class="screen-inp" disabled /> |
|
|
|
<image class="screen-sel-img" src="../../../static/images/right.png" mode=""></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- 录音标示 --> |
|
|
|
<view class="screen-record"> |
|
|
|
<view class="screen-record-text"> |
|
|
|
客户等级 |
|
|
|
</view> |
|
|
|
<view class="screen-record-tab"> |
|
|
|
<view :class="[screen.record==0?'screen-record-chose':'screen-record-nochose']" @click="screen.record=0"> |
|
|
|
A |
|
|
|
</view> |
|
|
|
<view :class="[screen.record==1?'screen-record-chose':'screen-record-nochose']" @click="screen.record=1"> |
|
|
|
B |
|
|
|
</view> |
|
|
|
<view :class="[screen.record==2?'screen-record-chose':'screen-record-nochose']" @click="screen.record=2"> |
|
|
|
C |
|
|
|
</view> |
|
|
|
<view :class="[screen.record==3?'screen-record-chose':'screen-record-nochose']" @click="screen.record=3"> |
|
|
|
D |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="screen-record"> |
|
|
|
<view class="screen-record-text"> |
|
|
|
客户阶段 |
|
|
|
</view> |
|
|
|
<view class="screen-record-tab"> |
|
|
|
<view v-for="(item,index) in stageList" :key="index"> |
|
|
|
<view :class="[screen.stage==index?'screen-record-chose':'screen-record-nochose']" @click="screen.stage=index" style="width: 120rpx;"> |
|
|
|
{{item}} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="screen-record"> |
|
|
|
<view class="screen-record-text"> |
|
|
|
到访次数 |
|
|
|
</view> |
|
|
|
<view class="screen-record-tab"> |
|
|
|
<view :class="[screen.arriveNum==0?'screen-record-chose':'screen-record-nochose']" @click="screen.arriveNum=0"> |
|
|
|
首次到访 |
|
|
|
</view> |
|
|
|
<view :class="[screen.arriveNum==1?'screen-record-chose':'screen-record-nochose']" @click="screen.arriveNum=1"> |
|
|
|
第二次 |
|
|
|
</view> |
|
|
|
<view :class="[screen.arriveNum==2?'screen-record-chose':'screen-record-nochose']" @click="screen.arriveNum=2"> |
|
|
|
第三次 |
|
|
|
</view> |
|
|
|
<view :class="[screen.arriveNum==3?'screen-record-chose':'screen-record-nochose']" @click="screen.arriveNum=3"> |
|
|
|
三次以上 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- <view class="screen-record"> |
|
|
|
<view class="screen-record-text"> |
|
|
|
最近接待时间 |
|
|
|
</view> |
|
|
|
<view class="screen-record-tab"> |
|
|
|
|
|
|
|
</view> |
|
|
|
</view> --> |
|
|
|
<view class="screen-foot"> |
|
|
|
<view class="screen-foot-reset" @click="reset"> |
|
|
|
重置 |
|
|
|
</view> |
|
|
|
<view class="screen-foot-sure" @click="screensure"> |
|
|
|
确定 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</u-popup> |
|
|
|
<!-- 选择顾问的选择框 --> |
|
|
|
<u-select v-model="selectshow" :list="list" @confirm="actionSelectCallback"></u-select> |
|
|
|
<!-- 客户标签 --> |
|
|
|
<u-select v-model="selectTipshow" :list="list1" @confirm="selectCallback"></u-select> |
|
|
|
<!-- 时间选择器 --> |
|
|
|
|
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
export default{ |
|
|
|
data(){ |
|
|
|
return{ |
|
|
|
value:'', |
|
|
|
screenShow:false, |
|
|
|
selectshow:false, |
|
|
|
selectTipshow:false, |
|
|
|
screen:{ |
|
|
|
counselorName:'', |
|
|
|
record:'0', |
|
|
|
stage:'0', |
|
|
|
arriveNum:'0', |
|
|
|
cunsumerTips:'' |
|
|
|
}, |
|
|
|
stageList:['未知','到访','意向','定金','成交'], |
|
|
|
list:[ |
|
|
|
{ |
|
|
|
value:1, |
|
|
|
label:'1' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value:2, |
|
|
|
label:'2' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value:3, |
|
|
|
label:'3' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value:4, |
|
|
|
label:'4' |
|
|
|
}, |
|
|
|
], |
|
|
|
list1:[ |
|
|
|
{ |
|
|
|
value:1, |
|
|
|
label:'1' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value:2, |
|
|
|
label:'2' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value:3, |
|
|
|
label:'3' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value:4, |
|
|
|
label:'4' |
|
|
|
}, |
|
|
|
], |
|
|
|
recordList:[], |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
methods:{ |
|
|
|
// 筛选 |
|
|
|
screenshow(){ |
|
|
|
this.screenShow=true |
|
|
|
}, |
|
|
|
actionSelectCallback(e){ |
|
|
|
console.log(e[0].label) |
|
|
|
// this.value = this.actionSheetList[index].label; |
|
|
|
this.screen.counselorName=e[0].label |
|
|
|
}, |
|
|
|
selectCallback(e){ |
|
|
|
console.log(e[0].label) |
|
|
|
// this.value = this.actionSheetList[index].label; |
|
|
|
this.screen.cunsumerTips=e[0].label |
|
|
|
}, |
|
|
|
reset(){ |
|
|
|
this.screen={ |
|
|
|
counselorName:'', |
|
|
|
record:'0', |
|
|
|
stage:'0', |
|
|
|
arriveNum:'0', |
|
|
|
cunsumerTips:'' |
|
|
|
} |
|
|
|
}, |
|
|
|
// 客户详情 |
|
|
|
godetail(){ |
|
|
|
uni.navigateTo({ |
|
|
|
url:'/pages/center/consumer/consumerDetail' |
|
|
|
}) |
|
|
|
}, |
|
|
|
screensure(){ |
|
|
|
console.log(this.screen) |
|
|
|
this.screenShow=false |
|
|
|
}, |
|
|
|
goSearch(){ |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/pages/center/consumer/consumerSearch' |
|
|
|
}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
onLoad() { |
|
|
|
console.log('这里是进入') |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.box { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
background: #F8F8F8; |
|
|
|
} |
|
|
|
.search-box{ |
|
|
|
width: 100%; |
|
|
|
height: 102rpx; |
|
|
|
background: #FFFFFF; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
.search{ |
|
|
|
width: 620rpx; |
|
|
|
height: 70rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
background: #F8F8F8; |
|
|
|
border-radius: 33rpx; |
|
|
|
.search-img{ |
|
|
|
width: 26rpx; |
|
|
|
height: 30rpx; |
|
|
|
margin-left: 20rpx; |
|
|
|
.search-img1{ |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
margin-top: 2rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
.search-text{ |
|
|
|
font-size: 28rpx; |
|
|
|
font-weight: 400; |
|
|
|
color: #999999; |
|
|
|
margin-left:10rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
.search-screen{ |
|
|
|
width: 40rpx; |
|
|
|
height: 40rpx; |
|
|
|
margin-left: 30rpx; |
|
|
|
.search-screen1{ |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.content{ |
|
|
|
// height: 1000rpx;/ |
|
|
|
overflow: hidden; |
|
|
|
border-top: 1px solid #E0E0E0; |
|
|
|
.content-tips{ |
|
|
|
background: #fff; |
|
|
|
// box-sizing: border-box; |
|
|
|
margin-bottom: 20rpx; |
|
|
|
overflow: hidden; |
|
|
|
.content-first{ |
|
|
|
padding: 19rpx 30rpx; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
box-sizing: border-box; |
|
|
|
// border-top: 1px solid #E0E0E0; |
|
|
|
font-weight: 400; |
|
|
|
color: #292929; |
|
|
|
height: 90rpx; |
|
|
|
font-size: 30rpx; |
|
|
|
line-height: 30rpx; |
|
|
|
.left{ |
|
|
|
display: flex; |
|
|
|
.img{ |
|
|
|
// margin-top: 19rpx; |
|
|
|
width: 52rpx; |
|
|
|
height: 52rpx; |
|
|
|
border: 1px solid #E0E0E0; |
|
|
|
border-radius: 50%; |
|
|
|
text-align: center; |
|
|
|
line-height: 50rpx; |
|
|
|
} |
|
|
|
.test{ |
|
|
|
margin-top: 11rpx; |
|
|
|
margin-left: 20rpx; |
|
|
|
font-weight: 500; |
|
|
|
color: #333333; |
|
|
|
} |
|
|
|
} |
|
|
|
.right{ |
|
|
|
display: flex; |
|
|
|
.point{ |
|
|
|
width: 12rpx; |
|
|
|
height: 12rpx; |
|
|
|
background: #2B6EFF; |
|
|
|
border-radius: 50%; |
|
|
|
margin-right: 9rpx; |
|
|
|
margin-top: 20rpx; |
|
|
|
} |
|
|
|
.test{ |
|
|
|
margin-top: 11rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.content-sec{ |
|
|
|
border-top: 1px solid #E0E0E0; |
|
|
|
padding: 0 30rpx; |
|
|
|
height: 270rpx; |
|
|
|
position: relative; |
|
|
|
.content-sec-lab{ |
|
|
|
margin-top: 30rpx; |
|
|
|
display: flex; |
|
|
|
font-size: 30rpx; |
|
|
|
font-weight: 400; |
|
|
|
color: #666666; |
|
|
|
line-height: 30rpx; |
|
|
|
.content-sec-lab1{ |
|
|
|
color: #333333; |
|
|
|
} |
|
|
|
.content-sec-tips{ |
|
|
|
max-width:174rpx ; |
|
|
|
height: 46rpx; |
|
|
|
background: #F2F2F2; |
|
|
|
border-radius: 6rpx; |
|
|
|
text-align: center; |
|
|
|
line-height: 26rpx; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow:ellipsis; |
|
|
|
white-space: nowrap; |
|
|
|
font-size: 26rpx; |
|
|
|
font-weight: 400; |
|
|
|
color: #333333; |
|
|
|
margin-right: 24rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
padding: 10rpx 24rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
.content-sec-num{ |
|
|
|
position: absolute; |
|
|
|
width: 190rpx; |
|
|
|
height: 90rpx; |
|
|
|
background: #F4F8FD; |
|
|
|
border-radius: 12rpx; |
|
|
|
font-weight: 400; |
|
|
|
color: #2671E2; |
|
|
|
line-height: 45rpx; |
|
|
|
bottom: 30rpx; |
|
|
|
right: 30rpx; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
} |
|
|
|
.content-last{ |
|
|
|
display: flex; |
|
|
|
border-top: 1px solid #E0E0E0; |
|
|
|
// padding: 0 30rpx; |
|
|
|
height: 78rpx; |
|
|
|
.content-last-tab{ |
|
|
|
width: 33.4%; |
|
|
|
text-align: center; |
|
|
|
font-size: 30rpx; |
|
|
|
font-weight: 400; |
|
|
|
color: #333333; |
|
|
|
line-height: 78rpx; |
|
|
|
border-right: 1px solid #E0E0E0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
// 这是弹出层 |
|
|
|
.screen{ |
|
|
|
// box-sizing: border-box; |
|
|
|
// padding: 0 30rpx; |
|
|
|
.screen-counselor{ |
|
|
|
display: flex; |
|
|
|
height: 106rpx; |
|
|
|
// padding: 40rpx 30rpx 36rpx 30rpx; |
|
|
|
padding: 0 30rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
border-bottom: 1px solid #CCCCCC; |
|
|
|
.screen-text{ |
|
|
|
margin: 40rpx 0 36rpx 0; |
|
|
|
font-size: 30rpx; |
|
|
|
font-weight: 400; |
|
|
|
color: #333333; |
|
|
|
line-height: 30rpx; |
|
|
|
} |
|
|
|
.screen-sel{ |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
width: 500rpx; |
|
|
|
margin-left: 60rpx; |
|
|
|
.screen-sel-img{ |
|
|
|
margin: 40rpx 0 36rpx 0; |
|
|
|
width: 14rpx; |
|
|
|
height: 30rpx; |
|
|
|
} |
|
|
|
.screen-inp{ |
|
|
|
margin-top: 20rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.screen-record{ |
|
|
|
height: 192rpx; |
|
|
|
// width: 100%; |
|
|
|
overflow: hidden; |
|
|
|
padding: 0 30rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
border-bottom: 1px solid #CCCCCC; |
|
|
|
.screen-record-text{ |
|
|
|
margin-top: 36rpx; |
|
|
|
font-size: 30rpx; |
|
|
|
font-weight: 400; |
|
|
|
color: #333333; |
|
|
|
line-height: 30rpx; |
|
|
|
} |
|
|
|
.screen-record-tab{ |
|
|
|
margin-top: 30rpx; |
|
|
|
display: flex; |
|
|
|
// justify-content: space-around; |
|
|
|
.screen-record-chose{ |
|
|
|
width: 156rpx; |
|
|
|
height: 60rpx; |
|
|
|
background: #FFFFFF; |
|
|
|
border-radius: 4rpx; |
|
|
|
border: 1px solid #2671E2; |
|
|
|
text-align: center; |
|
|
|
line-height: 60rpx; |
|
|
|
margin-right: 22rpx; |
|
|
|
} |
|
|
|
.screen-record-nochose{ |
|
|
|
width: 156rpx; |
|
|
|
height: 60rpx; |
|
|
|
background: #FFFFFF; |
|
|
|
border-radius: 4rpx; |
|
|
|
border: 1px solid #C9C9C9; |
|
|
|
text-align: center; |
|
|
|
line-height: 60rpx; |
|
|
|
margin-right: 22rpx; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
.screen-foot{ |
|
|
|
height: 88rpx; |
|
|
|
display: flex; |
|
|
|
.screen-foot-reset{ |
|
|
|
width: 50%; |
|
|
|
text-align: center; |
|
|
|
line-height: 88rpx; |
|
|
|
font-size: 30rpx; |
|
|
|
font-weight: 400; |
|
|
|
color: #666666; |
|
|
|
} |
|
|
|
.screen-foot-sure{ |
|
|
|
width: 50%; |
|
|
|
text-align: center; |
|
|
|
line-height: 88rpx; |
|
|
|
font-size: 30rpx; |
|
|
|
font-weight: 400; |
|
|
|
color: #FFFFFF; |
|
|
|
background: #2671E2; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |