AI销管
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.
 
 
 
 

1021 line
24 KiB

  1. <template>
  2. <view class="box">
  3. <view style="flex-shrink: 0;">
  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>
  12. </view>
  13. <!-- 选择器 -->
  14. <view class="boxtittab">
  15. <view class="tabbox" @click="tapsoltishow">
  16. 排序<u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon>
  17. </view>
  18. <view class="tabbox" @click="taptimeisshow">
  19. 到访时间<u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon>
  20. </view>
  21. <view class="tabbox" @click="taptimetuisshow">
  22. 接待时长<u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon>
  23. </view>
  24. <view class="tabbox" @click="screenshow">
  25. 更多筛选<u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon>
  26. </view>
  27. </view>
  28. <view class="content">
  29. <view v-if="recordList.length==0" style="width: 100%;height: 100%;display: flex;align-items: center;">
  30. <view style="width: 100%;height: 100%;padding-top: 200rpx;">
  31. <view style="width: 100%;text-align: center;">
  32. <image style="width: 220rpx;height: 200rpx;"
  33. src="https://static.quhouse.com/zhikong_xcx_img/nodatalist.png" mode=""></image>
  34. </view>
  35. <view style="text-align: center;width: 100%;margin-top: 20rpx;color: #999999;">暂无数据</view>
  36. </view>
  37. </view>
  38. <view v-if="recordList.length!=0" class="content-tips" v-for="(item,index) in recordList" :key='index'
  39. @click="gotoDetail(item.id)">
  40. <view class="content-first">
  41. <view class="left">
  42. <template v-if="item.level > 0">
  43. <view class="img" :class="colorName[item.level]">{{ item.level | levelText }}</view>
  44. </template>
  45. <view class="test">{{item.name}}</view>
  46. <view v-if="item.clientStageName" class="clientStageName">{{ item.clientStageName }}</view>
  47. </view>
  48. <view class="right">
  49. {{item.fraction || '0'}}%
  50. <image class="right-img" src="../../../static/images/arrow-right.png" mode=""></image>
  51. </view>
  52. </view>
  53. <view class="content-sec">
  54. <view class="content-sec-lab">
  55. 客户手机:<view class="content-sec-lab1">{{item.phone | phoneText}}</view>
  56. </view>
  57. <view class="content-sec-lab">
  58. 负责顾问:<view class="content-sec-lab1">{{item.agentName}}</view>
  59. </view>
  60. <view class="content-sec-lab" style="line-height: 46rpx;">
  61. 客户意向:
  62. <text v-if="item.demand.cusSemanticWordsList==null">暂无</text>
  63. <template v-else>
  64. <block v-for="(che,ind) in item.demand.cusSemanticWordsList" :key='ind'>
  65. <view class="content-sec-tips">{{che.name}}</view>
  66. </block>
  67. </template>
  68. </view>
  69. <view class="content-sec-lab">
  70. 添加时间:<view class="content-sec-lab1">{{item.createTime | formatTime}}</view>
  71. </view>
  72. <view class="content-sec-num">
  73. <view class="">{{item.visitRecord || '--'}}次到访 | {{item.mm || '0'}}<text
  74. style="font-size: 24rpx;">min</text></view>
  75. </view>
  76. </view>
  77. <template v-if="permissions.commonly2">
  78. <view class="content-last">
  79. <!-- <view class="content-last-tab">添加提醒</view>
  80. <view class="content-last-tab">拨打电话</view> -->
  81. <view class="content-last-tab" @click.stop="gotoFollowUp(item.id)">写跟进</view>
  82. </view>
  83. </template>
  84. </view>
  85. </view>
  86. <u-popup v-model="screenShow" mode="top">
  87. <view class="screen">
  88. <!-- 顾问选择 -->
  89. <view class="screen-counselor">
  90. <view class="screen-text">
  91. 所属顾问
  92. </view>
  93. <view class="screen-sel" @click="selectshow = true">
  94. <u-input v-model="screen.agentIdtext" type="text" placeholder='请选择' class="screen-inp"
  95. disabled />
  96. <image class="screen-sel-img" src="../../../static/images/right.png" mode=""></image>
  97. </view>
  98. </view>
  99. <view class="screen-counselor">
  100. <view class="screen-text">
  101. 客户标签
  102. </view>
  103. <view class="screen-sel" @click="selectTipshow = true">
  104. <u-input v-model="screen.cunsumerTips" type="text" placeholder='请选择' class="screen-inp"
  105. disabled />
  106. <image class="screen-sel-img" src="../../../static/images/right.png" mode=""></image>
  107. </view>
  108. </view>
  109. <!-- 录音标示 -->
  110. <view class="screen-record">
  111. <view class="screen-record-text">
  112. 客户等级
  113. </view>
  114. <view class="screen-record-tab">
  115. <view :class="[screen.record==0?'screen-record-chose':'screen-record-nochose']"
  116. @click="recordclick(0)">
  117. A
  118. </view>
  119. <view :class="[screen.record==1?'screen-record-chose':'screen-record-nochose']"
  120. @click="recordclick(1)">
  121. B
  122. </view>
  123. <view :class="[screen.record==2?'screen-record-chose':'screen-record-nochose']"
  124. @click="recordclick(2)">
  125. C
  126. </view>
  127. <view :class="[screen.record==3?'screen-record-chose':'screen-record-nochose']"
  128. @click="recordclick(3)">
  129. D
  130. </view>
  131. </view>
  132. </view>
  133. <!-- 客户来源 -->
  134. <template v-if="list.length > 0">
  135. <view class="screen-record">
  136. <view class="screen-record-text">
  137. 客户来源
  138. </view>
  139. <view class="screen-record-tab">
  140. <block v-for="(item, index) in list" :key="index">
  141. <view @tap="sourceId = item.id; sourceIndex = index "
  142. :class="[sourceIndex == index ? 'screen-record-chose':'screen-record-nochose']">
  143. {{ item.sourceName }}
  144. </view>
  145. </block>
  146. </view>
  147. </view>
  148. </template>
  149. <view class="screen-record">
  150. <view class="screen-record-text">
  151. 到访次数
  152. </view>
  153. <view class="screen-record-tab">
  154. <view :class="[screen.visitRecord==1?'screen-record-chose':'screen-record-nochose']"
  155. @click="screenvisitRecord(1)">
  156. 首次到访
  157. </view>
  158. <view :class="[screen.visitRecord==2?'screen-record-chose':'screen-record-nochose']"
  159. @click="screenvisitRecord(2)">
  160. 2次到访
  161. </view>
  162. <view :class="[screen.visitRecord==3?'screen-record-chose':'screen-record-nochose']"
  163. @click="screenvisitRecord(3)">
  164. 3次到访
  165. </view>
  166. <view :class="[screen.visitRecord==4?'screen-record-chose':'screen-record-nochose']"
  167. @click="screenvisitRecord(4)">
  168. 3次以上
  169. </view>
  170. </view>
  171. </view>
  172. <view class="screen-foot">
  173. <view class="screen-foot-reset" @click="reset">
  174. 重置
  175. </view>
  176. <view class="screen-foot-sure" @click="screensure">
  177. 确定
  178. </view>
  179. </view>
  180. </view>
  181. </u-popup>
  182. <!-- 选择顾问的选择框 -->
  183. <u-select v-model="selectshow" :list="freeList" @confirm="actionSelectCallback"></u-select>
  184. <!-- 客户标签 -->
  185. <u-select v-model="selectTipshow" :list="findKeywordsList" @confirm="selectCallback"></u-select>
  186. <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
  187. <u-popup v-model="timeshow" mode="bottom">
  188. <view class="timeview" :style="{ color: activeTotal == 5 ? '#2B6EFF' : '#333333' }" @click="tabtimetap(5)">
  189. 全部</view>
  190. <view class="timeview" :style="{ color: activeTotal == 0 ? '#2B6EFF' : '#333333' }" @click="tabtimetap(0)">
  191. 今天</view>
  192. <view class="timeview" :style="{ color: activeTotal == 1 ? '#2B6EFF' : '#333333' }" @click="tabtimetap(1)">
  193. 昨天</view>
  194. <view class="timeview" :style="{ color: activeTotal == 2 ? '#2B6EFF' : '#333333' }" @click="tabtimetap(2)">
  195. 近7天</view>
  196. <view class="timeview" :style="{ color: activeTotal == 3 ? '#2B6EFF' : '#333333' }" @click="tabtimetap(3)">
  197. 近30天</view>
  198. <view class="timeview" :style="{ color: activeTotal == 4 ? '#2B6EFF' : '#333333' }" @click="tabtimetap(4)">
  199. 自定义</view>
  200. </u-popup>
  201. <u-popup v-model="timetushow" mode="bottom">
  202. <view class="timeview" :style="{ color: activeTotal2 == 0 ? '#2B6EFF' : '#333333' }" @click="timetap(0)">全部
  203. </view>
  204. <view class="timeview" :style="{ color: activeTotal2 == 1 ? '#2B6EFF' : '#333333' }" @click="timetap(1)">
  205. 0~15min</view>
  206. <view class="timeview" :style="{ color: activeTotal2 == 2 ? '#2B6EFF' : '#333333' }" @click="timetap(2)">
  207. 15~30min</view>
  208. <view class="timeview" :style="{ color: activeTotal2 == 3 ? '#2B6EFF' : '#333333' }" @click="timetap(3)">
  209. 30~60min</view>
  210. <view class="timeview" :style="{ color: activeTotal2 == 4 ? '#2B6EFF' : '#333333' }" @click="timetap(4)">
  211. 60~90min</view>
  212. <view class="timeview" :style="{ color: activeTotal2 == 5 ? '#2B6EFF' : '#333333' }" @click="timetap(5)">
  213. 90min以上</view>
  214. </u-popup>
  215. <u-popup v-model="soltishow" mode="bottom">
  216. <view class="soltishow">
  217. <block v-for="(item, index) in orderBylist" :key="index">
  218. <view class="soltishow-item" @click="selectCallback2(item)">
  219. {{ item.label }}
  220. </view>
  221. </block>
  222. </view>
  223. </u-popup>
  224. <!-- <u-select v-model="soltishow" :list="orderBylist" @confirm="selectCallback2"></u-select> -->
  225. <!-- 底部导航栏 -->
  226. <u-tabbar :mid-button="true" activeColor="#1296db" inactiveColor="#999999" v-model="current" :list="tabbarList">
  227. </u-tabbar>
  228. </view>
  229. </template>
  230. <script>
  231. import tabbarList from '@/utils/tabbar.js'
  232. export default {
  233. data() {
  234. return {
  235. // tabbar配置项
  236. current: 1,
  237. tabbarList: tabbarList,
  238. //--- end --- tabbar配置项
  239. orderBylist: [
  240. {
  241. label: '创建时间倒序',
  242. value: '1'
  243. },
  244. {
  245. label: '创建时间正序',
  246. value: '2'
  247. },
  248. {
  249. label: '接待时间倒序',
  250. value: '3'
  251. },
  252. {
  253. label: '接待时间正序',
  254. value: '4'
  255. },
  256. {
  257. label: '执行率正序',
  258. value: '5'
  259. },
  260. {
  261. label: '执行率倒序',
  262. value: '6'
  263. },
  264. {
  265. label: '接访次数正序',
  266. value: '7'
  267. },
  268. {
  269. label: '接访次数倒序',
  270. value: '8'
  271. },
  272. ],
  273. value: '',
  274. screenShow: false,
  275. selectshow: false,
  276. selectTipshow: false,
  277. buildingID: '',
  278. screen: {
  279. agentId: '',
  280. agentIdtext: '',
  281. visitRecord: '',
  282. record: null,
  283. cunsumerTips: '',
  284. cunsumerTipsid: ''
  285. },
  286. stageList: ['未知', '到访', '意向', '定金', '成交'],
  287. recordList: [],
  288. nextPage: 1,
  289. totalRecord: '',
  290. freeList: [],
  291. userInfo: {},
  292. findKeywordsList: [],
  293. isnorefresh: '',
  294. activeTotal: 5,
  295. activeTotal2: 0,
  296. totalTimeShow: false,
  297. timeshow: false,
  298. timetushow: false,
  299. soltishow: false,
  300. staTime: '',
  301. endtime: '',
  302. orderBy: '',
  303. permissions: {
  304. commonly1: false,
  305. commonly2: false
  306. },
  307. list: [], // 客户来源列表
  308. sourceId: '', // 选中的客户来源id
  309. sourceIndex: -1, // 选中项的下标
  310. // 不同等级之间的颜色
  311. colorName: [
  312. '', "A", "B", "C", "D"
  313. ],
  314. }
  315. },
  316. onLoad(options) {
  317. this.isnorefresh = 'refresh';
  318. },
  319. onPullDownRefresh() {
  320. this.nextPage = 1;
  321. this.recordList = []
  322. this.reset()
  323. this.getFreeList()
  324. this.getfindKeywordsList()
  325. this.getFromSource();
  326. this.getMyCustom();
  327. setTimeout(() => {
  328. uni.stopPullDownRefresh()
  329. }, 3000)
  330. },
  331. onShow() {
  332. let newmenulist = uni.getStorageSync('weapp_session_Menu_data');
  333. this.permissions.commonly1 = newmenulist.khgl_ck;
  334. this.permissions.commonly2 = newmenulist.khgl_gj;
  335. if (this.isnorefresh == 'refresh') {
  336. this.buildingID = uni.getStorageSync('buildingID').id;
  337. this.nextPage = 1;
  338. this.recordList = []
  339. // this.getMyCustom()
  340. this.getFreeList()
  341. this.getfindKeywordsList()
  342. this.getFromSource();
  343. // this.isnorefresh = '';
  344. this.getMyCustom()
  345. }
  346. },
  347. onReachBottom() {
  348. if (this.totalRecord == this.nextPage) {
  349. uni.showToast({
  350. icon: 'none',
  351. title: '到底了',
  352. duration: 2000
  353. });
  354. return
  355. } else {
  356. this.nextPage += 1;
  357. this.getMyCustom();
  358. }
  359. },
  360. methods: {
  361. // 获取客户来源
  362. getFromSource() {
  363. this.$u.get('customer/findCustomerSourceList', {
  364. houseId: this.buildingID
  365. }).then(res => {
  366. console.log('我进来了')
  367. this.list = res
  368. })
  369. },
  370. tapsoltishow() {
  371. this.soltishow = true;
  372. },
  373. taptimetuisshow() {
  374. this.timetushow = true;
  375. },
  376. taptimeisshow() {
  377. this.timeshow = true;
  378. },
  379. //选择标签
  380. selectCallback2(e) {
  381. this.orderBy = e.value;
  382. this.nextPage = 1;
  383. this.recordList = [];
  384. this.soltishow = false
  385. this.getMyCustom();
  386. },
  387. //选择录音时长
  388. timetap(index) {
  389. this.timetushow = false;
  390. this.activeTotal2 = index;
  391. this.nextPage = 1;
  392. this.recordList = [];
  393. this.getMyCustom();
  394. },
  395. //时间选择
  396. tabtimetap(index) {
  397. this.timeshow = false;
  398. if (index == 4) {
  399. this.totalTimeShow = true;
  400. } else {
  401. this.activeTotal = index;
  402. this.staTime = '';
  403. this.endtime = '';
  404. this.nextPage = 1;
  405. this.recordList = [];
  406. this.getMyCustom();
  407. }
  408. },
  409. //自定义时间
  410. totalTimeChange(e) {
  411. this.staTime = e.startDate;
  412. this.endtime = e.endDate;
  413. this.activeTotal = 4;
  414. this.nextPage = 1;
  415. this.recordList = [];
  416. this.getMyCustom();
  417. },
  418. recordclick(i) {
  419. if (this.screen.record == i) {
  420. this.screen.record = null
  421. } else {
  422. this.screen.record = i
  423. }
  424. },
  425. screenvisitRecord(i) {
  426. if (this.screen.visitRecord == i) {
  427. this.screen.visitRecord = ''
  428. } else {
  429. this.screen.visitRecord = i
  430. }
  431. },
  432. // 客户详情
  433. gotoDetail(id) {
  434. if (this.permissions.commonly1 == true) {
  435. uni.navigateTo({
  436. url: `/pages/center/consumer/consumerDetail?id=${id}`
  437. })
  438. }
  439. },
  440. getMyCustom() {
  441. let dateType = 0;
  442. let recDurationInterval = 0;
  443. let orderBy = 0;
  444. if (this.activeTotal == 5) {
  445. dateType = null;
  446. } else if (this.activeTotal == 4) {
  447. dateType = null;
  448. } else {
  449. dateType = this.activeTotal;
  450. }
  451. if (this.activeTotal2 == 0) {
  452. recDurationInterval = null
  453. } else {
  454. recDurationInterval = this.activeTotal2
  455. }
  456. if (this.orderBy == 0) {
  457. orderBy = null;
  458. } else {
  459. orderBy = this.orderBy;
  460. }
  461. var parames = {
  462. pageNum: this.nextPage,
  463. pageSize: 10,
  464. query: {
  465. projectId: this.buildingID,
  466. keywordsId: this.screen.cunsumerTipsid,
  467. agentId: this.screen.agentId,
  468. dateType: dateType,
  469. staDate: this.staTime,
  470. endDate: this.endtime,
  471. recDurationInterval: recDurationInterval,
  472. orderBy: orderBy,
  473. sourceId: this.sourceId
  474. }
  475. };
  476. if (this.screen.visitRecord > 0) {
  477. parames.query.visitRecord = this.screen.visitRecord;
  478. }
  479. if (this.screen.record == 0) {
  480. parames.query.levels = ["1"]
  481. } else if (this.screen.record == 1) {
  482. parames.query.levels = ["2"]
  483. } else if (this.screen.record == 2) {
  484. parames.query.levels = ["3"]
  485. } else if (this.screen.record == 3) {
  486. parames.query.levels = ["4"]
  487. } else {
  488. parames.query.levels = null
  489. }
  490. this.$u.post("/customer/customerManagement", parames).then(data => {
  491. var list = data.results || [];
  492. console.log(list)
  493. list.forEach(item => {
  494. if (item.demand.cusSemanticWordsList != null) {
  495. item.demand.cusSemanticWordsList.forEach(che => {
  496. if (che.isInterval == 0) {
  497. che.name = che.name + che.unit + '-' + che.endName + che.unit;
  498. }
  499. })
  500. }
  501. })
  502. this.recordList = [...this.recordList, ...list];
  503. this.totalRecord = data.totalPage;
  504. })
  505. },
  506. //获取顾问列表
  507. getFreeList() {
  508. this.freeList = []
  509. this.$u.get("/zkAgentPool/freeList?itemId=" + this.buildingID).then(res => {
  510. this.freeList = res;
  511. this.freeList.forEach(item => {
  512. item.label = item.name;
  513. item.value = item.agentId
  514. })
  515. })
  516. },
  517. //获取客户标签
  518. getfindKeywordsList() {
  519. this.findKeywordsList = []
  520. this.$u.post("/customer/findKeywords", {
  521. houseId: this.buildingID
  522. }).then(res => {
  523. res.forEach(item => {
  524. if (item.isInterval == 0) {
  525. item.label = item.name + item.unit + '-' + item.endName + item.unit;
  526. } else {
  527. item.label = item.name
  528. }
  529. item.value = item.id;
  530. })
  531. this.findKeywordsList = res;
  532. })
  533. },
  534. // 筛选
  535. screenshow() {
  536. this.screenShow = true
  537. },
  538. //选择顾问
  539. actionSelectCallback(e) {
  540. this.screen.agentId = e[0].value;
  541. this.screen.agentIdtext = e[0].label;
  542. },
  543. //选择标签
  544. selectCallback(e) {
  545. this.screen.cunsumerTips = e[0].label;
  546. this.screen.cunsumerTipsid = e[0].value;
  547. },
  548. //重置
  549. reset() {
  550. this.screen = {
  551. agentId: '',
  552. agentIdtext: '',
  553. visitRecord: '',
  554. record: null,
  555. cunsumerTips: '',
  556. cunsumerTipsid: ''
  557. }
  558. this.nextPage = 1;
  559. this.recordList = [];
  560. // this.screenShow = false;
  561. this.sourceId = '';
  562. this.sourceIndex = -1;
  563. this.getMyCustom();
  564. },
  565. //筛选确认
  566. screensure() {
  567. this.nextPage = 1;
  568. this.recordList = [];
  569. this.screenShow = false;
  570. this.getMyCustom();
  571. },
  572. goSearch() {
  573. uni.navigateTo({
  574. url: '/pages/center/consumer/consumerSearch'
  575. });
  576. },
  577. gotoFollowUp(id) {
  578. uni.navigateTo({
  579. url: `/pages/center/consumer/newFollowup/newFollowup?id=${id}`
  580. })
  581. },
  582. },
  583. filters: {
  584. // 筛选等级展示文字
  585. levelText(level) {
  586. let str = '';
  587. switch (Number(level)) {
  588. case 1:
  589. str = "A"
  590. break;
  591. case 2:
  592. str = "B"
  593. break;
  594. case 3:
  595. str = "C"
  596. break;
  597. case 4:
  598. str = "D"
  599. break;
  600. default:
  601. str = ''
  602. break;
  603. }
  604. return str
  605. },
  606. // 加密手机
  607. phoneText(mobile) {
  608. if (!mobile) return '--'
  609. return mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
  610. },
  611. // 格式化时间
  612. formatTime(time) {
  613. if (!time) return
  614. return time.substring(5, time.length)
  615. }
  616. }
  617. }
  618. </script>
  619. <style lang="scss" scoped>
  620. .box {
  621. width: 100vw;
  622. min-height: calc(100vh - var(--window-top));
  623. background: #F8F8F8;
  624. display: flex;
  625. flex-direction: column;
  626. .content {
  627. flex-grow: 1;
  628. }
  629. }
  630. .timeview {
  631. height: 80rpx;
  632. line-height: 80rpx;
  633. width: 100%;
  634. text-align: center;
  635. border-bottom: 1px solid #F8F8F8;
  636. }
  637. //时间切换的样式
  638. .boxtittab {
  639. position: sticky;
  640. top: var(--window-top);
  641. z-index: 999;
  642. width: 100;
  643. height: 92rpx;
  644. background: #FFFFFF;
  645. border: 1px solid #E0E0E0;
  646. flex-shrink: 0;
  647. display: flex;
  648. align-items: center;
  649. .tabbox {
  650. flex: 1;
  651. height: 100%;
  652. text-align: center;
  653. line-height: 92rpx;
  654. color: #666666;
  655. font-size: 28rpx;
  656. }
  657. }
  658. .soltishow {
  659. width: 100%;
  660. height: 40vh;
  661. overflow-y: scroll;
  662. .soltishow-item {
  663. width: 100%;
  664. height: 80rpx;
  665. display: flex;
  666. align-items: center;
  667. justify-content: center;
  668. }
  669. }
  670. .search-box {
  671. width: 100%;
  672. height: 102rpx;
  673. background: #FFFFFF;
  674. display: flex;
  675. align-items: center;
  676. justify-content: center;
  677. .search {
  678. width: 94%;
  679. height: 70rpx;
  680. display: flex;
  681. align-items: center;
  682. background: #F8F8F8;
  683. border-radius: 33rpx;
  684. .search-img {
  685. width: 26rpx;
  686. height: 30rpx;
  687. margin-left: 20rpx;
  688. .search-img1 {
  689. width: 100%;
  690. height: 100%;
  691. margin-top: 2rpx;
  692. }
  693. }
  694. .search-text {
  695. font-size: 28rpx;
  696. font-weight: 400;
  697. color: #999999;
  698. margin-left: 10rpx;
  699. }
  700. }
  701. .search-screen {
  702. width: 40rpx;
  703. height: 40rpx;
  704. margin-left: 30rpx;
  705. .search-screen1 {
  706. width: 100%;
  707. height: 100%;
  708. }
  709. }
  710. }
  711. .content {
  712. .content-tips {
  713. background: #fff;
  714. margin-top: 20rpx;
  715. .content-first {
  716. padding: 19rpx 30rpx;
  717. display: flex;
  718. justify-content: space-between;
  719. align-items: center;
  720. box-sizing: border-box;
  721. color: #292929;
  722. height: 90rpx;
  723. font-size: 30rpx;
  724. .left {
  725. display: flex;
  726. align-items: center;
  727. .img {
  728. width: 52rpx;
  729. height: 52rpx;
  730. border: 1px solid #E0E0E0;
  731. border-radius: 50%;
  732. margin-right: 20rpx;
  733. display: flex;
  734. align-items: center;
  735. justify-content: center;
  736. }
  737. .clientStageName {
  738. margin-left: 20rpx;
  739. padding: 5rpx 20rpx;
  740. border: 1px solid #F29819;
  741. border-radius: 32rpx 32rpx 32rpx 0;
  742. color: #F29819;
  743. font-size: 20rpx;
  744. }
  745. // '#19AC09', '#F29819', '#F2D01A', '#1396F6',
  746. .A {
  747. color: #FFF;
  748. background: #19AC09;
  749. border: 1px solid #19AC09;
  750. }
  751. .B {
  752. color: #FFF;
  753. background: #F29819;
  754. border: 1px solid #F29819;
  755. }
  756. .C {
  757. color: #FFF;
  758. background: #F2D01A;
  759. border: 1px solid #F2D01A;
  760. }
  761. .D {
  762. color: #FFF;
  763. background: #1396F6;
  764. border: 1px solid #1396F6;
  765. }
  766. .test {
  767. font-weight: 500;
  768. color: #333333;
  769. }
  770. }
  771. .right {
  772. display: flex;
  773. align-items: center;
  774. color: #2671E2;
  775. font-size: 30rpx;
  776. .right-img {
  777. margin: 5rpx 0 0 10rpx;
  778. width: 14rpx;
  779. height: 30rpx;
  780. }
  781. }
  782. }
  783. .content-sec {
  784. border-top: 1px solid #E0E0E0;
  785. padding: 0 30rpx;
  786. padding-bottom: 30rpx;
  787. position: relative;
  788. .content-sec-lab {
  789. margin-top: 30rpx;
  790. display: flex;
  791. font-size: 30rpx;
  792. font-weight: 400;
  793. color: #666666;
  794. line-height: 46rpx;
  795. .content-sec-lab1 {
  796. color: #333333;
  797. }
  798. .content-sec-tips {
  799. max-width: 160rpx;
  800. height: 46rpx;
  801. background: #F2F2F2;
  802. border-radius: 6rpx;
  803. text-align: center;
  804. line-height: 26rpx;
  805. overflow: hidden;
  806. text-overflow: ellipsis;
  807. white-space: nowrap;
  808. font-size: 26rpx;
  809. font-weight: 400;
  810. color: #333333;
  811. margin-right: 20rpx;
  812. box-sizing: border-box;
  813. padding: 10rpx 24rpx;
  814. }
  815. }
  816. .content-sec-num {
  817. position: absolute;
  818. bottom: 25rpx;
  819. right: 30rpx;
  820. padding: 3rpx 12rpx;
  821. background: #F4F8FD;
  822. border-radius: 6rpx;
  823. color: #2671E2;
  824. line-height: 45rpx;
  825. text-align: center;
  826. }
  827. }
  828. .content-last {
  829. height: 108rpx;
  830. display: flex;
  831. justify-content: flex-end;
  832. align-items: center;
  833. border-top: 1px solid #E0E0E0;
  834. .content-last-tab {
  835. margin-right: 30rpx;
  836. width: 156rpx;
  837. height: 60rpx;
  838. font-size: 30rpx;
  839. color: #333333;
  840. border-radius: 30rpx;
  841. border: 1px solid #999999;
  842. display: flex;
  843. align-items: center;
  844. justify-content: center;
  845. }
  846. }
  847. }
  848. }
  849. // 这是弹出层
  850. .screen {
  851. // box-sizing: border-box;
  852. // padding: 0 30rpx;
  853. .screen-counselor {
  854. display: flex;
  855. height: 106rpx;
  856. // padding: 40rpx 30rpx 36rpx 30rpx;
  857. padding: 0 30rpx;
  858. box-sizing: border-box;
  859. border-bottom: 1px solid #E0E0E0;
  860. .screen-text {
  861. margin: 40rpx 0 36rpx 0;
  862. font-size: 30rpx;
  863. font-weight: 400;
  864. color: #333333;
  865. line-height: 30rpx;
  866. }
  867. .screen-sel {
  868. display: flex;
  869. justify-content: space-between;
  870. width: 500rpx;
  871. margin-left: 60rpx;
  872. .screen-sel-img {
  873. margin: 40rpx 0 36rpx 0;
  874. width: 14rpx;
  875. height: 30rpx;
  876. }
  877. .screen-inp {
  878. margin-top: 20rpx;
  879. }
  880. }
  881. }
  882. .screen-record {
  883. height: 192rpx;
  884. // width: 100%;
  885. overflow: hidden;
  886. padding: 0 30rpx;
  887. box-sizing: border-box;
  888. border-bottom: 1px solid #E0E0E0;
  889. .screen-record-text {
  890. margin-top: 36rpx;
  891. font-size: 30rpx;
  892. font-weight: 400;
  893. color: #333333;
  894. line-height: 30rpx;
  895. }
  896. .screen-record-tab {
  897. margin-top: 30rpx;
  898. display: flex;
  899. // justify-content: space-around;
  900. .screen-record-chose {
  901. width: 156rpx;
  902. height: 60rpx;
  903. background: #2671E2;
  904. border-radius: 4rpx;
  905. border: 1px solid #2671E2;
  906. text-align: center;
  907. line-height: 60rpx;
  908. margin-right: 22rpx;
  909. color: #FFFFFF;
  910. }
  911. .screen-record-nochose {
  912. width: 156rpx;
  913. height: 60rpx;
  914. background: #FFFFFF;
  915. border-radius: 4rpx;
  916. border: 1px solid #C9C9C9;
  917. text-align: center;
  918. line-height: 60rpx;
  919. margin-right: 22rpx;
  920. }
  921. }
  922. }
  923. .screen-foot {
  924. width: 100%;
  925. height: 88rpx;
  926. display: flex;
  927. .screen-foot-reset {
  928. width: 50%;
  929. text-align: center;
  930. height: 88rpx;
  931. line-height: 88rpx;
  932. font-size: 30rpx;
  933. font-weight: 400;
  934. color: #666666;
  935. }
  936. .screen-foot-sure {
  937. width: 50%;
  938. text-align: center;
  939. line-height: 88rpx;
  940. height: 88rpx;
  941. font-size: 30rpx;
  942. font-weight: 400;
  943. color: #FFFFFF;
  944. background: #2671E2;
  945. }
  946. }
  947. }
  948. </style>