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.
 
 
 

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