Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
 
 
 

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