Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.
 
 
 

552 řádky
13 KiB

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