25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

703 lines
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. })
  182. }
  183. this.pageNum++;
  184. this.getinit();
  185. },
  186. methods: {
  187. toinfo(item){
  188. uni.setStorageSync("entrance", 1); //写入缓存
  189. uni.navigateTo({
  190. url: `/pages/center/Piabodata/Customerportrait/Receivedetailabout?customerId=${item.id}`
  191. })
  192. },
  193. //搜索
  194. searchinfo(){
  195. this.totalpage=0;
  196. this.tadelist=[];
  197. this.pageNum=1;
  198. this.getinit()
  199. },
  200. itemChcek(index){
  201. this.semanticlist[index].checked=!this.semanticlist[index].checked
  202. this.$forceUpdate()
  203. },
  204. reset(){
  205. this.semanticlist.map(item=>{
  206. item.checked=false
  207. })
  208. this.keywordIds=''
  209. this.$forceUpdate()
  210. this.allcancel()
  211. this.totalpage=0;
  212. this.tadelist=[];
  213. this.pageNum=1;
  214. this.getinit()
  215. },
  216. screensure(){
  217. let arr=[]
  218. this.semanticlist.map(item=>{
  219. if(item.checked){
  220. arr.push(item.keywordsId)
  221. }
  222. })
  223. this.keywordIds=arr.join(',')
  224. // console.log(this.keywordIds)
  225. this.allcancel()
  226. this.totalpage=0;
  227. this.tadelist=[];
  228. this.pageNum=1;
  229. this.getinit()
  230. },
  231. //点击三级
  232. semantictap(index){
  233. this.keywordsId=this.semanticlist[index].keywordsId;
  234. this.allcancel()
  235. this.totalpage=0;
  236. this.tadelist=[];
  237. this.pageNum=1;
  238. this.getinit()
  239. },
  240. //获取列表数据
  241. getinit(){
  242. uni.showToast({
  243. title: '加载中',
  244. icon:'loading',
  245. duration: 1500
  246. });
  247. let datatype='';
  248. if(this.activetime==5){
  249. var parames={
  250. pageNum:this.pageNum,
  251. pageSize:this.pageSize,
  252. query:{
  253. staTime:this.starttime,
  254. endTime:this.endoftime,
  255. time:1,
  256. name:this.name,
  257. agentName:this.agentName,
  258. type:this.type,
  259. keywordIds:this.keywordIds,
  260. // keywordsId:this.keywordsId,
  261. projectId:this.houseId,
  262. }
  263. }
  264. }else{
  265. datatype=this.activetime;
  266. var parames={
  267. pageNum:this.pageNum,
  268. pageSize:this.pageSize,
  269. query:{
  270. dateType:Number(datatype),
  271. staTime:this.starttime,
  272. endTime:this.endoftime,
  273. time:1,
  274. name:this.name,
  275. agentName:this.agentName,
  276. type:0,
  277. keywordIds:this.keywordIds,
  278. // keywordsId:this.keywordsId,
  279. projectId:this.houseId,
  280. }
  281. }
  282. }
  283. this.$u.post("/matchKeywords/receptionRecord", parames).then(data => {
  284. this.type=1;
  285. if(data.results==null){
  286. console.log("没有")
  287. return
  288. }else{
  289. this.tadelist=[...this.tadelist, ...data.results];
  290. this.totalpage=data.totalRecord;
  291. }
  292. })
  293. },
  294. //获取三级
  295. Accesstolevel(){
  296. let datatype='';
  297. if(this.activetime==5){
  298. var parames={
  299. type:0,
  300. statDateStart:this.starttime,
  301. statDateEnd:this.endoftime,
  302. houseId:this.houseId
  303. }
  304. }else{
  305. datatype=this.activetime;
  306. var parames={
  307. type:0,
  308. dateType:Number(datatype),
  309. statDateStart:this.starttime,
  310. statDateEnd:this.endoftime,
  311. houseId:this.houseId
  312. }
  313. }
  314. this.$u.post("/matchKeywords/findKeywords", parames).then(data => {
  315. data.forEach(item=>{
  316. if(item.isInterval==0){
  317. item.name=item.name+item.unit+'-'+item.endName+item.unit
  318. }
  319. if(item.keywordsId==this.keywordIds){
  320. item.checked=true
  321. }else{
  322. item.checked=false
  323. }
  324. })
  325. this.semanticlist=data;
  326. this.getinit();
  327. })
  328. },
  329. //遮罩取消
  330. allcancel(){
  331. this.screeningshow1=false;
  332. this.screeningshow2=false;
  333. this.screeningshow3=false;
  334. this.screeningshow4=false;
  335. },
  336. //自定义时间确认
  337. totalTimeChange(e){
  338. this.Datesicing=e.startDate+'至'+e.endDate;
  339. this.starttime=e.startDate;
  340. this.endoftime=e.endDate;
  341. this.activetime=this.Inthemiddletime;
  342. this.totalTimeShow=false;
  343. this.tadelist=[]
  344. this.allcancel()
  345. this.Accesstolevel()
  346. },
  347. //时间选择
  348. activetimetab(index){
  349. if(index==5){
  350. this.Inthemiddletime=index;
  351. this.totalTimeShow=!this.totalTimeShow;
  352. }else{
  353. this.Datesicing='';
  354. this.activetime=index;
  355. this.tadelist=[]
  356. this.allcancel()
  357. this.Accesstolevel()
  358. }
  359. },
  360. //筛选弹框
  361. clickscreening(i){
  362. if(i==1){
  363. this.screeningshow1=!this.screeningshow1;
  364. this.screeningshow2=false;
  365. this.screeningshow3=false;
  366. this.screeningshow4=false;
  367. }else if(i==2){
  368. this.screeningshow2=!this.screeningshow2;
  369. this.screeningshow1=false;
  370. this.screeningshow3=false;
  371. this.screeningshow4=false;
  372. }else if(i==3){
  373. this.screeningshow3=!this.screeningshow3;
  374. this.screeningshow2=false;
  375. this.screeningshow1=false;
  376. this.screeningshow4=false;
  377. }else{
  378. this.screeningshow4=!this.screeningshow4;
  379. this.screeningshow2=false;
  380. this.screeningshow3=false;
  381. this.screeningshow1=false;
  382. }
  383. }
  384. }
  385. };
  386. </script>
  387. <style lang="scss" scoped>
  388. .timeactive111{
  389. color: #2671E2;
  390. }
  391. *{
  392. margin:0;
  393. padding:0;
  394. box-sizing:border-box;
  395. }
  396. .cenbox{
  397. width: 100%;
  398. height: 100%;
  399. background-color: #F8F8F8;
  400. display:flex;
  401. flex-direction:column;
  402. .screeningtop{
  403. width: 100%;
  404. height: 75rpx;
  405. background-color: #FFFFFF;
  406. border-bottom: 1px solid #E0E0E0;
  407. align-items: center;
  408. display: flex;
  409. align-items: center;
  410. position: relative;
  411. }
  412. .screeningview{
  413. flex: 1;
  414. height: 100%;
  415. display: flex;
  416. align-items: center;
  417. justify-content: center;
  418. border-right: 1px solid #E0E0E0;
  419. }
  420. .zhuti{
  421. flex:1;
  422. // soverflow:auto;
  423. }
  424. }
  425. .viewimg{
  426. width: 20rpx;
  427. height: 100%;
  428. line-height: 72rpx;
  429. margin-left: 10rpx;
  430. image{
  431. width: 20rpx;
  432. height: 12rpx;
  433. }
  434. }
  435. .cenforview{
  436. width: 100%;
  437. height: 275rpx;
  438. background: #FFFFFF;
  439. margin-top: 20rpx;
  440. .cenfortop{
  441. width: 100%;
  442. height: 146rpx;
  443. display: flex;
  444. // border-bottom: 1px solid #E0E0E0;
  445. .fortopzuo{
  446. width: 16%;
  447. padding-top: 30rpx;
  448. .topzuoimg{
  449. width: 60rpx;
  450. height: 60rpx;
  451. margin-left: 30rpx;
  452. border-radius: 50%;
  453. image{
  454. width: 100%;
  455. height: 100%;
  456. }
  457. }
  458. }
  459. .fortopyou{
  460. width: 84%;
  461. height: 146rpx;
  462. .topyouview1{
  463. width: 100%;
  464. margin-top: 28rpx;
  465. display: flex;
  466. .youview1-1{
  467. width: 25%;
  468. font-size: 28rpx;
  469. font-weight: 400;
  470. color: #333333;
  471. overflow: hidden;
  472. white-space:nowrap;
  473. text-overflow:ellipsis;
  474. }
  475. .youview1-2{
  476. width: 75%;
  477. font-size: 26rpx;
  478. font-weight: 400;
  479. color: #666666;
  480. }
  481. }
  482. .topyouview2{
  483. width: 100%;
  484. font-size: 28rpx;
  485. font-weight: 400;
  486. color: #333333;
  487. margin-top: 20rpx;
  488. }
  489. }
  490. }
  491. .cenforbottom{
  492. width: 100%;
  493. height: 128rpx;
  494. display: flex;
  495. align-items: center;
  496. .forbottomview{
  497. flex: 1;
  498. height: 128rpx;
  499. // border-right: 1px solid #E0E0E0;
  500. .bottomview1{
  501. width: 100%;
  502. height: 26rpx;
  503. font-size: 26rpx;
  504. font-weight: 400;
  505. color: #666666;
  506. line-height: 26rpx;
  507. text-align: center;
  508. margin-top: 24rpx;
  509. }
  510. .bottomview2{
  511. width: 100%;
  512. height: 30rpx;
  513. font-size: 30rpx;
  514. font-weight: 600;
  515. color: #333333;
  516. line-height: 30rpx;
  517. text-align: center;
  518. margin-top: 24rpx;
  519. }
  520. }
  521. }
  522. }
  523. .timepick{
  524. width: 100%;
  525. height: 210rpx;
  526. background: #FFFFFF;
  527. position: absolute;
  528. top: 74rpx;
  529. left: 0;
  530. z-index: 20;
  531. .tiempickbox{
  532. width: 94%;
  533. margin: 0 auto;
  534. height: 56rpx;
  535. display: flex;
  536. align-items: center;
  537. margin-top: 25rpx;
  538. }
  539. .tiempickbox>view:nth-of-type(1){
  540. width: 156rpx;
  541. height: 56rpx;
  542. border-radius: 4rpx;
  543. text-align: center;
  544. line-height: 56rpx;
  545. font-size: 28rpx;
  546. border: 1px solid #C9C9C9;
  547. }
  548. .tiempickbox>view:nth-of-type(2){
  549. width: 156rpx;
  550. height: 56rpx;
  551. border-radius: 4rpx;
  552. text-align: center;
  553. line-height: 56rpx;
  554. font-size: 28rpx;
  555. border: 1px solid #C9C9C9;
  556. margin-left: 28rpx;
  557. }
  558. .tiempickbox>view:nth-of-type(3){
  559. width: 156rpx;
  560. height: 56rpx;
  561. border-radius: 4rpx;
  562. text-align: center;
  563. line-height: 56rpx;
  564. font-size: 28rpx;
  565. border: 1px solid #C9C9C9;
  566. margin-left: 28rpx;
  567. }
  568. .tiempickbox>view:nth-of-type(4){
  569. width: 156rpx;
  570. height: 56rpx;
  571. border-radius: 4rpx;
  572. text-align: center;
  573. line-height: 56rpx;
  574. font-size: 28rpx;
  575. border: 1px solid #C9C9C9;
  576. margin-left: 28rpx;
  577. }
  578. .tiempickzidingyi{
  579. width: 94%;
  580. margin: 0 auto;
  581. margin-top: 28rpx;
  582. height: 60rpx;
  583. background: #FFFFFF;
  584. border-radius: 4rpx;
  585. border: 1px solid #C9C9C9;
  586. text-align: center;
  587. line-height: 60rpx;
  588. color: #666666;
  589. }
  590. }
  591. .call_zhezhao {
  592. position: fixed;
  593. width: 100%;
  594. height: 100%;
  595. top: 75rpx;
  596. left: 0rpx;
  597. opacity: 0.5;
  598. background-color: #666666;
  599. z-index: 10;
  600. }
  601. .timeactive{
  602. color: #FFFFFF;
  603. background-color: #2671E2;
  604. }
  605. .userinput{
  606. width: 100%;
  607. height: 126rpx;
  608. background: #FFFFFF;
  609. position: absolute;
  610. top: 74rpx;
  611. left: 0;
  612. z-index: 20;
  613. .inputdlex{
  614. width: 90%;
  615. margin: 0 auto;
  616. height: 56rpx;
  617. display: flex;
  618. align-items: center;
  619. margin-top: 30rpx;
  620. .flexzuo{
  621. width: 80%;
  622. .flexinput{
  623. width: 96%;
  624. height: 100%;
  625. border-radius: 20rpx;
  626. border: 1px solid #C9C9C9;
  627. padding-left: 20rpx;
  628. font-size: 24rpx;
  629. }
  630. }
  631. .flexyou{
  632. width: 20%;
  633. font-size: 28rpx;
  634. color: #2671E2;
  635. text-indent: 28rpx;
  636. }
  637. }
  638. }
  639. .yuyipick{
  640. width: 100%;
  641. min-height: 300rpx;
  642. max-height: 500rpx;
  643. background: #FFFFFF;
  644. overflow-y: auto;
  645. // padding-bottom: 20rpx;
  646. position: absolute;
  647. top: 74rpx;
  648. left: 0;
  649. z-index: 20;
  650. .inputdlex{
  651. width: 90%;
  652. margin: 0 auto;
  653. display: flex;
  654. flex-wrap: wrap;
  655. margin-top: 30rpx;
  656. }
  657. .inputdlex view{
  658. width: 50%;
  659. font-size: 26rpx;
  660. font-weight: 400;
  661. text-align: center;
  662. margin-top: 26rpx;
  663. }
  664. }
  665. .screen-foot{
  666. width: 100%;
  667. height: 88rpx;
  668. display: flex;
  669. margin-top: 20rpx;
  670. border-top: 1px solid #E0E0E0;
  671. .screen-foot-reset{
  672. width: 50%;
  673. text-align: center;
  674. height: 88rpx;
  675. line-height: 88rpx;
  676. font-size: 30rpx;
  677. font-weight: 400;
  678. color: #666666;
  679. }
  680. .screen-foot-sure{
  681. width: 50%;
  682. text-align: center;
  683. line-height: 88rpx;
  684. height: 88rpx;
  685. font-size: 30rpx;
  686. font-weight: 400;
  687. color: #FFFFFF;
  688. background: #2671E2;
  689. }
  690. }
  691. </style>