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.
 
 
 
 

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