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.
 
 
 

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