AI销管
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
 
 
 
 

704 行
16 KiB

  1. <template>
  2. <view class="cenbox">
  3. <view class="screeningtop">
  4. <view class="screeningview" @click="clickscreening(1)">
  5. <view>近一周</view>
  6. <view class="viewimg">
  7. <image v-if="screeningshow1==false" src="../../../../static/images/down1.png" mode=""></image>
  8. <image v-if="screeningshow1==true" src="../../../../static/images/down2.png" mode=""></image>
  9. </view>
  10. </view>
  11. <view class="screeningview" @click="clickscreening(2)">
  12. <view>客户</view>
  13. <view class="viewimg">
  14. <image v-if="screeningshow2==false" src="../../../../static/images/down1.png" mode=""></image>
  15. <image v-if="screeningshow2==true" src="../../../../static/images/down2.png" mode=""></image>
  16. </view>
  17. </view>
  18. <view class="screeningview" @click="clickscreening(3)">
  19. <view>置业顾问</view>
  20. <view class="viewimg">
  21. <image v-if="screeningshow3==false" src="../../../../static/images/down1.png" mode=""></image>
  22. <image v-if="screeningshow3==true" src="../../../../static/images/down2.png" mode=""></image>
  23. </view>
  24. </view>
  25. <view style="border: none;" class="screeningview" @click="clickscreening(4)">
  26. <view>语义词</view>
  27. <view class="viewimg">
  28. <image v-if="screeningshow4==false" src="../../../../static/images/down1.png" mode=""></image>
  29. <image v-if="screeningshow4==true" src="../../../../static/images/down2.png" mode=""></image>
  30. </view>
  31. </view>
  32. </view>
  33. <view class="zhuti">
  34. <view v-if="tadelist.length!=0" class="cenforview" v-for="(item,index) in tadelist" :key='index' @click="toinfo(item)">
  35. <view class="cenfortop">
  36. <view class="fortopzuo">
  37. <view class="topzuoimg">
  38. <image src="../../../../static/images/userorder.png" mode=""></image>
  39. </view>
  40. </view>
  41. <view class="fortopyou">
  42. <view class="topyouview1">
  43. <view class="youview1-1">{{item.agentName}}</view>
  44. <view class="youview1-2">接待开始时间:{{item.staTime}}</view>
  45. </view>
  46. <view class="topyouview2">客户姓名:{{item.name}}</view>
  47. </view>
  48. </view>
  49. <view class="cenforbottom">
  50. <view class="forbottomview">
  51. <view class="bottomview1">录音时长 (分钟)</view>
  52. <view class="bottomview2">{{item.mm}}分钟</view>
  53. </view>
  54. <view class="forbottomview">
  55. <view class="bottomview1">需求触达次数</view>
  56. <view class="bottomview2">{{item.total}}次</view>
  57. </view>
  58. <view class="forbottomview" style="border: none;">
  59. <view class="bottomview1">接访得分</view>
  60. <view class="bottomview2" v-if="item.fraction==null">0分</view>
  61. <view class="bottomview2" v-else>{{item.fraction}}分</view>
  62. </view>
  63. </view>
  64. </view>
  65. <view v-if="tadelist.length==0" style="width: 100%;height: 100%;display: flex;align-items: center;">
  66. <view style="width: 100%;background: #FFFFFF;padding-top: 200rpx;">
  67. <view style="width: 100%;text-align: center;">
  68. <image style="width: 200rpx;height: 200rpx;" src="https://static.quhouse.com/zhikong_xcx_img/nodatalist.png" mode=""></image>
  69. </view>
  70. <view style="text-align: center;width: 100%;margin-top: 20rpx;color: #999999;">暂无数据</view>
  71. </view>
  72. </view>
  73. </view>
  74. <!-- 1 -->
  75. <view v-if="screeningshow1==true" class="call_zhezhao" @click="allcancel()"></view>
  76. <view v-if="screeningshow1==true" class="timepick">
  77. <view class="tiempickbox">
  78. <view :class="{ timeactive: activetime == 0 }" @click="activetimetab(0)">今日</view>
  79. <view :class="{ timeactive: activetime == 1 }" @click="activetimetab(1)">昨日</view>
  80. <view :class="{ timeactive: activetime == 2 }" @click="activetimetab(2)">近一周</view>
  81. <view :class="{ timeactive: activetime == 3 }" @click="activetimetab(3)">本月</view>
  82. </view>
  83. <view class="tiempickzidingyi" @click="activetimetab(5)">
  84. <text v-if="Datesicing.length==0">自定义时间:请选择</text>
  85. <text v-else>{{Datesicing}}</text>
  86. </view>
  87. </view>
  88. <!-- 2 -->
  89. <view v-if="screeningshow2==true" class="call_zhezhao" @click="allcancel()"></view>
  90. <view v-if="screeningshow2==true" class="userinput">
  91. <view class="inputdlex">
  92. <view class="flexzuo">
  93. <input class="flexinput" @confirm="searchinfo()" v-model="name" type="text" placeholder="请输入客户名" />
  94. </view>
  95. <view class="flexyou" @click="searchinfo()">搜索</view>
  96. </view>
  97. </view>
  98. <!-- 3 -->
  99. <view v-if="screeningshow3==true" class="call_zhezhao" @click="allcancel()"></view>
  100. <view v-if="screeningshow3==true" class="userinput">
  101. <view class="inputdlex">
  102. <view class="flexzuo">
  103. <input class="flexinput" @confirm="searchinfo()" v-model="agentName" type="text" placeholder="请输入顾问名" />
  104. </view>
  105. <view class="flexyou" @click="searchinfo()">搜索</view>
  106. </view>
  107. </view>
  108. <!-- 4 -->
  109. <view v-if="screeningshow4==true" class="call_zhezhao" @click="allcancel()"></view>
  110. <view v-if="screeningshow4==true" class="yuyipick">
  111. <view class="inputdlex">
  112. <!-- <view :class="{ timeactive111: keywordsId == item.keywordsId }" @click="semantictap(index)"
  113. v-for="(item,index) in semanticlist" :key="index">{{item.name}}</view> -->
  114. <view :class="{ timeactive111: item.checked }" @click="itemChcek(index)"
  115. v-for="(item,index) in semanticlist" :key="index">{{item.name}}</view>
  116. </view>
  117. <view class="screen-foot">
  118. <view class="screen-foot-reset" @click="reset">
  119. 重置
  120. </view>
  121. <view class="screen-foot-sure" @click="screensure">
  122. 确定
  123. </view>
  124. </view>
  125. </view>
  126. <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
  127. </view>
  128. </template>
  129. <script>
  130. var app = getApp();
  131. var util = require("../../../../utils/util.js");
  132. var config = require("../../../../config");
  133. export default {
  134. data() {
  135. return {
  136. screeningshow1:false,
  137. screeningshow2:false,
  138. screeningshow3:false,
  139. screeningshow4:false,
  140. activetime:2,
  141. totalTimeShow:false,
  142. Datesicing:'',
  143. Inthemiddletime:'',
  144. starttime:'',//开始时间
  145. endoftime:'',//结束时间
  146. keywordsId:'',//选中语义词id
  147. houseId:'',//项目id
  148. semanticlist:[],//语义词集合
  149. name:'',
  150. agentName:'',
  151. pageNum:1,
  152. pageSize:10,
  153. tadelist:[],
  154. totalpage:0,
  155. keywordIds:'',
  156. type:0,
  157. };
  158. },
  159. onLoad(options) {
  160. console.log(options)
  161. if(options.datatype==3){
  162. this.activetime=5;
  163. this.starttime=options.starttime;
  164. this.endoftime=options.endoftime;
  165. this.Datesicing=this.starttime+'至'+this.endoftime;
  166. }else{
  167. this.activetime=options.datatype;
  168. this.starttime='';
  169. this.endoftime='';
  170. this.Datesicing='';
  171. }
  172. // this.keywordsId=options.keywordsId
  173. this.keywordIds=options.keywordsId
  174. this.houseId=uni.getStorageSync('buildingID').id;
  175. this.Accesstolevel()
  176. },
  177. onReachBottom() {
  178. if (this.totalpage < this.pageNum * this.pageSize) {
  179. return uni.showToast({
  180. title: "到底了",
  181. icon: 'none',
  182. })
  183. }
  184. this.pageNum++;
  185. this.getinit();
  186. },
  187. methods: {
  188. toinfo(item){
  189. uni.setStorageSync("entrance", 1); //写入缓存
  190. uni.navigateTo({
  191. url: `/pages/center/Piabodata/Customerportrait/Receivedetailabout?customerId=${item.id}`
  192. })
  193. },
  194. //搜索
  195. searchinfo(){
  196. this.totalpage=0;
  197. this.tadelist=[];
  198. this.pageNum=1;
  199. this.getinit()
  200. },
  201. itemChcek(index){
  202. this.semanticlist[index].checked=!this.semanticlist[index].checked
  203. this.$forceUpdate()
  204. },
  205. reset(){
  206. this.semanticlist.map(item=>{
  207. item.checked=false
  208. })
  209. this.keywordIds=''
  210. this.$forceUpdate()
  211. this.allcancel()
  212. this.totalpage=0;
  213. this.tadelist=[];
  214. this.pageNum=1;
  215. this.getinit()
  216. },
  217. screensure(){
  218. let arr=[]
  219. this.semanticlist.map(item=>{
  220. if(item.checked){
  221. arr.push(item.keywordsId)
  222. }
  223. })
  224. this.keywordIds=arr.join(',')
  225. // console.log(this.keywordIds)
  226. this.allcancel()
  227. this.totalpage=0;
  228. this.tadelist=[];
  229. this.pageNum=1;
  230. this.getinit()
  231. },
  232. //点击三级
  233. semantictap(index){
  234. this.keywordsId=this.semanticlist[index].keywordsId;
  235. this.allcancel()
  236. this.totalpage=0;
  237. this.tadelist=[];
  238. this.pageNum=1;
  239. this.getinit()
  240. },
  241. //获取列表数据
  242. getinit(){
  243. uni.showToast({
  244. title: '加载中',
  245. icon:'loading',
  246. duration: 1500
  247. });
  248. let datatype='';
  249. if(this.activetime==5){
  250. var parames={
  251. pageNum:this.pageNum,
  252. pageSize:this.pageSize,
  253. query:{
  254. staDate:this.starttime,
  255. endTime:this.endoftime,
  256. time:1,
  257. name:this.name,
  258. agentName:this.agentName,
  259. type:this.type,
  260. keywordIds:this.keywordIds,
  261. // keywordsId:this.keywordsId,
  262. projectId:this.houseId,
  263. }
  264. }
  265. }else{
  266. datatype=this.activetime;
  267. var parames={
  268. pageNum:this.pageNum,
  269. pageSize:this.pageSize,
  270. query:{
  271. dateType:Number(datatype),
  272. staTime:this.starttime,
  273. endTime:this.endoftime,
  274. time:1,
  275. name:this.name,
  276. agentName:this.agentName,
  277. type:0,
  278. keywordIds:this.keywordIds,
  279. // keywordsId:this.keywordsId,
  280. projectId:this.houseId,
  281. }
  282. }
  283. }
  284. this.$u.post("/matchKeywords/receptionRecord", parames).then(data => {
  285. this.type=1;
  286. if(data.results==null){
  287. console.log("没有")
  288. return
  289. }else{
  290. this.tadelist=[...this.tadelist, ...data.results];
  291. this.totalpage=data.totalRecord;
  292. }
  293. })
  294. },
  295. //获取三级
  296. Accesstolevel(){
  297. let datatype='';
  298. if(this.activetime==5){
  299. var parames={
  300. type:0,
  301. statDateStart:this.starttime,
  302. statDateEnd:this.endoftime,
  303. houseId:this.houseId
  304. }
  305. }else{
  306. datatype=this.activetime;
  307. var parames={
  308. type:0,
  309. dateType:Number(datatype),
  310. statDateStart:this.starttime,
  311. statDateEnd:this.endoftime,
  312. houseId:this.houseId
  313. }
  314. }
  315. this.$u.post("/matchKeywords/findKeywords", parames).then(data => {
  316. data.forEach(item=>{
  317. if(item.isInterval==0){
  318. item.name=item.name+item.unit+'-'+item.endName+item.unit
  319. }
  320. if(item.keywordsId==this.keywordIds){
  321. item.checked=true
  322. }else{
  323. item.checked=false
  324. }
  325. })
  326. this.semanticlist=data;
  327. this.getinit();
  328. })
  329. },
  330. //遮罩取消
  331. allcancel(){
  332. this.screeningshow1=false;
  333. this.screeningshow2=false;
  334. this.screeningshow3=false;
  335. this.screeningshow4=false;
  336. },
  337. //自定义时间确认
  338. totalTimeChange(e){
  339. this.Datesicing=e.startDate+'至'+e.endDate;
  340. this.starttime=e.startDate;
  341. this.endoftime=e.endDate;
  342. this.activetime=this.Inthemiddletime;
  343. this.totalTimeShow=false;
  344. this.tadelist=[]
  345. this.allcancel()
  346. this.Accesstolevel()
  347. },
  348. //时间选择
  349. activetimetab(index){
  350. if(index==5){
  351. this.Inthemiddletime=index;
  352. this.totalTimeShow=!this.totalTimeShow;
  353. }else{
  354. this.Datesicing='';
  355. this.activetime=index;
  356. this.tadelist=[]
  357. this.allcancel()
  358. this.Accesstolevel()
  359. }
  360. },
  361. //筛选弹框
  362. clickscreening(i){
  363. if(i==1){
  364. this.screeningshow1=!this.screeningshow1;
  365. this.screeningshow2=false;
  366. this.screeningshow3=false;
  367. this.screeningshow4=false;
  368. }else if(i==2){
  369. this.screeningshow2=!this.screeningshow2;
  370. this.screeningshow1=false;
  371. this.screeningshow3=false;
  372. this.screeningshow4=false;
  373. }else if(i==3){
  374. this.screeningshow3=!this.screeningshow3;
  375. this.screeningshow2=false;
  376. this.screeningshow1=false;
  377. this.screeningshow4=false;
  378. }else{
  379. this.screeningshow4=!this.screeningshow4;
  380. this.screeningshow2=false;
  381. this.screeningshow3=false;
  382. this.screeningshow1=false;
  383. }
  384. }
  385. }
  386. };
  387. </script>
  388. <style lang="scss" scoped>
  389. .timeactive111{
  390. color: #2671E2;
  391. }
  392. *{
  393. margin:0;
  394. padding:0;
  395. box-sizing:border-box;
  396. }
  397. .cenbox{
  398. width: 100%;
  399. height: 100%;
  400. background-color: #F8F8F8;
  401. display:flex;
  402. flex-direction:column;
  403. .screeningtop{
  404. width: 100%;
  405. height: 75rpx;
  406. background-color: #FFFFFF;
  407. border-bottom: 1px solid #E0E0E0;
  408. align-items: center;
  409. display: flex;
  410. align-items: center;
  411. position: relative;
  412. }
  413. .screeningview{
  414. flex: 1;
  415. height: 100%;
  416. display: flex;
  417. align-items: center;
  418. justify-content: center;
  419. border-right: 1px solid #E0E0E0;
  420. }
  421. .zhuti{
  422. flex:1;
  423. // soverflow:auto;
  424. }
  425. }
  426. .viewimg{
  427. width: 20rpx;
  428. height: 100%;
  429. line-height: 72rpx;
  430. margin-left: 10rpx;
  431. image{
  432. width: 20rpx;
  433. height: 12rpx;
  434. }
  435. }
  436. .cenforview{
  437. width: 100%;
  438. height: 275rpx;
  439. background: #FFFFFF;
  440. margin-top: 20rpx;
  441. .cenfortop{
  442. width: 100%;
  443. height: 146rpx;
  444. display: flex;
  445. // border-bottom: 1px solid #E0E0E0;
  446. .fortopzuo{
  447. width: 16%;
  448. padding-top: 30rpx;
  449. .topzuoimg{
  450. width: 60rpx;
  451. height: 60rpx;
  452. margin-left: 30rpx;
  453. border-radius: 50%;
  454. image{
  455. width: 100%;
  456. height: 100%;
  457. }
  458. }
  459. }
  460. .fortopyou{
  461. width: 84%;
  462. height: 146rpx;
  463. .topyouview1{
  464. width: 100%;
  465. margin-top: 28rpx;
  466. display: flex;
  467. .youview1-1{
  468. width: 25%;
  469. font-size: 28rpx;
  470. font-weight: 400;
  471. color: #333333;
  472. overflow: hidden;
  473. white-space:nowrap;
  474. text-overflow:ellipsis;
  475. }
  476. .youview1-2{
  477. width: 75%;
  478. font-size: 26rpx;
  479. font-weight: 400;
  480. color: #666666;
  481. }
  482. }
  483. .topyouview2{
  484. width: 100%;
  485. font-size: 28rpx;
  486. font-weight: 400;
  487. color: #333333;
  488. margin-top: 20rpx;
  489. }
  490. }
  491. }
  492. .cenforbottom{
  493. width: 100%;
  494. height: 128rpx;
  495. display: flex;
  496. align-items: center;
  497. .forbottomview{
  498. flex: 1;
  499. height: 128rpx;
  500. // border-right: 1px solid #E0E0E0;
  501. .bottomview1{
  502. width: 100%;
  503. height: 26rpx;
  504. font-size: 26rpx;
  505. font-weight: 400;
  506. color: #666666;
  507. line-height: 26rpx;
  508. text-align: center;
  509. margin-top: 24rpx;
  510. }
  511. .bottomview2{
  512. width: 100%;
  513. height: 30rpx;
  514. font-size: 30rpx;
  515. font-weight: 600;
  516. color: #333333;
  517. line-height: 30rpx;
  518. text-align: center;
  519. margin-top: 24rpx;
  520. }
  521. }
  522. }
  523. }
  524. .timepick{
  525. width: 100%;
  526. height: 210rpx;
  527. background: #FFFFFF;
  528. position: absolute;
  529. top: 74rpx;
  530. left: 0;
  531. z-index: 20;
  532. .tiempickbox{
  533. width: 94%;
  534. margin: 0 auto;
  535. height: 56rpx;
  536. display: flex;
  537. align-items: center;
  538. margin-top: 25rpx;
  539. }
  540. .tiempickbox>view:nth-of-type(1){
  541. width: 156rpx;
  542. height: 56rpx;
  543. border-radius: 4rpx;
  544. text-align: center;
  545. line-height: 56rpx;
  546. font-size: 28rpx;
  547. border: 1px solid #C9C9C9;
  548. }
  549. .tiempickbox>view:nth-of-type(2){
  550. width: 156rpx;
  551. height: 56rpx;
  552. border-radius: 4rpx;
  553. text-align: center;
  554. line-height: 56rpx;
  555. font-size: 28rpx;
  556. border: 1px solid #C9C9C9;
  557. margin-left: 28rpx;
  558. }
  559. .tiempickbox>view:nth-of-type(3){
  560. width: 156rpx;
  561. height: 56rpx;
  562. border-radius: 4rpx;
  563. text-align: center;
  564. line-height: 56rpx;
  565. font-size: 28rpx;
  566. border: 1px solid #C9C9C9;
  567. margin-left: 28rpx;
  568. }
  569. .tiempickbox>view:nth-of-type(4){
  570. width: 156rpx;
  571. height: 56rpx;
  572. border-radius: 4rpx;
  573. text-align: center;
  574. line-height: 56rpx;
  575. font-size: 28rpx;
  576. border: 1px solid #C9C9C9;
  577. margin-left: 28rpx;
  578. }
  579. .tiempickzidingyi{
  580. width: 94%;
  581. margin: 0 auto;
  582. margin-top: 28rpx;
  583. height: 60rpx;
  584. background: #FFFFFF;
  585. border-radius: 4rpx;
  586. border: 1px solid #C9C9C9;
  587. text-align: center;
  588. line-height: 60rpx;
  589. color: #666666;
  590. }
  591. }
  592. .call_zhezhao {
  593. position: fixed;
  594. width: 100%;
  595. height: 100%;
  596. top: 75rpx;
  597. left: 0rpx;
  598. opacity: 0.5;
  599. background-color: #666666;
  600. z-index: 10;
  601. }
  602. .timeactive{
  603. color: #FFFFFF;
  604. background-color: #2671E2;
  605. }
  606. .userinput{
  607. width: 100%;
  608. height: 126rpx;
  609. background: #FFFFFF;
  610. position: absolute;
  611. top: 74rpx;
  612. left: 0;
  613. z-index: 20;
  614. .inputdlex{
  615. width: 90%;
  616. margin: 0 auto;
  617. height: 56rpx;
  618. display: flex;
  619. align-items: center;
  620. margin-top: 30rpx;
  621. .flexzuo{
  622. width: 80%;
  623. .flexinput{
  624. width: 96%;
  625. height: 100%;
  626. border-radius: 20rpx;
  627. border: 1px solid #C9C9C9;
  628. padding-left: 20rpx;
  629. font-size: 24rpx;
  630. }
  631. }
  632. .flexyou{
  633. width: 20%;
  634. font-size: 28rpx;
  635. color: #2671E2;
  636. text-indent: 28rpx;
  637. }
  638. }
  639. }
  640. .yuyipick{
  641. width: 100%;
  642. min-height: 300rpx;
  643. max-height: 500rpx;
  644. background: #FFFFFF;
  645. overflow-y: auto;
  646. // padding-bottom: 20rpx;
  647. position: absolute;
  648. top: 74rpx;
  649. left: 0;
  650. z-index: 20;
  651. .inputdlex{
  652. width: 90%;
  653. margin: 0 auto;
  654. display: flex;
  655. flex-wrap: wrap;
  656. margin-top: 30rpx;
  657. }
  658. .inputdlex view{
  659. width: 50%;
  660. font-size: 26rpx;
  661. font-weight: 400;
  662. text-align: center;
  663. margin-top: 26rpx;
  664. }
  665. }
  666. .screen-foot{
  667. width: 100%;
  668. height: 88rpx;
  669. display: flex;
  670. margin-top: 20rpx;
  671. border-top: 1px solid #E0E0E0;
  672. .screen-foot-reset{
  673. width: 50%;
  674. text-align: center;
  675. height: 88rpx;
  676. line-height: 88rpx;
  677. font-size: 30rpx;
  678. font-weight: 400;
  679. color: #666666;
  680. }
  681. .screen-foot-sure{
  682. width: 50%;
  683. text-align: center;
  684. line-height: 88rpx;
  685. height: 88rpx;
  686. font-size: 30rpx;
  687. font-weight: 400;
  688. color: #FFFFFF;
  689. background: #2671E2;
  690. }
  691. }
  692. </style>