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.
 
 
 

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