選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。
 
 
 

610 行
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;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.length==0">暂无</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.recordList=[]
  184. this.getMyCustom()
  185. this.getFreeList()
  186. this.getfindKeywordsList()
  187. },
  188. onReachBottom() {
  189. if(this.totalRecord==this.nextPage){
  190. uni.showToast({
  191. icon:'none',
  192. title: '到底了',
  193. duration: 2000
  194. });
  195. return
  196. }else{
  197. this.nextPage+=1;
  198. this.getMyCustom();
  199. }
  200. },
  201. methods:{
  202. recordclick(i){
  203. if(this.screen.record==i){
  204. this.screen.record=null
  205. }else{
  206. this.screen.record=i
  207. }
  208. },
  209. screenvisitRecord(i){
  210. if(this.screen.visitRecord==i){
  211. this.screen.visitRecord=''
  212. }else{
  213. this.screen.visitRecord=i
  214. }
  215. },
  216. // 客户详情
  217. gotoDetail(id) {
  218. uni.navigateTo({
  219. url: `/pages/center/consumer/consumerDetail?id=${id}`
  220. })
  221. },
  222. getMyCustom(){
  223. var parames = {
  224. pageNum: this.nextPage,
  225. pageSize: 10,
  226. query: {
  227. projectId:this.buildingID,
  228. keywordsId:this.screen.cunsumerTipsid,
  229. agentId:this.screen.agentId
  230. }
  231. };
  232. if (this.screen.visitRecord > 0) {
  233. parames.query.visitRecord = this.screen.visitRecord;
  234. }
  235. if(this.screen.record==0){
  236. parames.query.levels= ["1"]
  237. }else if(this.screen.record==1){
  238. parames.query.levels= ["2"]
  239. }else if(this.screen.record==2){
  240. parames.query.levels= ["3"]
  241. }else if(this.screen.record==3){
  242. parames.query.levels= ["4"]
  243. }else{
  244. parames.query.levels=''
  245. }
  246. this.userInfo = uni.getStorageSync('weapp_session_userInfo_data');
  247. this.$u.post("/customer/customerManagement", parames).then(data => {
  248. var list = data.results || [];
  249. list.forEach(item=>{
  250. if(this.userInfo.dataCode == 6){
  251. item.isshow=true;
  252. }else{
  253. item.isshow=false;
  254. }
  255. })
  256. this.recordList = [...this.recordList, ...list];
  257. this.totalRecord=data.totalPage;
  258. })
  259. },
  260. //获取顾问列表
  261. getFreeList() {
  262. this.freeList=[]
  263. this.$u.get("/zkAgentPool/freeList?itemId="+this.buildingID).then(res => {
  264. this.freeList = res;
  265. this.freeList.forEach(item=>{
  266. item.label=item.name;
  267. item.value=item.agentId
  268. })
  269. })
  270. },
  271. //获取客户标签
  272. getfindKeywordsList() {
  273. this.findKeywordsList=[]
  274. this.$u.post("/customer/findKeywords",{houseId:this.buildingID}).then(res => {
  275. res.forEach(item=>{
  276. if(item.isInterval==0){
  277. item.label=item.name+item.unit+'-'+item.endName+item.unit;
  278. }else{
  279. item.label=item.name
  280. }
  281. item.value=item.id;
  282. })
  283. this.findKeywordsList = res;
  284. })
  285. },
  286. // 筛选
  287. screenshow(){
  288. this.screenShow=true
  289. },
  290. //选择顾问
  291. actionSelectCallback(e){
  292. this.screen.agentId=e[0].value;
  293. this.screen.agentIdtext=e[0].label;
  294. },
  295. //选择标签
  296. selectCallback(e){
  297. this.screen.cunsumerTips=e[0].label;
  298. this.screen.cunsumerTipsid=e[0].value;
  299. },
  300. //重置
  301. reset(){
  302. this.screen={
  303. agentId:'',
  304. agentIdtext:'',
  305. visitRecord:'',
  306. record:null,
  307. cunsumerTips:'',
  308. cunsumerTipsid:''
  309. }
  310. this.nextPage=1;
  311. this.recordList=[];
  312. this.screenShow=false;
  313. this.getMyCustom();
  314. },
  315. //筛选确认
  316. screensure(){
  317. this.nextPage=1;
  318. this.recordList=[];
  319. this.screenShow=false;
  320. this.getMyCustom();
  321. },
  322. goSearch(){
  323. uni.navigateTo({
  324. url: '/pages/center/consumer/consumerSearch'
  325. });
  326. },
  327. gotoFollowUp(id) {
  328. uni.navigateTo({
  329. url: `/pages/center/consumer/newFollowup/newFollowup?id=${id}`
  330. })
  331. },
  332. }
  333. }
  334. </script>
  335. <style lang="scss" scoped>
  336. .box {
  337. width: 100%;
  338. height: 100%;
  339. background: #F8F8F8;
  340. }
  341. .search-box{
  342. width: 100%;
  343. height: 102rpx;
  344. background: #FFFFFF;
  345. display: flex;
  346. align-items: center;
  347. justify-content: center;
  348. .search{
  349. width: 620rpx;
  350. height: 70rpx;
  351. display: flex;
  352. align-items: center;
  353. background: #F8F8F8;
  354. border-radius: 33rpx;
  355. .search-img{
  356. width: 26rpx;
  357. height: 30rpx;
  358. margin-left: 20rpx;
  359. .search-img1{
  360. width: 100%;
  361. height: 100%;
  362. margin-top: 2rpx;
  363. }
  364. }
  365. .search-text{
  366. font-size: 28rpx;
  367. font-weight: 400;
  368. color: #999999;
  369. margin-left:10rpx;
  370. }
  371. }
  372. .search-screen{
  373. width: 40rpx;
  374. height: 40rpx;
  375. margin-left: 30rpx;
  376. .search-screen1{
  377. width: 100%;
  378. height: 100%;
  379. }
  380. }
  381. }
  382. .content{
  383. // height: 1000rpx;/
  384. overflow: hidden;
  385. border-top: 1px solid #E0E0E0;
  386. .content-tips{
  387. background: #fff;
  388. // box-sizing: border-box;
  389. margin-bottom: 20rpx;
  390. overflow: hidden;
  391. .content-first{
  392. padding: 19rpx 30rpx;
  393. display: flex;
  394. justify-content: space-between;
  395. box-sizing: border-box;
  396. // border-top: 1px solid #E0E0E0;
  397. font-weight: 400;
  398. color: #292929;
  399. height: 90rpx;
  400. font-size: 30rpx;
  401. line-height: 30rpx;
  402. .left{
  403. display: flex;
  404. .img{
  405. // margin-top: 19rpx;
  406. width: 52rpx;
  407. height: 52rpx;
  408. border: 1px solid #E0E0E0;
  409. border-radius: 50%;
  410. text-align: center;
  411. line-height: 50rpx;
  412. margin-right: 20rpx;
  413. }
  414. .test{
  415. margin-top: 11rpx;
  416. // margin-left: 20rpx;
  417. font-weight: 500;
  418. color: #333333;
  419. }
  420. }
  421. .right{
  422. display: flex;
  423. .point{
  424. width: 12rpx;
  425. height: 12rpx;
  426. background: #2B6EFF;
  427. border-radius: 50%;
  428. margin-right: 9rpx;
  429. margin-top: 20rpx;
  430. }
  431. .test{
  432. margin-top: 11rpx;
  433. }
  434. }
  435. }
  436. .content-sec{
  437. border-top: 1px solid #E0E0E0;
  438. padding: 0 30rpx;
  439. padding-bottom: 30rpx;
  440. // height: 270rpx;
  441. position: relative;
  442. .content-sec-lab{
  443. margin-top: 30rpx;
  444. display: flex;
  445. font-size: 30rpx;
  446. font-weight: 400;
  447. color: #666666;
  448. line-height: 30rpx;
  449. .content-sec-lab1{
  450. color: #333333;
  451. }
  452. .content-sec-tips{
  453. max-width:174rpx ;
  454. height: 46rpx;
  455. background: #F2F2F2;
  456. border-radius: 6rpx;
  457. text-align: center;
  458. line-height: 26rpx;
  459. overflow: hidden;
  460. text-overflow:ellipsis;
  461. white-space: nowrap;
  462. font-size: 26rpx;
  463. font-weight: 400;
  464. color: #333333;
  465. margin-right: 24rpx;
  466. box-sizing: border-box;
  467. padding: 10rpx 24rpx;
  468. }
  469. }
  470. .content-sec-num{
  471. position: absolute;
  472. width: 200rpx;
  473. height: 90rpx;
  474. background: #F4F8FD;
  475. border-radius: 12rpx;
  476. font-weight: 400;
  477. color: #2671E2;
  478. line-height: 45rpx;
  479. bottom: 30rpx;
  480. right: 30rpx;
  481. text-align: center;
  482. }
  483. }
  484. .content-last{
  485. display: flex;
  486. border-top: 1px solid #E0E0E0;
  487. // padding: 0 30rpx;
  488. height: 78rpx;
  489. .content-last-tab{
  490. width: 33.4%;
  491. text-align: center;
  492. font-size: 30rpx;
  493. font-weight: 400;
  494. color: #333333;
  495. line-height: 78rpx;
  496. border-right: 1px solid #E0E0E0;
  497. }
  498. }
  499. }
  500. }
  501. // 这是弹出层
  502. .screen{
  503. // box-sizing: border-box;
  504. // padding: 0 30rpx;
  505. .screen-counselor{
  506. display: flex;
  507. height: 106rpx;
  508. // padding: 40rpx 30rpx 36rpx 30rpx;
  509. padding: 0 30rpx;
  510. box-sizing: border-box;
  511. border-bottom: 1px solid #E0E0E0;
  512. .screen-text{
  513. margin: 40rpx 0 36rpx 0;
  514. font-size: 30rpx;
  515. font-weight: 400;
  516. color: #333333;
  517. line-height: 30rpx;
  518. }
  519. .screen-sel{
  520. display: flex;
  521. justify-content: space-between;
  522. width: 500rpx;
  523. margin-left: 60rpx;
  524. .screen-sel-img{
  525. margin: 40rpx 0 36rpx 0;
  526. width: 14rpx;
  527. height: 30rpx;
  528. }
  529. .screen-inp{
  530. margin-top: 20rpx;
  531. }
  532. }
  533. }
  534. .screen-record{
  535. height: 192rpx;
  536. // width: 100%;
  537. overflow: hidden;
  538. padding: 0 30rpx;
  539. box-sizing: border-box;
  540. border-bottom: 1px solid #E0E0E0;
  541. .screen-record-text{
  542. margin-top: 36rpx;
  543. font-size: 30rpx;
  544. font-weight: 400;
  545. color: #333333;
  546. line-height: 30rpx;
  547. }
  548. .screen-record-tab{
  549. margin-top: 30rpx;
  550. display: flex;
  551. // justify-content: space-around;
  552. .screen-record-chose{
  553. width: 156rpx;
  554. height: 60rpx;
  555. background: #2671E2;
  556. border-radius: 4rpx;
  557. border: 1px solid #2671E2;
  558. text-align: center;
  559. line-height: 60rpx;
  560. margin-right: 22rpx;
  561. color: #FFFFFF;
  562. }
  563. .screen-record-nochose{
  564. width: 156rpx;
  565. height: 60rpx;
  566. background: #FFFFFF;
  567. border-radius: 4rpx;
  568. border: 1px solid #C9C9C9;
  569. text-align: center;
  570. line-height: 60rpx;
  571. margin-right: 22rpx;
  572. }
  573. }
  574. }
  575. .screen-foot{
  576. width: 100%;
  577. height: 88rpx;
  578. display: flex;
  579. .screen-foot-reset{
  580. width: 50%;
  581. text-align: center;
  582. height: 88rpx;
  583. line-height: 88rpx;
  584. font-size: 30rpx;
  585. font-weight: 400;
  586. color: #666666;
  587. }
  588. .screen-foot-sure{
  589. width: 50%;
  590. text-align: center;
  591. line-height: 88rpx;
  592. height: 88rpx;
  593. font-size: 30rpx;
  594. font-weight: 400;
  595. color: #FFFFFF;
  596. background: #2671E2;
  597. }
  598. }
  599. }
  600. </style>