Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.
 
 
 

722 рядки
17 KiB

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