您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
 
 
 

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