No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.
 
 
 

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