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.
 
 
 

734 lines
19 KiB

  1. <template>
  2. <view class="box">
  3. <!-- 搜索框点击跳转 -->
  4. <view>
  5. <view class="search-box">
  6. <view class="search" @click="goSearch">
  7. <view class="search-img">
  8. <image class="search-img1" src="../../../static/images/search.png" mode=""></image>
  9. </view>
  10. <view class="search-text">输入客户姓名/手机号</view>
  11. </view>
  12. </view>
  13. </view>
  14. <!-- 选择器 -->
  15. <!-- <view class="boxtittab">
  16. <view class="tabbox">
  17. <view :class="{ activecllasscet: activeTotal == 0 }" @click="tabtimetap(0)">今日</view>
  18. </view>
  19. <view class="tabbox">
  20. <view :class="{ activecllasscet: activeTotal == 1 }" @click="tabtimetap(1)">昨日</view>
  21. </view>
  22. <view class="tabbox">
  23. <view :class="{ activecllasscet: activeTotal == 2 }" @click="tabtimetap(2)">近一周</view>
  24. </view>
  25. <view class="tabbox">
  26. <view :class="{ activecllasscet: activeTotal == 3 }" @click="tabtimetap(3)">自定义</view>
  27. </view>
  28. </view> -->
  29. <!-- 选择器 -->
  30. <view class="boxtittab">
  31. <view class="tabbox" @click="taptimeisshow">
  32. 接待时间<u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon>
  33. </view>
  34. <view class="tabbox" @click="taptimetuisshow">
  35. 接待时长<u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon>
  36. </view>
  37. <view class="tabbox" @click="tapsoltishow">
  38. 排序<u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon>
  39. </view>
  40. <view class="tabbox" @click="screenshow">
  41. 更多筛选<u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon>
  42. </view>
  43. </view>
  44. <view class="content">
  45. <view v-if="recordList.length==0" style="width: 100%;height: 100%;display: flex;align-items: center;background: #FFFFFF;">
  46. <view style="width: 100%;padding-top: 200rpx;">
  47. <view style="width: 100%;text-align: center;">
  48. <image style="width: 220rpx;height: 200rpx;" src="https://static.quhouse.com/zhikong_xcx_img/nodatalist.png" mode=""></image>
  49. </view>
  50. <view style="text-align: center;width: 100%;margin-top: 20rpx;color: #999999;">暂无数据</view>
  51. </view>
  52. </view>
  53. <view v-if="recordList.length!=0" class="content-tips" v-for="(item,index) in recordList" :key='index' @click="tapThevisiting(item)">
  54. <view class="content-first">
  55. <view class="left">
  56. <!-- <view class="img">{{item.agentName.slice(0,1)}}</view> -->
  57. <view class="name">{{item.agentName}}</view>
  58. <view class="status" v-if="item.replaceReception==1">代接待</view>
  59. </view>
  60. <view class="right" v-if="item.recording!=0">
  61. <view v-if="item.taboo==1">违禁接待 |</view>
  62. <!-- <view class="point"></view> -->
  63. <view v-if="item.markAdvisor==0" class="">未标记</view>
  64. <view v-if="item.markAdvisor==1" class="">已标记</view>
  65. </view>
  66. <view class="right" v-else>
  67. <view class="">无录音</view>
  68. </view>
  69. </view>
  70. <view class="content-sec">
  71. <view class="left">
  72. <view class="cus">客户:{{item.name || '--'}} |</view>
  73. <view class="arriveNum">{{item.visitRecord || "--"}}次到访</view>
  74. </view>
  75. <view class="right">
  76. <!-- {{item.fraction || '0'}}% | {{item.fraction || '0'}}分 -->
  77. {{item.fraction || '0'}}%
  78. </view>
  79. </view>
  80. <view class="content-last">
  81. {{item.createTime}} | {{item.mm || '0'}} min
  82. </view>
  83. </view>
  84. </view>
  85. <u-popup v-model="screenShow" mode="top" height="590">
  86. <view class="screen">
  87. <!-- 顾问选择 -->
  88. <view class="screen-counselor">
  89. <view class="screen-text">
  90. 所属顾问
  91. </view>
  92. <view class="screen-sel">
  93. <u-input v-model="screen.counselorName" type="text" placeholder='请选择' @click="selectshow = true" class="screen-inp" disabled />
  94. <image class="screen-sel-img" src="../../../static/images/right.png" mode=""></image>
  95. </view>
  96. </view>
  97. <!-- 录音标示 -->
  98. <!-- <view class="screen-record">
  99. <view class="screen-record-text">录音标识</view>
  100. <view class="screen-record-tab">
  101. <view :class="[screen.record==0?'screen-record-chose':'screen-record-nochose']" @click="screen.record=0">
  102. 有效录音
  103. </view>
  104. <view :class="[screen.record==1?'screen-record-chose':'screen-record-nochose']" @click="screen.record=1">
  105. 无效录音
  106. </view>
  107. </view>
  108. </view> -->
  109. <view class="screen-record">
  110. <view class="screen-record-text">
  111. 标记顾问
  112. </view>
  113. <view class="screen-record-tab">
  114. <view :class="[screen.markAdvisor==1?'screen-record-chose':'screen-record-nochose']" @click="screenvisitRecord(1)">
  115. 标记
  116. </view>
  117. <view :class="[screen.markAdvisor==0?'screen-record-chose':'screen-record-nochose']" @click="screenvisitRecord(0)">
  118. 未标记
  119. </view>
  120. </view>
  121. </view>
  122. <view class="screen-record">
  123. <view class="screen-record-text">
  124. 到访次数
  125. </view>
  126. <view class="screen-record-tab">
  127. <view :class="[screen.visitRecord==1?'screen-record-chose':'screen-record-nochose']" @click="recordclick(1)">
  128. 首次到访
  129. </view>
  130. <view :class="[screen.visitRecord==2?'screen-record-chose':'screen-record-nochose']" @click="recordclick(2)">
  131. 第二次
  132. </view>
  133. <view :class="[screen.visitRecord==3?'screen-record-chose':'screen-record-nochose']" @click="recordclick(3)">
  134. 第三次
  135. </view>
  136. <view :class="[screen.visitRecord==4?'screen-record-chose':'screen-record-nochose']" @click="recordclick(4)">
  137. 三次以上
  138. </view>
  139. </view>
  140. </view>
  141. <view class="screen-foot">
  142. <view class="screen-foot-reset" @click="reset">
  143. 重置
  144. </view>
  145. <view class="screen-foot-sure" @click="screensure">
  146. 确定
  147. </view>
  148. </view>
  149. </view>
  150. </u-popup>
  151. <!-- 选择顾问的选择框 -->
  152. <u-select v-model="selectshow" :list="freeList" @confirm="actionSelectCallback"></u-select>
  153. <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
  154. <u-popup v-model="timeshow" mode="bottom">
  155. <view class="timeview" :style="{ color: activeTotal == 5 ? '#2B6EFF' : '#e0e0e0' }" @click="tabtimetap(5)">全部</view>
  156. <view class="timeview" :style="{ color: activeTotal == 0 ? '#2B6EFF' : '#e0e0e0' }" @click="tabtimetap(0)">今天</view>
  157. <view class="timeview" :style="{ color: activeTotal == 1 ? '#2B6EFF' : '#e0e0e0' }" @click="tabtimetap(1)">昨天</view>
  158. <view class="timeview" :style="{ color: activeTotal == 2 ? '#2B6EFF' : '#e0e0e0' }" @click="tabtimetap(2)">近7天</view>
  159. <view class="timeview" :style="{ color: activeTotal == 3 ? '#2B6EFF' : '#e0e0e0' }" @click="tabtimetap(3)">近30天</view>
  160. <view class="timeview" :style="{ color: activeTotal == 4 ? '#2B6EFF' : '#e0e0e0' }" @click="tabtimetap(4)">自定义</view>
  161. </u-popup>
  162. <u-popup v-model="timetushow" mode="bottom">
  163. <view class="timeview" :style="{ color: activeTotal2 == 0 ? '#2B6EFF' : '#e0e0e0' }" @click="timetap(0)">全部</view>
  164. <view class="timeview" :style="{ color: activeTotal2 == 1 ? '#2B6EFF' : '#e0e0e0' }" @click="timetap(1)">0~15min</view>
  165. <view class="timeview" :style="{ color: activeTotal2 == 2 ? '#2B6EFF' : '#e0e0e0' }" @click="timetap(2)">15~30min</view>
  166. <view class="timeview" :style="{ color: activeTotal2 == 3 ? '#2B6EFF' : '#e0e0e0' }" @click="timetap(3)">30~60min</view>
  167. <view class="timeview" :style="{ color: activeTotal2 == 4 ? '#2B6EFF' : '#e0e0e0' }" @click="timetap(4)">60~90min</view>
  168. <view class="timeview" :style="{ color: activeTotal2 == 5 ? '#2B6EFF' : '#e0e0e0' }" @click="timetap(5)">90min以上</view>
  169. </u-popup>
  170. <u-select v-model="soltishow" :list="orderBylist" @confirm="selectCallback2"></u-select>
  171. </view>
  172. </template>
  173. <script>
  174. export default{
  175. data(){
  176. return{
  177. orderBylist:[
  178. {label:'全部',value:'0'},
  179. {label:'创建时间倒序',value:'1'},
  180. {label:'创建时间正序',value:'2'},
  181. {label:'接待时间倒序',value:'3'},
  182. {label:'接待时间正序',value:'4'},
  183. {label:'执行率正序',value:'5'},
  184. {label:'执行率倒序',value:'6'},
  185. {label:'接访次数剩正序',value:'7'},
  186. {label:'接访次数倒序',value:'8'},
  187. ],
  188. activeTotal: 5,
  189. value:'',
  190. screenShow:false,
  191. selectshow:false,
  192. totalTimeShow: false,
  193. screen:{
  194. agentId:'',//顾问id
  195. record:'0',
  196. markAdvisor:null,
  197. visitRecord:null
  198. },
  199. freeList:[],//顾问
  200. recordList:[],
  201. buildingID:'',
  202. nextPage:1,
  203. totalRecord:"",
  204. staTime:'',
  205. endtime:'',
  206. isnorefresh:'',
  207. activeTotal2:0,
  208. timeshow:false,
  209. timetushow:false,
  210. soltishow:false,
  211. orderBy:''
  212. }
  213. },
  214. onLoad(options) {
  215. this.isnorefresh=options.refresh;
  216. if(options.activeTotal){
  217. this.activeTotal=options.activeTotal
  218. }
  219. if(options.markAdvisor){
  220. this.screen.markAdvisor=options.markAdvisor
  221. }
  222. },
  223. onShow() {
  224. if(this.isnorefresh=='refresh'){
  225. this.buildingID = uni.getStorageSync('buildingID').id;
  226. this.recordList=[];
  227. this.nextPage=1;
  228. this.getMyCustom()
  229. this.getFreeList();
  230. this.isnorefresh='';
  231. }
  232. },
  233. onReachBottom() {
  234. if(this.totalRecord==this.nextPage){
  235. uni.showToast({
  236. icon:'none',
  237. title: '到底了',
  238. duration: 2000
  239. });
  240. return
  241. }else{
  242. this.nextPage+=1;
  243. this.getMyCustom();
  244. }
  245. },
  246. methods:{
  247. tapsoltishow(){
  248. this.soltishow=true;
  249. },
  250. taptimetuisshow(){
  251. this.timetushow=true;
  252. },
  253. taptimeisshow(){
  254. this.timeshow=true;
  255. },
  256. //选择标签
  257. selectCallback2(e){
  258. this.orderBy=e[0].value;
  259. this.nextPage=1;
  260. this.recordList=[];
  261. this.getMyCustom();
  262. },
  263. //选择录音时长
  264. timetap(index){
  265. this.timetushow=false;
  266. this.activeTotal2=index;
  267. this.nextPage=1;
  268. this.recordList=[];
  269. this.getMyCustom();
  270. },
  271. //时间选择
  272. tabtimetap(index){
  273. this.timeshow=false;
  274. if (index == 4) {
  275. this.totalTimeShow = true;
  276. } else {
  277. this.activeTotal = index;
  278. this.staTime='';
  279. this.endtime='';
  280. this.nextPage=1;
  281. this.recordList=[];
  282. this.getMyCustom();
  283. }
  284. },
  285. //自定义时间
  286. totalTimeChange(e) {
  287. this.staTime=e.startDate;
  288. this.endtime=e.endDate;
  289. this.activeTotal=4;
  290. this.nextPage=1;
  291. this.recordList=[];
  292. this.getMyCustom();
  293. },
  294. tapThevisiting(item) {
  295. if(item.status==0){
  296. uni.showToast({
  297. icon: "none",
  298. title: "排队中"
  299. })
  300. return
  301. }else{
  302. const parames = {
  303. pageNum: 1,
  304. pageSize: 100,
  305. query: {
  306. customerId: item.id,
  307. }
  308. }
  309. var item={
  310. bg:0,
  311. customerId:item.id,
  312. }
  313. uni.setStorageSync("searchobj", item); //写入缓存
  314. this.$u.post("/corpus/findByPage", parames).then(res => {
  315. if(res==null){
  316. uni.showToast({
  317. icon: "none",
  318. title: "暂无音频"
  319. })
  320. return
  321. }else{
  322. let newobj = res[0];
  323. if(res[0].merge==0){
  324. uni.navigateTo({
  325. url: `/pages/mine/details2?customerId=${newobj.customerId}&status=${newobj.status}&stateisshow=${"2"}`
  326. })
  327. }else{
  328. uni.navigateTo({
  329. url: `/pages/mine/details?customerId=${newobj.customerId}&status=${newobj.status}&stateisshow=${"1"}`
  330. })
  331. }
  332. }
  333. })
  334. }
  335. },
  336. getMyCustom(){
  337. let dateType=0;
  338. let recDurationInterval=0;
  339. let orderBy=0;
  340. if(this.activeTotal==5){
  341. dateType=null;
  342. }else if(this.activeTotal==4){
  343. dateType=null;
  344. }else{
  345. dateType=this.activeTotal;
  346. }
  347. if(this.activeTotal2==0){
  348. recDurationInterval=null
  349. }else{
  350. recDurationInterval=this.activeTotal2
  351. }
  352. if(this.orderBy==0){
  353. orderBy=null;
  354. }else{
  355. orderBy=this.orderBy;
  356. }
  357. var parames = {
  358. pageNum: this.nextPage,
  359. pageSize: 10,
  360. query: {
  361. projectId:this.buildingID,
  362. time:1,
  363. staTime:this.staTime,
  364. endtime:this.endtime,
  365. visitRecord:this.screen.visitRecord,
  366. markAdvisor:this.screen.markAdvisor,
  367. dateType:dateType,
  368. recDurationInterval:recDurationInterval,
  369. orderBy:orderBy
  370. }
  371. };
  372. if(this.screen.agentId){
  373. parames.query.agentId = this.screen.agentId
  374. }
  375. this.$u.post("/customer/findbypage", parames).then(data => {
  376. var list = data.results || [];
  377. this.recordList = [...this.recordList, ...list];
  378. this.totalRecord=data.totalPage;
  379. })
  380. },
  381. //获取顾问列表
  382. getFreeList() {
  383. this.$u.get("/zkAgentPool/freeList?itemId="+this.buildingID).then(res => {
  384. this.freeList = res;
  385. this.freeList.forEach(item=>{
  386. item.label=item.name;
  387. item.value=item.agentId
  388. })
  389. })
  390. },
  391. // 筛选
  392. screenshow(){
  393. this.screenShow=true
  394. },
  395. actionSelectCallback(e){
  396. this.screen.agentId=e[0].value;
  397. this.screenShow=false;
  398. this.recordList=[];
  399. this.nextPage=1;
  400. this.getMyCustom();
  401. },
  402. reset(){
  403. this.screen={
  404. counselorName:'',
  405. record:'0',
  406. markAdvisor:null,
  407. visitRecord:null
  408. }
  409. this.screenShow=false;
  410. this.nextPage=1;
  411. this.recordList=[];
  412. this.getMyCustom();
  413. },
  414. recordclick(i){
  415. if(this.screen.visitRecord==i){
  416. this.screen.visitRecord=null
  417. }else{
  418. this.screen.visitRecord=i
  419. }
  420. },
  421. screenvisitRecord(i){
  422. if(this.screen.markAdvisor==i){
  423. this.screen.markAdvisor=null
  424. }else{
  425. this.screen.markAdvisor=i
  426. }
  427. },
  428. screensure(){
  429. this.screenShow=false;
  430. this.recordList=[];
  431. this.nextPage=1;
  432. this.getMyCustom();
  433. },
  434. goSearch(){
  435. uni.navigateTo({
  436. url: '/pages/center/records/recordSearch'
  437. });
  438. },
  439. },
  440. }
  441. </script>
  442. <style lang="scss" scoped>
  443. .box {
  444. width: 100%;
  445. height: 100%;
  446. background: #F8F8F8;
  447. }
  448. .timeview{
  449. height: 80rpx;
  450. line-height: 80rpx;
  451. width: 100%;
  452. text-align: center;
  453. border-bottom: 1px solid #F8F8F8;
  454. }
  455. //时间切换的样式
  456. .boxtittab {
  457. width: 100;
  458. height: 92rpx;
  459. background: #FFFFFF;
  460. border: 1px solid #E0E0E0;
  461. display: flex;
  462. align-items: center;
  463. .tabbox {
  464. flex: 1;
  465. height: 100%;
  466. text-align: center;
  467. line-height: 92rpx;
  468. color: #666666;
  469. font-size: 28rpx;
  470. }
  471. }
  472. .search-box{
  473. width: 100%;
  474. height: 102rpx;
  475. background: #FFFFFF;
  476. display: flex;
  477. align-items: center;
  478. justify-content: center;
  479. .search{
  480. width: 94%;
  481. height: 70rpx;
  482. display: flex;
  483. align-items: center;
  484. background: #F8F8F8;
  485. border-radius: 33rpx;
  486. .search-img{
  487. width: 26rpx;
  488. height: 30rpx;
  489. margin-left: 20rpx;
  490. .search-img1{
  491. width: 100%;
  492. height: 100%;
  493. margin-top: 2rpx;
  494. }
  495. }
  496. .search-text{
  497. font-size: 28rpx;
  498. font-weight: 400;
  499. color: #999999;
  500. margin-left:10rpx;
  501. }
  502. }
  503. .search-screen{
  504. width: 40rpx;
  505. height: 40rpx;
  506. margin-left: 30rpx;
  507. .search-screen1{
  508. width: 100%;
  509. height: 100%;
  510. }
  511. }
  512. }
  513. .content{
  514. .content-tips{
  515. background: #fff;
  516. padding: 0 20rpx;
  517. box-sizing: border-box;
  518. overflow: hidden;
  519. margin-top: 20rpx;
  520. .content-first{
  521. margin-top: 19rpx;
  522. display: flex;
  523. justify-content: space-between;
  524. .left{
  525. display: flex;
  526. .img{
  527. width: 52rpx;
  528. height: 52rpx;
  529. background: #FFFFFF;
  530. border: 1px solid #C9C9C9;
  531. border-radius: 50%;
  532. text-align: center;
  533. line-height: 52rpx;
  534. }
  535. .name{
  536. font-weight: 600;
  537. color: #333333;
  538. // margin-left: 20rpx;
  539. margin-top: 11rpx;
  540. }
  541. .status{
  542. width: 110rpx;
  543. height: 42rpx;
  544. background: #FFF9F5;
  545. border-radius: 4rpx;
  546. font-size: 26rpx;
  547. font-weight: 400;
  548. color: #EC8D49;
  549. line-height: 42rpx;
  550. text-align: center;
  551. margin-left: 19rpx;
  552. margin-top: 11rpx;
  553. }
  554. }
  555. .right{
  556. display: flex;
  557. margin-top: 11rpx;
  558. .point{
  559. width: 12rpx;
  560. height: 12rpx;
  561. background: #2B6EFF;
  562. border-radius: 50%;
  563. margin-right: 9rpx;
  564. margin-top: 16rpx;
  565. }
  566. }
  567. }
  568. .content-sec{
  569. display: flex;
  570. justify-content: space-between;
  571. margin-top: 19rpx;
  572. .left{
  573. display: flex;
  574. .cus{
  575. font-size: 30rpx;
  576. font-weight: 400;
  577. color: #666666;
  578. // line-height: 30rpx;
  579. }
  580. .arriveNum{
  581. font-size: 30rpx;
  582. font-weight: 400;
  583. // line-height: 30rpx;
  584. margin-left: 10rpx;
  585. }
  586. }
  587. .right{
  588. width: 120rpx;
  589. height: 46rpx;
  590. background: #F4F8FD;
  591. border-radius: 6rpx;
  592. text-align: center;
  593. line-height: 46rpx;
  594. font-weight: 400;
  595. color: #2671E2;
  596. }
  597. }
  598. .content-last{
  599. // margin: 30rpx 0;
  600. font-size: 30rpx;
  601. font-weight: 400;
  602. color: #666666;
  603. line-height: 30rpx;
  604. margin-top: 22rpx;
  605. margin-bottom: 30rpx;
  606. }
  607. }
  608. }
  609. // 这是弹出层
  610. .screen{
  611. // box-sizing: border-box;
  612. // padding: 0 30rpx;
  613. position:absolute;
  614. .screen-counselor{
  615. display: flex;
  616. height: 106rpx;
  617. // padding: 40rpx 30rpx 36rpx 30rpx;
  618. padding: 0 30rpx;
  619. box-sizing: border-box;
  620. border-bottom: 1px solid #EEEEEE;
  621. .screen-text{
  622. margin: 40rpx 0 36rpx 0;
  623. font-size: 30rpx;
  624. font-weight: 400;
  625. color: #333333;
  626. line-height: 30rpx;
  627. }
  628. .screen-sel{
  629. display: flex;
  630. justify-content: space-between;
  631. width: 500rpx;
  632. margin-left: 60rpx;
  633. .screen-sel-img{
  634. margin: 40rpx 0 36rpx 0;
  635. width: 14rpx;
  636. height: 30rpx;
  637. }
  638. .screen-inp{
  639. margin-top: 20rpx;
  640. }
  641. }
  642. }
  643. .screen-record{
  644. height: 192rpx;
  645. // width: 100%;
  646. overflow: hidden;
  647. padding: 0 30rpx;
  648. box-sizing: border-box;
  649. border-bottom: 1px solid #EEEEEE;
  650. .screen-record-text{
  651. margin-top: 36rpx;
  652. font-size: 30rpx;
  653. font-weight: 400;
  654. color: #333333;
  655. line-height: 30rpx;
  656. }
  657. .screen-record-tab{
  658. margin-top: 30rpx;
  659. display: flex;
  660. // justify-content: space-around;
  661. .screen-record-chose{
  662. width: 156rpx;
  663. height: 60rpx;
  664. background: #2671E2;
  665. border-radius: 4rpx;
  666. border: 1px solid #2671E2;
  667. text-align: center;
  668. line-height: 60rpx;
  669. margin-right: 22rpx;
  670. color: #FFFFFF;
  671. }
  672. .screen-record-nochose{
  673. width: 156rpx;
  674. height: 60rpx;
  675. background: #FFFFFF;
  676. border-radius: 4rpx;
  677. border: 1px solid #C9C9C9;
  678. text-align: center;
  679. line-height: 60rpx;
  680. margin-right: 22rpx;
  681. }
  682. }
  683. }
  684. .screen-foot{
  685. width: 100%;
  686. height: 100rpx;
  687. display: flex;
  688. .screen-foot-reset{
  689. width: 50%;
  690. text-align: center;
  691. height: 100rpx;
  692. line-height: 100rpx;
  693. font-size: 30rpx;
  694. font-weight: 400;
  695. color: #666666;
  696. }
  697. .screen-foot-sure{
  698. width: 50%;
  699. text-align: center;
  700. line-height: 100rpx;
  701. height: 100rpx;
  702. font-size: 30rpx;
  703. font-weight: 400;
  704. color: #FFFFFF;
  705. background: #2671E2;
  706. }
  707. }
  708. }
  709. </style>