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.
 
 
 

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