Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.
 
 
 

798 рядки
18 KiB

  1. <template>
  2. <view class="box">
  3. <view class="content">
  4. <view class="content-tips" @click="goedit()">
  5. <view class="content-first">
  6. <view class="left">
  7. <view class="img">{{customerInfo.name.slice(0,1) || '--'}}</view>
  8. <view class="test">{{customerInfo.name || '--'}}</view>
  9. <view class="edit">
  10. <image class="screen-sel-img" src="../../../static/images/edit.png" mode=""></image>
  11. </view>
  12. </view>
  13. <!-- <view class="right">
  14. <view class="point"></view>
  15. <view class="test">定金</view>
  16. </view> -->
  17. </view>
  18. <view class="content-sec">
  19. <view class="content-sec-lab">
  20. 手机号码:<view class="content-sec-lab1">{{customerInfo.phone || '--'}}</view>
  21. </view>
  22. <view class="content-sec-lab">
  23. 客户标签:
  24. <view class="content-sec-tips">投资</view>
  25. <view class="content-sec-tips">理财专用</view>
  26. <view class="content-sec-tips">学区</view>
  27. </view>
  28. <view class="content-sec-lab">
  29. 顾问姓名:<view class="content-sec-lab1">{{customerInfo.agentName}}</view>
  30. </view>
  31. <view class="content-sec-lab">
  32. 添加时间:<view class="content-sec-lab1">{{customerInfo.createTime}}</view>
  33. </view>
  34. <view class="content-sec-num">
  35. <view class="">{{customerInfo.visitRecord || '--'}}次到访</view>
  36. <view class="">{{customerInfo.fraction || '0'}}% | {{customerInfo.fraction || '0'}}分</view>
  37. </view>
  38. </view>
  39. <view class="content-last">
  40. <view class="content-last-con">
  41. 备注:{{customerInfo.demand.remarks ? customerInfo.demand.remarks : "暂无"}}
  42. </view>
  43. </view>
  44. </view>
  45. </view>
  46. <view class="tabchange">
  47. <view class="tab">
  48. <view class="tabbox">
  49. <view :class="{ activecllasscet: activeTotal == 0 }" @click="tabtimetap(0)">接待记录</view>
  50. </view>
  51. <view class="tabbox">
  52. <view :class="{ activecllasscet: activeTotal == 1 }" @click="tabtimetap(1)">跟进记录</view>
  53. </view>
  54. <view class="tabbox">
  55. <view :class="{ activecllasscet: activeTotal == 2 }" @click="tabtimetap(2)">执行率</view>
  56. </view>
  57. </view>
  58. <view class="tabactive1" v-if="activeTotal==0">
  59. <view class="content-tips" v-for="(item,index) in Thevisitingrecords" :key="index" @click="tapThevisiting(item)">
  60. <view class="content-first">
  61. <view class="left">
  62. <view class="img">{{item.agentName.slice(0,1) || '--'}}</view>
  63. <view class="name">{{item.agentName || '--'}}</view>
  64. <view class="status">代接待</view>
  65. </view>
  66. <!-- <view class="right">
  67. <view class="point"></view>
  68. <view class="">优秀案例</view>
  69. </view> -->
  70. </view>
  71. <view class="content-sec">
  72. <view class="left">
  73. <view class="cus">客户:{{item.name || ''}} |</view>
  74. <view class="arriveNum">{{item.visitRecord || '--'}}次到访</view>
  75. </view>
  76. <view class="right">{{item.fraction || '0'}}% | {{item.fraction || '0'}}分</view>
  77. </view>
  78. <view class="content-last">{{item.createTime}} | {{item.mm || '--'}}分钟</view>
  79. </view>
  80. </view>
  81. <view class="tabactive2" v-if="activeTotal==1">
  82. <view class="tab2-tips" v-for="(item,index) in fllowList" :key="index">
  83. <view class="tab2-first">
  84. <view class="tab2-first-1">
  85. <view class="tab2-first-left">
  86. <view class="img">{{item.agentName.slice(0,1) || '--'}}</view>
  87. <view class="name">{{item.agentName || '||'}}</view>
  88. </view>
  89. <view class="tab2-first-right">{{item.createTime}}</view>
  90. </view>
  91. <view class="tab2-first-foot">{{item.remarks || '--'}}</view>
  92. </view>
  93. <!-- <view class="tab2-sec">
  94. <view class="tab-sec-edit">编辑记录</view>
  95. </view> -->
  96. </view>
  97. </view>
  98. <!-- <view class="tabactive" v-if="activeTotal==2">执行率</view> -->
  99. <!-- 评分 -->
  100. <view v-if="activeTotal==2" class="tabactive rate-box" >
  101. <view class="title">总执行率 {{totalRate}}%</view>
  102. <view v-for="(item,index) in ratelist" :key="index" class="u-m-b-14">
  103. <view class="level1">
  104. <view class="level-name u-line-1">
  105. {{item.name}}
  106. </view>
  107. <view class="level-progress">
  108. <view class="color" :style="{width: item.ratepercent/item.rate*100+'%'}"></view>
  109. </view>
  110. <view class="level-rate">{{((item.ratepercent/item.rate).toFixed(2)*100).toFixed()}}%</view>
  111. <image v-if="!item.show" class="arrow rotatearrow" @click="changeshow(item,1)" src="/static/images/down.png"
  112. mode="" />
  113. <image v-else class="arrow" @click="changeshow(item,0)" src="/static/images/up.png" mode="" />
  114. </view>
  115. <view class="level1-subbox" v-if="item.show">
  116. <view class="sub-name" v-for="(subitem,i) in item.children" :key="i">
  117. <view class="subitem-name u-line-1" @tap="clickaudeopal(subitem)">{{subitem.name}}</view>
  118. <image class="checkimg" v-if="!subitem.selected" src="/static/images/rate-checked.png" mode="" />
  119. <image class="checkimg" v-else src="/static/images/rate-nocheck.png" mode="" />
  120. </view>
  121. </view>
  122. </view>
  123. </view>
  124. </view>
  125. <view class="pon-foot">
  126. <view class="foot-tab" @click="goRemind">添加提醒</view>
  127. <!-- <view class="foot-tab">拨打电话</view> -->
  128. <view class="foot-tab" @click="followRecordAdd()">写跟进</view>
  129. </view>
  130. </view>
  131. </template>
  132. <script>
  133. export default{
  134. data(){
  135. return{
  136. activeTotal: 0,
  137. customerId:'',
  138. customerInfo:{
  139. name:'',
  140. createTime:'',
  141. agentName:''
  142. },
  143. Thevisitingrecords:[],
  144. totalRate:[],
  145. ratelist:[],
  146. fllowList:[],
  147. }
  148. },
  149. onLoad(options) {
  150. this.customerId = options.id;
  151. },
  152. onShow() {
  153. this.getCustomerInfo()
  154. this.tabtimetap(0)
  155. },
  156. methods:{
  157. // 获取到访记录
  158. getVisitList() {
  159. this.$u.get("/customer/findByPhoneAndProject?id=" + this.customerId, ).then(res => {
  160. this.Thevisitingrecords = res
  161. })
  162. },
  163. // 获取客户信息
  164. getCustomerInfo() {
  165. const that = this;
  166. this.$u.get("/customer/findById", {
  167. id: this.customerId
  168. }).then(res => {
  169. this.customerInfo = res;
  170. })
  171. },
  172. tabtimetap(idx){
  173. this.activeTotal=idx
  174. if(idx==0){
  175. this.getVisitList()
  176. }else if(idx==1){
  177. this.getFollowList()
  178. }else{
  179. this.getRatelist()
  180. }
  181. },
  182. tapThevisiting(item) {
  183. if(item.yon!=0){
  184. uni.showToast({
  185. icon:'none',
  186. title: '暂无录音',
  187. duration: 2000
  188. });
  189. return
  190. }else{
  191. const parames = {
  192. pageNum: 1,
  193. pageSize: 100,
  194. query: {
  195. customerId: item.id,
  196. }
  197. }
  198. var item={
  199. bg:0,
  200. customerId:item.id,
  201. id:''
  202. }
  203. this.$u.post("/corpus/findByPage", parames).then(res => {
  204. if(res==null){
  205. uni.showToast({
  206. icon: "none",
  207. title: "暂无音频"
  208. })
  209. return
  210. }
  211. if(res[0].recordDuration>360){
  212. let newobj = res[0];
  213. uni.navigateTo({
  214. url: `/pages/mine/details2?customerId=${newobj.customerId}&status=${newobj.status}&itemobj=${JSON.stringify(item)}&stateisshow=${"2"}`
  215. })
  216. }else{
  217. let newobj = res[0];
  218. uni.navigateTo({
  219. url: `/pages/mine/details?customerId=${newobj.customerId}&status=${newobj.status}&itemobj=${JSON.stringify(item)}&stateisshow=${"1"}`
  220. })
  221. }
  222. })
  223. }
  224. },
  225. // 获取跟进记录
  226. getFollowList() {
  227. this.fllowList=[];
  228. this.$u.post("/customer/getCusStage", {
  229. customerId: this.customerId
  230. }).then(res => {
  231. this.fllowList = res;
  232. })
  233. },
  234. // 新增跟进
  235. followRecordAdd() {
  236. uni.navigateTo({
  237. url: `/pages/center/consumer/newFollowup/newFollowup?id=${this.customerId}`
  238. })
  239. },
  240. // 去编辑
  241. goedit(){
  242. // console.log('去编辑')
  243. uni.navigateTo({
  244. url:`/pages/center/consumer/edit?id=${this.customerId}`
  245. })
  246. },
  247. // 去添加提醒
  248. goRemind(){
  249. uni.navigateTo({
  250. url:'/pages/center/consumer/remind'
  251. })
  252. },
  253. //评分点击
  254. clickaudeopal(item){
  255. if(item.selected==0){
  256. uni.navigateTo({
  257. url: '/pages/mine/ScoringPlaylist?customerId='+this.customerId +"&id="+item.marketingId
  258. })
  259. }
  260. },
  261. changeshow(item, type) {
  262. if (type == 1) {
  263. item.show = true
  264. } else {
  265. item.show = false
  266. }
  267. },
  268. // 获取评分
  269. getRatelist() {
  270. this.$u.get("/customer/findzkMByCusId", {
  271. cusId: this.customerId
  272. }).then(res => {
  273. if (res.length) {
  274. let level1 = []
  275. let level2rate = 0
  276. res.forEach(item => {
  277. if (item.pid == 0) {
  278. level1.push({
  279. id: item.marketingId,
  280. rate: item.fraction,
  281. name: item.name,
  282. sort: item.sort,
  283. show: false,
  284. ratepercent: 0,
  285. children: []
  286. })
  287. } else {
  288. if (item.selected == 0) {
  289. level2rate += item.fraction
  290. }
  291. }
  292. })
  293. this.totalRate = level2rate
  294. res.forEach(subitem => {
  295. let subitempid = subitem.pid
  296. level1.forEach(item => {
  297. if (subitempid == item.id) {
  298. if (subitem.selected == 0) {
  299. item.ratepercent += subitem.fraction
  300. }
  301. item.children.push({
  302. id: subitem.id,
  303. rate: subitem.fraction,
  304. selected: subitem.selected,
  305. name: subitem.name,
  306. marketingId:subitem.marketingId
  307. })
  308. }
  309. })
  310. })
  311. level1[0].show = true;
  312. this.ratelist = level1
  313. }
  314. })
  315. },
  316. }
  317. }
  318. </script>
  319. <style lang="scss" scoped>
  320. .box {
  321. width: 100%;
  322. height: 100%;
  323. background: #F8F8F8;
  324. }
  325. // 评分
  326. .rate-box {
  327. padding: 10rpx 20rpx;
  328. background-color: #FFFFFF;
  329. .date {
  330. width: 300rpx;
  331. height: 33rpx;
  332. font-size: 24rpx;
  333. font-weight: 400;
  334. color: #333333;
  335. line-height: 33rpx;
  336. letter-spacing: 1rpx;
  337. margin-bottom: 8rpx;
  338. }
  339. .title {
  340. width: 100%;
  341. height: 42rpx;
  342. font-size: 30rpx;
  343. font-weight: 500;
  344. color: #333333;
  345. line-height: 42rpx;
  346. letter-spacing: 2rpx;
  347. margin-bottom: 20rpx;
  348. }
  349. .level1 {
  350. display: flex;
  351. align-items: center;
  352. .level-name {
  353. width: 104rpx;
  354. height: 33rpx;
  355. font-size: 24rpx;
  356. font-weight: 500;
  357. color: #333333;
  358. line-height: 33rpx;
  359. letter-spacing: 1rpx;
  360. margin-right: 10rpx;
  361. }
  362. .level-progress {
  363. flex: 1;
  364. border-radius: 11rpx;
  365. height: 21rpx;
  366. background-color: #BEE4FF;
  367. position: relative;
  368. .color {
  369. width: 0;
  370. position: absolute;
  371. top: 0;
  372. left: 0;
  373. height: 21rpx;
  374. border-radius: 11rpx 0 0 11rpx;
  375. background-color: #008EF2;
  376. }
  377. }
  378. .level-rate {
  379. width: 65rpx;
  380. height: 33rpx;
  381. font-size: 24rpx;
  382. font-weight: 500;
  383. color: #333333;
  384. line-height: 33rpx;
  385. letter-spacing: 1rpx;
  386. margin: 0 20rpx 0 15rpx;
  387. }
  388. .arrow {
  389. width: 37rpx;
  390. height: 21rpx;
  391. padding: 5rpx 20rpx;
  392. }
  393. .rotatearrow {
  394. transform: rotate(270deg);
  395. }
  396. }
  397. .level1-subbox {
  398. display: flex;
  399. margin-top: 20rpx;
  400. flex-wrap: wrap;
  401. .sub-name {
  402. width: 50%;
  403. display: flex;
  404. margin-bottom: 18rpx;
  405. .subitem-name {
  406. width: 104rpx;
  407. height: 33rpx;
  408. font-size: 24rpx;
  409. font-weight: 400;
  410. color: #999999;
  411. line-height: 33rpx;
  412. letter-spacing: 1rpx;
  413. margin-right: 12rpx;
  414. }
  415. .checkimg {
  416. width: 27rpx;
  417. height: 27rpx;
  418. }
  419. }
  420. }
  421. }
  422. .tab{
  423. height: 88rpx;
  424. border-bottom: 1px solid #E0E0E0;
  425. background: #FFFFFF;
  426. display: flex;
  427. align-items: center;
  428. .tabbox {
  429. flex: 1;
  430. height: 100%;
  431. text-align: center;
  432. line-height: 92rpx;
  433. color: #666666;
  434. font-size: 28rpx;
  435. display: flex;
  436. justify-content: center;
  437. .activecllasscet {
  438. border-bottom: 2px solid #2671E2;
  439. color: #2671E2;
  440. font-weight: 600;
  441. }
  442. }
  443. }
  444. .content{
  445. // height: 1000rpx;/
  446. overflow: hidden;
  447. border-top: 1px solid #E0E0E0;
  448. .content-tips{
  449. background: #fff;
  450. // box-sizing: border-box;
  451. margin-bottom: 20rpx;
  452. overflow: hidden;
  453. .content-first{
  454. padding: 19rpx 30rpx;
  455. display: flex;
  456. justify-content: space-between;
  457. box-sizing: border-box;
  458. // border-top: 1px solid #E0E0E0;
  459. font-weight: 400;
  460. color: #292929;
  461. height: 90rpx;
  462. font-size: 30rpx;
  463. line-height: 30rpx;
  464. .left{
  465. display: flex;
  466. .img{
  467. // margin-top: 19rpx;
  468. width: 52rpx;
  469. height: 52rpx;
  470. border: 1px solid #E0E0E0;
  471. border-radius: 50%;
  472. text-align: center;
  473. line-height: 50rpx;
  474. }
  475. .test{
  476. margin-top: 11rpx;
  477. margin-left: 20rpx;
  478. font-weight: 500;
  479. color: #333333;
  480. }
  481. .edit{
  482. height: 30rpx;
  483. width: 30rpx;
  484. margin-left: 30rpx;
  485. margin-top: 11rpx;
  486. image{
  487. width: 100%;
  488. height: 100%;
  489. }
  490. }
  491. }
  492. .right{
  493. display: flex;
  494. .point{
  495. width: 12rpx;
  496. height: 12rpx;
  497. background: #2B6EFF;
  498. border-radius: 50%;
  499. margin-right: 9rpx;
  500. margin-top: 20rpx;
  501. }
  502. .test{
  503. margin-top: 11rpx;
  504. }
  505. }
  506. }
  507. .content-sec{
  508. border-top: 1px solid #E0E0E0;
  509. padding: 0 30rpx;
  510. height: 270rpx;
  511. position: relative;
  512. .content-sec-lab{
  513. margin-top: 30rpx;
  514. display: flex;
  515. font-size: 30rpx;
  516. font-weight: 400;
  517. color: #666666;
  518. line-height: 30rpx;
  519. .content-sec-lab1{
  520. color: #333333;
  521. }
  522. .content-sec-tips{
  523. max-width:174rpx ;
  524. height: 46rpx;
  525. background: #F2F2F2;
  526. border-radius: 6rpx;
  527. text-align: center;
  528. line-height: 26rpx;
  529. overflow: hidden;
  530. text-overflow:ellipsis;
  531. white-space: nowrap;
  532. font-size: 26rpx;
  533. font-weight: 400;
  534. color: #333333;
  535. margin-right: 24rpx;
  536. box-sizing: border-box;
  537. padding: 10rpx 24rpx;
  538. }
  539. }
  540. .content-sec-num{
  541. position: absolute;
  542. width: 190rpx;
  543. height: 90rpx;
  544. background: #F4F8FD;
  545. border-radius: 12rpx;
  546. font-weight: 400;
  547. color: #2671E2;
  548. line-height: 45rpx;
  549. bottom: 30rpx;
  550. right: 30rpx;
  551. text-align: center;
  552. }
  553. }
  554. .content-last{
  555. padding: 30rpx;
  556. height: 168rpx;
  557. .content-last-con{
  558. width: 690rpx;
  559. height: 108rpx;
  560. background: #F8F8F8;
  561. border-radius: 8rpx;
  562. padding: 14rpx 20rpx;
  563. font-size: 28rpx;
  564. font-weight: 400;
  565. color: #333333;
  566. line-height: 40rpx;
  567. }
  568. }
  569. }
  570. }
  571. .tabchange{
  572. // background: #FFFFFF;
  573. overflow: hidden;
  574. .tabactive1{
  575. .content-tips{
  576. background: #fff;
  577. padding: 0 30rpx;
  578. box-sizing: border-box;
  579. overflow: hidden;
  580. margin-bottom: 20rpx;
  581. .content-first{
  582. margin-top: 19rpx;
  583. display: flex;
  584. justify-content: space-between;
  585. .left{
  586. display: flex;
  587. .img{
  588. width: 52rpx;
  589. height: 52rpx;
  590. background: #FFFFFF;
  591. border: 1px solid #C9C9C9;
  592. border-radius: 50%;
  593. text-align: center;
  594. line-height: 52rpx;
  595. }
  596. .name{
  597. font-weight: 600;
  598. color: #333333;
  599. margin-left: 20rpx;
  600. margin-top: 11rpx;
  601. }
  602. .status{
  603. width: 110rpx;
  604. height: 42rpx;
  605. background: #FFF9F5;
  606. border-radius: 4rpx;
  607. font-size: 26rpx;
  608. font-weight: 400;
  609. color: #EC8D49;
  610. line-height: 42rpx;
  611. text-align: center;
  612. margin-left: 19rpx;
  613. margin-top: 11rpx;
  614. }
  615. }
  616. .right{
  617. display: flex;
  618. margin-top: 11rpx;
  619. .point{
  620. width: 12rpx;
  621. height: 12rpx;
  622. background: #2B6EFF;
  623. border-radius: 50%;
  624. margin-right: 9rpx;
  625. margin-top: 16rpx;
  626. }
  627. }
  628. }
  629. .content-sec{
  630. display: flex;
  631. justify-content: space-between;
  632. margin-top: 19rpx;
  633. .left{
  634. display: flex;
  635. .cus{
  636. font-size: 30rpx;
  637. font-weight: 400;
  638. color: #666666;
  639. line-height: 30rpx;
  640. }
  641. .arriveNum{
  642. font-size: 30rpx;
  643. font-weight: 400;
  644. line-height: 30rpx;
  645. margin-left: 10rpx;
  646. }
  647. }
  648. .right{
  649. width: 192rpx;
  650. height: 46rpx;
  651. background: #F4F8FD;
  652. border-radius: 6rpx;
  653. text-align: center;
  654. line-height: 46rpx;
  655. font-weight: 400;
  656. color: #2671E2;
  657. }
  658. }
  659. .content-last{
  660. margin: 30rpx 0;
  661. font-size: 30rpx;
  662. font-weight: 400;
  663. color: #666666;
  664. line-height: 30rpx;
  665. }
  666. }
  667. }
  668. .tabactive2{
  669. .tab2-tips{
  670. background: #fff;
  671. height: 270rpx;
  672. overflow: auto;
  673. margin-bottom: 20rpx;
  674. .tab2-first{
  675. // height: 150rpx;
  676. border-bottom: 1px solid #E0E0E0;
  677. padding: 0 30rpx;
  678. margin-top: 19rpx;
  679. box-sizing: border-box;
  680. .tab2-first-1{
  681. display: flex;
  682. justify-content: space-between;
  683. // height: 75rpx;
  684. .tab2-first-left{
  685. display: flex;
  686. .img{
  687. width: 52rpx;
  688. height: 52rpx;
  689. background: #FFFFFF;
  690. border: 1px solid #C9C9C9;
  691. border-radius: 50%;
  692. text-align: center;
  693. line-height: 52rpx;
  694. }
  695. .name{
  696. font-weight: 600;
  697. color: #333333;
  698. margin-left: 20rpx;
  699. margin-top: 11rpx;
  700. }
  701. }
  702. .tab2-first-right{
  703. font-size: 30rpx;
  704. font-weight: 400;
  705. color: #666666;
  706. margin-top: 11rpx;
  707. }
  708. }
  709. .tab2-first-foot{
  710. margin-top: 19rpx;
  711. margin-bottom: 30rpx;
  712. font-size: 30rpx;
  713. font-weight: 400;
  714. color: #666666;
  715. line-height: 30rpx;
  716. }
  717. }
  718. .tab2-sec{
  719. height: 120rpx;
  720. padding: 30rpx;
  721. float: right;
  722. .tab-sec-edit{
  723. width: 156rpx;
  724. height: 60rpx;
  725. background: #FFFFFF;
  726. border-radius: 4px;
  727. border: 1px solid #2671E2;
  728. text-align: center;
  729. line-height: 60rpx;
  730. font-weight: 400;
  731. color: #2671E2;
  732. }
  733. }
  734. }
  735. }
  736. }
  737. .pon-foot{
  738. position: fixed;
  739. width: 750rpx;
  740. height: 100rpx;
  741. background: #FFFFFF;
  742. box-shadow: 0px -2rpx 8rpx 0rpx rgba(224, 224, 224, 0.5);
  743. bottom: 0;
  744. display: flex;
  745. justify-content: space-around;
  746. align-items: center;
  747. // padding-top: 24rpx;
  748. box-sizing: border-box;
  749. // padding: ;
  750. .foot-tab{
  751. text-align: center;
  752. width: 270rpx;
  753. height: 70rpx;
  754. line-height: 70rpx;
  755. background: #2671E2;
  756. box-shadow: 0px -2rpx 8rpx 0px rgba(224, 224, 224, 0.5);
  757. border-radius: 6rpx;
  758. font-size: 30rpx;
  759. font-weight: 400;
  760. color: #FFFFFF;
  761. }
  762. }
  763. </style>