AI销管
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

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