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.
 
 
 

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