|
- <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>
- </view>
- <!-- 选择器 -->
- <view class="boxtittab">
- <view class="tabbox" @click="taptimeisshow">
- 接待时间<u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon>
- </view>
- <view class="tabbox" @click="taptimetuisshow">
- 接待时长<u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon>
- </view>
- <view class="tabbox" @click="tapsoltishow">
- 排序<u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon>
- </view>
- <view class="tabbox" @click="screenshow">
- 更多筛选<u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon>
- </view>
- </view>
-
- <view class="content">
- <view v-if="recordList.length==0" style="width: 100%;height: 100%;display: flex;align-items: center;">
- <view style="width: 100%;padding-top: 200rpx;background: #FFFFFF;">
- <view style="width: 100%;text-align: center;">
- <image style="width: 220rpx;height: 200rpx;" src="https://static.quhouse.com/zhikong_xcx_img/nodatalist.png" mode=""></image>
- </view>
- <view style="text-align: center;width: 100%;margin-top: 20rpx;color: #999999;">暂无数据</view>
- </view>
- </view>
- <view v-if="recordList.length!=0" class="content-tips" v-for="(item,index) in recordList" :key='index' @click="gotoDetail(item.id)">
- <view class="content-first">
- <view class="left">
- <view v-if="item.level.length==0"></view>
- <view class="img" style="background: #E6625B" v-else-if="item.level==1">A</view>
- <view class="img" style="background: #FF981E" v-else-if="item.level==2">B</view>
- <view class="img" style="background: #F6BD16" v-else-if="item.level==3">C</view>
- <view class="img" style="background: #E6625B" v-else-if="item.level==4">D</view>
-
- <view class="test">{{item.name}}</view>
- </view>
- </view>
-
- <view class="content-sec">
- <view class="content-sec-lab">
- 手机号码:<view class="content-sec-lab1">{{item.phone || '--'}}</view>
- </view>
- <view class="content-sec-lab" style="line-height: 46rpx;">
- 客户标签:
- <text v-if="item.demand.cusSemanticWordsList==null">暂无</text>
- <view v-else class="content-sec-tips" v-for="(che,ind) in item.demand.cusSemanticWordsList" :key='ind'>{{che.name}}</view>
-
- </view>
- <view class="content-sec-lab">
- 顾问姓名:<view class="content-sec-lab1">{{item.agentName}}</view>
- </view>
- <view class="content-sec-lab">
- 添加时间:<view class="content-sec-lab1">{{item.createTime}}</view>
- </view>
- <view class="content-sec-num">
- <view class="">{{item.visitRecord || '--'}}次到访</view>
- <view class="">{{item.fraction || '0'}}% | {{item.mm || '0'}}<text style="font-size: 24rpx;">min</text></view>
- </view>
- </view>
- <view class="content-last" v-if="permissions.commonly2">
- <!-- <view class="content-last-tab">添加提醒</view>
- <view class="content-last-tab">拨打电话</view> -->
- <view class="content-last-tab" @click.stop="gotoFollowUp(item.id)">写跟进</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" @click="selectshow = true">
- <u-input v-model="screen.agentIdtext" type="text" placeholder='请选择' 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" @click="selectTipshow = true">
- <u-input v-model="screen.cunsumerTips" type="text" placeholder='请选择' 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="recordclick(0)">
- A
- </view>
- <view :class="[screen.record==1?'screen-record-chose':'screen-record-nochose']" @click="recordclick(1)">
- B
- </view>
- <view :class="[screen.record==2?'screen-record-chose':'screen-record-nochose']" @click="recordclick(2)">
- C
- </view>
- <view :class="[screen.record==3?'screen-record-chose':'screen-record-nochose']" @click="recordclick(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.visitRecord==1?'screen-record-chose':'screen-record-nochose']" @click="screenvisitRecord(1)">
- 首次到访
- </view>
- <view :class="[screen.visitRecord==2?'screen-record-chose':'screen-record-nochose']" @click="screenvisitRecord(2)">
- 2次到访
- </view>
- <view :class="[screen.visitRecord==3?'screen-record-chose':'screen-record-nochose']" @click="screenvisitRecord(3)">
- 3次到访
- </view>
- <view :class="[screen.visitRecord==4?'screen-record-chose':'screen-record-nochose']" @click="screenvisitRecord(4)">
- 3次以上
- </view>
- </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="freeList" @confirm="actionSelectCallback"></u-select>
- <!-- 客户标签 -->
- <u-select v-model="selectTipshow" :list="findKeywordsList" @confirm="selectCallback"></u-select>
-
- <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
-
- <u-popup v-model="timeshow" mode="bottom">
- <view class="timeview" :style="{ color: activeTotal == 5 ? '#2B6EFF' : '#333333' }" @click="tabtimetap(5)">全部</view>
- <view class="timeview" :style="{ color: activeTotal == 0 ? '#2B6EFF' : '#333333' }" @click="tabtimetap(0)">今天</view>
- <view class="timeview" :style="{ color: activeTotal == 1 ? '#2B6EFF' : '#333333' }" @click="tabtimetap(1)">昨天</view>
- <view class="timeview" :style="{ color: activeTotal == 2 ? '#2B6EFF' : '#333333' }" @click="tabtimetap(2)">近7天</view>
- <view class="timeview" :style="{ color: activeTotal == 3 ? '#2B6EFF' : '#333333' }" @click="tabtimetap(3)">近30天</view>
- <view class="timeview" :style="{ color: activeTotal == 4 ? '#2B6EFF' : '#333333' }" @click="tabtimetap(4)">自定义</view>
- </u-popup>
- <u-popup v-model="timetushow" mode="bottom">
- <view class="timeview" :style="{ color: activeTotal2 == 0 ? '#2B6EFF' : '#333333' }" @click="timetap(0)">全部</view>
- <view class="timeview" :style="{ color: activeTotal2 == 1 ? '#2B6EFF' : '#333333' }" @click="timetap(1)">0~15min</view>
- <view class="timeview" :style="{ color: activeTotal2 == 2 ? '#2B6EFF' : '#333333' }" @click="timetap(2)">15~30min</view>
- <view class="timeview" :style="{ color: activeTotal2 == 3 ? '#2B6EFF' : '#333333' }" @click="timetap(3)">30~60min</view>
- <view class="timeview" :style="{ color: activeTotal2 == 4 ? '#2B6EFF' : '#333333' }" @click="timetap(4)">60~90min</view>
- <view class="timeview" :style="{ color: activeTotal2 == 5 ? '#2B6EFF' : '#333333' }" @click="timetap(5)">90min以上</view>
- </u-popup>
- <u-select v-model="soltishow" :list="orderBylist" @confirm="selectCallback2"></u-select>
- </view>
- </template>
-
- <script>
- export default{
- data(){
- return{
- orderBylist:[
- // {label:'全部',value:'0'},
- {label:'创建时间倒序',value:'1'},
- {label:'创建时间正序',value:'2'},
- {label:'接待时间倒序',value:'3'},
- {label:'接待时间正序',value:'4'},
- {label:'执行率正序',value:'5'},
- {label:'执行率倒序',value:'6'},
- {label:'接访次数正序',value:'7'},
- {label:'接访次数倒序',value:'8'},
- ],
- value:'',
- screenShow:false,
- selectshow:false,
- selectTipshow:false,
- buildingID:'',
- screen:{
- agentId:'',
- agentIdtext:'',
- visitRecord:'',
- record:null,
- cunsumerTips:'',
- cunsumerTipsid:''
- },
- stageList:['未知','到访','意向','定金','成交'],
- recordList:[],
- nextPage:1,
- totalRecord:'',
- freeList:[],
- userInfo:{},
- findKeywordsList:[],
- isnorefresh:'',
- activeTotal:5,
- activeTotal2:0,
- totalTimeShow: false,
- timeshow:false,
- timetushow:false,
- soltishow:false,
- staTime:'',
- endtime:'',
- orderBy:'',
- permissions:{
- commonly1:false,
- commonly2:false
- }
- }
- },
- onLoad(options) {
- this.isnorefresh=options.refresh;
- },
- onShow() {
- let newmenulist= uni.getStorageSync('weapp_session_Menu_data');
- this.permissions.commonly1=newmenulist.khgl_ck;
- this.permissions.commonly2=newmenulist.khgl_gj;
- if(this.isnorefresh=='refresh'){
- this.buildingID = uni.getStorageSync('buildingID').id;
- this.nextPage=1;
- this.recordList=[]
- this.getMyCustom()
- this.getFreeList()
- this.getfindKeywordsList()
- this.isnorefresh='';
- }
- },
- onReachBottom() {
- if(this.totalRecord==this.nextPage){
- uni.showToast({
- icon:'none',
- title: '到底了',
- duration: 2000
- });
- return
- }else{
- this.nextPage+=1;
- this.getMyCustom();
- }
- },
- methods:{
- tapsoltishow(){
- this.soltishow=true;
- },
- taptimetuisshow(){
- this.timetushow=true;
- },
- taptimeisshow(){
- this.timeshow=true;
- },
- //选择标签
- selectCallback2(e){
- this.orderBy=e[0].value;
- this.nextPage=1;
- this.recordList=[];
- this.getMyCustom();
- },
- //选择录音时长
- timetap(index){
- this.timetushow=false;
- this.activeTotal2=index;
- this.nextPage=1;
- this.recordList=[];
- this.getMyCustom();
- },
- //时间选择
- tabtimetap(index){
- this.timeshow=false;
- if (index == 4) {
- this.totalTimeShow = true;
- } else {
- this.activeTotal = index;
- this.staTime='';
- this.endtime='';
- this.nextPage=1;
- this.recordList=[];
- this.getMyCustom();
- }
- },
- //自定义时间
- totalTimeChange(e) {
- this.staTime=e.startDate;
- this.endtime=e.endDate;
- this.activeTotal=4;
- this.nextPage=1;
- this.recordList=[];
- this.getMyCustom();
- },
- recordclick(i){
- if(this.screen.record==i){
- this.screen.record=null
- }else{
- this.screen.record=i
- }
- },
- screenvisitRecord(i){
- if(this.screen.visitRecord==i){
- this.screen.visitRecord=''
- }else{
- this.screen.visitRecord=i
- }
- },
- // 客户详情
- gotoDetail(id) {
- if(this.permissions.commonly1==true){
- uni.navigateTo({
- url: `/pages/center/consumer/consumerDetail?id=${id}`
- })
- }
- },
- getMyCustom(){
- let dateType=0;
- let recDurationInterval=0;
- let orderBy=0;
- if(this.activeTotal==5){
- dateType=null;
- }else if(this.activeTotal==4){
- dateType=null;
- }else{
- dateType=this.activeTotal;
- }
-
- if(this.activeTotal2==0){
- recDurationInterval=null
- }else{
- recDurationInterval=this.activeTotal2
- }
-
- if(this.orderBy==0){
- orderBy=null;
- }else{
- orderBy=this.orderBy;
- }
-
- var parames = {
- pageNum: this.nextPage,
- pageSize: 10,
- query: {
- projectId:this.buildingID,
- keywordsId:this.screen.cunsumerTipsid,
- agentId:this.screen.agentId,
- dateType:dateType,
- staDate:this.staTime,
- endDate:this.endtime,
- recDurationInterval:recDurationInterval,
- orderBy:orderBy
- }
- };
- if (this.screen.visitRecord > 0) {
- parames.query.visitRecord = this.screen.visitRecord;
- }
- if(this.screen.record==0){
- parames.query.levels= ["1"]
- }else if(this.screen.record==1){
- parames.query.levels= ["2"]
- }else if(this.screen.record==2){
- parames.query.levels= ["3"]
- }else if(this.screen.record==3){
- parames.query.levels= ["4"]
- }else{
- parames.query.levels=null
- }
- this.$u.post("/customer/customerManagement", parames).then(data => {
- var list = data.results || [];
- console.log(list)
- list.forEach(item=>{
- if(item.demand.cusSemanticWordsList!=null){
- item.demand.cusSemanticWordsList.forEach(che=>{
- if(che.isInterval==0){
- che.name=che.name+che.unit+'-'+che.endName+che.unit;
- }
- })
- }
- })
- this.recordList = [...this.recordList, ...list];
- this.totalRecord=data.totalPage;
- })
- },
- //获取顾问列表
- getFreeList() {
- this.freeList=[]
- this.$u.get("/zkAgentPool/freeList?itemId="+this.buildingID).then(res => {
- this.freeList = res;
- this.freeList.forEach(item=>{
- item.label=item.name;
- item.value=item.agentId
- })
- })
- },
- //获取客户标签
- getfindKeywordsList() {
- this.findKeywordsList=[]
- this.$u.post("/customer/findKeywords",{houseId:this.buildingID}).then(res => {
- res.forEach(item=>{
- if(item.isInterval==0){
- item.label=item.name+item.unit+'-'+item.endName+item.unit;
- }else{
- item.label=item.name
- }
- item.value=item.id;
- })
- this.findKeywordsList = res;
- })
- },
- // 筛选
- screenshow(){
- this.screenShow=true
- },
- //选择顾问
- actionSelectCallback(e){
- this.screen.agentId=e[0].value;
- this.screen.agentIdtext=e[0].label;
- },
- //选择标签
- selectCallback(e){
- this.screen.cunsumerTips=e[0].label;
- this.screen.cunsumerTipsid=e[0].value;
- },
- //重置
- reset(){
- this.screen={
- agentId:'',
- agentIdtext:'',
- visitRecord:'',
- record:null,
- cunsumerTips:'',
- cunsumerTipsid:''
- }
- this.nextPage=1;
- this.recordList=[];
- this.screenShow=false;
- this.getMyCustom();
- },
- //筛选确认
- screensure(){
- this.nextPage=1;
- this.recordList=[];
- this.screenShow=false;
- this.getMyCustom();
- },
- goSearch(){
- uni.navigateTo({
- url: '/pages/center/consumer/consumerSearch'
- });
- },
- gotoFollowUp(id) {
- uni.navigateTo({
- url: `/pages/center/consumer/newFollowup/newFollowup?id=${id}`
- })
- },
- }
- }
- </script>
-
- <style lang="scss" scoped>
- .box {
- width: 100%;
- height: 100%;
- background: #F8F8F8;
- }
-
- .timeview{
- height: 80rpx;
- line-height: 80rpx;
- width: 100%;
- text-align: center;
- border-bottom: 1px solid #F8F8F8;
- }
- //时间切换的样式
- .boxtittab {
- width: 100;
- height: 92rpx;
- background: #FFFFFF;
- border: 1px solid #E0E0E0;
- display: flex;
- align-items: center;
-
- .tabbox {
- flex: 1;
- height: 100%;
- text-align: center;
- line-height: 92rpx;
- color: #666666;
- font-size: 28rpx;
- }
- }
-
- .search-box{
- width: 100%;
- height: 102rpx;
- background: #FFFFFF;
- display: flex;
- align-items: center;
- justify-content: center;
- .search{
- width: 94%;
- 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-top: 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{
- width: 52rpx;
- height: 52rpx;
- border: 1rpx solid #E0E0E0;
- border-radius: 50%;
- text-align: center;
- line-height: 50rpx;
- margin-right: 20rpx;
- }
- .test{
- margin-top: 11rpx;
- 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: 1rpx solid #E0E0E0;
- padding: 0 30rpx;
- padding-bottom: 30rpx;
- position: relative;
- .content-sec-lab{
- margin-top: 30rpx;
- display: flex;
- font-size: 30rpx;
- font-weight: 400;
- color: #666666;
- line-height: 46rpx;
- .content-sec-lab1{
- color: #333333;
- }
- .content-sec-tips{
- max-width:160rpx;
- 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: 20rpx;
- box-sizing: border-box;
- padding: 10rpx 24rpx;
- }
- }
- .content-sec-num{
- position: absolute;
- width: 200rpx;
- 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: 1rpx solid #E0E0E0;
- height: 78rpx;
- .content-last-tab{
- width: 33.4%;
- text-align: center;
- font-size: 30rpx;
- font-weight: 400;
- color: #333333;
- line-height: 78rpx;
- border-right: 1rpx 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 #E0E0E0;
- .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 #E0E0E0;
- .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: #2671E2;
- border-radius: 4rpx;
- border: 1px solid #2671E2;
- text-align: center;
- line-height: 60rpx;
- margin-right: 22rpx;
- color: #FFFFFF;
- }
- .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{
- width: 100%;
- height: 88rpx;
- display: flex;
- .screen-foot-reset{
- width: 50%;
- text-align: center;
- height: 88rpx;
- line-height: 88rpx;
- font-size: 30rpx;
- font-weight: 400;
- color: #666666;
- }
- .screen-foot-sure{
- width: 50%;
- text-align: center;
- line-height: 88rpx;
- height: 88rpx;
- font-size: 30rpx;
- font-weight: 400;
- color: #FFFFFF;
- background: #2671E2;
- }
- }
- }
- </style>
|