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.
 
 
 
 

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