|
- <template>
- <view class="cenbox">
- <view class="screeningtop">
- <view class="screeningview" @click="clickscreening(1)">
- <view>近一周</view>
- <view class="viewimg">
- <image v-if="screeningshow1==false" src="../../../../static/images/down1.png" mode=""></image>
- <image v-if="screeningshow1==true" src="../../../../static/images/down2.png" mode=""></image>
- </view>
- </view>
- <view class="screeningview" @click="clickscreening(2)">
- <view>客户</view>
- <view class="viewimg">
- <image v-if="screeningshow2==false" src="../../../../static/images/down1.png" mode=""></image>
- <image v-if="screeningshow2==true" src="../../../../static/images/down2.png" mode=""></image>
- </view>
- </view>
- <view class="screeningview" @click="clickscreening(3)">
- <view>置业顾问</view>
- <view class="viewimg">
- <image v-if="screeningshow3==false" src="../../../../static/images/down1.png" mode=""></image>
- <image v-if="screeningshow3==true" src="../../../../static/images/down2.png" mode=""></image>
- </view>
- </view>
- <view style="border: none;" class="screeningview" @click="clickscreening(4)">
- <view>语义词</view>
- <view class="viewimg">
- <image v-if="screeningshow4==false" src="../../../../static/images/down1.png" mode=""></image>
- <image v-if="screeningshow4==true" src="../../../../static/images/down2.png" mode=""></image>
- </view>
- </view>
- </view>
- <view class="zhuti">
- <view v-if="tadelist.length!=0" class="cenforview" v-for="(item,index) in tadelist" :key='index' @click="toinfo(item)">
- <view class="cenfortop">
- <view class="fortopzuo">
- <view class="topzuoimg">
- <image src="../../../../static/images/userorder.png" mode=""></image>
- </view>
- </view>
- <view class="fortopyou">
- <view class="topyouview1">
- <view class="youview1-1">{{item.agentName}}</view>
- <view class="youview1-2">接待开始时间:{{item.staTime}}</view>
- </view>
- <view class="topyouview2">客户姓名:{{item.name}}</view>
- </view>
- </view>
- <view class="cenforbottom">
- <view class="forbottomview">
- <view class="bottomview1">录音时长 (分钟)</view>
- <view class="bottomview2">{{item.mm}}分钟</view>
- </view>
- <view class="forbottomview">
- <view class="bottomview1">需求触达次数</view>
- <view class="bottomview2">{{item.total}}次</view>
- </view>
- <view class="forbottomview" style="border: none;">
- <view class="bottomview1">接访得分</view>
- <view class="bottomview2" v-if="item.fraction==null">0分</view>
- <view class="bottomview2" v-else>{{item.fraction}}分</view>
- </view>
-
- </view>
- </view>
- <view v-if="tadelist.length==0" style="width: 100%;height: 100%;display: flex;align-items: center;">
- <view style="width: 100%;background: #FFFFFF;padding-top: 200rpx;">
- <view style="width: 100%;text-align: center;">
- <image style="width: 200rpx;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>
-
- <!-- 1 -->
- <view v-if="screeningshow1==true" class="call_zhezhao" @click="allcancel()"></view>
- <view v-if="screeningshow1==true" class="timepick">
- <view class="tiempickbox">
- <view :class="{ timeactive: activetime == 0 }" @click="activetimetab(0)">今日</view>
- <view :class="{ timeactive: activetime == 1 }" @click="activetimetab(1)">昨日</view>
- <view :class="{ timeactive: activetime == 2 }" @click="activetimetab(2)">近一周</view>
- <view :class="{ timeactive: activetime == 3 }" @click="activetimetab(3)">本月</view>
- </view>
- <view class="tiempickzidingyi" @click="activetimetab(5)">
- <text v-if="Datesicing.length==0">自定义时间:请选择</text>
- <text v-else>{{Datesicing}}</text>
- </view>
- </view>
-
- <!-- 2 -->
- <view v-if="screeningshow2==true" class="call_zhezhao" @click="allcancel()"></view>
- <view v-if="screeningshow2==true" class="userinput">
- <view class="inputdlex">
- <view class="flexzuo">
- <input class="flexinput" @confirm="searchinfo()" v-model="name" type="text" placeholder="请输入客户名" />
- </view>
- <view class="flexyou" @click="searchinfo()">搜索</view>
- </view>
- </view>
-
-
- <!-- 3 -->
- <view v-if="screeningshow3==true" class="call_zhezhao" @click="allcancel()"></view>
- <view v-if="screeningshow3==true" class="userinput">
- <view class="inputdlex">
- <view class="flexzuo">
- <input class="flexinput" @confirm="searchinfo()" v-model="agentName" type="text" placeholder="请输入顾问名" />
- </view>
- <view class="flexyou" @click="searchinfo()">搜索</view>
- </view>
- </view>
-
- <!-- 4 -->
- <view v-if="screeningshow4==true" class="call_zhezhao" @click="allcancel()"></view>
- <view v-if="screeningshow4==true" class="yuyipick">
- <view class="inputdlex">
- <!-- <view :class="{ timeactive111: keywordsId == item.keywordsId }" @click="semantictap(index)"
- v-for="(item,index) in semanticlist" :key="index">{{item.name}}</view> -->
- <view :class="{ timeactive111: item.checked }" @click="itemChcek(index)"
- v-for="(item,index) in semanticlist" :key="index">{{item.name}}</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-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
- </view>
- </template>
-
- <script>
- var app = getApp();
- var util = require("../../../../utils/util.js");
- var config = require("../../../../config");
- export default {
- data() {
- return {
- screeningshow1:false,
- screeningshow2:false,
- screeningshow3:false,
- screeningshow4:false,
- activetime:2,
- totalTimeShow:false,
- Datesicing:'',
- Inthemiddletime:'',
- starttime:'',//开始时间
- endoftime:'',//结束时间
- keywordsId:'',//选中语义词id
- houseId:'',//项目id
- semanticlist:[],//语义词集合
- name:'',
- agentName:'',
- pageNum:1,
- pageSize:10,
- tadelist:[],
- totalpage:0,
- keywordIds:'',
- type:0,
- };
- },
- onLoad(options) {
- console.log(options)
- if(options.datatype==3){
- this.activetime=5;
- this.starttime=options.starttime;
- this.endoftime=options.endoftime;
- this.Datesicing=this.starttime+'至'+this.endoftime;
- }else{
- this.activetime=options.datatype;
- this.starttime='';
- this.endoftime='';
- this.Datesicing='';
- }
- // this.keywordsId=options.keywordsId
- this.keywordIds=options.keywordsId
- this.houseId=uni.getStorageSync('buildingID').id;
- this.Accesstolevel()
- },
- onReachBottom() {
- if (this.totalpage < this.pageNum * this.pageSize) {
- return uni.showToast({
- title: "到底了",
- })
- }
- this.pageNum++;
- this.getinit();
- },
- methods: {
- toinfo(item){
- uni.setStorageSync("entrance", 1); //写入缓存
- uni.navigateTo({
- url: `/pages/center/Piabodata/Customerportrait/Receivedetailabout?customerId=${item.id}`
- })
- },
- //搜索
- searchinfo(){
- this.totalpage=0;
- this.tadelist=[];
- this.pageNum=1;
- this.getinit()
- },
- itemChcek(index){
- this.semanticlist[index].checked=!this.semanticlist[index].checked
- this.$forceUpdate()
- },
- reset(){
- this.semanticlist.map(item=>{
- item.checked=false
- })
- this.keywordIds=''
- this.$forceUpdate()
- this.allcancel()
- this.totalpage=0;
- this.tadelist=[];
- this.pageNum=1;
- this.getinit()
- },
- screensure(){
- let arr=[]
- this.semanticlist.map(item=>{
- if(item.checked){
- arr.push(item.keywordsId)
- }
- })
- this.keywordIds=arr.join(',')
- // console.log(this.keywordIds)
- this.allcancel()
- this.totalpage=0;
- this.tadelist=[];
- this.pageNum=1;
- this.getinit()
- },
- //点击三级
- semantictap(index){
- this.keywordsId=this.semanticlist[index].keywordsId;
- this.allcancel()
- this.totalpage=0;
- this.tadelist=[];
- this.pageNum=1;
- this.getinit()
- },
- //获取列表数据
- getinit(){
- uni.showToast({
- title: '加载中',
- icon:'loading',
- duration: 1500
- });
- let datatype='';
- if(this.activetime==5){
- var parames={
- pageNum:this.pageNum,
- pageSize:this.pageSize,
- query:{
- staTime:this.starttime,
- endTime:this.endoftime,
- time:1,
- name:this.name,
- agentName:this.agentName,
- type:this.type,
- keywordIds:this.keywordIds,
- // keywordsId:this.keywordsId,
- projectId:this.houseId,
- }
- }
- }else{
- datatype=this.activetime;
- var parames={
- pageNum:this.pageNum,
- pageSize:this.pageSize,
- query:{
- dateType:Number(datatype),
- staTime:this.starttime,
- endTime:this.endoftime,
- time:1,
- name:this.name,
- agentName:this.agentName,
- type:0,
- keywordIds:this.keywordIds,
- // keywordsId:this.keywordsId,
- projectId:this.houseId,
- }
- }
- }
-
- this.$u.post("/matchKeywords/receptionRecord", parames).then(data => {
- this.type=1;
- if(data.results==null){
- console.log("没有")
- return
- }else{
- this.tadelist=[...this.tadelist, ...data.results];
- this.totalpage=data.totalRecord;
- }
- })
- },
- //获取三级
- Accesstolevel(){
- let datatype='';
- if(this.activetime==5){
- var parames={
- type:0,
- statDateStart:this.starttime,
- statDateEnd:this.endoftime,
- houseId:this.houseId
- }
- }else{
- datatype=this.activetime;
- var parames={
- type:0,
- dateType:Number(datatype),
- statDateStart:this.starttime,
- statDateEnd:this.endoftime,
- houseId:this.houseId
- }
- }
-
- this.$u.post("/matchKeywords/findKeywords", parames).then(data => {
- data.forEach(item=>{
- if(item.isInterval==0){
- item.name=item.name+item.unit+'-'+item.endName+item.unit
- }
- if(item.keywordsId==this.keywordIds){
- item.checked=true
- }else{
- item.checked=false
- }
- })
- this.semanticlist=data;
- this.getinit();
- })
- },
- //遮罩取消
- allcancel(){
- this.screeningshow1=false;
- this.screeningshow2=false;
- this.screeningshow3=false;
- this.screeningshow4=false;
- },
- //自定义时间确认
- totalTimeChange(e){
- this.Datesicing=e.startDate+'至'+e.endDate;
- this.starttime=e.startDate;
- this.endoftime=e.endDate;
- this.activetime=this.Inthemiddletime;
- this.totalTimeShow=false;
- this.tadelist=[]
- this.allcancel()
- this.Accesstolevel()
- },
- //时间选择
- activetimetab(index){
- if(index==5){
- this.Inthemiddletime=index;
- this.totalTimeShow=!this.totalTimeShow;
- }else{
- this.Datesicing='';
- this.activetime=index;
- this.tadelist=[]
- this.allcancel()
- this.Accesstolevel()
- }
- },
- //筛选弹框
- clickscreening(i){
- if(i==1){
- this.screeningshow1=!this.screeningshow1;
- this.screeningshow2=false;
- this.screeningshow3=false;
- this.screeningshow4=false;
- }else if(i==2){
- this.screeningshow2=!this.screeningshow2;
- this.screeningshow1=false;
- this.screeningshow3=false;
- this.screeningshow4=false;
- }else if(i==3){
- this.screeningshow3=!this.screeningshow3;
- this.screeningshow2=false;
- this.screeningshow1=false;
- this.screeningshow4=false;
- }else{
- this.screeningshow4=!this.screeningshow4;
- this.screeningshow2=false;
- this.screeningshow3=false;
- this.screeningshow1=false;
- }
-
- }
- }
- };
- </script>
- <style lang="scss" scoped>
- .timeactive111{
- color: #2671E2;
- }
- *{
- margin:0;
- padding:0;
- box-sizing:border-box;
- }
- .cenbox{
- width: 100%;
- height: 100%;
- background-color: #F8F8F8;
- display:flex;
- flex-direction:column;
- .screeningtop{
- width: 100%;
- height: 75rpx;
- background-color: #FFFFFF;
- border-bottom: 1px solid #E0E0E0;
- align-items: center;
- display: flex;
- align-items: center;
- position: relative;
- }
- .screeningview{
- flex: 1;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- border-right: 1px solid #E0E0E0;
- }
- .zhuti{
- flex:1;
- // soverflow:auto;
- }
- }
- .viewimg{
- width: 20rpx;
- height: 100%;
- line-height: 72rpx;
- margin-left: 10rpx;
- image{
- width: 20rpx;
- height: 12rpx;
- }
- }
- .cenforview{
- width: 100%;
- height: 275rpx;
- background: #FFFFFF;
- margin-top: 20rpx;
- .cenfortop{
- width: 100%;
- height: 146rpx;
- display: flex;
- // border-bottom: 1px solid #E0E0E0;
- .fortopzuo{
- width: 16%;
- padding-top: 30rpx;
- .topzuoimg{
- width: 60rpx;
- height: 60rpx;
- margin-left: 30rpx;
- border-radius: 50%;
- image{
- width: 100%;
- height: 100%;
- }
- }
- }
- .fortopyou{
- width: 84%;
- height: 146rpx;
- .topyouview1{
- width: 100%;
- margin-top: 28rpx;
- display: flex;
- .youview1-1{
- width: 25%;
- font-size: 28rpx;
- font-weight: 400;
- color: #333333;
- overflow: hidden;
- white-space:nowrap;
- text-overflow:ellipsis;
- }
- .youview1-2{
- width: 75%;
- font-size: 26rpx;
- font-weight: 400;
- color: #666666;
-
- }
- }
- .topyouview2{
- width: 100%;
- font-size: 28rpx;
- font-weight: 400;
- color: #333333;
- margin-top: 20rpx;
- }
- }
- }
- .cenforbottom{
- width: 100%;
- height: 128rpx;
- display: flex;
- align-items: center;
- .forbottomview{
- flex: 1;
- height: 128rpx;
- // border-right: 1px solid #E0E0E0;
- .bottomview1{
- width: 100%;
- height: 26rpx;
- font-size: 26rpx;
- font-weight: 400;
- color: #666666;
- line-height: 26rpx;
- text-align: center;
- margin-top: 24rpx;
- }
- .bottomview2{
- width: 100%;
- height: 30rpx;
- font-size: 30rpx;
- font-weight: 600;
- color: #333333;
- line-height: 30rpx;
- text-align: center;
- margin-top: 24rpx;
- }
- }
- }
- }
- .timepick{
- width: 100%;
- height: 210rpx;
- background: #FFFFFF;
- position: absolute;
- top: 74rpx;
- left: 0;
- z-index: 20;
- .tiempickbox{
- width: 94%;
- margin: 0 auto;
- height: 56rpx;
- display: flex;
- align-items: center;
- margin-top: 25rpx;
- }
- .tiempickbox>view:nth-of-type(1){
- width: 156rpx;
- height: 56rpx;
- border-radius: 4rpx;
- text-align: center;
- line-height: 56rpx;
- font-size: 28rpx;
- border: 1px solid #C9C9C9;
- }
- .tiempickbox>view:nth-of-type(2){
- width: 156rpx;
- height: 56rpx;
- border-radius: 4rpx;
- text-align: center;
- line-height: 56rpx;
- font-size: 28rpx;
- border: 1px solid #C9C9C9;
- margin-left: 28rpx;
- }
- .tiempickbox>view:nth-of-type(3){
- width: 156rpx;
- height: 56rpx;
- border-radius: 4rpx;
- text-align: center;
- line-height: 56rpx;
- font-size: 28rpx;
- border: 1px solid #C9C9C9;
- margin-left: 28rpx;
- }
- .tiempickbox>view:nth-of-type(4){
- width: 156rpx;
- height: 56rpx;
- border-radius: 4rpx;
- text-align: center;
- line-height: 56rpx;
- font-size: 28rpx;
- border: 1px solid #C9C9C9;
- margin-left: 28rpx;
- }
- .tiempickzidingyi{
- width: 94%;
- margin: 0 auto;
- margin-top: 28rpx;
- height: 60rpx;
- background: #FFFFFF;
- border-radius: 4rpx;
- border: 1px solid #C9C9C9;
- text-align: center;
- line-height: 60rpx;
- color: #666666;
- }
- }
- .call_zhezhao {
- position: fixed;
- width: 100%;
- height: 100%;
- top: 75rpx;
- left: 0rpx;
- opacity: 0.5;
- background-color: #666666;
- z-index: 10;
- }
- .timeactive{
- color: #FFFFFF;
- background-color: #2671E2;
- }
- .userinput{
- width: 100%;
- height: 126rpx;
- background: #FFFFFF;
- position: absolute;
- top: 74rpx;
- left: 0;
- z-index: 20;
- .inputdlex{
- width: 90%;
- margin: 0 auto;
- height: 56rpx;
- display: flex;
- align-items: center;
- margin-top: 30rpx;
- .flexzuo{
- width: 80%;
- .flexinput{
- width: 96%;
- height: 100%;
- border-radius: 20rpx;
- border: 1px solid #C9C9C9;
- padding-left: 20rpx;
- font-size: 24rpx;
- }
- }
- .flexyou{
- width: 20%;
- font-size: 28rpx;
- color: #2671E2;
- text-indent: 28rpx;
- }
- }
- }
- .yuyipick{
- width: 100%;
- min-height: 300rpx;
- max-height: 500rpx;
- background: #FFFFFF;
- overflow-y: auto;
- // padding-bottom: 20rpx;
- position: absolute;
- top: 74rpx;
- left: 0;
- z-index: 20;
- .inputdlex{
- width: 90%;
- margin: 0 auto;
- display: flex;
- flex-wrap: wrap;
- margin-top: 30rpx;
- }
- .inputdlex view{
- width: 50%;
- font-size: 26rpx;
- font-weight: 400;
- text-align: center;
- margin-top: 26rpx;
- }
- }
- .screen-foot{
- width: 100%;
- height: 88rpx;
- display: flex;
- margin-top: 20rpx;
- border-top: 1px solid #E0E0E0;
- .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>
|